/* ap.css
   Version : 1.0
*/

/* ==========================================================================
   Palette Navy / Crème / Laiton
   Alure Plaisance - maquette
   ========================================================================== */

:root {

  /* --- Navy --- */
  --navy: #1B2A4A;
  --navy-dark: #12203C;
  --navy-light: #2E4066;

  /* --- Crème --- */
  --creme: #F5F0E6;
  --creme-alt: #F8F3E7;
  --creme-dark: #E6DFCE; /* pour bordures / séparateurs sur fond crème */

  /* --- Laiton --- */
  --laiton: #B08D57;
  --laiton-light: #C9A66B;
  --laiton-dark: #8A6C3F;

  /* --- Textes --- */
  --text-on-navy: var(--creme);
  --text-on-navy-muted: #D8D2C4;
  --text-on-creme: var(--navy);
  --text-on-creme-muted: #4A4536;
  --text-on-laiton: var(--navy);

  /* --- États --- */
  --laiton-hover: #C9A66B;
  --laiton-active: #8A6C3F;
  --navy-hover: #2E4066;

  /* --- Rayon / ombres (optionnel) --- */
  --radius: 6px;
  --radius-lg: 12px;
}

/* ==========================================================================
   Exemples d'usage
   ========================================================================== */

/* Section fond navy */
.section-navy {
  background: var(--navy);
  color: var(--text-on-navy);
}

.section-navy p {
  color: var(--text-on-navy-muted);
}

/* Section fond crème */
.section-creme {
  background: var(--creme);
  color: var(--text-on-creme);
}

.section-creme p {
  color: var(--text-on-creme-muted);
}

/* Bouton primaire (accent laiton) */
.btn-primary {
  background: var(--laiton);
  color: var(--text-on-laiton);
  border: none;
  border-radius: var(--radius);
  padding: 10px 20px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-primary:hover {
  background: var(--laiton-hover);
}

.btn-primary:active {
  background: var(--laiton-active);
}

/* Bouton secondaire (contour laiton, transparent) */
.btn-secondary {
  background: transparent;
  color: var(--text-on-navy);
  border: 1px solid var(--laiton);
  border-radius: var(--radius);
  padding: 10px 20px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.btn-secondary:hover {
  background: rgba(176, 141, 87, 0.1);
  border-color: var(--laiton-light);
}

/* Séparateur / liseré laiton */
.divider-laiton {
  height: 1px;
  width: 60px;
  background: var(--laiton);
}

/* Liens sur fond crème */
.section-creme a {
  color: var(--laiton-dark);
}

/* Liens sur fond navy */
.section-navy a {
  color: var(--laiton-light);
}