/* ============================================================
   ALS COMMUNICATION — IDENTITÉ CLAIRE
   Inspirée de la capture : blanc cassé, noir, beige taupe.
   Fichier commun aux quatre pages, ajouté après leurs styles
   d'origine pour conserver la structure et les contenus.
   Modifier les variables ci-dessous pour ajuster le thème.
   ============================================================ */
:root {
  --als-bg: #FAF8F5;
  --als-bg-soft: #F1ECE5;
  --als-text: #24221F;
  --als-text-soft: #706B65;
  --als-accent: #AB967D;
  --als-accent-dark: #8F7A60;
  --als-border: #E1DAD0;
  --als-footer: #F2EEE8;
  --als-button: #24221F;
  --als-white: #FFFFFF;
}

/* FOND, TEXTES ET LIENS */
html { background: var(--als-bg); }
body { background: var(--als-bg); color: var(--als-text); }
a { color: var(--als-text); }
::selection { background: #D8C9B7; color: var(--als-text); }
:focus-visible { outline: 2px solid var(--als-accent-dark); outline-offset: 4px; }

/* BARRE DE NAVIGATION — même structure, nouvelles couleurs */
header {
  background: rgba(250, 248, 245, 0.95);
  border-bottom: 1px solid var(--als-border);
  box-shadow: none;
}
nav a { color: var(--als-text); }
nav a:hover { color: var(--als-accent-dark); }
nav img { mix-blend-mode: multiply; }

/* TITRES, ACCENTS ET PARAGRAPHES */
.hero h1, .about-text h1, .portfolio-intro h1, .contact-header h1,
.presentation h2, .galerie h2, .parcours h2, .competences h2,
.contact-info h2, .contact-form h2, .section-contact h2,
.home-contact h2 { color: var(--als-text); }
.hero h1 span, .presentation span, .galerie h2 span,
.about-text h1 span, .portfolio-intro h1 span, .contact-header span {
  color: var(--als-accent);
}
.hero p, .presentation p, .about-text p, .timeline-item p,
.competence-card p, .section-contact p, .portfolio-intro p,
.contact-header p, .contact-info p, .home-contact p {
  color: var(--als-text-soft);
}
.hero strong, .about-text strong { color: var(--als-text); }

/* BOUTONS : noir & angle discret, style éditorial */
.btn, .home-contact a, .cta, .cta-contact, .contact-form button {
  background: var(--als-button);
  color: var(--als-white);
  border-radius: 3px;
  box-shadow: none;
  font-weight: 600;
  text-decoration: none;
}
.btn:hover, .home-contact a:hover, .cta:hover,
.cta-contact:hover, .contact-form button:hover {
  background: var(--als-accent-dark);
  color: var(--als-white);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn-outline {
  color: var(--als-text);
  border: 1px solid var(--als-border);
  border-radius: 3px;
  background: transparent;
}
.btn-outline:hover { background: var(--als-text); color: var(--als-white); }

/* PHOTOS : garder toutes les images et la galerie telles quelles */
.hero-image img, .about-image img { box-shadow: 0 20px 65px rgba(54, 42, 28, 0.12); }
.hero-image::after { border-color: var(--als-accent); }
.photo, .lien-conteneur-photo { background: var(--als-bg-soft); }
.photo::after, .photo-hover { color: #FFFFFF; }

/* BLOCS, CARTES ET STATISTIQUES */
.stats-home div, .stat-card, .competence-card, .contact-info, .contact-form,
.home-contact, .section-contact, .lien-conteneur-photo {
  background: var(--als-bg-soft);
  border: 1px solid var(--als-border);
}
.stats-home div:hover, .stat-card:hover, .competence-card:hover {
  border-color: var(--als-accent);
}
.stats-home h2, .stat-card h2 { color: var(--als-accent-dark); }
.stats-home p, .stat-card p { color: var(--als-text-soft); }
.competence-card h3, .timeline-item h3, .info-box h3 { color: var(--als-accent-dark); }
.timeline { border-left-color: var(--als-accent); }
.timeline-item span { background: var(--als-accent); }

/* FORMULAIRE — lisible sur fond clair */
input, textarea {
  background: var(--als-bg);
  color: var(--als-text);
  border-color: var(--als-border);
}
input::placeholder, textarea::placeholder { color: #817A73; }
input:focus, textarea:focus { border-color: var(--als-accent-dark); }

/* BAS DE PAGE */
.footer { background: var(--als-footer); border-top: 1px solid var(--als-border); }
.footer-column h4 { color: var(--als-text); }
.footer-column p, .footer-column li, .footer-column a { color: var(--als-text-soft); }
.footer-column a:hover { color: var(--als-accent-dark); }
.footer-bottom { color: var(--als-text-soft); border-top-color: var(--als-border); }
.footer-column img, .social-links img, .social-contact img {
  filter: none;
  opacity: 0.85;
}
.footer-column img:hover, .social-links img:hover, .social-contact img:hover { opacity: 1; }

/* La lightbox reste sombre : indispensable pour les photos */
.lightbox { background: rgba(20, 19, 18, 0.94); }

/* Ajustement léger des boutons sur petits écrans, sans changer la grille */
@media (max-width: 600px) {
  .btn, .btn-outline, .cta, .cta-contact, .home-contact a {
    text-align: center;
  }
}