/* ==========================================================================
   Mise en page : conteneurs, sections, en-tête, menu mobile, pied de page
   ========================================================================== */

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--s-6); }
.section--lin { background: var(--surface); }
.section--serree { padding-block: var(--s-5); }

.entete-section {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  max-width: 44rem;
}

.grille-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: center;
}
.grille-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.grille-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}

@media (min-width: 961px) {
  .grille-2--large-gauche { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .grille-2--large-droite { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .colle { position: sticky; top: 7rem; }
}

@media (max-width: 960px) {
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-3 { grid-template-columns: 1fr; gap: var(--s-4); }
  .grille-2 { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.site-entete {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--filet);
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}

.site-entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 4.5rem;
}

/* Sur la page d'accueil, l'en-tête flotte sur le panorama */
.a-hero .site-entete {
  position: fixed;
  left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  color: var(--sur-image);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.a-hero .site-entete.is-solide {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom-color: var(--filet);
  color: var(--texte);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
}

.marque {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  color: inherit;
}
.marque__nom {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: 1.55rem;
  letter-spacing: -.01em;
}
.marque__sous em {
  font-family: var(--f-titre);
  font-style: italic;
  text-transform: none;
  letter-spacing: .02em;
  font-size: .82rem;
  font-weight: 400;
  margin-left: -.3em;
}
.marque__sous {
  font-size: .62rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  margin-top: .3rem;
  font-weight: 500;
}

.nav { display: flex; align-items: center; gap: var(--s-4); }
.nav__liens {
  display: flex;
  gap: var(--s-3);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__liens a {
  position: relative;
  text-decoration: none;
  font-size: var(--t-sm);
  letter-spacing: .04em;
  padding-block: .4rem;
}
.nav__liens a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__liens a:hover::after,
.nav__liens a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.nav__actions { display: flex; align-items: center; gap: var(--s-2); }
.nav__payer { font-size: var(--t-sm); text-decoration: none; opacity: .85; }
.nav__payer:hover { opacity: 1; }

.burger {
  display: none;
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: .6rem; right: .6rem;
  height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 1.05rem; }
.burger span:nth-child(2) { top: 1.6rem; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(.28rem) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-.28rem) rotate(-45deg); }

/* Choix de la langue (en haut à droite) */
.langues { display: flex; align-items: center; gap: .1rem; padding-left: var(--s-2); border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 25%, transparent); }
.langues__option {
  font-family: var(--f-texte);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-decoration: none;
  padding: .35rem .4rem;
  border-radius: var(--rayon-pilule);
  opacity: .6;
  transition: opacity .25s;
}
.langues__option:hover { opacity: 1; }
.langues__option[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.langues--mobile { border: 0; padding: 0; gap: .4rem; margin-top: var(--s-3); }
.langues--mobile .langues__option { font-size: var(--t-sm); padding: .5rem .8rem; border: 1px solid var(--filet); }
@media (max-width: 1240px) { .nav { gap: var(--s-3); } .nav__liens { gap: var(--s-2); } }

@media (max-width: 1020px) {
  .nav__liens, .nav__payer { display: none; }
  .burger { display: block; }
}
@media (max-width: 520px) {
  .nav__actions .bouton { display: none; }
  .nav__actions .langues { border-left: 0; padding-left: 0; }
}

/* Menu plein écran (mobile) */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  color: var(--texte);
  padding: calc(env(safe-area-inset-top, 0px) + 5.5rem) var(--gouttiere) calc(env(safe-area-inset-bottom, 0px) + 2rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-4);
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease);
  visibility: hidden;
}
.menu-mobile.is-ouvert { clip-path: inset(0 0 0 0); visibility: visible; }
.menu-mobile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.menu-mobile ul a {
  font-family: var(--f-titre);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  text-decoration: none;
  line-height: 1.25;
}
.menu-mobile__bas { display: grid; gap: var(--s-2); }
.menu-ouvert { overflow: hidden; }
.menu-ouvert .site-entete { color: var(--texte) !important; z-index: 70; }

/* --------------------------------------------------------------------------
   Bandeau de page intérieure
   -------------------------------------------------------------------------- */
.bandeau {
  position: relative;
  padding-block: var(--s-6) var(--s-5);
  border-bottom: 1px solid var(--filet);
}
.bandeau__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: end;
}
.bandeau h1 { font-size: var(--t-3xl); }
.bandeau__visuel {
  aspect-ratio: 4 / 5;
  max-height: 30rem;
  width: 100%;
  object-fit: cover;
  border-radius: var(--rayon);
}
@media (max-width: 860px) {
  .bandeau__grille { grid-template-columns: 1fr; }
  .bandeau__visuel { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.site-pied {
  background: var(--encre);
  color: #E9E4DA;
  padding-block: var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
}
:root[data-theme="dark"] .site-pied { background: #0E1016; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-pied { background: #0E1016; } }

.site-pied a { color: inherit; text-decoration: none; }
.site-pied a:hover { text-decoration: underline; }
.site-pied__haut {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid rgba(233, 228, 218, .16);
}
.site-pied h2 {
  font-family: var(--f-texte);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  color: #CDB16F;
  margin-bottom: var(--s-2);
}
.site-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: var(--t-sm); }
.site-pied__devise {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1.2;
  max-width: 24ch;
  margin-top: var(--s-2);
}
.site-pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-3);
  font-size: var(--t-xs);
  color: rgba(233, 228, 218, .65);
}
@media (max-width: 860px) {
  .site-pied__haut { grid-template-columns: 1fr 1fr; }
  .site-pied__haut > :first-child { grid-column: 1 / -1; }
}

/* Réglages du pied de page : langue et thème -------------------------------- */
.site-pied__reglages {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid rgba(233, 228, 218, .16);
}
.bascule { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.bascule__titre {
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #CDB16F;
  margin-right: .6rem;
}
.site-pied .bascule__option {
  font: inherit;
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(233, 228, 218, .75);
  background: none;
  border: 1px solid rgba(233, 228, 218, .22);
  border-radius: var(--rayon-pilule);
  padding: .4rem .9rem;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.site-pied .bascule__option:hover { color: #E9E4DA; border-color: rgba(233, 228, 218, .6); text-decoration: none; }
.site-pied .bascule__option[aria-current="true"],
.site-pied .bascule__option[aria-pressed="true"] { background: #E9E4DA; color: #1E2433; border-color: #E9E4DA; }

/* Dans les blocs en grille, l'espace entre paragraphes vient du « gap » (pas de double marge) */
[style*="display:grid"] > p + p,
.entete-section > p + p,
.appel__contenu > p + p,
.duo__contenu > p + p { margin-top: 0; }