/* =========================================================================
   BIS IMMOBILIER — bisimmobilier.com
   Page d'accueil hors-indexation (noindex)
   Feuille de style externe
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. VARIABLES CSS — issues de la charte graphique fournie
      (charte_graphique.pdf : Bleu/Vert #008a91, Gris #3e3c3c,
       Dégradé rouge #df3333 → #9c1111)
   ------------------------------------------------------------------------- */
:root {
  /* Couleurs principales (charte graphique) */
  --color-primary: #008a91;        /* Bleu/Vert — C84 M28 J42 N3 */
  --color-secondary: #3e3c3c;      /* Gris — C67 M62 J60 N50 */
  --color-accent-start: #df3333;   /* Dégradé rouge, début — C7 M94 J89 N1 */
  --color-accent-end: #9c1111;     /* Dégradé rouge, fin — C25 M100 J100 N23 */
  --color-accent: linear-gradient(180deg, var(--color-accent-start) 0%, var(--color-accent-end) 100%);

  /* Neutres complémentaires (non fournis dans la charte, usage utilitaire uniquement) */
  --color-bg: #ffffff;
  --color-bg-alt: #f6f8f8;
  --color-border: #e2e6e6;
  --color-text: var(--color-secondary);
  --color-text-muted: #6b6968;
  --color-white: #ffffff;
  --color-overlay: rgba(62, 60, 60, 0.55);

  /* Typographie — polices déclarées dans la charte graphique.
     ATTENTION LICENCE : "Antipasto" (Zetafonts) et "Cutie Patootie Skinny"
     (Vanessa Bays / ByTheButterfly) sont toutes deux distribuées en
     gratuit-usage-personnel uniquement ; une licence commerciale est requise
     pour un usage sur un site d'entreprise. Voir note dans le message
     accompagnant ce fichier. Les fichiers de police ne sont donc PAS liés
     via un CDN public ici : ils doivent être auto-hébergés par vous
     (fichiers .woff2 sous licence) via les règles @font-face ci-dessous,
     sans quoi les polices système de repli s'appliquent. */
  --font-display: "Antipasto", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-script: "Cutie Patootie Skinny", "Segoe UI", cursive, sans-serif;
  --font-body: "Segoe UI", Helvetica, Arial, sans-serif;

  /* Échelle typographique */
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-xxl: 2.75rem;
  --line-height-base: 1.6;
  --letter-spacing-brand: 0.02em;

  /* Espacements (échelle 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;

  /* Divers */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 12px rgba(62, 60, 60, 0.08);
  --shadow-modal: 0 12px 40px rgba(62, 60, 60, 0.3);
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --max-width: 1200px;
}

/* -------------------------------------------------------------------------
   2. Polices auto-hébergées (optionnel — n'active que si les fichiers
      sous licence commerciale sont présents sur le serveur)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Antipasto";
  src: url("/fonts/antipasto-pro.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Cutie Patootie Skinny";
  src: url("/fonts/cutie-patootie-skinny.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   3. Reset minimal
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

/* Focus clavier visible partout (accessibilité) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   4. Conteneur en grille adaptative
   ------------------------------------------------------------------------- */
.page-grid {
  display: grid;
  grid-template-columns: minmax(var(--space-3), 1fr) minmax(0, var(--max-width)) minmax(var(--space-3), 1fr);
}
.page-grid > * { grid-column: 2; }
.bleed { grid-column: 1 / -1; }

/* -------------------------------------------------------------------------
   5. En-tête — reprend l'emplacement du logo, la navigation et le fond
      de bisimmobilier.fr (fond blanc, logo à gauche, nav horizontale)
   ------------------------------------------------------------------------- */
.site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}
.brand__logo {
  height: 48px; /* image rognée sur son contenu réel (454x99px) : pleinement visible à cette hauteur */
  width: auto;
}
.brand__wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-brand);
}

.site-nav { display: flex; align-items: center; }

