/* GOMMI SRL — feuille de style du site vitrine
   Identité noir et blanc, dérivée du logo : géométrie nette, angles droits,
   filets fins, beaucoup de blanc. Bootstrap 5 fournit la grille et les composants. */

:root {
  --noir:        #0b0b0b;
  --anthracite:  #1c1c1c;
  --blanc:       #ffffff;
  --fond-doux:   #f5f5f4;
  --trait:       #e4e4e2;
  --trait-fort:  #c9c9c6;
  --texte:       #111111;
  --texte-doux:  #6b6b6b;
  --police-titre: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --police-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --transition:  .25s cubic-bezier(.2, .6, .2, 1);
}

* { box-sizing: border-box; }

/* Empêche les navigateurs mobiles d'agrandir d'eux-mêmes les petits textes */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--police-texte);
  color: var(--texte);
  background: var(--blanc);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .titre {
  font-family: var(--police-titre);
  font-weight: 300;
  letter-spacing: -.005em;
  color: var(--noir);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; }
h3 { font-size: 1.25rem; font-weight: 400; }
.h5, .h6 { font-weight: 400; }

a { color: var(--noir); text-decoration-color: var(--trait-fort); text-underline-offset: 4px; transition: color var(--transition); }
a:hover { color: var(--noir); text-decoration-color: var(--noir); }

.petit { font-size: .875rem; }
.texte-doux { color: var(--texte-doux); }

/* Petit libellé au-dessus des titres, précédé d'un filet */
.surtitre {
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--police-titre); font-weight: 500;
  text-transform: uppercase; letter-spacing: .28em; font-size: .72rem;
  color: var(--texte-doux);
}
.surtitre::before { content: ''; width: 2.25rem; height: 1px; background: currentColor; }

.skip-link {
  position: absolute; top: .5rem; left: .5rem; z-index: 1080;
  background: var(--noir); color: var(--blanc); padding: .5rem .9rem;
}

code { color: var(--noir); background: var(--fond-doux); padding: .1em .35em; font-size: .85em; }

/* --- Logo ---------------------------------------------------------------- */

.logo { width: 2.4rem; height: 2.4rem; flex-shrink: 0; display: block; }

/* --- En-tête ------------------------------------------------------------ */

