/* ============================================================
   luxe.css : le style clair de l'accueil, appliqué aux autres pages.

   L'accueil sur téléphone a été refait sur le modèle des maisons de luxe
   (Aman, Rosewood, Belmond, Peninsula) : fond crème, titres en sérif fins,
   étiquettes en petites capitales espacées, boutons noirs plats. Les autres
   pages restaient sombres et dorées. Ce fichier les aligne sans toucher
   à leur contenu.

   Méthode : les pages utilisent les variables de style.css. Dans <main>, on
   inverse ces variables (le « noir » devient le crème, le « crème » devient
   l'encre). Les ouvertures en photo ou en vidéo gardent la palette sombre
   d'origine : un texte clair sur une image, comme l'ouverture de l'accueil.
   ============================================================ */

body.luxe { background: #f1ebe1; }

body.luxe main {
  --black:      #f1ebe1;
  --black-warm: #efe9df;
  --black-mid:  #e8e1d5;
  --black-soft: #e1d9cb;
  --cream:      #0a0907;
  --cream-dim:  rgba(10,9,7,.66);
  --cream-faint:rgba(10,9,7,.16);
  --gold:       #6b5329;
  --gold-light: #6b5329;
  --gold-dark:  #4f3d1e;
  --gold-faint: rgba(107,83,41,.08);
  --line:       rgba(10,9,7,.12);
  --line-soft:  rgba(10,9,7,.08);
  background: #f1ebe1; color: #0a0907;
}

/* Ouvertures en image : palette sombre d'origine. */
body.luxe main .hero,
body.luxe main .sv-hero,
body.luxe main .sv-quote {
  --black:      #0a0907;
  --black-warm: #100f0c;
  --black-mid:  #161410;
  --black-soft: #1c1a15;
  --cream:      #ede8df;
  --cream-dim:  rgba(237,232,223,.72);
  --cream-faint:rgba(237,232,223,.18);
  --gold:       #d4b07a;
  --gold-light: #d4b07a;
  --gold-dark:  #b8955a;
  --line:       rgba(237,232,223,.2);
  --line-soft:  rgba(237,232,223,.08);
  color: var(--cream);
}

/* Une section sur deux sur un crème un peu plus soutenu, comme l'accueil. */
body.luxe main > section:not(.hero):not(.sv-hero):not(.sv-quote):nth-of-type(odd) { background: #efe9df; }
body.luxe main > section:not(.hero):not(.sv-hero):not(.sv-quote):nth-of-type(even) { background: #f1ebe1; }

/* Titres : sérif fin, sans or plein. L'italique garde un brun discret. */
body.luxe main h1 em, body.luxe main h2 em, body.luxe main h3 em { color: inherit; }

/* Boutons : noirs et plats, petites capitales espacées (boutons de l'accueil). */
body.luxe main .btn-gold {
  background: #0a0907 !important; color: #f1ebe1 !important; border-color: #0a0907 !important;
  border-radius: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
body.luxe main .btn-outline,
body.luxe main .btn-ghost {
  background: transparent !important; color: #0a0907 !important; border-color: rgba(10,9,7,.35) !important;
  border-radius: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
body.luxe main .hero .btn-gold,
body.luxe main .sv-hero .btn-gold,
body.luxe main .sv-quote .btn-gold {
  background: #f1ebe1 !important; color: #0a0907 !important; border-color: #f1ebe1 !important;
}

/* En-tête clair une fois l'ouverture passée (même règle que l'accueil). */
/* En-tête noir sur le site clair (retour du 05/11) : il encadre la page
   avec le pied de page, noir lui aussi. */
body.luxe header.scrolled { background: rgba(10,9,7,.96) !important; border-bottom-color: rgba(212,176,122,.2) !important; }
body.luxe header.scrolled .hamburger:not(.open) span { background: #f3eee6; }
body.luxe header.scrolled .lang-btn { color: rgba(243,238,230,.7); }
body.luxe header.scrolled .lang-btn.active { color: #d4b07a; }
body.luxe header.scrolled nav a { color: rgba(243,238,230,.72); }
body.luxe header.scrolled nav a.active, body.luxe header.scrolled nav a:hover { color: #f3eee6; }
body.luxe header.scrolled .nav-cta { color: #d4b07a !important; border-color: rgba(212,176,122,.5) !important; }

/* Pages sans ouverture en image (contact, pages légales, 404) : l'en-tête
   est clair dès le haut de la page. */
body.luxe.luxe-clair header { background: rgba(10,9,7,.96) !important; border-bottom-color: rgba(212,176,122,.2) !important; }
body.luxe.luxe-clair header .hamburger:not(.open) span { background: #f3eee6; }
body.luxe.luxe-clair header .lang-btn { color: rgba(243,238,230,.7); }
body.luxe.luxe-clair header .lang-btn.active { color: #d4b07a; }
body.luxe.luxe-clair header nav a { color: rgba(243,238,230,.72); }
body.luxe.luxe-clair header nav a.active, body.luxe.luxe-clair header nav a:hover { color: #f3eee6; }
body.luxe.luxe-clair header .nav-cta { color: #d4b07a !important; border-color: rgba(212,176,122,.5) !important; }


/* Textes courants de style.css écrits en crème fixe : encre sur fond clair,
   crème d'origine dans les zones sombres. */
body.luxe main .lede { color: #2b2823; }
body.luxe main .body-text { color: #4a463f; }
body.luxe main .eyebrow, body.luxe main .section-label { color: #6b5329; }
body.luxe main .hero .lede,
body.luxe main .sv-hero .lede,
body.luxe main .sv-quote .lede { color: rgba(237,232,223,.86); }
body.luxe main .hero .body-text,
body.luxe main .sv-hero .body-text,
body.luxe main .sv-quote .body-text { color: rgba(237,232,223,.72); }
body.luxe main .hero .eyebrow,
body.luxe main .sv-hero .eyebrow,
body.luxe main .sv-quote .eyebrow,
body.luxe main .hero .section-label,
body.luxe main .sv-hero .section-label,
body.luxe main .sv-quote .section-label { color: rgba(237,232,223,.72); }

/* Contact et pages légales : un seul bloc de texte, sans bandes de couleur. */
body.luxe.luxe-clair main > section { background: transparent !important; }
body.luxe .ct-infos { color: #2b2823; }

/* ── Services : les six métiers, comme les métiers de l'accueil ──
   Une grande photo, une étiquette, un titre en sérif, trois lignes, puis
   un lien souligné. L'ancien accordéon sombre est remplacé. */
.sv-liste { padding: 96px var(--pad-h); background: #f1ebe1 !important; }
.sv-univers { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; }
.sv-univers > li { text-align: center; }
.sv-univers > li + li { margin-top: 88px; }
.sv-univers img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; background: #d9d2c5; margin-bottom: 22px;
}
.sv-univers .eyebrow { display: block; font-size: 10px; letter-spacing: .24em; }
.sv-u-titre {
  font-family: var(--font-serif); font-weight: 300; font-size: 28px; line-height: 1.15;
  color: #0a0907; margin: 10px 0 12px;
}
.sv-u-titre em { font-style: italic; }
.sv-univers .body-text { margin: 0 auto; max-width: 34ch; }
.sv-u-points {
  list-style: none; margin: 18px auto 0; padding: 0; max-width: 34ch;
  font-family: var(--font-serif); font-size: 17px; line-height: 1.6; color: #4a463f;
}
.sv-u-points li + li { margin-top: 2px; }
.sv-u-lien {
  display: inline-block; margin-top: 22px; padding: 10px 0;
  font-family: var(--font-label); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: #0a0907; text-decoration: none; border-bottom: 1px solid currentColor;
}

/* Ordinateur : photo et texte côte à côte, en alternance. */
@media (min-width: 1024px) {
  .sv-liste { padding: 140px var(--pad-h); }
  .sv-univers > li {
    display: grid; grid-template-columns: 1.4fr 1fr; column-gap: 80px; align-items: center; text-align: left;
  }
  .sv-univers > li + li { margin-top: 120px; }
  .sv-univers > li > img { grid-row: 1 / span 6; max-height: 88vh; margin: 0; }
  .sv-univers > li:nth-child(even) { grid-template-columns: 1fr 1.4fr; }
  .sv-univers > li:nth-child(even) > img { grid-column: 2; }
  .sv-univers > li:nth-child(even) > :not(img) { grid-column: 1; }
  .sv-univers .body-text, .sv-u-points { margin-left: 0; }
  .sv-u-titre { font-size: 38px; }
  .sv-univers > li > .eyebrow { align-self: end; }
  .sv-univers > li > .sv-u-lien { justify-self: start; align-self: start; }
}

/* ── Collaborateurs : les trente photos en mosaïque, comme « En coulisses »
   sur l'accueil. Une grande photo et deux petites à côté, puis en miroir.
   L'ancien collage (cadres posés au hasard, en apesanteur) laissait de
   grands vides et des chevauchements. */
body.luxe .co-museum {
  display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 4px;
  grid-auto-flow: row dense; position: relative; height: auto !important; min-height: 0 !important;
  padding: 0 0 96px !important; margin: 0 auto; max-width: 1200px; background: transparent !important;
}
body.luxe .co-museum > .co-item {
  position: relative !important; inset: auto !important; top: auto !important; left: auto !important;
  width: auto !important; height: auto !important; margin: 0 !important;
  transform: none !important; opacity: 1 !important; animation: none !important;
  grid-column: span 2; aspect-ratio: 4 / 5; align-self: stretch !important;
}
body.luxe .co-museum > .co-item:nth-child(6n+1) { grid-column: 1 / span 4; grid-row: span 2; aspect-ratio: auto; }
body.luxe .co-museum > .co-item:nth-child(6n+4) { grid-column: 3 / span 4; grid-row: span 2; aspect-ratio: auto; }
body.luxe .co-museum .co-item-frame { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
body.luxe .co-museum .co-item-img { width: 100% !important; height: 100% !important; object-fit: cover; background: #e1d9cb; }
@media (min-width: 1024px) {
  body.luxe .co-museum { gap: 10px; max-width: 1320px; padding: 0 var(--pad-h) 140px !important; }
}
.sv-univers > li { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Services, ordinateur : le texte d'ouverture passe à droite, sur le ciel,
   et la façade reste dégagée à gauche. Un voile léger part de la droite
   pour garder le texte lisible sur les nuages. */
@media (min-width: 1024px) {
  body.luxe .sv-hero-center {
    justify-self: end; align-items: flex-end; text-align: right;
    max-width: 560px;
  }
  body.luxe .sv-hero-title { white-space: nowrap; }
  body.luxe .sv-hero-chapo { max-width: 24ch; }
  body.luxe .sv-hero-lien::after { transform-origin: right; }
  body.luxe .sv-hero-voile {
    background:
      linear-gradient(270deg, rgba(10,9,7,.55) 0%, rgba(10,9,7,.28) 38%, rgba(10,9,7,0) 62%),
      linear-gradient(180deg, rgba(10,9,7,0) 0%, rgba(10,9,7,0) 50%, rgba(10,9,7,.35) 100%);
  }
}
/* Ordinateur : la couleur de la pierre de la façade (#d5c09d, mesurée sur
   la photo) reprend l'étiquette, l'italique du titre et le filet du lien.
   Sur téléphone le texte est posé sur la façade : il reste crème. */
@media (min-width: 1024px) {
  body.luxe .sv-hero-eyebrow, body.luxe .sv-hero-title em { color: #d5c09d !important; }
  body.luxe .sv-hero-lien::after { background: #d5c09d; }
}

/* Citation de Services : le filet et la signature prennent la couleur des
   feux et du liseré du jet sur la photo (#d4c5a8, mesurée). */
body.luxe .sv-quote-rule { background: #d4c5a8 !important; opacity: 1 !important; }
body.luxe .sv-quote-attr { color: #d4c5a8 !important; }

/* Services, téléphone : le texte est posé sur la façade. On assombrit le bas
   de la photo pour que le texte repose sur une zone calme. */
@media (max-width: 1023px) {
  body.luxe .sv-hero-voile {
    background: linear-gradient(180deg, rgba(10,9,7,0) 0%, rgba(10,9,7,0) 22%,
      rgba(10,9,7,.5) 40%, rgba(10,9,7,.78) 70%, rgba(10,9,7,.9) 100%);
  }
}
/* La citation remonte dans le ciel de nuit, au-dessus du jet. */
body.luxe .sv-quote { align-items: flex-start !important; }

/* Collaborateurs : l'ouverture prenait tout l'écran pour un texte seul,
   les deux tiers restaient vides (signalé par Mohamed). Elle se resserre
   comme celle de Contact, et les photos arrivent tout de suite dessous. */
body.luxe .co-hero {
  min-height: 0 !important; display: block !important;
  padding: calc(var(--header-h) + 56px) var(--pad-h) 40px !important;
}
body.luxe .co-musee-entete { padding-top: 0 !important; padding-bottom: 32px !important; }
@media (min-width: 1024px) {
  body.luxe .co-hero { padding: calc(var(--header-h) + 88px) var(--pad-h) 56px !important; }
  body.luxe .co-hero-contenu { max-width: 1320px !important; margin: 0 auto;
    display: grid !important; grid-template-columns: 1.2fr 1fr; column-gap: 80px; align-items: end; }
  body.luxe .co-hero-contenu::before { grid-column: 1 / -1; }
  body.luxe .co-hero-contenu > .co-hero-eyebrow, body.luxe .co-hero-contenu > .co-hero-title { grid-column: 1; }
  body.luxe .co-hero-contenu > .co-hero-sub, body.luxe .co-hero-contenu > .co-hero-lien { grid-column: 2; }
  body.luxe .co-hero-contenu > .co-hero-sub { grid-row: 3; align-self: end; }
  body.luxe .co-hero-contenu > .co-hero-lien { grid-row: 4; justify-self: start; }
  body.luxe .co-musee-entete { max-width: 1320px; margin: 0 auto; }
}

/* Services, écrans de 1024 à 1365 px (portables, iPad en paysage) : la photo
   glisse vers la droite pour que la façade dégage le ciel, et le titre se
   resserre. Sinon « Du tarmac » mord sur le toit. */
@media (min-width: 1024px) {
  body.luxe .sv-hero-img { object-position: 100% 50% !important; }
  body.luxe .sv-hero-title { font-size: clamp(44px, 4.2vw, 80px) !important; }
}

/* Lisibilité sur fond clair (retour de Mohamed : « le blanc fait mal aux
   yeux, le texte n'est pas très lisible »). Le fond passe d'un crème
   presque blanc (#f6f2ec) à un crème plus chaud (#f1ebe1), moins
   éblouissant. Le texte courant passe du Cormorant 400 en 17 px, trop fin,
   au 500 en 18,5 px, plus foncé. Le chapô passe de 300 à 400. */
body.luxe main .body-text { font-weight: 500; font-size: 18.5px; line-height: 1.65; color: #3a362f; }
body.luxe main .lede { font-weight: 400; color: #23201b; }
body.luxe main .hero .body-text, body.luxe main .sv-hero .body-text, body.luxe main .sv-quote .body-text { color: rgba(237,232,223,.8); }

/* Logo sur l'en-tête clair (pages claires, ou après défilement) : l'or vif
   du PNG disparaissait sur le crème. Il passe en or bronze foncé, la même
   teinte que les étiquettes (#6b5329). */
body.luxe header.scrolled .logo-img,
body.luxe.luxe-clair header .logo-img { filter: none; }
/* En-tête transparent posé sur une photo claire (ciel de Services) : une
   ombre douce détache l'or du fond. */
body.luxe:not(.luxe-clair) header:not(.scrolled) .logo-img { filter: drop-shadow(0 1px 6px rgba(0,0,0,.45)); }
body.luxe header:has(.hamburger.open) .logo-img { filter: none; }

/* Téléphone : titres d'ouverture centrés, comme le nom sur l'accueil
   (Mohamed, 05/11/2026 : « centre le titre »). */
@media (max-width: 1023px) {
  body.luxe .hero__contenu, body.luxe .sv-hero-center, body.luxe .co-hero-contenu, body.luxe .ct-texte {
    text-align: center !important; margin-left: auto !important; margin-right: auto !important;
    align-items: center !important; justify-self: center !important;
  }
  body.luxe .hero__contenu > *, body.luxe .sv-hero-center > *, body.luxe .co-hero-contenu > *, body.luxe .ct-texte > * {
    margin-left: auto !important; margin-right: auto !important;
  }
  body.luxe .co-hero-contenu::before, body.luxe .hero__contenu::before { margin-left: auto !important; margin-right: auto !important; }
  body.luxe .ct-infos { justify-content: center; text-align: center; }
}