/* ==========================================================================
   NetExpress v2 – Base UI (VERSION CORRIGÉE)
   ========================================================================== */

:root {
  /* --- Palette --- */
  --brand: #0d5a43;
  --brand-700: #094736;
  --brand-900: #062e23;
  --brand-soft: #dce7de;
  --accent-ivory: #f1e7d7;
  --accent-ivory-strong: #e5d5bc;
  --ink: #101418;
  --muted: #5c6b64;
  --surface: #f5f7f5;
  --card: #ffffff;
  --ring: rgba(15, 109, 78, .25);

  /* --- Dimensions --- */
  --radius: 16px;
  --container-width: 1200px; /* Largeur max du site */

  /* --- Ombres --- */
  --shadow-1: 0 10px 25px rgba(16, 20, 24, .06);
  --shadow-2: 0 20px 50px rgba(16, 20, 24, .10);
}

/* 1. RESET & IMAGES (Le fix pour vos images "ouffs") */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden; /* Empêche le scroll horizontal */
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.6;
}

/* Empêche TOUTES les images de dépasser de leur boîte */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 2. CONTENEUR (Le fix pour le padding et la largeur) */
.container {
  width: 100%;
  max-width: var(--container-width); /* Bloque la largeur à 1200px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;  /* Espace de sécurité à gauche */
  padding-right: 20px; /* Espace de sécurité à droite */
}

.content {
  padding: 40px 0 80px;
  min-height: 60vh;
}

/* 3. HEADER & NAV */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background:
    radial-gradient(900px 180px at 12% -90%, rgba(255,255,255,.18), transparent 65%),
    linear-gradient(180deg, #0d5a43, #094736);
  color: #fff; box-shadow: var(--shadow-1);
}

.header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
}