.site-entete {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 1030;
}
.navbar { padding-block: 1rem; }
.navbar-brand { display: flex; align-items: center; gap: .85rem; color: var(--noir); }
.navbar-brand:hover { color: var(--noir); }
.marque {
  font-family: var(--police-titre); font-weight: 500; font-size: 1.15rem;
  letter-spacing: .32em; text-transform: uppercase; line-height: 1; display: block;
}
.marque-baseline {
  font-family: var(--police-titre); font-size: .62rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .24em; color: var(--texte-doux);
  margin-top: .4rem;
}
.navbar .nav-link {
  font-family: var(--police-titre); font-weight: 400;
  text-transform: uppercase; letter-spacing: .16em; font-size: .76rem;
  color: var(--texte); padding-inline: 1rem !important; position: relative;
}
.navbar .nav-link::after {
  content: ''; position: absolute; left: 1rem; right: 1rem; bottom: .2rem;
  height: 1px; background: var(--noir); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.navbar .nav-link:hover::after, .navbar .nav-link.actif::after { transform: scaleX(1); }
.navbar .nav-link:hover, .navbar .nav-link.actif { color: var(--noir); }
.nav-link-discret { color: var(--texte-doux) !important; }
.navbar-toggler { border: 1px solid var(--trait-fort); border-radius: 0; }
.navbar-toggler:focus { box-shadow: none; }

/* --- Boutons ------------------------------------------------------------ */

.btn {
  font-family: var(--police-titre); font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; font-size: .74rem;
  border-radius: 0; padding: 1rem 2rem; border-width: 1px;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn-lg { padding: 1.15rem 2.4rem; font-size: .78rem; }
.btn-sm { padding: .55rem 1.1rem; font-size: .68rem; letter-spacing: .14em; }

.btn-principal { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.btn-principal:hover, .btn-principal:focus-visible { background: var(--blanc); border-color: var(--noir); color: var(--noir); }

.btn-contour { background: transparent; border-color: var(--noir); color: var(--noir); }
.btn-contour:hover, .btn-contour:focus-visible { background: var(--noir); color: var(--blanc); }

/* Variantes pour fonds noirs */
.btn-blanc { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.btn-blanc:hover, .btn-blanc:focus-visible { background: transparent; color: var(--blanc); border-color: var(--blanc); }
.btn-contour-blanc { background: transparent; border-color: rgba(255,255,255,.55); color: var(--blanc); }
.btn-contour-blanc:hover, .btn-contour-blanc:focus-visible { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }

.btn:focus-visible { outline: 2px solid var(--noir); outline-offset: 3px; box-shadow: none; }

.btn-group .btn + .btn { margin-left: -1px; }

/* --- Étiquettes de disponibilité ----------------------------------------
   Monochromes : la différence tient au remplissage et au trait, pas à la couleur. */

.etiquette {
  display: inline-flex; align-items: center;
  font-family: var(--police-titre); font-weight: 500;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .4rem .7rem; line-height: 1.2; white-space: nowrap;
  border: 1px solid transparent; border-radius: 0;
}
.etq-disponible { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.etq-bientot    { background: var(--blanc); color: var(--noir); border-color: var(--noir); }
.etq-option     { background: var(--blanc); color: var(--noir); border: 1px dashed var(--noir); }
.etq-loue       { background: var(--fond-doux); color: var(--texte-doux); border-color: var(--trait); }
.etq-vendu      { background: transparent; color: var(--texte-doux); border-color: var(--trait-fort); text-decoration: line-through; }
.etq-neutre     { background: transparent; color: inherit; border-color: currentColor; }

/* --- Héros -------------------------------------------------------------- */

.heros {
  background: var(--noir); color: var(--blanc);
  padding: clamp(4.5rem, 11vw, 8.5rem) 0;
  position: relative; overflow: hidden;
}
.heros h1 { color: var(--blanc); }
.heros p:not(.surtitre) { color: rgba(255,255,255,.72); font-size: 1.08rem; max-width: 34rem; }
.heros .surtitre { color: rgba(255,255,255,.6); }
.heros-filigrane {
  position: absolute; right: -6rem; top: 50%; transform: translateY(-50%);
  width: clamp(22rem, 48vw, 42rem); height: auto; color: var(--blanc); opacity: .07;
  pointer-events: none;
}

.heros-immeuble {
  position: relative; min-height: clamp(20rem, 46vw, 34rem);
  background: var(--noir) center/cover no-repeat;
  display: flex; align-items: flex-end; color: var(--blanc);
}
.heros-immeuble::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 5%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.35) 100%);
}
.heros-immeuble > .container { position: relative; padding-block: 3rem; }
.heros-immeuble h1 { color: var(--blanc); }
.heros-immeuble .fil-ariane { color: rgba(255,255,255,.7); }
.heros-immeuble .fil-ariane a { color: inherit; text-decoration: none; }
.heros-immeuble .fil-ariane a:hover { color: var(--blanc); }
.heros-immeuble .adresse { color: rgba(255,255,255,.85); }
.heros-immeuble .etq-neutre { color: var(--blanc); border-color: rgba(255,255,255,.6); }
.heros-immeuble .etq-disponible { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }

/* --- Cartes ------------------------------------------------------------- */

.carte {
  background: var(--blanc); border: 1px solid var(--trait);
  height: 100%; transition: border-color var(--transition);
}
a.carte { text-decoration: none; color: inherit; }
.carte:hover { border-color: var(--noir); }
.carte-visuel {
  aspect-ratio: 4 / 3; overflow: hidden; position: relative;
  background: var(--fond-doux);
  display: flex; align-items: center; justify-content: center;
}
.carte-visuel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .6, .2, 1);
}
.carte:hover .carte-visuel img { transform: scale(1.04); }
.carte-visuel-vide { width: 5rem; height: 5rem; color: var(--noir); opacity: .12; }
.carte-corps { padding: 1.6rem 1.6rem 1.75rem; }
.carte-titre { font-size: 1.35rem; font-weight: 400; margin-bottom: .3rem; }
.carte-adresse { font-size: .85rem; color: var(--texte-doux); margin-bottom: 1rem; }
.carte-etiquettes { position: absolute; top: 1rem; left: 1rem; display: flex; gap: .4rem; flex-wrap: wrap; z-index: 1; }
.carte-lien {
  font-family: var(--police-titre); font-weight: 500; font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--noir);
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--trait); padding-top: 1rem; margin-top: 1.25rem;
}
.carte-lien .fleche { transition: transform var(--transition); }
.carte:hover .carte-lien .fleche { transform: translateX(4px); }

