/* Charte graphique Cime & Rive — couleurs et typographies définies dans
   CHARTE-GRAPHIQUE.md. Centralisé ici, rien d'autre à chercher ailleurs. */

:root {
  --cr-primary: #1B3A4B;      /* bleu profond : lac, crédibilité */
  --cr-primary-dark: #12262F; /* pour les survols de boutons */
  --cr-slate: #3D5566;         /* gris-bleu ardoise, assombri pour un vrai contraste de lecture */
  --cr-amber: #D9A566;         /* ambre : accent chaleureux, jamais en fond large */
  --cr-amber-dark: #C4934D;   /* pour le survol du bouton principal */
  --cr-bg: #FAF8F4;            /* blanc cassé */
  --cr-bg-soft: #F6F8F3;
  --cr-line: #DCE1E3;
  --cr-ink: #22303A;
  --cr-muted: #5A6670;         /* assombri, restait illisible en dessous de 4,5:1 de contraste */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cr-bg);
  color: var(--cr-ink);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.cr-serif { font-family: 'Playfair Display', serif; }

a { color: inherit; text-decoration: none; transition: color 0.15s ease; }

/* En-tête */
.cr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid var(--cr-line);
  background: var(--cr-bg);
}
.cr-header { padding: 22px 32px; }
.cr-logo { display: flex; align-items: center; }
.cr-logo-name {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 32px;
  color: var(--cr-primary);
}
.cr-logo-amp { color: var(--cr-amber); padding: 0 3px; }
.cr-logo-sub {
  font-size: 13px;
  letter-spacing: 3.5px;
  color: var(--cr-slate);
  margin-top: 3px;
  margin-left: 4px;
  font-weight: 500;
}
.cr-nav { display: flex; align-items: center; gap: 24px; font-size: 16px; font-weight: 500; color: var(--cr-slate); }
.cr-nav a { padding: 4px 2px; border-bottom: 2px solid transparent; }
.cr-nav a:hover { color: var(--cr-primary); border-bottom-color: var(--cr-amber); }
.cr-nav .active { color: var(--cr-primary); font-weight: 700; border-bottom-color: var(--cr-primary); }
.cr-nav .cr-espace-client {
  color: var(--cr-primary);
  border: 1.5px solid var(--cr-line);
  border-radius: 4px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 600;
}
.cr-nav .cr-espace-client:hover { background: var(--cr-bg-soft); border-color: var(--cr-primary); }

/* Boutons */
.cr-btn-amber {
  display: inline-block;
  background: var(--cr-amber);
  color: #412402;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cr-btn-amber:hover {
  background: var(--cr-amber-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217,165,102,0.4);
}
.cr-btn-outline {
  display: inline-block;
  background: #fff;
  color: var(--cr-primary);
  border: 1.5px solid var(--cr-primary);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cr-btn-outline:hover { background: var(--cr-primary); color: #fff; }

.cr-btn-primary {
  display: inline-block;
  background: var(--cr-primary);
  color: var(--cr-bg);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.cr-btn-primary:hover { background: var(--cr-primary-dark); transform: translateY(-1px); }

/* Formulaires */
.cr-field, textarea.cr-field, select.cr-field {
  border: 1.5px solid var(--cr-line);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  color: var(--cr-ink);
  background: #fff;
  width: 100%;
  transition: border-color 0.15s ease;
}
.cr-field:focus, textarea.cr-field:focus, select.cr-field:focus {
  border-color: var(--cr-primary);
  outline: none;
}
.cr-label { font-size: 13px; color: var(--cr-slate); display: block; margin-bottom: 5px; font-weight: 500; }

/* Cartes bien */
.cr-bien-card {
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(27,58,75,0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.cr-bien-card:hover {
  box-shadow: 0 8px 24px rgba(27,58,75,0.16);
  transform: translateY(-2px);
}
.cr-bien-photo {
  height: 220px;
  background: var(--cr-line);
  background-size: cover;
  background-position: center;
  position: relative;
}
.cr-badge-nouveau {
  position: absolute; top: 14px; left: 14px;
  background: var(--cr-primary); color: #fff;
  font-size: 11px; letter-spacing: 1px; padding: 5px 10px; border-radius: 3px;
}
.cr-badge-vendu {
  position: absolute; top: 14px; left: 14px;
  background: var(--cr-amber); color: #412402; font-weight: 600;
  font-size: 11px; letter-spacing: 1px; padding: 5px 10px; border-radius: 3px;
}
.cr-badge-exclusivite {
  position: absolute; top: 14px; right: 14px;
  background: var(--cr-primary); color: #fff; font-weight: 700;
  font-size: 11px; letter-spacing: 1px; padding: 5px 10px; border-radius: 3px;
  border: 1px solid var(--cr-amber);
}
.cr-dpe { display: inline-block; padding: 1px 7px; border-radius: 3px; font-weight: 600; color: #fff; }
.cr-dpe-A { background: #1a9850; } .cr-dpe-B { background: #66bd63; } .cr-dpe-C { background: #a6d96a; color: #22303A; }
.cr-dpe-D { background: #fee08b; color: #22303A; } .cr-dpe-E { background: #fdae61; }
.cr-dpe-F { background: #f46d43; } .cr-dpe-G { background: #d73027; }

.cr-ges-A { background: #ede0f5; color: #22303A; } .cr-ges-B { background: #d3b8e8; color: #22303A; }
.cr-ges-C { background: #b98fda; } .cr-ges-D { background: #9d68c8; }
.cr-ges-E { background: #7f47ac; } .cr-ges-F { background: #5f2f87; }
.cr-ges-G { background: #3e1c5c; }

.cr-footer {
  padding: 20px 32px;
  border-top: 1px solid var(--cr-line);
  font-size: 13px;
  color: var(--cr-muted);
  text-align: center;
}
.cr-footer a:hover { color: var(--cr-primary); text-decoration: underline; }

.cr-container { max-width: 1000px; margin: 0 auto; padding: 0 32px; }