/* =================================
   VARIABLES
   ================================= */
:root{
  --primary-color:#dab267;
  --secondary-color:#e9d8c4;
  --text-color:#333;
  --light-text:#666;
  --white:#fff;
  --shadow-light:0 5px 15px rgba(0,0,0,.08);
  --shadow-medium:0 10px 30px rgba(0,0,0,.15);
  --transition-base:all .3s ease;
  --border-radius:15px;
}

/* =================================
   RESET & BASE
   ================================= */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Montserrat',sans-serif;
  background:var(--secondary-color);
  color:var(--text-color);
  line-height:1.6;
  text-align:center;
}
h1,h2{font-family:'Playfair Display',serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* =================================
   NAVIGATION
   ================================= */
.navbar{
  background:var(--white);
  box-shadow:var(--shadow-light);
  position:sticky;top:0;z-index:1000;
}
.nav-container{
  max-width:1200px;margin:0 auto;padding:0 20px;
  display:flex;justify-content:space-between;align-items:center;height:70px;
}
.nav-logo a{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700}
.nav-logo span{color:var(--primary-color)}
.nav-menu{display:flex;gap:30px;list-style:none}
.nav-link{
  color:var(--text-color);font-weight:500;padding:10px 15px;border-radius:25px;transition:var(--transition-base)
}
.nav-link:hover{background:var(--secondary-color);color:var(--primary-color)}
.nav-link.active{background:var(--primary-color);color:var(--white)}
.nav-toggle{
  display:none;flex-direction:column;gap:4px;cursor:pointer;background:none;border:0
}
.nav-toggle .bar{
  width:25px;height:3px;background:var(--text-color);border-radius:3px;transition:var(--transition-base)
}

/* Centrage vertical des items */
.nav-menu{ display:flex; gap:30px; list-style:none; align-items:center; }

/* Bouton CTA sable permanent (même gabarit que .nav-link.active) */
.nav-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 15px; border-radius:25px; font-weight:600;
  background:var(--primary-color); color:#fff !important;
  box-shadow: var(--shadow-light);
  transition: var(--transition-base);
}
.nav-cta:hover, .nav-cta:focus{
  filter: brightness(.96); color:#fff !important;
}

