/* Variante A, « plein cadre » : la plus proche de la version 2 noir et blanc.
   Accueil : la piscine du Méridien N'Fis vue du ciel, en plein écran, qui avance très lentement ;
   texte en bas à gauche sur un voile noir. Temps forts : récits alternés, chaque média dans un arc de riad. */

.accueil { min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.accueil-fond .zoom { transform-origin: 55% 45%; animation: a-zoom 26s ease-in-out infinite alternate; }
@keyframes a-zoom { from { transform: scale(1); } to { transform: scale(1.09); } }
/* ombre en haut pour le logo et les drapeaux */
.accueil-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .55) 0, rgb(0 0 0 / 0) 160px); }
.accueil-grille { position: relative; width: 100%; min-width: 0; }
.accueil-texte { position: relative; isolation: isolate; padding: 0 var(--marge) 30px; }
/* voile noir de la hauteur du texte : la photo reste nette au-dessus */
.accueil-texte::before {
  content: ""; position: absolute; z-index: -1; inset: -150px 0 0;
  background: linear-gradient(0deg, #000 0, rgb(0 0 0 / .72) calc(100% - 150px), rgb(0 0 0 / 0) 100%);
}
.accueil .main-ecrite::after { content: ""; position: absolute; left: 0; right: 0; bottom: .2em; height: 1px; background: currentColor; }
.accueil h1 { font-size: clamp(1.4rem, 5.4vw, 2.5rem); max-width: 24ch; margin-bottom: 14px; }
.accueil-infos { color: var(--encre-2); }

.portes { border-bottom: 1px solid var(--filet); }

/* temps forts */
.tf-tete { margin-bottom: clamp(8px, 2vw, 24px); }
.temps-forts > article { margin-top: clamp(48px, 8vw, 96px); }
.temps-forts .recit h2 { margin-bottom: .2em; }
.temps-forts .arche { box-shadow: none; }

@media (min-width: 1000px), (orientation: landscape) and (max-height: 520px) {
  .accueil { align-items: center; padding: 96px 0 56px; }
  .accueil-fond::after {
    background:
      linear-gradient(90deg, #000 0%, rgb(0 0 0 / .8) 26%, rgb(0 0 0 / .35) 46%, rgb(0 0 0 / 0) 62%),
      linear-gradient(0deg, rgb(0 0 0 / .85) 0%, rgb(0 0 0 / 0) 24%),
      linear-gradient(180deg, rgb(0 0 0 / .5) 0, rgb(0 0 0 / 0) 160px);
  }
  .accueil-texte::before { content: none; }
  .accueil-grille { width: min(100% - 2 * var(--marge), var(--large)); margin-inline: auto; }
  .accueil-texte { padding: 0; max-width: 580px; }
  .accueil .main-ecrite { font-size: clamp(3.4rem, 5.4vw, 5rem); }
  .accueil h1 { font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .accueil { padding: 70px 0 24px; }
  .accueil .main-ecrite { font-size: 2.6rem; }
  .accueil h1 { font-size: 1.4rem; }
  .accueil-infos { display: none; }
}