/* Bouton Connexion — bien visible */
.btn-login {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-fast);
}
.btn-login:hover { background: #006f74; }
.btn-login:active { transform: scale(0.97); }

/* -------------------------------------------------------------------------
   6. Contenu principal — zone de texte d'espace réservé
   ------------------------------------------------------------------------- */
.main-content { padding: 0 0; font-weight: bold; }

/* -------------------------------------------------------------------------
   6bis. Bandeau CTA — photo de façade en fond, texte blanc, bouton inversé
        (fond blanc / texte vert, à l'opposé du bouton Connexion de l'en-tête)
   ------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
}
.cta-band__img {
  display: block;
  width: 100%;
  height: auto; /* le conteneur suit la hauteur réelle de l'image, pas l'inverse */
}
.cta-band__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(62, 60, 60, 0.4) 0%, rgba(62, 60, 60, 0.68) 100%);
}
.cta-band__grid {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
}
.cta-band__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  text-align: center;
}
.cta-band__text {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--letter-spacing-brand);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.btn-cta {
  background: var(--color-white);
  color: var(--color-primary);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-fast);
}
.btn-cta:hover { background: #eef2f2; }
.btn-cta:active { transform: scale(0.97); }

/* -------------------------------------------------------------------------
   6ter. Menu horizontal — dans le prolongement du logo, aligné à droite
   de l'en-tête (site-header__inner est déjà en display:flex
   justify-content:space-between ci-dessus, donc ce nav se place
   naturellement à droite du logo). Utilisé sur menu.html et les pages
   secondaires à venir.
   ------------------------------------------------------------------------- */
.menu-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.menu-nav__link {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-secondary);
  text-decoration: none;
  letter-spacing: var(--letter-spacing-brand);
  transition: color var(--transition-base);
}
.menu-nav__link:hover,
.menu-nav__link:focus-visible {
  color: var(--color-primary);
}
@media (max-width: 600px) {
  .menu-nav { gap: var(--space-3); }
  .menu-nav__link { font-size: var(--fs-sm); }
}

/* -------------------------------------------------------------------------
   6quater. Section plein écran avec photo de fond — utilisée sur
   menu.html (photo de l'entrée bleue) et réutilisable sur les pages
   secondaires à venir avec une autre image de fond.
   ------------------------------------------------------------------------- */
.menu-hero {
  position: relative;
  min-height: calc(100vh - 81px); /* 81px ≈ hauteur mesurée du site-header (logo 48px + padding) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.menu-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.menu-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}
.menu-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  text-align: center;
}
@media (max-width: 600px) {
  .menu-hero { min-height: calc(100vh - 65px); }
}

/* -------------------------------------------------------------------------
   7. Pied de page — reprend la mise en page des notes légales du site
      d'origine (mentions légales, coordonnées, liens utiles).
      Padding réduit : le bandeau CTA ci-dessus porte désormais le poids
      visuel de bas de page, donc le footer reste compact.
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-secondary);
  color: #d8d7d7;
  padding: var(--space-4) 0 var(--space-3);
  font-size: var(--fs-xs);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.footer-grid h4 {
  color: var(--color-white);
  font-size: var(--fs-sm);
  margin: 0 0 var(--space-2);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: var(--space-1); }
.footer-grid a { text-decoration: none; color: #d8d7d7; transition: color var(--transition-base); }
.footer-grid a:hover, .footer-grid a:focus-visible { color: var(--color-white); }

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-3);
  color: #a9a7a7;
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   8. Modal de connexion
   ------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  z-index: 100;
}
.modal-overlay.is-open { display: flex; }

.login-modal {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 380px;
  padding: var(--space-5);
  position: relative;
}
.login-modal__title {
  font-family: var(--font-display);
  color: var(--color-secondary);
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-1);
}
.login-modal__subtitle {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin: 0 0 var(--space-4);
}
.login-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
}
.login-modal__close:hover { color: var(--color-secondary); }

.form-field { margin-bottom: var(--space-4); }
.form-field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: var(--space-1);
}
.form-field input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  color: var(--color-text);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.form-field input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 138, 145, 0.15);
  outline: none;
}
.form-field input:invalid:not(:placeholder-shown) {
  border-color: var(--color-accent-start);
}
.form-field__error {
  display: none;
  color: var(--color-accent-end);
  font-size: var(--fs-xs);
  margin-top: var(--space-1);
}
.form-field.has-error .form-field__error { display: block; }
.form-field.has-error input { border-color: var(--color-accent-start); }

.form-status {
  font-size: var(--fs-xs);
  margin-bottom: var(--space-3);
  min-height: 1em;
}
.form-status[data-state="error"] { color: var(--color-accent-end); }
.form-status[data-state="success"] { color: var(--color-primary); }

.btn-submit {
  width: 100%;
  background: var(--color-accent-end);
  background-image: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--transition-base), transform var(--transition-fast);
}
.btn-submit:hover { filter: brightness(1.08); }
.btn-submit:active { transform: scale(0.99); }

/* -------------------------------------------------------------------------
   9. Comportement adaptatif — mobile / tablette / desktop
   ------------------------------------------------------------------------- */

/* Tablette (≤ 900px) */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (≤ 600px) */
@media (max-width: 600px) {
  :root {
    --fs-xxl: 2rem;
    --fs-xl: 1.5rem;
    --fs-lg: 1.25rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
  }
  .footer-grid { grid-template-columns: 1fr; }
  .btn-login { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); }
  .login-modal { padding: var(--space-4); }
  .cta-band__content { padding: var(--space-5) 0; }
}

/* Grand écran (≥ 1440px) : confort de lecture */
@media (min-width: 1440px) {
  :root { --max-width: 1320px; }
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}