/* Spécifique Instagram (icône blanche, taille cohérente) */
.nav-ig i{ color:#fff; font-size:1rem; line-height:1; }

/* Option si tu veux une pastille ronde pour l’icône seule
.nav-ig{ width:40px; height:40px; padding:0; border-radius:999px; }
*/

/* =================================
   HEADER
   ================================= */
/* Header par défaut (toutes les pages) */
header{
  background: linear-gradient(135deg, var(--primary-color) 0%, #e9d8c4 100%);
  color: var(--white);
  padding: 80px 10px 60px;
  margin-bottom: 50px;
}
.logo-container{position:relative;display:inline-block}
header h1{
  font-size:4rem;
  margin:0;
  color:var(--text-color);
  font-weight:300;
  position:relative;
  z-index:2;
  line-height:1.1;
  letter-spacing:.02em;
}
header h1 span{
  font-size:5rem;
  font-weight:700;
  color:var(--primary-color);
  line-height:1;
}
.slogan{
  font-size:1.3rem;
  max-width:600px;
  margin:30px auto 0;
  font-weight:300;
}

/* Variante UNIQUEMENT pour la home (index.php) :
   on cible le header immédiatement suivi de .intro-section */
header:has(+ .intro-section){
  /* Fond sable comme sur la maquette */
  background: var(--sand);
  color: inherit;
}

/* Couleurs du texte pour la home (comme le visuel) */
header:has(+ .intro-section) h1{ color: var(--text); }
header:has(+ .intro-section) h1 span{ color: var(--gold); }
header:has(+ .intro-section) .slogan{ color: var(--muted); }

/* Responsive inchangé */
@media (max-width:768px){
  header h1{font-size:3rem}
  header h1 span{font-size:4rem}
}


/* =================================
   INTRO
   ================================= */
.intro-section{padding:60px 20px;background:var(--white);margin:40px 0}
.intro-section h2{font-size:2.5rem;color:var(--primary-color);margin-bottom:30px}
.intro-section p{font-size:1.1rem;max-width:800px;margin:0 auto 20px;line-height:1.8}

/* =================================
   AVANT/APRÈS
   ================================= */
.avant-apres{padding:60px 20px}
.avant-apres h2{margin:0 0 30px;color:var(--primary-color);font-size:2.5rem}
.comparison-container{
  max-width:800px;width:100%;aspect-ratio:16/9;margin:0 auto 50px;border-radius:8px;
  overflow:hidden;position:relative;box-shadow:var(--shadow-medium)
}
.comparison{position:relative;width:100%;height:100%;overflow:hidden}
.comparison-before,.comparison-after{position:absolute;inset:0}
.comparison-before{z-index:2;overflow:hidden;transition:clip-path .15s}
.comparison-after{z-index:0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.comparison-before img,.comparison-after img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover
}
.comparison-slider{position:absolute;inset:0;pointer-events:none;z-index:10}
.comparison-slider::before{
  content:'';position:absolute;top:0;left:var(--slider-position,50%);width:4px;height:100%;
  background:var(--white);transform:translateX(-50%);z-index:10
}
.comparison-slider-button{
  position:absolute;bottom:20px;left:50%;width:40px;height:40px;background:var(--primary-color);
  border-radius:50%;border:3px solid var(--white);box-shadow:0 0 0 5px rgba(218,178,103,.3);
  cursor:pointer;z-index:11;pointer-events:auto
}

/* =================================
   BOUTONS/CTA
   ================================= */
.button{
  display:inline-block;background:var(--primary-color);color:#fff;padding:12px 24px;border-radius:25px;font-weight:600;
  transition:var(--transition-base)
}
.button:hover{transform:translateY(-2px);box-shadow:var(--shadow-light)}
.cta{text-align: center;
  padding: 60px 20px;}

/* =================================
   FOOTER
   ================================= */
footer{padding:20px;color:var(--light-text)}

/* =================================
   RESPONSIVE
   ================================= */
@media (max-width:768px){
  .nav-menu{
    position:fixed;left:-100%;top:70px;flex-direction:column;background:var(--white);width:100%;
    text-align:center;transition:.3s;box-shadow:var(--shadow-light);padding:20px 0;gap:0
  }
  .nav-menu.active{left:0}
  .nav-link{padding:15px 20px;margin:5px 20px;border-radius:8px}
  .nav-toggle{display:flex}
  .nav-toggle.active .bar:nth-child(2){opacity:0}
  .nav-toggle.active .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.active .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  header h1{font-size:3rem}
  header h1 span{font-size:4rem}
  .avant-apres h2{font-size:2rem}
  .comparison-container{aspect-ratio:4/3;margin-bottom:30px}
}
@media (max-width:500px){
  .button{padding:12px 22px;font-size:.95rem}
}

/* === Prestations (grille & cartes) === */
.prestations-section { padding: 60px 20px; margin: 40px 0; }
.prestations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  align-items: stretch;
}
.prestation-card {
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
  padding: 25px 22px;
  text-align: left;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.prestation-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); }
.prestation-card.featured { border: 2px solid var(--primary-color); }
.prestation-icon {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--secondary-color); color: var(--primary-color);
  display: grid; place-items: center; font-size: 1.2rem; margin-bottom: 14px;
}
.prestation-card h3 { margin: 6px 0 10px; font-family: 'Playfair Display', serif; }
.prestation-card p { color: var(--light-text); margin-bottom: 12px; }
.prestation-details { margin: 10px 0 16px 18px; color: var(--text-color); }
.prestation-details li { margin: 6px 0; }
.prestation-price {
  display: inline-block; margin-top: 6px; font-weight: 600;
  background: var(--secondary-color); color: var(--text-color);
  padding: 8px 14px; border-radius: 999px;
}
.popular-badge {
  position: absolute; top: 16px; right: 16px;
  background: var(--primary-color); color: #fff; padding: 6px 10px;
  border-radius: 999px; font-size: .85rem; font-weight: 600;
}

/* === Galerie 3D (aperçu) === */
.gallery-3d .gallery-preview {
  position: relative; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-light); margin-bottom: 14px;
}
.gallery-3d .preview-image { width: 100%; height: auto; display: block; }
.gallery-3d .gallery-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 100%);
  color: #fff; opacity: 0; transition: opacity .25s ease;
}
.gallery-3d .gallery-preview:hover .gallery-overlay { opacity: 1; }
.gallery-3d .gallery-count { background: rgba(0,0,0,.5); padding: 6px 10px; border-radius: 999px; font-size: .9rem; }
.view-gallery-btn {
  border: none; cursor: pointer; background: var(--primary-color); color: #fff;
  padding: 10px 16px; border-radius: 999px; font-weight: 600; box-shadow: var(--shadow-light);
}
.view-gallery-btn:hover { filter: brightness(.95); }

