/*
 * L'EN-TETE, LE PIED, LE CARROUSEL.
 *
 * Ces trois-la n'ont pas besoin de Bootstrap : ils tenaient a eux seuls
 * 227 Ko de CSS et de JS, pour une barre, un menu deroulant et un pied de
 * page. Ce fichier et menu.js les remplacent.
 */

/* ------------------------------------------------------------- en-tete */

/* L'EN-TETE FLOTTANTE
 *
 * Une barre collee bord a bord tout en haut de la fenetre est la forme par
 * defaut de tous les sites : elle appartient au navigateur autant qu'a la
 * page. Detachee, arrondie et posee sur le contenu, elle devient un objet.
 *
 * Elle n'a de flou que parce qu'elle est fixe : un backdrop-filter sur un
 * conteneur qui defile force le processeur graphique a repeindre a chaque
 * image, et c'est ce qui fait tomber le nombre d'images sur un telephone.
 */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: var(--e-4);
  /* Le fond du bandeau reste transparent : c'est l'ilot a l'interieur qui
     porte la matiere. */
  background: transparent;
}

.entete__ilot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-8);
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-6);
  border: 1px solid rgba(232, 236, 233, .10);
  border-radius: var(--r-pilule);
  background: rgba(7, 26, 24, .72);
  backdrop-filter: blur(16px) saturate(140%);
  /* Le liseré interieur clair : c'est lui qui donne l'impression d'une arete
     biseautee plutot que d'un aplat pose sur le fond. */
  box-shadow: inset 0 1px 0 rgba(232, 236, 233, .12),
              0 8px 32px rgba(4, 18, 15, .45);
  transition: background-color var(--v-moyen) var(--glisse),
              box-shadow var(--v-moyen) var(--glisse);
}

/* Une fois qu'on a defile, l'ilot se densifie : il passe devant du contenu,
   il doit s'en detacher davantage. */
.entete--detachee .entete__ilot {
  background: rgba(7, 26, 24, .92);
  box-shadow: inset 0 1px 0 rgba(232, 236, 233, .14),
              0 12px 40px rgba(4, 18, 15, .6);
}

.entete__logo { position: relative; z-index: 2; }
.entete__logo img { height: 2.75rem; width: auto; }

/* Les liens et les icones sur une seule ligne. Sans cette regle,
   .entete__navigation restait un bloc au-dessus de 62 rem et ses deux enfants
   s'empilaient : une barre de navigation sur deux lignes. */
.entete__navigation { display: flex; align-items: center; gap: var(--e-8); }

.nav { display: flex; align-items: center; gap: var(--e-1); }

.nav__lien {
  display: block;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-s);
  color: var(--os-doux);
  font-size: var(--t-s);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--v-court) var(--glisse), background-color var(--v-court) var(--glisse);
}

.nav__lien:hover      { color: var(--os); background: var(--voile); }
.nav__lien[aria-current="page"] { color: var(--vif); }

/* --- le deroulant --- */

.nav__groupe { position: relative; }

.nav__bascule {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.nav__chevron { transition: transform var(--v-court) var(--sortie); }
.nav__bascule[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.nav__deroulant {
  position: absolute;
  top: calc(100% + var(--e-2));
  left: 0;
  min-width: 14rem;
  margin: 0;
  padding: var(--e-2);
  list-style: none;
  border: 1px solid var(--voile);
  border-radius: var(--r-m);
  background: var(--nuit-haut);

  /* Il descend de son declencheur, pas du centre : un panneau qui grandit
     depuis le milieu semble venir de nulle part. Et jamais depuis scale(0) --
     rien n'apparait de rien dans le monde reel. */
  transform-origin: top left;
  opacity: 0;
  transform: scale(0.97) translateY(-0.25rem);
  visibility: hidden;
  /* La fermeture est plus rapide que l'ouverture : ouvrir est une intention,
     fermer est une reponse. Symetriques, les deux se trainent. */
  transition: opacity 120ms var(--sortie),
              transform 120ms var(--sortie),
              visibility 0s linear 120ms;
}

.nav__groupe--ouvert .nav__deroulant {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
  transition: opacity var(--v-court) var(--sortie),
              transform var(--v-court) var(--sortie),
              visibility 0s;
}

.nav__deroulant a {
  display: block;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-s);
  color: var(--os-doux);
  font-size: var(--t-s);
  text-decoration: none;
  transition: background-color var(--v-court) var(--glisse), color var(--v-court) var(--glisse);
}
.nav__deroulant a:hover { background: var(--voile); color: var(--vif); }

/* --- les reseaux --- */

.entete__social { display: flex; gap: var(--e-1); }

.icone-social {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--r-pilule);
  color: var(--os-tenu);
  transition: color var(--v-court) var(--glisse), background-color var(--v-court) var(--glisse);
}
.icone-social:hover { color: var(--vif); background: var(--voile); }
.icone-social svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }

/* --- le menu au doigt --- */

.burger {
  display: none;
  position: relative;
  z-index: 2;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 1px solid var(--voile);
  border-radius: var(--r-s);
  background: transparent;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 1.125rem; height: 1.5px;
  margin: 0.25rem auto;
  background: var(--os);
  transition: transform var(--v-court) var(--sortie), opacity var(--v-court) var(--glisse);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 61.99rem) {
  .burger { display: block; }

  /*
   * LE FLOU DE L'ILOT DISPARAIT ICI, ET CE N'EST PAS UN CHOIX DE STYLE.
   *
   * `backdrop-filter` cree un bloc conteneur pour ses descendants en
   * `position: fixed`. La nappe du menu -- `.entete__navigation`, enfant de
   * l'ilot -- se retrouvait donc calee sur l'ilot lui-meme et non sur la
   * fenetre : `inset: 0` la reduisait a la taille de la pilule de l'en-tete,
   * quelques centaines de pixels de large et soixante de haut, sous le
   * contenu. Le menu s'ouvrait bel et bien -- la classe etait posee, les
   * liens etaient la -- mais dans une boite invisible. Rien ne se voyait, et
   * rien dans le script n'etait en cause.
   *
   * Le flou retire, l'ilot cesse d'etre un bloc conteneur et `inset: 0`
   * retrouve la fenetre. Le fond passe donc opaque, sinon la nappe laisserait
   * voir la page au travers de la barre.
   *
   * Le flou ne manque pas sur un telephone : l'en-tete est collante, elle se
   * repeint a chaque image du defilement, et un flou pleine largeur est
   * exactement ce qui fait perdre des images a un appareil modeste.
   */
  .entete__ilot,
  .entete--detachee .entete__ilot {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--nuit-haut);
  }

  .entete__navigation {
    /* Une nappe plein ecran, pas un tiroir sous la barre : sur un telephone,
       ouvrir le menu est un changement de contexte, pas un depliage.
       flex-direction est repose ici, sinon la regle de base -- qui met les
       liens en ligne pour le grand ecran -- serait heritee. */
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    position: fixed;
    inset: 0;
    max-height: 100dvh;
    overflow-y: auto;
    padding: var(--e-24) var(--e-6) var(--e-12);
    background: rgba(7, 26, 24, .96);
    backdrop-filter: blur(24px);
    /* On anime l'opacite et la position, pas la hauteur : height passe par le
       calcul de mise en page a chaque image, transform et opacity non. */
    opacity: 0;
    transform: translateY(-0.5rem);
    visibility: hidden;
    transition: opacity 160ms var(--sortie),
                transform 160ms var(--sortie),
                visibility 0s linear 160ms;
  }

  .entete__navigation--ouverte {
    opacity: 1; transform: none; visibility: visible;
    transition: opacity var(--v-moyen) var(--sortie),
                transform var(--v-moyen) var(--sortie),
                visibility 0s;
  }

  .entete__navigation .nav { flex-direction: column; align-items: stretch; gap: var(--e-2); }

  /* Les liens montent l'un apres l'autre plutot que d'apparaitre d'un bloc.
     Le decalage se lit ; sans lui, la nappe s'allume d'un coup et le mouvement
     n'apporte rien. Ils partent d'un flou : c'est ce qui donne l'impression
     qu'ils arrivent de loin plutot qu'ils changent d'opacite. */
  .entete__navigation .nav > *,
  .entete__social {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 400ms var(--glisse), transform 400ms var(--glisse);
  }
  .entete__navigation--ouverte .nav > *,
  .entete__navigation--ouverte .entete__social { opacity: 1; transform: none; }

  .entete__navigation--ouverte .nav > *:nth-child(1) { transition-delay: 40ms; }
  .entete__navigation--ouverte .nav > *:nth-child(2) { transition-delay: 80ms; }
  .entete__navigation--ouverte .nav > *:nth-child(3) { transition-delay: 120ms; }
  .entete__navigation--ouverte .nav > *:nth-child(4) { transition-delay: 160ms; }
  .entete__navigation--ouverte .nav > *:nth-child(5) { transition-delay: 200ms; }
  .entete__navigation--ouverte .nav > *:nth-child(6) { transition-delay: 240ms; }
  .entete__navigation--ouverte .entete__social      { transition-delay: 280ms; }

  .nav__lien { padding: var(--e-3) 0; font-size: var(--t-xl); font-family: var(--titre); letter-spacing: -0.02em; }
  .nav__bascule { font-size: var(--t-xl); font-family: var(--titre); }

  .nav__deroulant {
    position: static;
    opacity: 1; transform: none; visibility: visible;
    border: 0; box-shadow: none; background: transparent;
    padding-left: var(--e-6);
    display: none;
  }
  .nav__groupe--ouvert .nav__deroulant { display: block; }

  .entete__social { padding-top: var(--e-4); border-top: 1px solid var(--voile); margin-top: var(--e-4); }
}

