/*
 * Symmakhia — adaptation aux écrans (responsive)
 *
 * Le design d'origine (1440 px) est conservé tel quel sur ordinateur.
 * Ce fichier ne fait qu'ajuster la mise en page quand l'écran est plus
 * étroit (tablette, téléphone) ou plus large (grand écran).
 * Les !important sont nécessaires car le design est écrit en styles en ligne.
 *
 *   > 1100 px  : ordinateur — design d'origine
 *   ≤ 1100 px  : tablette et petit portable
 *   ≤ 720 px   : téléphone
 *   ≤ 420 px   : petit téléphone
 */

/* ---------- Toutes tailles ---------- */
body { background: #1E1812; }

.page-root {
  width: 100% !important;
  /* Sur grand écran, le contenu garde sa largeur d'origine (1312 px) et reste centré */
  padding-left: max(64px, calc((100% - 1312px) / 2)) !important;
  padding-right: max(64px, calc((100% - 1312px) / 2)) !important;
}

/* La peinture couvre toute la largeur, quelle que soit la taille de l'écran */
.sym-root {
  background-size:
    100% 100%,
    100% 100%,
    max(1500px, 100%) auto !important;
  background-position: left top, left top, right top !important;
}

.contact-form button:disabled { cursor: wait; }

/* ---------- Tablette (≤ 1100 px) ---------- */
@media (max-width: 1100px) {
  .page-root {
    padding: 32px !important;
    gap: 40px !important;
  }

  .sym-root {
    background-image:
      linear-gradient(180deg, rgba(30,24,18,0.35) 0%, rgba(30,24,18,0.45) 60%, #1E1812 100%),
      linear-gradient(90deg, rgba(18,16,13,0.85) 0%, rgba(18,16,13,0.5) 100%),
      url(assets/aspasie-monsiau.jpg) !important;
    background-size: 100% 1000px, 100% 1000px, auto 1000px !important;
    background-position: left top, left top, 65% top !important;
  }

  .hero {
    display: block !important;
    height: auto !important;
    min-height: 620px;
    padding: 72px 8px !important;
  }
  .hero-content { max-width: 680px; }
  .hero-title { font-size: clamp(48px, 7.5vw, 84px) !important; }

  .panel { padding: 72px 48px !important; }
  .panel-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .contact {
    display: flex !important;
    flex-direction: column;
    gap: 48px;
  }
  .contact-intro, .contact-form { width: 100%; }

  .site-footer { padding: 32px 40px !important; flex-wrap: wrap; gap: 20px; }

  /* Pages légales */
  .legal-main { padding: 64px 40px !important; }
  .legal-article { width: 100% !important; max-width: 800px; }
}

/* ---------- Téléphone (≤ 720 px) ---------- */
@media (max-width: 720px) {
  .page-root {
    padding: 12px !important;
    gap: 24px !important;
  }

  .sym-root {
    background-image:
      linear-gradient(180deg, rgba(30,24,18,0.55) 0%, rgba(30,24,18,0.65) 65%, #1E1812 100%),
      url(assets/aspasie-monsiau.jpg) !important;
    background-size: 100% 820px, auto 820px !important;
    background-position: left top, 62% top !important;
  }

  /* En-tête */
  .site-header {
    height: auto !important;
    padding: 12px 8px 16px !important;
    flex-wrap: wrap;
    gap: 12px;
  }
  .brand { gap: 10px !important; }
  .brand span:first-child { font-size: 26px !important; }
  .brand span:last-child { font-size: 15px !important; }
  .site-nav { gap: 18px !important; font-size: 14px !important; }
  .nav-cta { height: 40px !important; padding: 0 16px !important; }
  .back-link { font-size: 14px !important; }

  /* Accroche */
  .hero {
    min-height: 0;
    padding: 40px 8px 56px !important;
  }
  .hero-content { gap: 24px !important; }
  .hero-title {
    font-size: clamp(40px, 11vw, 56px) !important;
    line-height: 1.02 !important;
  }
  .hero-spacer { display: none; }
  .hero-actions {
    flex-direction: column;
    gap: 12px !important;
  }
  .hero-actions a { justify-content: center; }

  /* Sections */
  .panel {
    padding: 48px 20px !important;
    gap: 40px !important;
  }
  .section-title { font-size: 38px !important; }
  .cards { grid-template-columns: 1fr !important; gap: 16px !important; }
  .card { padding: 28px 24px !important; }

  /* Formulaire */
  .form-row { grid-template-columns: 1fr !important; }
  .form-submit { align-self: stretch !important; }

  /* Pied de page */
  .site-footer {
    flex-direction: column;
    align-items: flex-start !important;
    padding: 28px 20px !important;
  }
  .footer-id { flex-wrap: wrap; }
  .footer-links { flex-wrap: wrap; gap: 12px 20px !important; }

  /* Pages légales */
  .legal-main { padding: 40px 20px !important; }
  .legal-article { font-size: 16px !important; gap: 32px !important; }
  .legal-title { font-size: 42px !important; }
}

/* ---------- Petit téléphone (≤ 420 px) ---------- */
@media (max-width: 420px) {
  .site-nav > a:not(.nav-cta) { display: none; }
  .brand span:last-child { display: none; }
  .site-header { flex-wrap: nowrap; }
  .hero-title { font-size: 38px !important; }
}