/* === Modale Galerie 3D === */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 2000;
}
.modal-backdrop.show { display: flex; }
.modal-content {
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-heavy);
  width: min(100%, 900px); max-height: 90vh; position: relative; padding: 16px;
  display: grid; grid-template-rows: 1fr auto; gap: 10px;
}
.modal-close {
  position: absolute; top: 10px; right: 10px; border: none; background: transparent;
  font-size: 1.2rem; cursor: pointer; color: var(--text-color);
}
.modal-figure { margin: 0; }
.modal-figure img { width: 100%; height: auto; display: block; border-radius: 10px; }
.modal-figure figcaption { margin-top: 8px; }
.gallery-navigation {
  display: flex; justify-content: center; gap: 10px; margin-top: 6px;
}
.nav-btn {
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; background: var(--secondary-color); color: var(--text-color);
  transition: transform .15s ease, background .15s ease;
}
.nav-btn:hover { background: var(--primary-color); color: #fff; transform: scale(1.05); }

/* === Responsive ajustements === */
@media (max-width: 768px) {
  .prestations-grid { grid-template-columns: 1fr; }
  .modal-content { width: 95%; }
}
/* === Footer sombre global === */
.site-footer {
  background: #333333; /* ou rgba(51,51,51,1) */
  color: #f2f2f2;
  padding: 32px 20px;
  margin-top: 40px;
}
.site-footer .footer-inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 20px;
  align-items: center;
}
.site-footer a { color: #ffffff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .footer-logo {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .5px;
}
.site-footer .footer-logo span { color: #ffffff; opacity: .85; }
.site-footer .footer-copy { margin: 6px 0 0; color: #e0e0e0; font-size: .95rem; }
.site-footer .footer-links {
  display: flex; gap: 16px; flex-wrap: wrap; justify-self: center;
}
.site-footer .social-links { display: flex; gap: 12px; justify-self: end; }
.site-footer .social-links i { font-size: 1.1rem; color: #ffffff; opacity: .9; }
.site-footer .social-links a:hover i { opacity: 1; transform: translateY(-1px); transition: .15s; }
@media (max-width: 900px) {
  .site-footer .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .site-footer .footer-links, .site-footer .social-links { justify-self: center; }
}

/* === Header de page (aligné sur ton CSS de base) === */
.page-header {
  padding: 70px 20px 50px;
  background: var(--secondary-color, #f7f7f7);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.page-header .container { max-width: 1100px; margin: 0 auto; }
.page-header h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 8px;
  color: var(--text-color, #222);
}
.page-header p {
  margin: 0;
  color: var(--light-text, #666);
  font-size: 1.05rem;
}

/* === Prestations (déjà fourni) — garde ce que je t’ai donné précédemment === */
/* ... */

/* === Section "Comment ça fonctionne" harmonisée === */
.process-section {
  padding: 60px 20px;
  background: var(--section-bg, #fafafa);
}
.process-section .container { max-width: 1100px; margin: 0 auto; }
.process-section h2 {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3.2vw, 34px);
  margin-bottom: 26px;
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.step {
  background: #fff;
  border-radius: var(--border-radius, 12px);
  box-shadow: var(--shadow-light, 0 6px 18px rgba(0,0,0,.06));
  padding: 18px 16px;
  text-align: left;
  position: relative;
  border: 1px solid rgba(0,0,0,.06);
}
.step-number {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary-color, #c7a27a);
  color: #fff; display: grid; place-items: center;
  font-weight: 700; margin-bottom: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
.step h3 { margin: 6px 0 6px; font-weight: 600; font-size: 1.05rem; }
.step p { margin: 0; color: var(--light-text, #666); font-size: .98rem; line-height: 1.5; }
.step:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium, 0 10px 22px rgba(0,0,0,.08)); transition: .2s; }

/* Responsive */
@media (max-width: 980px) { .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .process-steps { grid-template-columns: 1fr; } }

/* === Fond global sable + variables === */
:root {
  --sand-bg: #e9d8c4;
  --text-color: #222;
  --light-text: #666;
  --primary-color: #c7a27a; /* ajuste si ta charte diffère */
}

html, body {
  background: var(--sand-bg);
  color: var(--text-color);
}

/* Header de page aligné au fond (au lieu de blanc) */
.page-header {
  background: var(--sand-bg);
  border-bottom: 1px solid rgba(0,0,0,.07);
}

/* Laisse le fond sable “respirer” sous les sections génériques */
section, .section {
  background: transparent;
}

/* Les blocs de contenu restent lisibles (cartes, steps, etc.) */
.prestation-card,
.step,
.card,
.block-white {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}

/* CTA si tu la veux sable aussi (sinon commente cette ligne) */
.cta { background: transparent; }

/* Navbar: texte sombre sur fond sable (ajuste si ta navbar est déjà stylée) */
.navbar { background: transparent; }
.navbar .nav-link,
.navbar .nav-logo a { color: var(--text-color); }
.navbar .nav-link.active { opacity: .85; }

/* Footer noir (rappel) */
.site-footer {
  background: #333333; /* rgba(51,51,51,1) */
  color: #f2f2f2;
}
.site-footer a { color: #fff; }


/* === Fond global sable === */
:root{
  --sand-bg:#e9d8c4;
  --gold-1:#d9b574;   /* or #d6b06a si tu veux plus chaud */
  --gold-2:#e2c48f;
  --gold-3:#e8d3b0;
  --text-color:#222;
  --light-text:#666;
  --primary-color:#dab267;
}

html, body{ background:var(--sand-bg); color:var(--text-color); }

/* === Navbar blanche, fixe/relative selon ton thème === */
.navbar{
  background:#ffffff;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  position:sticky; top:0; z-index:1000;  /* retire sticky si tu n’en veux pas */
}
.navbar .nav-link,
.navbar .nav-logo a{ color:#222; }

/* Pastille active type “pill” sur la nav (cf. ton screenshot) */
.navbar .nav-link.active{
  background-color: var(--primary-color);
  color: var(--white);
  padding:10px 15px;
  border-radius:25px;
}

/* === Header avec dégradé doré === */
.page-header{
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2) 45%, var(--gold-3));
  color:#222; /* titres sombres pour contraster comme sur ton visuel */
  padding:64px 0 72px;
  text-align:center;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), 0 4px 18px rgba(0,0,0,.06);
}
.page-header h1{
  font-family:"Playfair Display", serif;
  font-weight:700;
  font-size:2.2rem;
  margin:0 0 10px;
}
.page-header p{
  color:#5a5a5a;
  margin:0;
}

/* === Sections: laissent apparaître le fond sable === */
section, .section{ background:transparent; }

/* Cartes/blocs conservés en blanc pour le contraste */
.prestation-card, .step, .card{
  background:#fff;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* Process steps harmonisés */
.process-section{ padding:40px 0; }
.process-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.step{ padding:18px; }
.step-number{
  width:36px; height:36px; border-radius:50%;
  background:var(--primary-color); color:#fff;
  display:grid; place-items:center; font-weight:700; margin-bottom:10px;
}
@media (max-width:980px){ .process-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:580px){ .process-steps{ grid-template-columns:1fr; } }

/* === Footer noir global === */
.site-footer{
  background:#333333; color:#f2f2f2;
}
.site-footer a{ color:#ffffff; }

.alert{ padding:12px 16px; border-radius:6px; margin:16px 0; }
.alert.success{ background:#e6f6ea; color:#0b7a3b; border:1px solid #bfe8cb; }
.alert.error{ background:#fdeaea; color:#a11515; border:1px solid #f3c1c1; }
.contact-page-section .form-row{ display:flex; gap:18px; flex-wrap:wrap; }
.contact-page-section .form-group{ flex:1 1 240px; }
.contact-page-section input, .contact-page-section textarea{
  width:100%; padding:10px 12px; border:1px solid rgba(0,0,0,.15); border-radius:6px; background:#fff;
}
:root{
  --sand:#e9d8c4;       /* fond page */
  --gold:#d9a441;       /* bouton / accents */
  --gold-dark:#c28f2f;
  --text:#38342e;
  --muted:#6b655b;
  --card-bg:#ffffff;
  --border:#e6e6e6;
  --focus:#b3d4fc;
  --shadow:0 10px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
  --radius:16px;
  --radius-sm:12px;
}
body{ background:var(--sand); color:var(--text); }

/* Grille */
.contact-grid{
  display:grid;
  grid-template-columns: 1.35fr .9fr;
  gap:28px;
  align-items:start;
}
@media (max-width: 960px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Cartes */
.card{
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 28px;
}
.form-card{ padding:34px 34px; }
.card-title{
  font-family:"Playfair Display", serif;
  font-weight:700;
  font-size:1.4rem;
  color:var(--gold-dark);
  text-align:left;
  margin:4px 0 18px;
}

/* Formulaire */
.form-row{ display:flex; gap:18px; }
.form-row.two > .form-group{ flex:1 1 50%; }
.form-row.one > .form-group{ flex:1 1 100%; }
@media (max-width:640px){
  .form-row{ flex-direction:column; gap:14px; }
}
.form-group label{
  display:block; font-weight:600; color:var(--muted);
  margin:8px 0 6px;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-group select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%); background-position:calc(100% - 22px) 18px, calc(100% - 16px) 18px; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(51, 132, 222, .2);
}
.form-group textarea{ resize:vertical; }

/* Bouton */
.button{
  display:inline-block; border:none; cursor:pointer; font-weight:600;
  padding:12px 18px; border-radius:999px; text-decoration:none;
}
.button-gold{
  background:var(--gold); color:#fff; box-shadow:0 8px 18px rgba(217,164,65,.35);
}
.button-gold:hover{ background:var(--gold-dark); }

/* Actions */
.form-actions{ margin-top:10px; display:flex; justify-content:flex-start; }
.form-actions .button{ min-width:240px; }

/* Carte infos */
.info-card{ padding:34px 28px; }
.info-list{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.info-item{ display:flex; gap:14px; align-items:flex-start; }
.info-ico{
  width:28px; height:28px; border-radius:999px; display:inline-grid; place-items:center;
  color:var(--gold-dark); background:rgba(217,164,65,.15); flex:0 0 28px; margin-top:4px;
}
.info-item h3{ font-size:.95rem; margin:0 0 4px; color:#37322b; }
.info-item p{ margin:0; color:var(--muted); }
.info-item a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.08); }
.info-item a:hover{ border-color:var(--gold); }

/* Honeypot (caché) */
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
/* ===== HEADER (version corrigée avec tes variables) ===== */

/* Style par défaut – on garde tel quel s'il existe déjà
   (si tu as déjà un bloc header{...}, laisse-le) */

/* Variante UNIQUEMENT pour index.php :
   le header immédiatement suivi de .intro-section */
header:has(+ .intro-section){
  background: var(--secondary-color); /* fond sable */
  color: inherit;
}

/* HOME en foncé */
header:has(+ .intro-section) h1{
  color: var(--text-color);
  font-weight: 300;      /* comme ton style actuel */
  line-height: 1.1;
  letter-spacing: .02em;
}

/* “by GWEN” en doré (ta primaire) */
header:has(+ .intro-section) h1 span{
  color: var(--primary-color);
  font-weight: 700;
}

/* Slogan en gris doux */
header:has(+ .intro-section) .slogan{
  color: var(--light-text);
  opacity: 1;
}

/* Responsive (si tu l’as déjà, garde le tien) */
@media (max-width:768px){
  header h1{font-size:3rem}
  header h1 span{font-size:4rem}
}
/* Header de la home (via $headerClass = 'hero--home') */
header.hero--home{ background:var(--secondary-color); }
header.hero--home h1{ color:var(--text-color); font-weight:300; line-height:1.1; letter-spacing:.02em; }
header.hero--home h1 span{ color:var(--primary-color); font-weight:700; } /* "by GWEN" en doré */
header.hero--home .slogan{ color:var(--light-text); }

/* Le layout de page occupe toute la hauteur */
html, body {
  min-height: 100%;
  height: 100%;
}

/* Disposition verticale: header/nav + contenu + footer */
body {
  display: flex;
  flex-direction: column;
}

/* Le footer se colle au bas quand le contenu est trop court */
.site-footer {
  margin-top: auto;
}
/* Cadre portrait pour le slider */
.slider-frame,
.comparison {
  aspect-ratio: 2 / 3;   /* portrait: hauteur > largeur */
  max-height: 90vh;
  width: 100%;
  overflow: hidden;
}
.slider-frame img,
.comparison img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ou contain si tu veux tout voir */
  object-position: 50% 50%;
}