/* --------------------------------------------------------- le carrousel */

.carrousel {
  position: relative;
  min-height: min(76dvh, 46rem);
  display: grid;
  overflow: hidden;
  background: var(--nuit);
}

.carrousel__vue {
  grid-area: 1 / 1;
  display: grid;
  grid-template-areas: "pile";
  opacity: 0;
  visibility: hidden;
  /* 700 ms : un fondu de diaporama, pas une interaction. Plus court, le
     changement claque et rompt le calme que la page vend. */
  transition: opacity 700ms var(--sortie), visibility 0s linear 700ms;
}

.carrousel__vue--active { opacity: 1; visibility: visible; transition-delay: 0s; }

/* position: relative pour que le degrade se cale sur le fond, et non sur la
   premiere ascendance positionnee trouvee par hasard plus haut. */
.carrousel__fond { grid-area: pile; position: relative; overflow: hidden; }
/* L'image est sortie du flux. En flux, « height: 100% » contre un parent en
   hauteur automatique est ignore et l'image reprend son rapport natif : une
   photo 1920x1280 imposait 1233 px de haut sur un grand ecran, et la section
   devenait un tunnel. Hors flux, elle ne pese plus rien -- la hauteur vient du
   min-height et du contenu, object-fit se charge du recadrage. */
.carrousel__fond img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Un degrade plutot qu'un voile uniforme : le bas s'assombrit pour porter le
   texte, le haut reste lisible. Un voile a plat eteint toute la photo. */
.carrousel__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(20, 14, 10, .82) 0%,
              rgba(20, 14, 10, .55) 38%,
              rgba(20, 14, 10, .18) 70%,
              rgba(20, 14, 10, .28) 100%);
}

.carrousel__contenu {
  grid-area: pile;
  align-self: end;   /* le texte en bas, le fond plein */
  position: relative;
  z-index: 1;
  padding-block: var(--e-16) var(--e-24);
  color: #fff;
}

.carrousel__titre {
  max-width: 18ch;
  color: #fff;
  font-size: var(--t-3xl);
}

.carrousel__sous-titre {
  max-width: 46ch;
  margin-top: var(--e-4);
  color: rgba(255, 255, 255, .86);
  font-size: var(--t-l);
}

.carrousel__bouton { margin-top: var(--e-8); }

/* --- les commandes --- */

.carrousel__commandes {
  position: absolute;
  left: 0; right: 0; bottom: var(--e-8);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--e-4);
}

.carrousel__points { display: flex; gap: var(--e-2); }

.carrousel__point {
  width: 2rem; height: 3px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pilule);
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: background-color var(--v-moyen) var(--glisse);
}
.carrousel__point--actif { background: var(--vif); }

.carrousel__fleche {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-pilule);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--v-court) var(--glisse), transform var(--v-court) var(--sortie);
}
.carrousel__fleche:hover  { background: rgba(255, 255, 255, .2); }
.carrousel__fleche:active { transform: scale(0.94); }

/* ------------------------------------------------------------- le pied */

.pied {
  padding-block: var(--e-16) var(--e-8);
  background: var(--nuit-bas);
  color: var(--os-doux);
  font-size: var(--t-s);
}

.pied a { color: var(--os-doux); text-decoration: none; }
.pied a:hover { color: var(--vif); }

.pied__grille { display: grid; gap: var(--e-8); }
@media (min-width: 48rem) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--e-12); } }

.pied__titre {
  margin-bottom: var(--e-4);
  color: var(--os);
  font-family: var(--texte);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pied__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-2); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-12);
  padding-top: var(--e-6);
  border-top: 1px solid var(--voile);
  font-size: var(--t-xs);
}