.brand { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; font-weight: 800; flex: 0 0 auto; }
.brand-logo { height: 46px; width: auto; object-fit: contain; object-position: left center; }
.brand .logo { width: 40px; height: 40px; border-radius: 8px; background: #fff; }
.brand-name { line-height: 1.05; }
.nav { display: flex; align-items: center; gap: .35rem; flex-wrap: nowrap; }
.nav-link { color: #f2f6f1; text-decoration: none; padding: .48rem .72rem; border-radius: 999px; transition: .2s; white-space: nowrap; }
.nav-link:hover { background: rgba(255,255,255,.12); color: #ffffff; }

/* CTA dans la barre de navigation */
.nav-link.cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: linear-gradient(135deg, var(--accent-ivory), #f8f3ea);
  color: #103f31;
  font-weight: 700;
  padding: 0.58rem .95rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 12px 24px rgba(6, 46, 35, .18), inset 0 1px 0 rgba(255,255,255,.8);
  margin-left: 0.35rem;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.nav-link.cta:hover {
  background: linear-gradient(135deg, var(--accent-ivory-strong), #efe3cf);
  color: #0a3327;
  transform: translateY(-2px);
}

.nav-link.cta i {
  font-size: 0.82rem;
}

.account-menu {
  position: relative;
}

.account-menu summary {
  list-style: none;
}

.account-menu summary::-webkit-details-marker {
  display: none;
}

.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.account-chip {
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.account-chevron {
  font-size: .75rem;
  opacity: .8;
  transition: transform .2s ease;
}

.account-menu[open] .account-chevron {
  transform: rotate(180deg);
}

.account-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  padding: .45rem;
  border-radius: 14px;
  background: rgba(250, 247, 241, .98);
  box-shadow: 0 18px 42px rgba(16,20,24,.22);
  border: 1px solid rgba(16,20,24,.06);
}

.account-dropdown-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .72rem .82rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}

.account-dropdown-link:hover {
  background: rgba(15,109,78,.08);
}

.account-dropdown-link.logout {
  color: #8a2c2c;
}

/* La déconnexion passe par un bouton dans un formulaire POST, pas par un lien.
   Ces règles lui retirent l'habillage natif du navigateur pour qu'il se
   confonde avec les entrées voisines du menu. */
.account-dropdown-logout-form {
  margin: 0;
}

button.account-dropdown-link {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* Style pour l'icône de la marque dans la navbar */
.brand-icon {
  font-size: 1.5rem;
  margin-right: 0.25rem;
}

/* Bordure animée de luxe.
   Utilise un pseudo‑élément pour dessiner un dégradé en déplacement autour du contenu.
   Appliquez la classe .animated-border sur un conteneur pour obtenir l’effet premium. */
.animated-border {
  position: relative;
  z-index: 0;
}
.animated-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: var(--radius);
  background: linear-gradient(45deg, var(--brand), #ffffff, var(--brand-700), #ffffff, var(--brand));
  background-size: 400% 400%;
  animation: border-shine 10s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}
@keyframes border-shine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Lightbox général pour la page réalisations */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: var(--shadow-2);
}
.lightbox-overlay .caption {
  color: #fff;
  margin-top: 1rem;
  text-align: center;
  font-size: 1.2rem;
}

/* Menu Mobile */
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.8rem; cursor: pointer; }
@media(max-width: 800px) {
  .nav-toggle { display: block; }
  .nav { display: none; width: 100%; flex-direction: column; background: rgba(4, 29, 22, 0.32); padding: 12px; margin-top: 12px; border-radius: 16px; backdrop-filter: blur(12px); }
  .nav.open { display: flex; }
  .header-row { flex-wrap: wrap; }
  .nav-link { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 12px 0; border-radius: 0; }
  .nav-link.cta { 
    margin-left: 0; 
    margin-top: 10px;
    text-align: center;
    justify-content: center;
  }
  .account-menu { width: 100%; }
  .account-trigger { width: 100%; justify-content: space-between; margin-top: 10px; }
  .account-dropdown {
    position: static;
    margin-top: 8px;
    min-width: 0;
    background: rgba(248, 243, 235, 0.96);
  }
  .account-dropdown-link,
  .account-dropdown-link:visited {
    color: #14382d;
    text-decoration: none;
  }
  .brand-logo {
    height: 38px;
  }
}

/* 4. FORMULAIRES (Le fix pour qu'ils ne soient pas étirés) */
form, .form-card {
  width: 100%;
  max-width: 800px; /* Force le formulaire à ne pas dépasser 800px */
  margin: 0 auto;   /* Centre le formulaire */
}

label {
  display: block; font-weight: 600; margin-bottom: 8px; color: var(--brand-900);
}

.input, .textarea, select, input[type="text"], input[type="email"], input[type="tel"], input[type="date"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.textarea {
  min-height: 120px; /* Hauteur min pour le message */
  resize: vertical;
}

/* Focus vert sur les champs */
.input:focus, .textarea:focus, select:focus, input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}

.btn {
  display: inline-block; padding: 12px 24px; border-radius: 12px;
  background: var(--brand); color: #fff; font-weight: 700; text-align: center;
  border: none; cursor: pointer; text-decoration: none;
  transition: transform 0.2s;
}
.btn:hover { background: var(--brand-700); transform: translateY(-2px); }

/* Sections génériques */
.section {
  padding: 4rem 0;
}

/* Disposition en grille pour les formulaires et sections
   Les classes .row et .row-2 permettent de répartir les champs sur
   plusieurs colonnes.  Sur les petits écrans la grille redevient à
   une seule colonne. */
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.row.row-2 {
  grid-template-columns: repeat(2, 1fr);
}

.col-span-2 { grid-column: span 2; }
.slider-row { display: flex; align-items: center; gap: 1rem; }
.btn-block { width: 100%; margin-top: 1rem; }
.h1 { margin-top: 0; }

/* Petites utilitaires */
.mt-1 { margin-top: 1rem; }
@media (max-width: 600px) {
  .row.row-2 {
    grid-template-columns: 1fr;
  }
  /* Fix for span-2 on mobile */
  [style*="grid-column: span 2"],
  [style*="grid-column:span 2"],
  .col-span-2 {
    grid-column: 1 / -1 !important;
  }
}

/* Texte secondaire légèrement atténué */
.muted {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Valeur mise en avant, par exemple pour le slider de surface */
.highlight-val {
  font-weight: 600;
  color: var(--brand);
}

/* Messages Django */
.messages-wrap { margin-top: 1rem; }
.alert {
  background: #e8f5e9;
  border: 1px solid #c8e6c9;
  padding: 10px 16px;
  border-radius: 12px;
  color: #256029;
  margin-bottom: 8px;
}

/* 5. FOOTER */
.site-footer-rich {
  margin-top: auto;
  background:
    radial-gradient(960px 240px at 12% -120%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, #1e293b 0%, #172336 100%);
  color: #dbe4ee;
}

.site-footer-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding: 3rem 0 2rem;
}

.site-footer-brand {
  max-width: 22rem;
}

.site-footer-logo {
  height: 58px;
  width: auto;
  object-fit: contain;
}

.site-footer-copy {
  margin: 1.5rem 0 0;
  font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #dbe4ee;
}

.site-footer-column {
  min-width: 0;
}

.site-footer-title {
  margin: 0 0 1.1rem;
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.site-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
}

.site-footer-link,
.site-footer-address,
.site-footer-service {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  color: #dbe4ee;
  text-decoration: none;
}

.site-footer-link:hover {
  color: #ffffff;
}

.site-footer-link i,
.site-footer-address i,
.site-footer-service-bullet {
  width: 1.15rem;
  flex: 0 0 1.15rem;
  margin-top: 0.16rem;
  text-align: center;
  color: var(--accent-ivory);
}

.site-footer-service-bullet {
  font-weight: 700;
}

.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem 0 2.25rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
  color: #dbe4ee;
}

.site-footer-legal,
.site-footer-credit {
  margin: 0;
}

.site-footer-credit a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.site-footer-credit a:hover {
  color: var(--accent-ivory);
}

@media (max-width: 900px) {
  .site-footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Galerie Réalisations */
.gallery-head { text-align: center; margin-bottom: 2rem; }
.gallery-filters { margin-top: 1rem; display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.gallery-item { cursor: pointer; position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-1); }
.gallery-item img { width: 100%; height: 200px; object-fit: cover; display: block; }
.gallery-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 0.5rem; }
.gallery-cat { font-size: 0.8rem; color: #e0f2f1; text-transform: uppercase; letter-spacing: 1px; }
.gallery-overlay .title { margin: 0; color: #fff; font-size: 1.1rem; }
.lightbox-inner { text-align: center; }