/* Feuille commune — julien-exhalessence.be
   Identité de la maquette validée : noir, or, crème, empattements Georgia.
   Aucune police ni ressource externe.
   Les images restent entières : pas de filtre, pas de recadrage, pas de texte par-dessus. */

:root {
  --noir: #111111;
  --noir-2: #1b1b1b;
  --or: #c9a24a;
  --or-survol: #d8b45e;
  /* Or assombri pour le texte sur fond clair. #c9a24a sur crème est à 2,17:1 ;
     #6f5420 atteint 6,4:1 sur #f7f3ea et 7,1:1 sur blanc. */
  --or-texte: #6f5420;
  --creme: #f7f3ea;
  --cadre-creme: #ece6da;
  --cadre-noir: #000000;
  --texte: #222222;
  --gris: #5c5c5c;
  --blanc: #ffffff;
  --erreur: #8a1c1c;
  --rayon: 14px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --largeur: 1160px;
  --menu: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--creme);
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  filter: none;
  object-fit: contain;
}

a { color: var(--or-texte); }

a:hover { color: #543f16; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--or-texte);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--noir);
  margin: 0.2em 0 0.5em;
}

h1 { font-size: clamp(2rem, 6vw, 3.4rem); }

h2 { font-size: clamp(1.6rem, 4.5vw, 2.3rem); }

h3 { font-size: 1.35rem; }

p { margin: 0 0 1rem; }

.wrap {
  width: min(var(--largeur), 92%);
  margin-inline: auto;
}

.chapo {
  font-size: 1.12rem;
  color: var(--gris);
  max-width: 62ch;
}

.etiquette {
  display: inline-block;
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--or-texte);
}

.filet-or {
  width: 70px;
  height: 2px;
  margin: 0.6rem 0 1.2rem;
  background: var(--or);
  border: 0;
}

.fil {
  padding: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--gris);
}

.fil a { color: var(--gris); }

main a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Lien d'évitement : caché tant qu'il n'a pas le focus clavier. */
.evitement {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.evitement:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 80;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  overflow: visible;
  padding: 0.6rem 1rem;
  background: var(--blanc);
  color: var(--noir);
  border: 2px solid var(--noir);
  border-radius: 8px;
  text-decoration: none;
}

/* En-tête */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--noir);
  color: var(--blanc);
  border-bottom: 1px solid #2a2a2a;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0.7rem 0;
}

/* Logo et bouton Menu sur une ligne. Les liens passent dessous, centrés. */
.nav-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.nav-liens {
  flex-basis: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--blanc);
  font-family: var(--serif);
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  line-height: 1.1;
}

.logo span { color: var(--or); }

/* Pastille crème : le monogramme est noir. Le fichier n'est pas modifié,
   seulement réduit en hauteur. Pas de coins arrondis sur l'image. */
.logo .logo-ei {
  display: inline-flex;
  background: var(--creme);
  padding: 3px 4px;
  line-height: 0;
}

.logo .logo-ei img {
  width: auto;
  height: 32px;
  max-width: none;
  object-fit: contain;
  border-radius: 0;
  filter: none;
}

@media (max-width: 400px) {
  .logo { font-size: 1rem; gap: 0.4rem; }
  .logo .logo-ei img { height: 28px; }
}

header.site a:focus-visible,
header.site button:focus-visible,
footer.site a:focus-visible,
.section-sombre a:focus-visible,
.cta-bloc a:focus-visible {
  outline-color: #f0d48a;
}

/* Menu. Sous 1240 px : replié derrière le bouton si JavaScript pose .nav-js.
   Sans JavaScript, la liste reste affichée. */
.btn-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.45rem 0.85rem;
  border: 1px solid #555555;
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.btn-menu:hover {
  border-color: var(--or);
  color: var(--or);
}

.menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.1rem;
  margin: 0;
  padding: 0.2rem 0 0.8rem;
  list-style: none;
}


