/* ==========================================================================
   SkylineVision — layout.css
   En-tête, pied de page, conteneurs et composants partagés.
   ========================================================================== */

/* --- Conteneurs ---------------------------------------------------------- */
.contenu {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--section); }

/* --- Les crans de fond ----------------------------------------------------
   Une page descend en alternant ces valeurs. Le fond par défaut — la craie —
   ne porte aucune classe : c'est celui du body.
   Règle tenue partout : jamais deux sections de même cran à la suite.
   -------------------------------------------------------------------------- */

/* Le cran le plus clair. Sections éditoriales, là où le texte respire. */
.section-claire { background: var(--craie-clair); }

/* Le fond sombre — le seul du site. Sections à photographies, appel final,
   menu et pied de page partagent exactement la même valeur. L'appel et le
   pied se touchent : ils forment alors un seul bloc sombre de clôture,
   au lieu de deux aplats qui se disputent. */
.section-nuit {
  background: var(--nuit);
  color: var(--craie);
}

/* Textes atténués sur fond sombre.
   0,72 et non 0,55 : à 0,55 une capitale de 0,68rem espacée de 0,2em tombait
   à 3,84:1, sous le seuil. Le pire cas typographique du site. */
.section-nuit .label { color: rgba(var(--craie-rvb), 0.72); }
.section-nuit .texte-mesure { color: rgba(var(--craie-rvb), 0.78); }

/* --- En-tête -------------------------------------------------------------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem var(--gouttiere);
  color: var(--blanc);
  transition: background var(--transition), color var(--transition),
              padding var(--transition), box-shadow var(--transition);
}

/* Dès le premier défilement, la barre devient opaque.
   C'est ce qui garantit qu'un titre de page ne se lira jamais à travers le
   nom de marque : quelle que soit la hauteur de la fenêtre ou la taille du
   titre, la barre est un plan opaque posé au-dessus du contenu. */
.entete.est-clair,
.entete.est-fige {
  background: var(--craie-clair);
  color: var(--encre);
}

/* Au repos sur une page sans image d'accueil : un simple filet suffit. */
.entete.est-clair { box-shadow: 0 1px 0 rgba(var(--encre-rvb), 0.08); }

/* Une fois en survol du contenu : la barre se resserre et se détache par une
   ombre douce, pour qu'on voie qu'elle flotte au-dessus. */
.entete.est-fige {
  padding-block: 1.05rem;
  box-shadow: 0 1px 28px rgba(var(--voile), 0.13);
}

/* Navigation principale */
.nav-principale ul {
  display: flex;
  gap: clamp(1.1rem, 2.4vw, 2.4rem);
}

.nav-lien {
  position: relative;
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-block: 0.4rem;
  white-space: nowrap;
}
.nav-lien::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition);
}
.nav-lien:hover::after,
.nav-lien[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* Bloc de marque centré */
.marque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  text-align: center;
}

/* --- Permutation du bloc de marque dans l'en-tête -------------------------
   Sur l'image d'accueil, le nom en toutes lettres. Une fois celle-ci passée,
   l'emblème seul — il reste le même lien vers l'accueil.

   Les deux états sont empilés dans UNE SEULE cellule de grille plutôt que
   l'un remplaçant l'autre : la largeur et la hauteur du bloc ne bougent donc
   jamais, et l'en-tête ne saute pas au moment de la bascule.

   La permutation est scopée à .entete : le pied de page et la barre de
   contact réutilisent .marque sans emblème, ils gardent le flex ci-dessus.
   -------------------------------------------------------------------------- */
.entete .marque {
  display: grid;
  place-items: center;
}

.entete .marque-texte,
.entete .marque-embleme {
  grid-area: 1 / 1;
  transition: opacity var(--transition), transform var(--transition);
}

.entete .marque-texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
}

.entete .marque-embleme {
  width: clamp(34px, 3.4vw, 44px);
  height: auto;
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
}

/* Après l'image d'accueil : le nom s'efface, l'emblème prend sa place.
   Volontairement lié à « apres-hero » et non à « est-fige » : le fond de la
   barre apparaît dès le premier défilement, la permutation attend elle que
   l'image d'accueil soit réellement passée. */
.entete.apres-hero .marque-texte {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}
.entete.apres-hero .marque-embleme {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.marque-nom {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.marque-nom sup {
  font-size: 0.42em;
  vertical-align: super;
  letter-spacing: 0;
}
.marque-baseline {
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.75;
  white-space: nowrap;
}

/* Zone de droite */
.entete-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1rem, 2vw, 2rem);
}

