/* ============================================================
   AlliéPro — Feuille de style commune
   Toutes les pages du site partagent ce fichier.
   Modifié ici = répercuté partout.
   ============================================================ */

/* === VARIABLES === */
:root {
  --blue:     #2d5a7b;
  --blue-d:   #1e3d55;
  --blue-l:   #3d7aa0;
  --blue-vd:  #0f1f2d;
  --orange:   #ff8a50;
  --white:    #f7f4ef;
  --muted:    #5a7a90;
  --gg-green: #2d6a2d;
  --gg-green-d: #1d4a1d;

  /* Rôles */
  --c-syndic:    #c8a0f0;
  --c-gardien:   #90c0e0;
  --c-bailleur:  #f0d080;
  --c-proprio:   #80d898;
  --c-locataire: #f08080;
}

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

/* === BODY === */
body {
  background: var(--blue-vd);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* === FOND DÉGRADÉ + GRILLE (commun à toutes les pages) === */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(45,90,123,0.7) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(255,138,80,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 50%, #1a3448 0%, #0f1f2d 100%);
  z-index: 0;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
}

/* === CONTENEUR PAGE === */
.page {
  position: relative; z-index: 1;
  max-width: 960px; margin: 0 auto;
  padding: 48px 32px 72px;
}

/* === HEADER COMMUN === */
.ap-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 48px; flex-wrap: wrap; gap: 20px;
  animation: fadeDown 0.7s ease both;
}

.ap-header-brand {
  display: flex; align-items: center; gap: 22px;
  text-decoration: none;
}
.ap-header-brand:hover .ap-brand-name { color: var(--orange); }

.ap-logo-img {
  width: 70px; height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
  flex-shrink: 0;
}

.ap-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem; font-weight: 700;
  color: var(--white); line-height: 1; letter-spacing: -0.5px;
  transition: color 0.2s;
}
.ap-brand-name span { color: var(--orange); }

.ap-brand-tagline {
  font-size: 0.75rem; font-weight: 300;
  color: rgba(247,244,239,0.4);
  letter-spacing: 0.12em; text-transform: uppercase; margin-top: 3px;
}

.ap-header-divider {
  width: 1px; height: 44px;
  background: rgba(255,255,255,0.12); flex-shrink: 0;
}

.ap-gg-badge {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.ap-gg-badge:hover .ap-gg-name { color: var(--orange); }

.ap-gg-logo {
  width: 48px; height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.ap-gg-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700; color: var(--white);
  transition: color 0.2s;
}
.ap-gg-sub {
  font-size: 0.72rem; font-weight: 300;
  color: rgba(247,244,239,0.4); margin-top: 1px;
}

.ap-header-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,138,80,0.12); border: 1px solid rgba(255,138,80,0.3);
  border-radius: 100px; padding: 6px 16px;
  font-size: 0.72rem; font-weight: 500; color: var(--orange);
  letter-spacing: 0.08em; text-transform: uppercase; align-self: flex-start;
}
.ap-header-badge::before {
  content: ''; width: 7px; height: 7px;
  background: var(--orange); border-radius: 50%;
  animation: pulse 2s infinite;
}

/* === NAVIGATION PAGE (précédent / suivant) === */
.page-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 40px; flex-wrap: wrap; gap: 10px;
}

.nav-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(247,244,239,0.4); text-decoration: none;
  font-size: 0.8rem; font-weight: 300; transition: color 0.2s;
}
.nav-back:hover { color: var(--orange); }

.nav-next {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,138,80,0.1); border: 1px solid rgba(255,138,80,0.28);
  border-radius: 100px; padding: 7px 18px;
  color: var(--orange); text-decoration: none;
  font-size: 0.78rem; font-weight: 500;
  transition: background 0.2s, border-color 0.2s;
}
.nav-next:hover { background: rgba(255,138,80,0.2); border-color: rgba(255,138,80,0.5); }
.nav-next::after { content: '→'; margin-left: 2px; transition: transform 0.2s; }
.nav-next:hover::after { transform: translateX(3px); }

