/* ============================================================
   site.css — en-tête et ornements floraux
   Chargé depuis le <head> de chaque page (avant support.js),
   donc appliqué dès le premier rendu, sans clignotement.
   ============================================================ */

/* ------------------------------------------------------------
   En-tête
   ------------------------------------------------------------ */

.site-header {
  background: #FBF6EE;
  border-bottom: 1px solid #E7DFD3;
}

.site-header--sticky {
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header__inner--narrow { max-width: 820px; }

/* ------------------------------------------------------------
   Menu mobile
   ------------------------------------------------------------
   En dessous de 1000px la nav desktop (data-nav-desktop) est
   masquée par le script sans rien pour la remplacer : sur mobile
   il n'existe alors aucun moyen d'atteindre les ancres de la page.
   Le bouton se place avant le logo, donc tout en haut à gauche.
   ------------------------------------------------------------ */

.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: #1F1B18;
  cursor: pointer;
}

.nav-toggle svg { width: 22px; height: 22px; display: block; }
.nav-toggle .icon-close { display: none; }
.site-header--nav-open .nav-toggle .icon-menu { display: none; }
.site-header--nav-open .nav-toggle .icon-close { display: block; }

@media (max-width: 999px) {
  .nav-toggle { display: inline-flex; }
}

.mobile-nav {
  display: none;
  flex-direction: column;
  border-top: 1px solid #E7DFD3;
  background: #FBF6EE;
}

.site-header--nav-open .mobile-nav { display: flex; }

.mobile-nav a {
  padding: 15px 20px;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: #4A423B;
  border-bottom: 1px solid #EFE6D8;
}

.mobile-nav a:last-child { border-bottom: none; }

@media (min-width: 1000px) {
  .mobile-nav { display: none !important; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  /* base 0 : le bloc de marque ne revendique pas la largeur de son
     contenu, sinon il comprime la navigation de bureau. */
  flex: 1 1 0%;
  min-width: 0;
}

.brand__mark {
  flex: none;
  display: block;
  width: 52px;
  height: 45px;
  object-fit: contain;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.brand__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: #1F1B18;
  white-space: nowrap;
}

.brand__tag {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8A7F72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Deux libellés : le long sur grand écran, le court sur mobile. */
.brand__tag--short { display: none; }

.site-header__cta {
  flex: none;
  white-space: nowrap;
}

/* Libellé long par défaut, libellé court une fois la place manquante. */
.cta-short { display: none; }

/* En dessous de 560px le bouton d'action et le nom se disputent la
   largeur : le nom passait sur deux lignes et la baseline était coupée
   en « ÉNERGÉTIQU… ». On réduit le bloc de marque et on bascule sur les
   libellés courts. */
@media (max-width: 560px) {
  .site-header__inner { padding: 9px 15px; gap: 10px; }
  .brand { gap: 8px; }
  .brand__mark { width: 40px; height: 35px; }
  .brand__name { font-size: 15px; letter-spacing: 0.08em; }
  .brand__tag { font-size: 9px; letter-spacing: 0.06em; }
  .brand__tag--long { display: none; }
  .brand__tag--short { display: block; }
  .site-header__cta--compact {
    padding: 10px 13px;
    font-size: 12px;
    letter-spacing: 0.03em;
  }
  .cta-long { display: none; }
  .cta-short { display: inline; }
}

/* Très petits écrans (iPhone SE et assimilés) : la baseline ne tient
   plus, on resserre et on laisse tomber la ville plutôt que de couper
   un mot au milieu. */
@media (max-width: 380px) {
  .brand__tag { font-size: 8.5px; letter-spacing: 0.04em; }
  .brand__tag-city { display: none; }
}

/* ------------------------------------------------------------
   Ornements branches de cerisier
   ------------------------------------------------------------
   L'image source (1100x733) est une composition en diagonale :
   une branche dans un angle haut, une seconde dans l'angle bas opposé.

   Sur mobile, l'ancienne règle (background-size:100% auto dans une
   boîte de 33vw) écrasait toute la composition sur la largeur de
   l'écran : on ne voyait plus qu'un bandeau de pétales tassé en travers
   du titre. Ici la branche est agrandie et ancrée dans son angle, donc
   une seule branche entre dans le cadre, à son échelle naturelle.
   ------------------------------------------------------------ */

.deco-branches {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  height: min(46vw, 190px);
  background-repeat: no-repeat;
  background-size: 175% auto;
  /* Sur mobile la branche passe forcément derrière le titre, qui occupe
     toute la largeur : on baisse l'opacité et on éteint le dégradé plus
     tôt pour que le texte reste franchement lisible. */
  opacity: calc(var(--deco-opacity, .34) * .6);
  filter: saturate(.74) sepia(.04);
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
}

/* branches-a : branche dans l'angle haut droit */
.deco-branches--a {
  background-image: url('branches-a.png?v=2');
  background-position: top right;
}

/* branches-b : branche dans l'angle haut gauche */
.deco-branches--b {
  background-image: url('branches-b.png?v=2');
  background-position: top left;
}

/* À partir de 760px la composition complète tient dans la largeur : on
   revient à l'ornement pleine largeur d'origine. La hauteur minimale
   passe de 120px à 300px pour que le dégradé de fondu ait la place de
   s'éteindre avant le bas de la boîte. */
@media (min-width: 760px) {
  .deco-branches {
    height: clamp(300px, 33vw, 460px);
    background-size: 100% auto;
    opacity: var(--deco-opacity, .34);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .deco-branches--a,
  .deco-branches--b { background-position: top center; }
}