.menu a {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0;
  color: #eeeeee;
  font-size: 1.05rem;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.menu a:hover,
.menu a[aria-current="page"] { color: var(--or); }

.menu a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Le bouton a déjà un fond or : la page courante et le survol gardent le texte noir.
   .menu a:hover est plus spécifique que .btn:hover et passerait le texte en or. */
.menu a.btn:hover,
.menu a.btn:focus-visible,
.menu a.btn[aria-current="page"] { color: var(--noir); }

.menu .btn {
  color: var(--noir);
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

@media (max-width: 1239px) {
  .nav-liens { flex-basis: 100%; }
  .menu { flex-basis: 100%; }

  /* Le bandeau Klaro est à 999 : le menu ouvert et son bouton passent au-dessus. */
  header.site:has(#menu-principal.ouvert) {
    z-index: 1000;
  }

  .menu a {
    width: 100%;
    min-height: 44px;
    min-width: 44px;
  }

  html.nav-js .menu { display: none; }

  html.nav-js .menu.ouvert {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 60;
    max-height: calc(100vh - 4.5rem);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    padding: 0.35rem 6% 1.15rem;
    background: var(--noir);
    border-bottom: 1px solid #333333;
  }

  .menu .btn {
    width: 100%;
    margin-top: 0.45rem;
  }
}

@media (min-width: 1240px) {
  .btn-menu { display: none; }

  /* Le logo est un peu plus grand. Le menu complet et le bouton
     tiennent sur une ligne centrée en dessous ; ils passent à la
     ligne seulement si la largeur ne suffit plus. */
  header.site .wrap.nav {
    width: min(1480px, calc(100% - 1.5rem));
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem 0 0.2rem;
  }

  header.site .logo {
    font-size: 1.6rem;
  }

  header.site .logo .logo-ei img {
    height: 36px;
  }

  .nav-barre {
    width: auto;
    justify-content: flex-start;
  }

  .nav-liens {
    flex-basis: auto;
    border-top: 1px solid #2a2a2a;
    margin-top: 0.55rem;
    padding: 0.05rem 0 0.1rem;
  }

  .menu,
  html.nav-js .menu,
  html.nav-js .menu.ouvert {
    display: flex;
    position: static;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 1.1rem;
    row-gap: 0.05rem;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
  }

  header.site .menu a {
    min-height: 44px;
    padding: 0.2rem 0;
    font-size: 1.0625rem;
    letter-spacing: 0;
  }

  header.site .menu .menu-contact {
    margin-inline-start: 0;
  }

  header.site .menu a.btn {
    width: auto;
    min-height: 44px;
    min-width: 44px;
    margin-top: 0;
    padding: 0.55rem 1rem;
    font-size: 1.0625rem;
  }
}

/* Boutons */
.btn {
  display: inline-block;
  padding: 0.8rem 1.3rem;
  border: 2px solid var(--or);
  border-radius: 999px;
  background: var(--or);
  color: var(--noir);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: var(--or-survol); color: var(--noir); }

.btn.contour {
  background: transparent;
  color: var(--or-texte);
  border-color: var(--or-texte);
}

.btn.contour:hover { background: rgba(111, 84, 32, 0.08); color: var(--or-texte); }

.btn.contour.sombre {
  color: var(--noir);
  border-color: var(--noir);
}

.btn.contour.sombre:hover { background: rgba(17, 17, 17, 0.06); color: var(--noir); }

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

/* Sections */
section { padding: 3.2rem 0; }

.section-blanche { background: var(--blanc); }

.section-sombre {
  background: var(--noir);
  color: #eeeeee;
}

.section-sombre h2,
.section-sombre h3 { color: var(--blanc); }

.section-sombre .btn.contour,
.cta-bloc .btn.contour {
  color: var(--or);
  border-color: var(--or);
}

.section-sombre .btn.contour:hover,
.cta-bloc .btn.contour:hover {
  background: rgba(201, 162, 74, 0.12);
  color: var(--or);
}

/* Grille */
.grille {
  display: grid;
  gap: 1.3rem;
}

@media (min-width: 640px) {
  .g2 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .g3 { grid-template-columns: repeat(3, 1fr); }
}

/* Cartes. L'image est en retrait : les coins de la carte ne la rognent pas. */
.carte {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  color: inherit;
  border-radius: var(--rayon);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  text-decoration: none;
}

.carte .corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.15rem 1.3rem;
}

.carte .corps p {
  margin: 0;
  color: var(--gris);
  font-size: 0.95rem;
}

.carte h3 { margin: 0; }

.carte.prestige,
.carte.elite,
.carte.sombre {
  background: #0c0c0c;
  color: #eeeeee;
  border: 1px solid #3a2f14;
}

.carte.prestige h3,
.carte.elite h3,
.carte.sombre h3,
.carte.prestige .etiquette,
.carte.elite .etiquette,
.carte.sombre .etiquette { color: var(--or); }

.carte.prestige p,
.carte.elite p,
.carte.sombre p { color: #bbbbbb; }

/* Visuels : cadre de 4 px, image entière. */
figure.visuel {
  margin: 0;
  padding: 0;
  background: none;
}

figure.visuel img,
.carte .visuel img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 440px;
  margin-inline: auto;
  padding: 4px;
  box-sizing: border-box;
  object-fit: contain;
  border-radius: 0;
  filter: none;
  opacity: 1;
  background: var(--cadre-creme);
}

.carte .visuel {
  margin: 10px 10px 0;
  text-align: center;
}

.carte.prestige .visuel img,
.carte.elite .visuel img,
.carte.sombre .visuel img,
.section-sombre figure.visuel img {
  background: var(--cadre-noir);
}

.cta-bloc {
  display: grid;
  gap: 1rem;
  padding: 1.6rem;
  background: var(--noir-2);
  color: #eeeeee;
  border: 1px solid #3a2f14;
  border-radius: var(--rayon);
}

.cta-bloc h2,
.cta-bloc h3 {
  margin: 0;
  color: var(--blanc);
}

.section-sombre a:not(.btn),
.cta-bloc a:not(.btn) {
  color: #f0d48a;
}

.section-sombre a:not(.btn):hover,
.cta-bloc a:not(.btn):hover {
  color: var(--or-survol);
}

.cta-bloc p { margin: 0; }

/* Formulaires de base */
.formulaire {
  display: grid;
  gap: 0.9rem;
  max-width: 640px;
}

.formulaire label {
  display: grid;
  gap: 0.3rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.formulaire .case {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 400;
}

.formulaire input,
.formulaire select,
.formulaire textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid #8d8d8d;
  border-radius: 10px;
  background: var(--blanc);
  color: var(--texte);
  font: inherit;
}

.formulaire .case input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  padding: 0;
  accent-color: var(--or-texte);
}