/* === SECTION LABEL === */
.section-label {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(247,244,239,0.32); margin-bottom: 14px;
}

/* === FOOTER COMMUN === */
.ap-footer {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.07);
  text-align: center;
  animation: fadeIn 1s 0.8s ease both;
}
.ap-footer-links {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 6px 16px; margin-bottom: 10px;
}
.ap-footer a {
  font-size: 0.75rem; color: rgba(247,244,239,0.35);
  text-decoration: none; transition: color 0.2s;
}
.ap-footer a:hover { color: var(--orange); }
.ap-footer .ap-copy {
  font-size: 0.72rem; color: rgba(247,244,239,0.2); font-weight: 300;
}

/* === GLASS CARD (utilisée sur plusieurs pages) === */
.glass-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 24px;
  backdrop-filter: blur(10px);
  margin-bottom: 28px;
}
.glass-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; font-weight: 700; color: var(--white); margin-bottom: 6px;
}
.glass-card .card-desc {
  font-size: 0.85rem; font-weight: 300;
  color: rgba(247,244,239,0.5); line-height: 1.6; margin-bottom: 20px;
}

/* === HÉBERGEMENT BAR === */
.hosting-bar {
  background: rgba(45,90,123,0.18);
  border: 1px solid rgba(45,90,123,0.3);
  border-radius: 14px; padding: 16px 22px;
  display: flex; align-items: center; gap: 16px;
  font-size: 0.8rem; font-weight: 300;
  color: rgba(247,244,239,0.6); line-height: 1.6;
  margin-bottom: 32px; flex-wrap: wrap;
}
.hosting-bar .hb-icon { font-size: 1.4rem; flex-shrink: 0; }
.hosting-bar strong { color: rgba(247,244,239,0.9); font-weight: 500; }
.hosting-bar .hb-badge {
  margin-left: auto; flex-shrink: 0;
  background: rgba(255,138,80,0.1); border: 1px solid rgba(255,138,80,0.25);
  border-radius: 100px; padding: 4px 14px;
  font-size: 0.7rem; font-weight: 500; color: var(--orange); white-space: nowrap;
}