/* Bouton burger */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px; height: 22px;
  padding: 0;
}
.burger span {
  display: block;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Menu plein écran ----------------------------------------------------- */
.menu-plein {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  place-items: center;
  background: var(--nuit);
  color: var(--craie);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.menu-plein.est-ouvert { opacity: 1; visibility: visible; }

/* Deux colonnes de largeur égale occupant tout l'écran : le logo, en grand,
   tient la moitié gauche ; la navigation commence à mi-largeur.
   Des fractions plutôt que « auto » — on veut que la position des deux blocs
   dépende de l'écran, pas de la taille de leur contenu. */
.menu-contenu {
  display: grid;
  /* La colonne du logo prend nettement plus que la moitié : c'est ce qui
     lui permet d'être grand. La navigation n'a pas besoin de plus. */
  grid-template-columns: 1.7fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  width: 100%;
  padding-inline: clamp(1.25rem, 5vw, 5rem);
}

/* Chaque bloc se cale au bord gauche de sa colonne */
.menu-logo,
.menu-contenu nav { justify-self: start; }

.menu-logo img {
  width: clamp(260px, 56vw, 1100px);
  height: auto;
  /* Garde-fou : sur un écran bas, le logo ne doit pas déborder en hauteur.
     object-fit évite qu'il s'écrase si cette limite entre en jeu. */
  max-height: 68vh;
  object-fit: contain;
}

.menu-plein ul {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.6vw, 1rem);
  /* Aligné à gauche : le logo tient désormais le côté gauche du bloc,
     un texte centré flotterait dans sa colonne. */
  text-align: left;
}
.menu-plein a {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 300;
  line-height: 1.1;
  opacity: 0.55;
  transition: opacity var(--transition);
}
.menu-plein a:hover { opacity: 1; }

/* --- Boutons -------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  background: var(--blanc);
  color: var(--encre);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition),
              transform var(--transition);
}
.bouton:hover {
  background: var(--or);
  color: var(--encre);
  transform: translateY(-2px);
}

.bouton-sombre { background: var(--emeraude); color: var(--craie); }

/* Le bouton de l'appel final est la pastille dorée : le seul aplat d'or du
   site, et donc le point le plus chaud de chaque page. Libellé en encre et
   non en vert — 8:1 contre 4,9:1, et le couple vert-or à saturation pleine
   fait vibrer les bords quel que soit le ratio. */
.appel.section-nuit .bouton {
  background: var(--or);
  color: var(--encre);
}
.appel.section-nuit .bouton:hover {
  background: var(--craie);
  color: var(--nuit);
}

/* --- Flèches de navigation ------------------------------------------------ */
.fleche {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--encre);
  box-shadow: 0 6px 22px rgba(var(--voile), 0.16);
  transition: background var(--transition), transform var(--transition);
}
.fleche:hover { background: var(--or); transform: scale(1.07); }
.fleche:disabled { opacity: 0.35; cursor: default; transform: none; }
.fleche svg { width: 15px; height: 15px; }

/* --- Pied de page --------------------------------------------------------- */
.pied {
  background: var(--nuit);
  color: rgba(var(--craie-rvb), 0.75);
  padding-block: clamp(3rem, 7vw, 5.5rem) 1.6rem;
}

.pied-haut {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid rgba(var(--craie-rvb), 0.14);
}

.pied .marque { align-items: flex-start; text-align: left; color: var(--craie); }

.pied-titre {
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--craie-rvb), 0.45);
  margin-bottom: 1.3rem;
}

.pied-liens li + li { margin-top: 0.7rem; }
.pied-liens a {
  font-size: 0.85rem;
  transition: color var(--transition);
}
.pied-liens a:hover { color: var(--or); }

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--craie-rvb), 0.45);
}
.pied-bas ul { display: flex; gap: 1.5rem; }

/* --- Révélation au défilement ---------------------------------------------
   L'état masqué de .reveler N'EST PAS défini ici : il appartient à
   animations.css, qui ne le pose que si le script est en mesure de le lever.
   Une feuille de mise en page ne doit jamais pouvoir rendre le contenu
   invisible à elle seule.
   -------------------------------------------------------------------------- */

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav-principale { display: none; }
}

/* Menu : sous 860 px les deux colonnes n'ont plus la place. Le logo
   repasse au-dessus de la navigation et l'ensemble se recentre. */
@media (max-width: 860px) {
  .menu-contenu {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(1.5rem, 6vw, 3rem);
    padding-inline: var(--gouttiere);
  }
  .menu-logo,
  .menu-contenu nav { justify-self: center; }
  .menu-logo img { width: clamp(170px, 52vw, 300px); }
  .menu-plein ul { text-align: center; }
}

@media (max-width: 720px) {
  .marque-baseline { display: none; }
  .pied-haut { grid-template-columns: 1fr; }
  .pied-bas { flex-direction: column; align-items: flex-start; }
  .entete-actions .bouton { display: none; }
}