.formulaire fieldset {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0.8rem 1rem;
  border: 1px solid #8d8d8d;
  border-radius: 10px;
  background: var(--blanc);
}

.formulaire legend {
  padding: 0 0.3rem;
  font-weight: 600;
}

.formulaire .champs-duo {
  display: grid;
  gap: 0.9rem;
}

@media (min-width: 560px) {
  .formulaire .champs-duo { grid-template-columns: 1fr 1fr; }
}

.requis { font-weight: 400; color: var(--gris); }

.aide {
  margin: 0;
  color: var(--gris);
  font-size: 0.92rem;
  font-weight: 400;
}

.erreur {
  margin: 0;
  color: var(--erreur);
  font-size: 0.92rem;
  font-weight: 600;
}

.message-ok {
  margin: 0;
  padding: 1rem;
  background: #e7f4e7;
  border: 1px solid #2f6b2f;
  border-radius: 10px;
  color: #143314;
}

/* Pied de page */
footer.site {
  background: var(--noir);
  color: #bbbbbb;
  padding: 2.5rem 0 1.5rem;
  font-size: 0.92rem;
}

footer.site a {
  color: #dddddd;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

footer.site a:hover { color: var(--or); }

footer.site .logo {
  margin-bottom: 0.8rem;
  text-decoration: none;
}

.pied {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 800px) {
  .pied { grid-template-columns: 2fr 1fr 1fr; }
}

.pied h2 {
  margin: 0 0 0.6rem;
  color: var(--blanc);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
}

footer.site ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

footer.site .logo,
footer.site p a,
footer.site nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}

[id] { scroll-margin-top: 5.5rem; }

@media (min-width: 1240px) {
  [id] { scroll-margin-top: 9.5rem; }
}