/* --- Sections et blocs -------------------------------------------------- */

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section-claire { background: var(--fond-doux); }

.bloc { background: var(--blanc); border: 1px solid var(--trait); }

/* Grille d'arguments de la page d'accueil */
.argument { position: relative; padding-top: 1.75rem; padding-bottom: 1.75rem; }
/* Filet aligné sur le contenu de la colonne, sans déborder dans la gouttière */
.argument::before {
  content: ''; position: absolute; top: 0; height: 1px; background: var(--trait);
  left: calc(var(--bs-gutter-x) * .5); right: calc(var(--bs-gutter-x) * .5);
}
.argument-num {
  font-family: var(--police-titre); font-weight: 300; font-size: .8rem;
  letter-spacing: .2em; color: var(--texte-doux); display: block; margin-bottom: .5rem;
}

/* --- Biens d'un immeuble ------------------------------------------------ */

.bien { border-bottom: 1px solid var(--trait); padding: 1.6rem 1.75rem; }
.bien:last-child { border-bottom: 0; }
.bien-indispo .bien-titre, .bien-indispo .bien-prix { color: var(--texte-doux); }
.bien-titre { font-family: var(--police-titre); font-size: 1.15rem; font-weight: 400; margin: 0; }
.bien-meta { font-size: .85rem; color: var(--texte-doux); }
.bien-prix { font-family: var(--police-titre); font-size: 1.35rem; font-weight: 300; color: var(--noir); white-space: nowrap; }

.caracteristiques { list-style: none; padding: 0; margin: 0; }
.caracteristiques li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .75rem 0; border-bottom: 1px solid var(--trait); font-size: .92rem;
}
.caracteristiques li:last-child { border-bottom: 0; }
.caracteristiques .cle {
  color: var(--texte-doux); font-family: var(--police-titre);
  text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; padding-top: .2rem;
}

.atouts { list-style: none; padding: 0; margin: 0; }
.atouts li { position: relative; padding-left: 1.75rem; margin-bottom: .7rem; }
.atouts li::before {
  content: ''; position: absolute; left: 0; top: .8rem; width: .9rem; height: 1px; background: var(--noir);
}

/* --- Galerie ------------------------------------------------------------ */

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.galerie a { display: block; overflow: hidden; }
.galerie img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; cursor: zoom-in;
  transition: transform .8s cubic-bezier(.2, .6, .2, 1);
}
.galerie a:hover img { transform: scale(1.04); }
.placeholder-photo {
  border: 1px solid var(--trait); background: var(--blanc);
  color: var(--texte-doux); padding: 3.5rem 1.5rem; text-align: center;
}
.placeholder-photo .logo { width: 3rem; height: 3rem; margin: 0 auto 1rem; color: var(--noir); opacity: .15; }

/* --- Formulaires -------------------------------------------------------- */

