/* ═══════════════════════════════════════════════════════════════════════════
   PAGES-LAYOUT.CSS — Typographie & plein écran unifiés
   Cinzel (labels/titres) · Exo 2 (texte courant) — toutes pages, tous modes
═══════════════════════════════════════════════════════════════════════════ */

:root {
  --page-margin-x: clamp(20px, 4.2vw, 80px);
  --page-label-size: 13px;
  --page-title-size: clamp(1.65rem, 3.8vw, 3rem);
  --page-intro-size: clamp(0.94rem, 1.05vw, 1.0625rem);
  --page-legal-size: clamp(0.875rem, 0.95vw, 1rem);
  --page-content-max: none;
  --page-font-heading: 'Cinzel', Georgia, serif;
  --page-font-body: 'Exo 2', 'Segoe UI', sans-serif;
}

/* ── Canvas : occupe toute la largeur ─────────────────────────────────── */
#page-canvas {
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
  box-sizing: border-box;
}

#page-canvas .canvas-stage {
  margin: 0;
  transform-origin: 0 0;
  width: 100%;
}

/* ── Typo canvas par rôle (édition + visiteur) ────────────────────────── */
.page-canvas .canvas-element[data-typo="label"] .el-text-inner,
.page-canvas .canvas-element[data-typo="label"] .el-text-inner p {
  font-family: var(--page-font-heading) !important;
  font-size: var(--page-label-size) !important;
  font-weight: 400 !important;
  letter-spacing: 0.32em !important;
  line-height: 1.5 !important;
  text-transform: none;
}

.page-canvas .canvas-element[data-typo="title"] .el-text-inner,
.page-canvas .canvas-element[data-typo="title"] .el-text-inner h1,
.page-canvas .canvas-element[data-typo="title"] .el-text-inner h2 {
  font-family: var(--page-font-heading) !important;
  font-size: var(--page-title-size) !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.12 !important;
}

.page-canvas .canvas-element[data-typo="intro"] .el-text-inner,
.page-canvas .canvas-element[data-typo="intro"] .el-text-inner p,
.page-canvas .canvas-element[data-typo="intro"] .el-text-inner em {
  font-family: var(--page-font-body) !important;
  font-size: var(--page-intro-size) !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  font-style: normal;
  max-width: 100%;
}

.page-canvas .canvas-element[data-typo="intro"] .el-text-inner em {
  font-style: italic;
}

.page-canvas .canvas-element[data-typo="legal"] .el-text-inner,
.page-canvas .canvas-element[data-typo="legal"] .el-text-inner p,
.page-canvas .canvas-element[data-typo="legal"] .el-text-inner li,
.page-canvas .canvas-element[data-typo="legal"] .el-text-inner h3,
.page-canvas .canvas-element[data-typo="legal"] .el-text-inner h4 {
  font-family: var(--page-font-body) !important;
  font-size: var(--page-legal-size) !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  max-width: 100%;
}

.page-canvas .canvas-element[data-typo="legal"] .el-text-inner h3,
.page-canvas .canvas-element[data-typo="legal"] .el-text-inner h4 {
  font-family: var(--page-font-heading) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em;
}

/* À propos : mêmes polices, layout libre */
body[data-page="about"] .canvas-element[data-typo="title"] .el-text-inner h1 {
  font-size: clamp(1.65rem, 3.2vw, 3rem) !important;
}

body[data-page="about"] .canvas-element[data-typo="intro"] .el-text-inner p {
  font-size: clamp(0.94rem, 1.05vw, 1.0625rem) !important;
}

/* ── Sections sous le canvas : pleine largeur, même marge ─────────────── */
#gallery-section,
#creations-section,
#contact-section {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--page-margin-x);
  padding-right: var(--page-margin-x);
  box-sizing: border-box;
}

#gallery-section,
#creations-section {
  padding-top: 2rem;
  padding-bottom: 5rem;
  overflow: visible;
}

#creations-section .software-card {
  overflow: visible;
}

#contact-section {
  padding-top: 2rem;
  padding-bottom: 5rem;
}

.contact-layout {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(260px, 340px) 1fr;
}

/* Galeries : titres de blocs harmonisés */
.gallery-block-title {
  font-family: var(--page-font-heading) !important;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
}

.gallery-block-desc,
.gallery-block-desc p {
  font-family: var(--page-font-body) !important;
  font-size: var(--page-intro-size) !important;
  line-height: 1.75 !important;
  max-width: 100% !important;
}

/* Créations logiciels */
.software-card__title,
.software-card__tagline {
  font-family: var(--page-font-heading) !important;
}

.software-card__desc,
.software-card__desc p,
.software-card__features,
.software-card__footer {
  font-family: var(--page-font-body) !important;
  font-size: var(--page-intro-size) !important;
}

/* Contact : formulaire */
.contact-form label,
.contact-form input,
.contact-form textarea,
.contact-form select,
.contact-info-card,
.contact-info-card p {
  font-family: var(--page-font-body) !important;
}

.contact-info-card h3,
.contact-form h2 {
  font-family: var(--page-font-heading) !important;
}

/* Mode édition */
body.edit-mode .page-canvas {
  overflow-x: auto;
  overflow-y: visible;
}

body.edit-mode .page-canvas .canvas-element.selected {
  outline: 2px solid rgba(200, 168, 75, 0.75);
  outline-offset: 2px;
}

body.edit-mode .page-canvas .el-text-inner[contenteditable="true"] {
  outline: 1px dashed rgba(200, 168, 75, 0.55);
  outline-offset: 3px;
  cursor: text;
}

/* ── Contrôles admin : toujours à gauche, visibles en édition ─────────── */
body.edit-mode .gallery-admin-bar .gallery-admin-actions {
  opacity: 1;
  pointer-events: auto;
}

body.edit-mode .gallery-admin-bar {
  flex-wrap: wrap;
  row-gap: 8px;
}

#gallery-section .btn-add-gallery,
#creations-section .btn-add-gallery,
#btn-add-gallery,
#btn-add-software {
  margin-left: 0 !important;
  margin-right: auto;
  align-self: flex-start;
}

#gallery-section,
#creations-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.media-item .media-del,
.gm-item-del {
  left: 4px !important;
  right: auto !important;
  opacity: 1;
  z-index: 3;
}

body.edit-mode #app-main {
  padding-left: 0;
}

@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  :root {
    --page-title-size: clamp(1.4rem, 5.5vw, 2rem);
    --page-intro-size: clamp(0.88rem, 3.2vw, 1rem);
  }
}