/* === TAGS GÉNÉRIQUES === */
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 0.65rem; font-weight: 500;
  margin-right: 3px; margin-top: 4px; border: 1px solid;
}
.tag-red    { background: rgba(220,80,80,0.1);  border-color: rgba(220,80,80,0.25);  color: #f08080; }
.tag-orange { background: rgba(255,138,80,0.1); border-color: rgba(255,138,80,0.25); color: var(--orange); }
.tag-blue   { background: rgba(61,122,160,0.15);border-color: rgba(61,122,160,0.3);  color: #90c0e0; }
.tag-green  { background: rgba(60,160,80,0.12); border-color: rgba(60,160,80,0.28);  color: #80d898; }
.tag-syndic   { background: rgba(200,160,240,0.1); border-color: rgba(200,160,240,0.25); color: var(--c-syndic); }
.tag-gardien  { background: rgba(61,122,160,0.15); border-color: rgba(61,122,160,0.28);  color: var(--c-gardien); }
.tag-bailleur { background: rgba(240,208,80,0.1);  border-color: rgba(240,208,80,0.25);  color: var(--c-bailleur); }

/* === RÔLES PILLS === */
.role-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 100px; border: 1px solid;
  font-size: 0.75rem; font-weight: 500;
}
.role-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rp-syndic   { background: rgba(200,160,240,0.1); border-color: rgba(200,160,240,0.28); color: var(--c-syndic); }
.rp-gardien  { background: rgba(61,122,160,0.15); border-color: rgba(61,122,160,0.3);   color: var(--c-gardien); }
.rp-bailleur { background: rgba(240,208,80,0.1);  border-color: rgba(240,208,80,0.28);  color: var(--c-bailleur); }
.rp-proprio  { background: rgba(60,160,80,0.12);  border-color: rgba(60,160,80,0.28);   color: var(--c-proprio); }
.rp-locataire{ background: rgba(220,80,80,0.12);  border-color: rgba(220,80,80,0.28);   color: var(--c-locataire); }

/* === HERO (commun) === */
.hero { text-align: center; margin-bottom: 48px; animation: fadeUp 0.8s 0.2s ease both; }
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 700; line-height: 1.2; margin-bottom: 14px;
}
.hero h1 em { font-style: normal; color: var(--orange); }
.hero p {
  font-size: 0.95rem; font-weight: 300;
  color: rgba(247,244,239,0.58); line-height: 1.75;
  max-width: 620px; margin: 0 auto;
}

/* === ANIMATIONS === */
@keyframes fadeDown { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeUp   { from { opacity:0; transform:translateY(16px);  } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes pulse    { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(0.8);} }
@keyframes flow     { 0%{top:-100%;} 100%{top:100%;} }

/* ===== LAYOUT STICKY (header fixe, nav fixe en bas, scroll naturel) ===== */
/*
  Principe : on abandonne position:fixed pour la zone de scroll.
  Le scroll est celui du navigateur, naturel et universel.
  Header collant en haut via position:sticky.
  Nav prev/next et footer fixés en bas via position:fixed.
  Le body a juste un padding-top (header) et padding-bottom (nav+footer)
  pour que le contenu ne passe pas sous les barres fixes.
*/

body.sticky-layout {
  /* Rien de spécial — on laisse le scroll naturel du navigateur */
}

/* Bandeau header sticky */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15,31,45,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 10px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  /* Compense le fait que le body::before est fixed — le header doit être opaque */
}

.sticky-header .ap-header-brand { gap: 14px; }
.sticky-header .ap-logo-img     { width: 40px; height: 40px; }
.sticky-header .ap-brand-name   { font-size: 1.2rem; }
.sticky-header .ap-brand-tagline{ display: none; }
.sticky-header .ap-header-divider { height: 30px; }
.sticky-header .ap-gg-logo      { width: 32px; height: 32px; }
.sticky-header .ap-gg-name      { font-size: 0.88rem; }
.sticky-header .ap-gg-sub       { display: none; }
.sticky-header .ap-header-badge { padding: 4px 12px; font-size: 0.65rem; }

/* Barre nav prev/next — fixée en bas */
.sticky-nav {
  position: fixed;
  bottom: 44px; left: 0; right: 0;
  z-index: 100;
  background: rgba(15,31,45,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 8px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}

/* Footer fixe en bas */
.sticky-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(15,31,45,0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 8px 32px;
  text-align: center;
}
.sticky-footer .ap-footer-links {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 3px 12px; margin-bottom: 3px;
}
.sticky-footer .ap-footer-links a { font-size: 0.68rem; }
.sticky-footer .ap-copy { font-size: 0.62rem; }

/* Zone de contenu : scroll naturel, juste du padding en bas pour ne pas passer sous les barres */
.sticky-scroll {
  /* Pas de position:fixed — scroll naturel */
  padding-bottom: 100px; /* nav ~44px + footer ~44px + marge */
}

.sticky-scroll .page {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 32px 16px;
}

/* Sans nav prev/next */
body.sticky-layout.no-nav .sticky-nav    { display: none; }
body.sticky-layout.no-nav .sticky-scroll { padding-bottom: 56px; }

@media (max-width: 680px) {
  .sticky-header { padding: 8px 16px; }
  .sticky-nav    { padding: 6px 16px; bottom: 40px; }
  .sticky-footer { padding: 6px 16px; }
  .sticky-scroll .page { padding: 16px 16px 12px; }
  .sticky-header .ap-header-divider { display: none; }
}

/* ===== FIN LAYOUT STICKY ===== */

/* === RESPONSIVE === */
@media (max-width: 680px) {
  .ap-header { flex-direction: column; align-items: flex-start; }
  .ap-header-divider { display: none; }
  .page { padding: 32px 20px 56px; }
}