.form-label {
  font-family: var(--police-titre); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; font-size: .68rem;
  color: var(--texte); margin-bottom: .45rem;
}
.form-control, .form-select {
  border-radius: 0; border: 1px solid var(--trait-fort); padding: .75rem .9rem;
  background-color: var(--blanc); color: var(--texte); font-size: .95rem;
}
.form-control::placeholder { color: #a3a3a0; }
.form-control:focus, .form-select:focus {
  border-color: var(--noir); box-shadow: 0 0 0 1px var(--noir);
}
.form-select-sm, .form-control-sm { padding: .45rem .7rem; font-size: .85rem; }
.form-check-input { border-radius: 0; border-color: var(--trait-fort); }
.form-check-input:checked { background-color: var(--noir); border-color: var(--noir); }
.form-check-input:focus { box-shadow: 0 0 0 1px var(--noir); border-color: var(--noir); }
.champ-pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.obligatoire { color: var(--texte-doux); }
.is-invalid, .form-control.is-invalid, .form-select.is-invalid { border-color: #9b1c1c !important; }
.invalid-feedback { color: #9b1c1c; font-size: .82rem; }

.alert { border-radius: 0; border-width: 0 0 0 2px; }
.alert-success { background: var(--fond-doux); border-color: var(--noir); color: var(--texte); }
.alert-info    { background: var(--fond-doux); border-color: var(--trait-fort); color: var(--texte); }
.alert-danger  { background: #fbf3f3; border-color: #9b1c1c; color: #5c1111; }

/* --- Pied de page ------------------------------------------------------- */

.site-pied { background: var(--noir); color: rgba(255,255,255,.7); padding: 4.5rem 0 2.25rem; }
.site-pied .logo { width: 3rem; height: 3rem; color: var(--blanc); }
.site-pied .marque { color: var(--blanc); }
.site-pied a { color: rgba(255,255,255,.85); text-decoration: none; }
.site-pied a:hover { color: var(--blanc); text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
.titre-pied {
  font-family: var(--police-titre); font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .24em; color: rgba(255,255,255,.45); margin-bottom: 1.1rem;
}
.liste-pied { list-style: none; padding: 0; margin: 0; }
.liste-pied li { margin-bottom: .55rem; font-size: .9rem; }
.text-muted-clair { color: rgba(255,255,255,.5); }
.separateur-pied { border-color: rgba(255,255,255,.14); opacity: 1; margin: 3rem 0 1.5rem; }

/* --- Espace privé ------------------------------------------------------- */

.admin-barre {
  background: var(--noir); color: var(--blanc); padding: .9rem 0;
  position: sticky; top: 0; z-index: 1030;
}
.admin-barre .logo { width: 1.9rem; height: 1.9rem; color: var(--blanc); }
.admin-barre .marque { color: var(--blanc); font-size: .95rem; }
.admin-barre a {
  color: rgba(255,255,255,.65); text-decoration: none;
  font-family: var(--police-titre); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem;
}
.admin-barre a:hover, .admin-barre a.actif { color: var(--blanc); }
.admin-barre .utilisateur { color: rgba(255,255,255,.45); font-size: .8rem; }

.stat { background: var(--blanc); border: 1px solid var(--trait); padding: 1.25rem 1.4rem; }
.stat-valeur { font-family: var(--police-titre); font-weight: 300; font-size: 2.4rem; line-height: 1; color: var(--noir); }
.stat-libelle {
  font-family: var(--police-titre); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .18em; color: var(--texte-doux); margin-top: .5rem;
}

.table-admin { background: var(--blanc); margin: 0; }
.table-admin th {
  font-family: var(--police-titre); font-size: .66rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--texte-doux); font-weight: 500; border-bottom: 1px solid var(--trait-fort); padding: .9rem .75rem;
}
.table-admin td { vertical-align: middle; font-size: .9rem; border-color: var(--trait); padding: .9rem .75rem; }
.encadre-doux { background: var(--fond-doux); padding: .75rem; }
.barre-enregistrer { background: var(--blanc); border-top: 1px solid var(--trait); }

@media (max-width: 575.98px) {
  .surtitre { letter-spacing: .18em; gap: .6rem; }
  .surtitre::before { width: 1.25rem; }
  .marque { letter-spacing: .24em; }
  .heros .btn { width: 100%; }
}

@media print {
  .site-entete, .site-pied, .admin-barre, .btn, .no-print { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}