:root {
  --blue: #1477ff;
  --blue-dark: #0d3e78;
  --blue-soft: #eaf4ff;
  --ink: #132238;
  --muted: #66758a;
  --line: #dfe8f3;
  --surface: #ffffff;
  --background: #f5f9fd;
  --danger: #d94444;
  --shadow: 0 18px 50px rgba(26, 66, 112, .11);
  --radius: 20px;
  --header-height: 86px;
  --promo-height: 64px;
  --promo-bottom-gap: 0px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--background); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.site-header { position: sticky; top: 0; z-index: 100; min-height: var(--header-height); padding: 14px clamp(20px, 4vw, 64px); display: grid; grid-template-columns: minmax(250px, 1fr) auto minmax(180px, 1fr); align-items: center; gap: 24px; background: rgba(255,255,255,.97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.brand { display: flex; flex-direction: column; justify-self: start; }
.brand-name { font-family: Georgia, serif; font-size: clamp(1.2rem, 2vw, 1.7rem); font-style: italic; font-weight: 700; }
.brand-product { color: var(--blue); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.5vw, 34px); font-weight: 700; justify-self: center; }
.main-nav a { padding: 10px 4px; }
.main-nav a:hover { color: var(--blue); }
.selection-link span { display: inline-grid; place-items: center; min-width: 25px; height: 25px; padding: 0 7px; border-radius: 999px; color: white; background: var(--blue); font-size: .78rem; }
.selection-preview-strip { justify-self: end; display: flex; align-items: center; justify-content: flex-end; min-width: 0; min-height: 38px; }
.selection-preview-strip.is-empty { visibility: hidden; }
.selection-preview-strip img { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; border: 2px solid white; box-shadow: 0 3px 12px rgba(18, 52, 88, .16); margin-left: -7px; background: #dce8f4; }
.selection-preview-strip img:first-child { margin-left: 0; }
.selection-preview-more { display: inline-grid; place-items: center; min-width: 32px; height: 32px; margin-left: 5px; padding: 0 6px; border-radius: 999px; background: var(--blue); color: white; font-size: .72rem; font-weight: 900; }
.page-shell { width: min(1500px, calc(100% - 32px)); min-height: calc(100vh - var(--header-height)); margin: 0 auto; padding: 34px 0 calc(34px + var(--promo-height) + var(--promo-bottom-gap)); }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 8px 0 34px; }
.page-heading.compact { margin-top: 4px; }
.page-heading h1, .simple-title h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.04em; }
.page-heading p { margin: 8px 0 0; color: var(--muted); max-width: 720px; }
.simple-title { margin: 0 0 28px; }
.back-link { position: fixed; top: calc(var(--header-height) + 10px); left: clamp(16px, 2.2vw, 34px); z-index: 90; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.98); box-shadow: 0 8px 24px rgba(21, 56, 94, .14); color: var(--blue-dark); font-weight: 850; backdrop-filter: blur(10px); }
.back-link:hover { color: var(--blue); }
.back-spacer { height: 48px; }
.card-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-grid { align-items: stretch; }
.content-card { overflow: hidden; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); border: 1px solid rgba(214, 228, 242, .9); transition: transform .2s ease, box-shadow .2s ease; }
.content-card:hover { transform: translateY(-4px); box-shadow: 0 22px 60px rgba(26, 66, 112, .16); }
.content-card img { width: 100%; height: 255px; object-fit: cover; display: block; }
.content-card-body { display: flex; align-items: center; min-height: 78px; padding: 20px 22px; }
.content-card h2 { margin: 0; font-size: 1.45rem; }
.gallery-heading { padding-right: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; grid-auto-rows: 155px; gap: 14px; width: 100%; }
.photo-card { position: relative; overflow: hidden; border-radius: 16px; background: #dce8f4; box-shadow: 0 8px 25px rgba(20, 57, 95, .12); cursor: zoom-in; }
.photo-card.landscape { grid-column: span 2; grid-row: span 2; }
.photo-card.portrait { grid-column: span 1; grid-row: span 2; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.photo-card:hover img { transform: scale(1.025); }
.photo-number { position: absolute; top: 12px; left: 12px; padding: 7px 10px; border-radius: 9px; background: rgba(18, 34, 56, .78); color: white; font-weight: 900; font-size: .82rem; backdrop-filter: blur(6px); }
.select-photo { position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; background: rgba(255,255,255,.96); color: var(--blue); font-size: 1.55rem; line-height: 1; font-weight: 900; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.select-photo.selected { background: var(--blue); color: white; }
.primary-button, .danger-button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 12px 18px; border-radius: 12px; border: 1px solid transparent; font-weight: 900; }
.primary-button { color: white; background: var(--blue); }
.danger-button { color: var(--danger); background: white; border-color: #f2bcbc; }
.block { width: 100%; margin-top: 10px; }
.promo-footer { width: 100%; margin: 0; border-top: 1px solid var(--line); background: white; }
.promotions { width: 100%; padding: 0; background: white; }
.promo-viewport { width: 100%; margin: 0; overflow: hidden; border-radius: 0; }
.promo-track { display: flex; transition: transform .35s ease; }
.promo-card { flex: 0 0 100%; height: 64px; min-height: 64px; display: grid; grid-template-columns: 1fr; align-items: center; gap: 12px; padding: 8px clamp(20px, 4vw, 64px); background: white; }
.promo-card.has-image { grid-template-columns: 58px minmax(0, 1fr); }
.promo-card img { width: 56px; height: 34px; max-width: 56px; max-height: 34px; align-self: center; justify-self: center; object-fit: contain; border-radius: 7px; }
.promo-copy { min-width: 0; }
.promo-card span { color: var(--blue); text-transform: uppercase; font-size: .62rem; letter-spacing: .12em; font-weight: 900; }
.promo-card h2 { margin: 1px 0 2px; font-size: 1rem; line-height: 1.1; }
.promo-card p { margin: 1px 0; color: var(--muted); font-size: .82rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-card a { color: var(--blue); font-size: .78rem; font-weight: 900; }
.selection-page-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.selection-page-card { overflow: hidden; border-radius: 18px; background: white; box-shadow: var(--shadow); }
.selection-page-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.selection-page-card div { display: flex; align-items: center; justify-content: space-between; padding: 15px; }
.selection-page-card button { border: 0; background: none; color: var(--danger); font-weight: 900; }
.empty-state { padding: 70px 24px; text-align: center; border-radius: var(--radius); background: white; box-shadow: var(--shadow); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.price-card { padding: 30px; border-radius: var(--radius); background: white; box-shadow: var(--shadow); }
.price-card.featured { outline: 3px solid var(--blue); }
.price-card strong { font-size: 2rem; color: var(--blue); }
.login-body { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(circle at top, #e8f5ff, #f7faff 55%); }
.login-main { flex: 1; display: grid; place-items: center; padding: 38px 24px; }
.login-card { width: min(440px, 100%); padding: 40px; border-radius: 26px; background: white; box-shadow: 0 28px 90px rgba(22, 62, 105, .18); }
.login-brand { font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 1.8rem; }
.login-product { color: var(--blue); text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; margin-bottom: 35px; }
.login-card h1 { font-size: 2rem; margin-bottom: 8px; }
.login-card p { color: var(--muted); }
.login-form { display: grid; gap: 12px; margin-top: 26px; }
.login-form label { font-weight: 800; }
.login-form input { width: 100%; min-height: 54px; padding: 12px 15px; border: 2px solid var(--line); border-radius: 12px; font-size: 1.2rem; }
.login-form input:focus { outline: 3px solid rgba(20,119,255,.18); border-color: var(--blue); }
.alert { padding: 12px; border-radius: 10px; color: #8c1e1e; background: #ffeaea; }
body.lightbox-open { overflow: hidden; }
.photo-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; padding: 18px; background: rgba(7, 17, 30, .94); backdrop-filter: blur(8px); }
.lightbox-stage { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; }
.lightbox-stage img { display: block; max-width: calc(100vw - 36px); max-height: calc(100vh - 105px); width: auto; height: auto; object-fit: contain; box-shadow: 0 24px 80px rgba(0,0,0,.36); }
.lightbox-close { position: fixed; top: 18px; right: 22px; z-index: 1002; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(15,30,48,.78); color: white; font-size: 2rem; line-height: 1; }
.lightbox-bar { position: fixed; left: 50%; bottom: 14px; z-index: 1002; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; min-width: min(460px, calc(100vw - 30px)); justify-content: space-between; padding: 9px 10px 9px 18px; border-radius: 999px; background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 14px 46px rgba(0,0,0,.28); }
.lightbox-select { min-height: 40px; padding: 8px 15px; border: 0; border-radius: 999px; background: var(--blue); color: white; font-weight: 900; }
.lightbox-select.selected { background: #0f5fc8; }
@media (max-width: 1100px) {
  .site-header { grid-template-columns: minmax(220px, 1fr) auto minmax(120px, 1fr); gap: 14px; }
  .selection-preview-strip img { width: 31px; height: 31px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
  .selection-page-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  :root { --header-height: 120px; }
  .site-header { display: grid; grid-template-columns: 1fr; align-items: start; min-height: var(--header-height); padding: 12px 18px; gap: 6px; }
  .brand { justify-self: start; }
  .main-nav { width: 100%; justify-self: stretch; justify-content: space-between; gap: 8px; font-size: .86rem; }
  .selection-preview-strip { display: none; }
  .page-shell { width: min(100% - 20px, 1500px); padding-top: 22px; }
  .back-link { top: calc(var(--header-height) + 8px); left: 12px; min-height: 38px; padding: 7px 12px; }
  .back-spacer { height: 46px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .card-grid, .price-grid { grid-template-columns: 1fr; }
  .content-card img { height: 220px; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; gap: 9px; }
  .photo-card.landscape { grid-column: span 2; }
  .photo-card.portrait { grid-column: span 1; }
  .selection-page-grid { grid-template-columns: repeat(2, 1fr); }
  .promotions { padding: 0; }
  .promo-viewport { border-radius: 0; }
  .promo-card { height: 58px; min-height: 58px; padding: 8px 12px; }
  .promo-card.has-image { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
  .promo-card img { width: 48px; height: 30px; max-width: 48px; max-height: 30px; object-fit: contain; }
  .promo-card h2 { font-size: .88rem; }
  .promo-card p { font-size: .72rem; }
  .promo-card a { font-size: .72rem; }
  .photo-lightbox { padding: 10px; }
  .lightbox-stage img { max-width: 100%; max-height: calc(100vh - 95px); }
  .lightbox-close { top: 10px; right: 10px; width: 42px; height: 42px; }
  .lightbox-bar { bottom: 8px; gap: 10px; padding-left: 14px; }
  .lightbox-select { font-size: .82rem; }
}

/* MyselfGallery v0.1.6 — en-tête sans branding, sélection centrée et cache visuel corrigé */
.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 10px clamp(16px, 3vw, 42px);
}
.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.6vw, 36px);
  width: auto;
  margin: 0 auto;
}
.selection-cluster {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.selection-preview-strip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 36px;
}
.selection-preview-strip.is-empty {
  display: none;
}
.selection-preview-strip img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 7px;
  border: 2px solid white;
  box-shadow: 0 3px 12px rgba(18, 52, 88, .16);
  margin-left: -6px;
  background: #dce8f4;
}
.selection-preview-strip img:first-child { margin-left: 0; }
.select-photo {
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
}
.select-photo.selected { font-weight: 700; }
/* MyselfGallery v0.1.10 — vignette promo réduite et centrée, bandeau au bord bas */
.promo-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--promo-bottom-gap);
  z-index: 95;
  display: block;
  width: 100%;
  height: var(--promo-height);
  margin: 0;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.98);
  overflow: hidden;
  box-shadow: 0 -8px 28px rgba(21, 56, 94, .08);
  backdrop-filter: blur(10px);
}
.promo-strip .promo-viewport { width: 100%; height: 100%; overflow: hidden; }
.promo-strip .promo-track { height: 100%; }
.promo-strip .promo-card { height: var(--promo-height); min-height: var(--promo-height); }
.login-body { padding-bottom: calc(var(--promo-height) + var(--promo-bottom-gap)); }
.lightbox-stage img { cursor: zoom-out; }

/* Plein écran depuis la page Ma sélection */
.selection-page-card img { cursor: zoom-in; }
.selection-lightbox .lightbox-stage img { cursor: zoom-out; }

@media (max-width: 720px) {
  :root { --header-height: 74px; --promo-height: 58px; }
  .site-header { min-height: var(--header-height); padding: 8px 12px; }
  .main-nav { width: 100%; justify-content: space-around; gap: 8px; font-size: .84rem; }
  .selection-cluster { gap: 4px; }
  .selection-preview-strip { display: none !important; }
}

/* MyselfGallery v0.2.0 — publicités administrables */
.promo-card.has-image { grid-template-columns: minmax(24px, var(--promo-image-width, 56px)) minmax(0, 1fr); }
.promo-card img {
  width: var(--promo-image-width, 56px) !important;
  height: var(--promo-image-height, 34px) !important;
  max-width: 220px !important;
  max-height: 56px !important;
  object-fit: var(--promo-image-fit, contain) !important;
  align-self: center;
  justify-self: center;
}
.admin-body { margin: 0; background: #f5f9fd; color: var(--ink); }
.admin-login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.admin-login-card { width: min(430px, 100%); background: white; border-radius: 22px; padding: 34px; box-shadow: var(--shadow); }
.admin-form, .admin-fields { display: grid; gap: 12px; }
.admin-form label, .admin-fields label { display: grid; gap: 6px; font-weight: 750; color: var(--ink); }
.admin-form input, .admin-fields input, .admin-fields select { min-height: 44px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.admin-check { grid-template-columns: auto 1fr !important; align-items: center; justify-content: start; }
.admin-check input { min-height: 0; width: 18px; height: 18px; }
.admin-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px clamp(18px,4vw,54px); background: white; border-bottom: 1px solid var(--line); }
.admin-header h1 { margin: 0; }
.admin-header > div { display: flex; gap: 10px; align-items: center; }
.admin-header form { margin: 0; }
.admin-shell { width: min(1350px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 60px; }
.admin-section { background: white; border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: 0 12px 32px rgba(26,66,112,.07); margin-bottom: 24px; }
.admin-section h2 { margin-top: 0; }
.admin-create .admin-fields, .admin-promo-card .admin-fields { grid-template-columns: repeat(3,minmax(0,1fr)); }
.admin-promo-list { display: grid; gap: 18px; }
.admin-promo-card { display: grid; grid-template-columns: 250px minmax(0,1fr) auto; gap: 18px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: 16px; }
.admin-promo-preview-stage { width: 284px; min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 8px; border-radius: 12px; background: #eef5fb; overflow: hidden; }
.admin-promo-preview-stage small { color: var(--muted); font-weight: 700; font-size: 12px; }
.admin-promo-preview { width: min(var(--admin-preview-width, 110px), 300px); height: min(var(--admin-preview-height, 70px), 56px); max-width: 100%; object-fit: var(--admin-preview-fit, contain); border-radius: 7px; background: #fff; display: block; }
.admin-promo-preview.empty { display: grid; place-items: center; color: var(--muted); font-weight: 800; width: 110px; height: 52px; }
.admin-field-hint { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.admin-actions { margin-top: 12px; }
.secondary-button { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: white; font-weight: 800; }
@media (max-width: 900px) {
  .admin-create .admin-fields, .admin-promo-card .admin-fields { grid-template-columns: 1fr 1fr; }
  .admin-promo-card { grid-template-columns: 220px minmax(0,1fr); }
  .admin-promo-card > form:last-child { grid-column: 2; }
}
@media (max-width: 620px) {
  .admin-create .admin-fields, .admin-promo-card .admin-fields { grid-template-columns: 1fr; }
  .admin-promo-card { grid-template-columns: 1fr; }
  .admin-promo-card > form:last-child { grid-column: 1; }
}

/* MyselfGallery v0.2.1 — gestion des bornes */
.admin-title-wrap { display: flex; align-items: center; gap: 24px; min-width: 0; }
.admin-tabs { display: flex; align-items: center; gap: 8px; }
.admin-tabs a { padding: 9px 13px; border-radius: 999px; color: var(--muted); font-weight: 800; }
.admin-tabs a.active { background: var(--blue-soft); color: var(--blue); }
.admin-kiosk-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.admin-kiosk-intro p { margin-bottom: 0; color: var(--muted); max-width: 760px; }
.kiosk-create-form { display: flex; align-items: end; gap: 10px; min-width: min(420px, 100%); }
.kiosk-create-form label, .kiosk-edit-form label { display: grid; gap: 6px; font-weight: 750; }
.kiosk-create-form input, .kiosk-edit-form input { min-height: 44px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.kiosk-create-form label { flex: 1; }
.admin-kiosk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.admin-kiosk-card { background: white; border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: 0 12px 32px rgba(26,66,112,.07); }
.kiosk-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.kiosk-summary > div:first-child { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kiosk-summary strong { font-size: 1.18rem; }
.kiosk-status { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; font-size: .76rem; font-weight: 900; }
.kiosk-status.online { color: #17683b; background: #e6f8ee; }
.kiosk-status.offline { color: #687386; background: #eef2f6; }
.kiosk-count { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 6px; color: var(--muted); }
.kiosk-count strong { color: var(--blue); font-size: 1.65rem; }
.kiosk-url { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 12px 0 6px; }
.kiosk-url code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 12px 13px; border-radius: 10px; background: #f4f7fb; color: #27405e; }
.kiosk-last-seen { margin: 8px 0 18px; color: var(--muted); font-size: .86rem; }
.kiosk-edit-form { display: grid; grid-template-columns: minmax(0, 1.5fr) 100px minmax(130px, auto) auto; gap: 10px; align-items: end; padding-top: 16px; border-top: 1px solid var(--line); }
.kiosk-edit-form .admin-check { align-self: center; margin-bottom: 9px; }
.kiosk-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.kiosk-actions form { margin: 0; }
button:disabled { cursor: default; opacity: .45; }
@media (max-width: 980px) {
  .admin-header { align-items: flex-start; }
  .admin-title-wrap { align-items: flex-start; flex-direction: column; gap: 10px; }
  .admin-kiosk-intro { align-items: stretch; flex-direction: column; }
  .kiosk-create-form { min-width: 0; }
  .admin-kiosk-grid { grid-template-columns: 1fr; }
  .kiosk-edit-form { grid-template-columns: 1fr 100px; }
  .kiosk-edit-form .admin-check { align-self: end; }
}
@media (max-width: 620px) {
  .admin-header { flex-direction: column; }
  .admin-header > div:last-child { width: 100%; justify-content: space-between; }
  .admin-tabs { flex-wrap: wrap; }
  .kiosk-create-form { flex-direction: column; align-items: stretch; }
  .kiosk-summary { align-items: flex-start; flex-direction: column; }
  .kiosk-url { grid-template-columns: 1fr; }
  .kiosk-edit-form { grid-template-columns: 1fr; }
  .kiosk-actions { align-items: stretch; flex-direction: column; }
  .kiosk-actions form, .kiosk-actions button { width: 100%; }
}

/* MyselfGallery v0.3.1 — proportions photo et cartes carrées */
/* Dossiers et galeries : même composant visuel au format carré. */
.content-card {
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.content-card img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.content-card-body {
  min-height: 72px;
  padding: 16px 18px;
}

/* Photos : le cadre suit l'orientation, mais l'image est toujours visible en entier. */
.photo-grid {
  grid-auto-rows: auto;
  align-items: start;
}
.photo-card.landscape {
  grid-column: span 2;
  grid-row: auto;
  aspect-ratio: 3 / 2;
}
.photo-card.portrait {
  grid-column: span 1;
  grid-row: auto;
  aspect-ratio: 2 / 3;
}
.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #e7eef6;
}
.photo-card:hover img {
  transform: none;
}

/* La sélection doit elle aussi montrer l'intégralité de chaque photo. */
.selection-page-card {
  background: #e7eef6;
}
.selection-page-card img {
  object-fit: contain;
  background: #e7eef6;
}

@media (max-width: 720px) {
  .content-card {
    aspect-ratio: 1 / 1;
  }
  .content-card img {
    height: 100%;
  }
  .photo-grid {
    grid-auto-rows: auto;
  }
  .photo-card.landscape {
    grid-column: span 2;
    aspect-ratio: 3 / 2;
  }
  .photo-card.portrait {
    grid-column: span 1;
    aspect-ratio: 2 / 3;
  }
}


/* MyselfGallery v0.3.3 — centrage publicité avec lien et défilement plus doux */
.promo-track { transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.promo-card.has-image { grid-template-columns: minmax(24px, var(--promo-image-width, 56px)) minmax(0, 1fr); }
.promo-media {
  width: var(--promo-image-width, 56px);
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  align-self: stretch;
  justify-self: center;
  overflow: hidden;
}
.promo-media img {
  width: var(--promo-image-width, 56px) !important;
  height: var(--promo-image-height, 34px) !important;
  max-width: 220px !important;
  max-height: 52px !important;
  object-fit: var(--promo-image-fit, contain) !important;
  object-position: center center !important;
  display: block;
  margin: 0 auto;
}
.promo-copy { align-self: center; }

/* MyselfGallery v0.3.4 — vignettes plus compactes */
/* Dossiers et galeries : environ 30 % plus petits qu'en v0.3.3 sur grand écran. */
.card-grid {
  grid-template-columns: repeat(4, minmax(0, 340px));
  justify-content: center;
  gap: 20px;
}

/* Photos : largeur divisée approximativement par deux sur grand écran. */
.photo-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}
.photo-card.landscape { grid-column: span 2; }
.photo-card.portrait { grid-column: span 1; }

@media (max-width: 1200px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 320px)); }
  .photo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .card-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* v0.3.5 — diagnostic stockage */
.storage-diagnostic{display:grid;gap:12px;padding:18px;border:1px solid #dbe5f1;border-radius:16px;background:#fff}
.storage-diagnostic code{display:block;overflow:auto;padding:10px 12px;border-radius:10px;background:#f3f7fb;font-size:13px}
.storage-stats{display:flex;gap:10px;flex-wrap:wrap}
.storage-stats span{padding:8px 10px;border-radius:10px;background:#eef5ff}
.admin-note{margin-top:16px;color:#52657a}


/* MyselfGallery v0.3.8 — CTA visible et mise à jour live des publicités */
.promo-card {
  grid-template-columns: minmax(0, 1fr);
}
.promo-card.has-image {
  grid-template-columns: minmax(24px, var(--promo-image-width, 56px)) minmax(0, 1fr);
}
.promo-card.has-cta {
  grid-template-columns: minmax(0, 1fr) auto;
}
.promo-card.has-image.has-cta {
  grid-template-columns: minmax(24px, var(--promo-image-width, 56px)) minmax(0, 1fr) auto;
}
.promo-copy {
  min-width: 0;
  align-self: center;
  overflow: hidden;
}
.promo-cta {
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(260px, 24vw);
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #b8d6ff;
  background: #eef6ff;
  color: var(--blue) !important;
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promo-cta:hover { background: #dfeeff; }

@media (max-width: 720px) {
  .promo-card.has-cta,
  .promo-card.has-image.has-cta {
    grid-template-columns: minmax(24px, var(--promo-image-width, 48px)) minmax(0, 1fr) auto;
  }
  .promo-card:not(.has-image).has-cta { grid-template-columns: minmax(0,1fr) auto; }
  .promo-card p { display: none; }
  .promo-cta { max-width: 120px; padding-inline: 10px; }
}

/* MyselfGallery v0.3.9 — aperçu publicitaire fidèle aux dimensions configurées */


/* MyselfGallery v0.3.10 — gabarit publicitaire unique (superseded) */
.promo-media { width: 220px !important; height: 100%; min-height: 0; display:grid; place-items:center; overflow:hidden; }
.promo-media img { width:220px !important; height:40px !important; max-width:220px !important; max-height:40px !important; object-fit:contain !important; object-position:center center !important; }
.promo-card.has-image { grid-template-columns: 220px minmax(0,1fr) !important; }
.promo-card.has-image.has-cta { grid-template-columns: 220px minmax(0,1fr) auto !important; }
.promo-format-lock { grid-column: 1 / -1; display:grid; gap:4px; padding:12px 14px; border:1px solid #cfe1f7; border-radius:12px; background:#f5f9ff; color:#27405e; }
.promo-format-lock strong { color:#0d3e78; }
.promo-format-lock span { font-weight:750; }
.promo-format-lock small { color:#66758a; }
@media (max-width:720px){
  .promo-card.has-image, .promo-card.has-image.has-cta { grid-template-columns: minmax(120px, 220px) minmax(0,1fr) auto !important; }
  .promo-media { max-width:220px; width:100% !important; }
  .promo-media img { width:100% !important; height:40px !important; }
}


/* MyselfGallery v0.3.11 — galerie compacte au ratio réel des fichiers */
.photo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  width: 100%;
}
.photo-card,
.photo-card.landscape,
.photo-card.portrait {
  flex: 0 0 auto;
  grid-column: auto;
  grid-row: auto;
  width: auto;
  height: 245px;
  aspect-ratio: var(--photo-ratio, 3 / 2);
}
.photo-card.portrait { --photo-ratio: 2 / 3; }
.photo-card.landscape { --photo-ratio: 3 / 2; }
.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gallery-heading { margin-bottom: 22px; }

@media (max-width: 1200px) {
  .photo-card,
  .photo-card.landscape,
  .photo-card.portrait { height: 220px; }
}
@media (max-width: 820px) {
  .photo-grid { gap: 8px; }
  .photo-card,
  .photo-card.landscape,
  .photo-card.portrait { height: 190px; }
}
@media (max-width: 520px) {
  .photo-grid { justify-content: center; gap: 7px; }
  .photo-card,
  .photo-card.landscape,
  .photo-card.portrait { height: 160px; }
}

/* MyselfGallery v0.3.12 — publicité sans marge autour de l’image */
:root { --promo-height: 40px; }
.promo-card {
  height: var(--promo-height) !important;
  min-height: var(--promo-height) !important;
  padding: 0 16px 0 0 !important;
  gap: 14px !important;
  align-items: center;
}
.promo-card:not(.has-image) { padding-left: clamp(20px, 4vw, 64px) !important; }
.promo-card.has-image,
.promo-card.has-image.has-cta {
  grid-template-columns: 220px minmax(0, 1fr) auto !important;
}
.promo-card.has-image:not(.has-cta) {
  grid-template-columns: 220px minmax(0, 1fr) !important;
}
.promo-media {
  width: 220px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
  justify-self: start !important;
  place-items: stretch !important;
  overflow: hidden;
}
.promo-media img {
  width: 220px !important;
  height: 40px !important;
  max-width: 220px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block;
}
.promo-card span { font-size: .55rem; line-height: 1; }
.promo-card h2 { margin: 1px 0; font-size: .88rem; line-height: 1.05; }
.promo-card p { margin: 1px 0; font-size: .70rem; line-height: 1; }
.promo-cta { min-height: 30px; padding: 5px 10px; }
@media (max-width: 720px) {
  :root { --promo-height: 40px; }
  .promo-card { padding-right: 8px !important; gap: 8px !important; }
  .promo-card.has-image,
  .promo-card.has-image.has-cta,
  .promo-card.has-image:not(.has-cta) { grid-template-columns: 220px minmax(0, 1fr) auto !important; }
  .promo-card.has-image:not(.has-cta) { grid-template-columns: 220px minmax(0, 1fr) !important; }
  .promo-media { width: 220px !important; height: 40px !important; }
  .promo-media img { width: 220px !important; height: 40px !important; }
}


/* MyselfGallery v0.3.13 — standard publicitaire bloqué 440×100 / affichage 220×50 */
:root { --promo-height: 50px; }
.promo-card { height:50px !important; min-height:50px !important; }
.promo-card.has-image, .promo-card.has-image.has-cta { grid-template-columns:220px minmax(0,1fr) auto !important; }
.promo-card.has-image:not(.has-cta) { grid-template-columns:220px minmax(0,1fr) !important; }
.promo-media { width:220px !important; height:50px !important; min-height:50px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; }
.promo-media img { width:220px !important; height:50px !important; max-width:220px !important; max-height:50px !important; margin:0 !important; padding:0 !important; object-fit:contain !important; object-position:center center !important; display:block !important; }
@media (max-width:720px){
  :root { --promo-height:50px; }
  .promo-media, .promo-media img { width:220px !important; height:50px !important; max-height:50px !important; }
}


/* MyselfGallery v0.3.15 — module Tarifs administrable */
.admin-form textarea, .admin-fields textarea {
  width: 100%; min-height: 86px; resize: vertical; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: white;
  font: inherit; color: var(--ink);
}
.admin-price-list { display: grid; gap: 16px; }
.admin-price-card { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fbfdff; }
.price-admin-fields { grid-template-columns: 1.3fr .8fr .45fr 2fr auto !important; align-items: end; }
.price-description-field { min-width: 220px; }
.admin-price-card .admin-actions { margin-top: 12px; }
.price-card { display: flex; flex-direction: column; min-height: 190px; }
.price-card h2 { margin-top: 0; }
.price-card strong { display: block; margin: 4px 0 12px; }
.price-card p { margin: 0; color: var(--muted); line-height: 1.55; }
@media (max-width: 1150px) { .price-admin-fields { grid-template-columns: 1fr 1fr !important; } .admin-price-card { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .price-admin-fields { grid-template-columns: 1fr !important; } }


/* MyselfGallery v0.3.18 — bandeau publicitaire de la même hauteur que l’en-tête */
:root { --promo-height: 72px; }
.promo-strip,
.promo-strip .promo-viewport,
.promo-strip .promo-track,
.promo-strip .promo-card {
  height: var(--promo-height) !important;
  min-height: var(--promo-height) !important;
}
.promo-card { align-items: center !important; }
.promo-media { align-self: center !important; }
@media (max-width: 720px) {
  :root { --promo-height: 74px; }
}


/* MyselfGallery v0.3.19 — image publicitaire agrandie, même ratio */
.promo-card.has-image,
.promo-card.has-image.has-cta { grid-template-columns:300px minmax(0,1fr) auto !important; }
.promo-card.has-image:not(.has-cta) { grid-template-columns:300px minmax(0,1fr) !important; }
.promo-media { width:300px !important; height:60px !important; min-height:60px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; align-self:center !important; }
.promo-media img { width:300px !important; height:60px !important; max-width:300px !important; max-height:60px !important; margin:0 !important; padding:0 !important; object-fit:contain !important; object-position:center center !important; display:block !important; }
@media (max-width:720px){
  .promo-card.has-image, .promo-card.has-image.has-cta { grid-template-columns:minmax(180px,300px) minmax(0,1fr) auto !important; }
  .promo-card.has-image:not(.has-cta) { grid-template-columns:minmax(180px,300px) minmax(0,1fr) !important; }
  .promo-media { width:min(300px,46vw) !important; height:60px !important; }
  .promo-media img { width:100% !important; height:60px !important; }
}


/* MyselfGallery v0.3.20 — boucle publicitaire continue sans rembobinage */
.promo-track.promo-no-transition { transition: none !important; }


/* MyselfGallery v0.3.21 — texte publicitaire plus lisible */
.promo-card span { font-size: .70rem !important; line-height: 1.05 !important; }
.promo-card h2 { font-size: 1.12rem !important; line-height: 1.08 !important; margin: 2px 0 !important; }
.promo-card p { font-size: .92rem !important; line-height: 1.12 !important; margin: 2px 0 !important; }
.promo-cta { font-size: .86rem !important; line-height: 1.1 !important; }
@media (max-width:720px){
  .promo-card h2 { font-size: 1rem !important; }
  .promo-card p { font-size: .82rem !important; }
  .promo-card span { font-size: .62rem !important; }
  .promo-cta { font-size: .78rem !important; }
}


/* MyselfGallery v0.3.22 — suppression du libellé Promotion et titre pub bleu */
.promo-copy h2 { color: var(--blue) !important; }


/* MyselfGallery v0.3.23 — Ma sélection présentée exactement comme la galerie */
.selection-page-grid.photo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  width: 100%;
}
.selection-page-grid .selection-photo-card,
.selection-page-grid .selection-photo-card.landscape,
.selection-page-grid .selection-photo-card.portrait {
  flex: 0 0 auto;
  width: auto;
  height: 245px;
  aspect-ratio: var(--photo-ratio, 3 / 2);
  overflow: hidden;
}
.selection-page-grid .selection-photo-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 1200px) {
  .selection-page-grid .selection-photo-card,
  .selection-page-grid .selection-photo-card.landscape,
  .selection-page-grid .selection-photo-card.portrait { height: 220px; }
}
@media (max-width: 820px) {
  .selection-page-grid.photo-grid { gap: 8px; }
  .selection-page-grid .selection-photo-card,
  .selection-page-grid .selection-photo-card.landscape,
  .selection-page-grid .selection-photo-card.portrait { height: 190px; }
}
@media (max-width: 520px) {
  .selection-page-grid.photo-grid { gap: 7px; }
  .selection-page-grid .selection-photo-card,
  .selection-page-grid .selection-photo-card.landscape,
  .selection-page-grid .selection-photo-card.portrait { height: 160px; }
}

/* MyselfGallery v0.3.24 — navigation d’en-tête répartie gauche / droite et liens agrandis */
.site-header {
  width: 100%;
}
.main-nav {
  width: 100%;
  max-width: none;
  margin: 0;
  justify-content: flex-start;
  gap: clamp(24px, 2.2vw, 38px);
  font-size: 1.08rem;
  font-weight: 800;
}
.main-nav > a {
  flex: 0 0 auto;
}
.selection-cluster {
  margin-left: auto;
  gap: 12px;
}
.selection-link {
  font-size: 1.08rem;
  white-space: nowrap;
}
.selection-link span[data-selection-count] {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: .84rem;
}
@media (max-width: 720px) {
  .main-nav {
    width: 100%;
    justify-content: flex-start;
    gap: 16px;
    font-size: .98rem;
  }
  .selection-cluster {
    margin-left: auto;
    gap: 6px;
  }
  .selection-link {
    font-size: .98rem;
  }
  .selection-link span[data-selection-count] {
    min-width: 26px;
    height: 26px;
    font-size: .78rem;
  }
}

/* MyselfGallery v0.3.25 — prise de rendez-vous */
.appointment-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 14px !important;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue) !important;
  white-space: nowrap;
}
.appointment-heading p { margin: 6px 0 0; color: var(--muted); }
.appointment-form { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 28px; align-items: start; }
.appointment-slots, .appointment-contact { padding: 24px; border-radius: 18px; background: white; box-shadow: var(--shadow); }
.appointment-slots h2, .appointment-contact h2 { margin: 0 0 18px; font-size: 1.15rem; }
.appointment-day { margin: 0 0 18px; padding: 0; border: 0; }
.appointment-day legend { width: 100%; margin-bottom: 10px; color: var(--ink); font-size: .98rem; font-weight: 900; text-transform: capitalize; }
.appointment-slot-list { display: flex; flex-wrap: wrap; gap: 9px; }
.appointment-slot { cursor: pointer; }
.appointment-slot input { position: absolute; opacity: 0; pointer-events: none; }
.appointment-slot span { display: grid; place-items: center; min-width: 76px; min-height: 44px; padding: 8px 14px; border: 2px solid #cfe0f2; border-radius: 12px; background: #fff; color: var(--ink); font-weight: 900; transition: .16s ease; }
.appointment-slot input:checked + span { border-color: var(--blue); background: var(--blue); color: white; box-shadow: 0 8px 18px rgba(20,119,255,.18); }
.appointment-slot:hover span { border-color: var(--blue); }
.appointment-contact { position: sticky; top: calc(var(--header-height) + 18px); }
.appointment-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.appointment-contact-grid label { display: grid; gap: 6px; font-weight: 800; }
.appointment-contact-grid input { min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 1rem; background: white; }
.appointment-contact-grid input:focus { outline: 3px solid rgba(20,119,255,.14); border-color: var(--blue); }
.appointment-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.appointment-note { margin: 18px 0; padding: 13px 15px; border-radius: 11px; background: #f1f7fd; color: #43566b; line-height: 1.45; }
.appointment-submit { width: 100%; }
.appointment-empty { grid-column: 1 / -1; }
.appointment-success { max-width: 720px; margin: 20px auto; padding: 48px 34px; border-radius: 22px; background: white; box-shadow: var(--shadow); text-align: center; }
.appointment-success-icon { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: #e7f7ed; color: #187a42; font-size: 2rem; font-weight: 900; }
.appointment-success h1 { margin-bottom: 12px; }
.appointment-success p { color: var(--muted); font-size: 1.02rem; }
.appointment-success .primary-button { margin-top: 12px; }

.decision-body { min-height: 100vh; background: #f2f7fb; }
.decision-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.decision-card { width: min(620px, 100%); padding: 32px; border-radius: 22px; background: white; box-shadow: var(--shadow); }
.decision-card h1 { margin-top: 0; }
.decision-details { display: grid; gap: 7px; margin: 22px 0; padding: 18px; border-radius: 14px; background: #f6f9fc; }
.decision-details > strong { font-size: 1.15rem; }
.decision-details a { color: var(--blue); font-weight: 800; }
.decision-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.decision-actions form { margin: 0; }
.decision-result { display: grid; gap: 4px; margin: 18px 0; padding: 15px; border-radius: 12px; }
.decision-result.confirmed { background: #eaf8ef; color: #176a3b; }
.decision-result.refused { background: #fff0f0; color: #8f2c2c; }
.decision-hint { color: #8f2c2c; font-weight: 800; }

.appointment-email-state { display: grid; gap: 4px; margin-bottom: 18px; padding: 14px 17px; border-radius: 12px; }
.appointment-email-state.ready { background: #eaf8ef; color: #176a3b; }
.appointment-email-state.warning { background: #fff6df; color: #7d5c0d; }
.appointment-create-section { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(0,1.3fr); gap: 26px; align-items: end; }
.appointment-range-form { display: grid; grid-template-columns: 1.2fr .8fr .8fr .7fr auto; gap: 10px; align-items: end; }
.appointment-range-form label { display: grid; gap: 6px; font-weight: 800; }
.appointment-range-form input { min-height: 44px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.appointment-range-form label span { color: var(--muted); font-size: .74rem; }
.admin-count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; margin-left: 6px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: .8rem; vertical-align: middle; }
.appointment-admin-list { display: grid; gap: 12px; }
.appointment-admin-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.appointment-admin-main { min-width: 0; }
.appointment-admin-main > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.appointment-admin-main h3 { margin: 8px 0 5px; }
.appointment-contact-links { display: flex; flex-wrap: wrap; gap: 14px; }
.appointment-contact-links a { color: var(--blue); font-weight: 800; }
.appointment-admin-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.appointment-admin-actions form { margin: 0; }
.appointment-status { display: inline-flex; width: max-content; padding: 4px 9px; border-radius: 999px; font-size: .74rem; font-weight: 900; }
.status-pending { background: #fff1cf; color: #8c6300; }
.status-confirmed { background: #e5f7ec; color: #176a3b; }
.status-refused, .status-cancelled { background: #ffeaea; color: #922d2d; }
.status-available { background: #edf5ff; color: #1768af; }
.appointment-table-wrap { overflow-x: auto; }
.appointment-table { width: 100%; border-collapse: collapse; }
.appointment-table th, .appointment-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.appointment-table th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.appointment-table td small { display: block; margin-top: 4px; color: var(--muted); }
.appointment-table td:last-child { display: flex; gap: 7px; }
.appointment-table form { margin: 0; }
.appointment-table .secondary-button, .appointment-table .danger-button { min-height: 38px; padding: 7px 10px; }

@media (max-width: 980px) {
  .appointment-form { grid-template-columns: 1fr; }
  .appointment-contact { position: static; }
  .appointment-create-section { grid-template-columns: 1fr; }
  .appointment-range-form { grid-template-columns: 1fr 1fr; }
  .appointment-range-form .primary-button { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .appointment-long { display: none; }
  .appointment-nav-link { min-height: 34px; padding: 5px 9px !important; }
  .appointment-contact-grid { grid-template-columns: 1fr; }
  .appointment-slots, .appointment-contact { padding: 18px; }
  .appointment-admin-card { align-items: stretch; flex-direction: column; }
  .appointment-admin-actions { width: 100%; }
  .appointment-admin-actions form, .appointment-admin-actions button { flex: 1; width: 100%; }
  .appointment-range-form { grid-template-columns: 1fr; }
  .appointment-range-form .primary-button { grid-column: auto; }
  .decision-actions { display: grid; }
  .decision-actions button { width: 100%; }
}


/* MyselfGallery v0.3.27 — rendez-vous hebdomadaires, contrôle visibilité et calendrier iPhone */
.appointment-client-state { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:10px 16px; margin-bottom:18px; padding:14px 17px; border-radius:12px; background:#edf5ff; color:#1768af; }
.appointment-client-state a { color:var(--blue); font-weight:900; }
.appointment-client-state span { color:#526b80; font-size:.88rem; }
.appointment-week-section { display:grid; grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr); gap:26px; align-items:end; }
.appointment-week-form { display:grid; grid-template-columns:1.15fr minmax(310px,1.9fr) .7fr .7fr .65fr auto; gap:10px; align-items:end; }
.appointment-week-form > label { display:grid; gap:6px; font-weight:800; }
.appointment-week-form input[type="date"], .appointment-week-form input[type="time"], .appointment-week-form input[type="number"] { min-height:44px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:white; }
.appointment-week-form label > span { color:var(--muted); font-size:.74rem; }
.week-days { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:44px; }
.week-day-check { cursor:pointer; }
.week-day-check input { position:absolute; opacity:0; pointer-events:none; }
.week-day-check span { display:grid; place-items:center; min-width:38px; min-height:38px; padding:5px 7px; border:1px solid #cfe0f2; border-radius:9px; background:#fff; color:#365268; font-weight:900; font-size:.78rem; }
.week-day-check input:checked + span { border-color:var(--blue); background:var(--blue-soft); color:var(--blue); }
.calendar-button { display:inline-flex; margin-top:8px; text-decoration:none; }
.calendar-note { margin:8px 0 0; color:var(--muted); font-size:.84rem; }
@media (max-width:1180px) {
  .appointment-week-section { grid-template-columns:1fr; }
  .appointment-week-form { grid-template-columns:1fr 1.6fr 1fr 1fr 1fr; }
  .appointment-week-form .primary-button { grid-column:1 / -1; }
}
@media (max-width:760px) {
  .appointment-client-state { grid-template-columns:1fr; }
  .appointment-week-form { grid-template-columns:1fr; }
  .appointment-week-form .primary-button { grid-column:auto; }
  .week-days { min-height:0; }
}

/* MyselfGallery v0.3.30 — photo de fond du site public, visibilité 60 % */
body.site-background-body {
  background-color: #f5f9fd;
  background-image:
    linear-gradient(rgba(245, 249, 253, .40), rgba(245, 249, 253, .40)),
    url('/public/images/myselfgallery-background-v032.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* La page de connexion utilisait auparavant son propre dégradé : le fond photo est maintenant prioritaire. */
body.login-body.site-background-body {
  background-color: #f5f9fd;
  background-image:
    linear-gradient(rgba(245, 249, 253, .40), rgba(245, 249, 253, .40)),
    url('/public/images/myselfgallery-background-v032.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Sur mobile, évite les saccades liées aux fonds fixed de certains navigateurs. */
@media (max-width: 720px) {
  body.site-background-body,
  body.login-body.site-background-body {
    background-attachment: scroll;
  }
}

/* MyselfGallery v0.3.32 — fond confirmé + alignement publicités conservé */
.admin-promo-card {
  grid-template-columns: 300px minmax(0, 1fr) auto;
  column-gap: 24px;
  row-gap: 18px;
}
.admin-promo-preview-stage {
  width: 300px;
  max-width: 100%;
}
.admin-promo-card > form {
  min-width: 0;
}
.admin-promo-card .admin-fields {
  min-width: 0;
}
.admin-promo-card .admin-fields > * {
  min-width: 0;
}
.admin-promo-card .admin-fields input,
.admin-promo-card .admin-fields select,
.admin-promo-card .admin-fields textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.admin-promo-card input[type="file"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.admin-promo-card .admin-check {
  align-self: end;
  min-height: 44px;
  padding-bottom: 8px;
}
.promo-card.has-image {
  padding-left: 5px !important;
}
@media (max-width: 900px) {
  .admin-promo-card { grid-template-columns: 300px minmax(0,1fr); }
  .admin-promo-card > form:last-child { grid-column: 2; }
}
@media (max-width: 720px) {
  .promo-card.has-image { padding-left: 5px !important; }
}
@media (max-width: 620px) {
  .admin-promo-card { grid-template-columns: 1fr; }
  .admin-promo-preview-stage { width: 100%; }
  .admin-promo-card > form:last-child { grid-column: 1; }
}

/* v0.3.33 — diagnostic SMTP rendez-vous */
.appointment-email-state { grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px 18px; }
.appointment-email-state > div:first-child { display:grid; gap:4px; }
.smtp-summary { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.84rem; opacity:.92; }
.smtp-summary span { overflow-wrap:anywhere; }
.smtp-test-result { display:grid; gap:4px; margin:-6px 0 18px; padding:12px 16px; border-radius:10px; }
.smtp-test-result.ok { background:#eaf8ef; color:#176a3b; }
.smtp-test-result.error { background:#fff0f0; color:#9b2d2d; }
@media (max-width:760px) {
  .appointment-email-state { grid-template-columns:1fr; }
  .smtp-summary { grid-column:1; }
}

/* v0.3.34 — dossiers et galeries : vignettes réduites de 20 % uniquement */
.catalog-grid .content-card {
  width: 80%;
  justify-self: center;
}

/* v0.3.35 — charte graphique administration inspirée de Caisse iPad v0.14.1 */
.admin-body{
  --admin-bg:#f3f3f0;
  --admin-card:#fff;
  --admin-soft:#ececea;
  --admin-soft-2:#f7f7f5;
  --admin-ink:#161616;
  --admin-muted:#777;
  --admin-line:#dcdcd8;
  --admin-accent:#f7d9df;
  --admin-accent-strong:#d88f9f;
  --admin-accent-ink:#5a3038;
  margin:0;
  min-height:100vh;
  background:var(--admin-bg);
  color:var(--admin-ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
}
.admin-body *{box-sizing:border-box}
.admin-app{
  min-height:100vh;
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:12px;
  padding:12px;
}
.admin-side{
  min-height:calc(100vh - 24px);
  background:var(--admin-card);
  border:1px solid var(--admin-line);
  border-radius:27px;
  padding:11px 7px;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:0 18px 42px rgba(0,0,0,.06);
  position:sticky;
  top:12px;
  align-self:start;
  z-index:30;
}
.admin-side-logo,.admin-login-logo{
  width:48px;
  height:48px;
  border-radius:15px;
  background:#111;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing:-.4px;
}
.admin-side-logo{margin-bottom:18px}
.admin-side-nav{display:flex;flex-direction:column;align-items:center;width:100%}
.admin-nav-link{
  border:0;
  background:transparent;
  color:#777;
  width:70px;
  height:64px;
  border-radius:17px;
  margin:3px 0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
}
.admin-nav-link:hover{background:#f1f1ef;color:#222}
.admin-nav-link.active{background:#111;color:#fff}
.admin-nav-icon{font-size:20px;font-weight:900;line-height:1}
.admin-nav-link small{font-size:10px;font-weight:800;line-height:1.05}
.admin-side-spacer{flex:1}
.admin-side form{width:100%;margin:0;display:flex;justify-content:center}
.admin-logout{font:inherit}
.admin-main{min-width:0;display:flex;flex-direction:column;gap:10px}
.admin-page-head{
  min-height:72px;
  border:1px solid var(--admin-line);
  background:#fff;
  border-radius:21px;
  padding:10px 14px 10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.025);
}
.admin-eyebrow{
  display:block;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  color:var(--admin-muted);
}
.admin-page-head h1{margin:2px 0 0;font-size:29px;line-height:1.05;letter-spacing:-.8px}
.admin-head-site{
  border:0;
  background:#111;
  color:#fff;
  border-radius:12px;
  padding:11px 15px;
  font-weight:850;
  text-decoration:none;
  white-space:nowrap;
}
.admin-shell{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}
.admin-section{
  background:#f5f5f3;
  border:1px solid #e4e4e1;
  border-radius:20px;
  padding:18px;
  box-shadow:none;
  margin-bottom:12px;
}
.admin-section h2{margin:0 0 9px;font-size:21px;letter-spacing:-.35px}
.admin-section p{color:#666;line-height:1.45}
.admin-form,.admin-fields{gap:10px}
.admin-body .admin-form label,
.admin-body .admin-fields label,
.admin-body .kiosk-create-form label,
.admin-body .kiosk-edit-form label,
.admin-body .appointment-week-form label,
.admin-body .appointment-range-form label{
  color:#555;
  font-size:11px;
  font-weight:850;
}
.admin-body .admin-form input,
.admin-body .admin-fields input,
.admin-body .admin-fields select,
.admin-body .admin-fields textarea,
.admin-body .kiosk-create-form input,
.admin-body .kiosk-edit-form input,
.admin-body .appointment-week-form input,
.admin-body .appointment-range-form input{
  border:1px solid #d8d8d4;
  background:#fff;
  border-radius:13px;
  min-height:44px;
  padding:10px 12px;
  color:#161616;
  outline:none;
  box-shadow:none;
}
.admin-body input:focus,.admin-body select:focus,.admin-body textarea:focus{
  border-color:#aaa9a4;
  box-shadow:0 0 0 3px rgba(216,143,159,.15);
}
.admin-body .primary-button{
  border:0;
  background:#111;
  color:#fff;
  border-radius:13px;
  min-height:44px;
  padding:10px 15px;
  font-weight:850;
  box-shadow:none;
}
.admin-body .secondary-button{
  border:1px solid var(--admin-line);
  background:#fff;
  color:#333;
  border-radius:12px;
  min-height:42px;
  padding:9px 13px;
  font-weight:850;
  box-shadow:none;
}
.admin-body .danger-button{
  border:0;
  background:#fff0f0;
  color:#9b3535;
  border-radius:12px;
  min-height:42px;
  padding:9px 13px;
  font-weight:850;
  box-shadow:none;
}
.admin-body .primary-button:active,.admin-body .secondary-button:active,.admin-body .danger-button:active{transform:scale(.985)}
.admin-promo-card,.admin-price-card,.admin-kiosk-card,.appointment-admin-card{
  background:#fff;
  border:1px solid var(--admin-line);
  border-radius:16px;
  box-shadow:none;
}
.admin-promo-card{padding:14px;gap:16px}
.admin-promo-preview-stage{
  background:var(--admin-soft);
  border:1px solid #e2e2de;
  border-radius:14px;
}
.admin-promo-preview-stage small{color:var(--admin-muted)}
.admin-field-hint{color:var(--admin-muted)}
.promo-format-lock{
  background:var(--admin-soft-2)!important;
  border:1px solid var(--admin-line)!important;
  border-radius:13px!important;
}
.admin-kiosk-card{padding:16px}
.kiosk-url code,.storage-diagnostic code{background:#f1f1ef!important;color:#333!important;border-radius:11px!important}
.storage-diagnostic{
  background:#fff!important;
  border:1px solid var(--admin-line)!important;
  border-radius:16px!important;
}
.storage-stats span{background:var(--admin-soft)!important;border-radius:10px!important}
.appointment-email-state.ready{
  background:var(--admin-accent)!important;
  border:2px solid var(--admin-accent-strong)!important;
  color:var(--admin-accent-ink)!important;
  border-radius:20px!important;
  box-shadow:none!important;
}
.appointment-email-state.ready strong,.appointment-email-state.ready span{color:var(--admin-accent-ink)!important}
.appointment-email-state.warning{
  background:#fff0c8!important;
  border:1px solid #e8d38e!important;
  border-radius:20px!important;
  box-shadow:none!important;
}
.appointment-client-state{
  background:#fff!important;
  border:1px solid var(--admin-line)!important;
  border-radius:18px!important;
  box-shadow:none!important;
}
.admin-count{
  display:inline-grid;
  place-items:center;
  min-width:28px;
  min-height:28px;
  padding:0 8px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:12px;
  vertical-align:middle;
}
.appointment-table-wrap{border-radius:15px;overflow:auto;border:1px solid var(--admin-line);background:#fff}
.appointment-table{background:#fff}
.appointment-table th{background:#f1f1ef;color:#555;font-size:10px;letter-spacing:.05em;text-transform:uppercase}
.appointment-table td,.appointment-table th{border-color:#e4e4e1!important}
.week-day-check span{border-radius:11px!important}
.week-day-check input:checked + span{background:#111!important;color:#fff!important;border-color:#111!important}
.smtp-summary{background:rgba(255,255,255,.55)!important;border-radius:13px!important}
.admin-note{color:#666}

.admin-login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--admin-bg)}
.admin-login-card{
  width:min(460px,100%);
  background:#fff;
  border:1px solid var(--admin-line);
  border-radius:28px;
  padding:28px;
  box-shadow:0 24px 60px rgba(0,0,0,.09);
}
.admin-login-logo{margin-bottom:20px}
.admin-login-card h1{font-size:31px;letter-spacing:-.8px;margin:4px 0 8px}
.admin-login-card p{color:#777;line-height:1.45;margin:0 0 20px}
.admin-login-card .admin-form{margin-top:16px}

@media(max-width:980px){
  .admin-app{grid-template-columns:1fr;padding:8px;gap:8px}
  .admin-side{
    min-height:0;
    height:74px;
    width:100%;
    top:8px;
    flex-direction:row;
    align-items:center;
    border-radius:20px;
    padding:7px;
    overflow-x:auto;
    overflow-y:hidden;
  }
  .admin-side-logo{flex:0 0 48px;margin:0 8px 0 0}
  .admin-side-nav{flex:0 0 auto;flex-direction:row;width:auto}
  .admin-nav-link{flex:0 0 68px;width:68px;height:58px;margin:0 2px;border-radius:14px}
  .admin-side-spacer{display:none}
  .admin-side form{flex:0 0 68px;width:68px}
  .admin-page-head{min-height:68px}
}
@media(max-width:620px){
  .admin-page-head h1{font-size:24px}
  .admin-head-site{display:none}
  .admin-section{padding:14px;border-radius:17px}
  .admin-login-card{padding:22px}
}


/* MyselfGallery v0.3.39 — en-tête responsive : Accueil, Tarifs et RDV toujours visibles */
.main-nav {
  min-width: 0;
}
.appointment-nav-link {
  max-width: 340px;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
}
@media (max-width: 900px) {
  :root { --header-height: 126px; }
  .site-header {
    min-height: var(--header-height);
    height: auto;
    padding: 10px 14px;
    align-items: stretch;
  }
  .main-nav {
    display: grid;
    grid-template-columns: max-content max-content minmax(210px, 1fr);
    grid-template-areas:
      "home prices appointment"
      "selection selection selection";
    align-items: center;
    gap: 8px 14px;
    width: 100%;
    margin: 0;
    font-size: .98rem;
  }
  .main-nav > a:nth-child(1) { grid-area: home; }
  .main-nav > a:nth-child(2) { grid-area: prices; }
  .main-nav > .appointment-nav-link { grid-area: appointment; width: 100%; max-width: none; }
  .selection-cluster {
    grid-area: selection;
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
  .selection-preview-strip { display: none; }
}
@media (max-width: 560px) {
  :root { --header-height: 154px; }
  .main-nav {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "home prices"
      "appointment appointment"
      "selection selection";
  }
  .main-nav > a:nth-child(1),
  .main-nav > a:nth-child(2) {
    text-align: center;
  }
  .selection-cluster { justify-content: center; }
}

/* v0.3.39 — diagnostic de stockage persistant */
.storage-path-row{display:grid;gap:6px;margin:0 0 14px}.storage-path-row span{font-size:12px;font-weight:800;color:#666}.storage-path-row code{display:block;max-width:100%;overflow-wrap:anywhere;white-space:normal}.storage-path-active{padding:14px;border-radius:16px;background:#f7f7f5}.storage-path-active span{color:#111}

/* MyselfGallery v0.3.43 — restauration ciblée de l’import Lightroom */