/*
 * Styles propres à la page d'accueil (index.html).
 * Les styles communs (jetons, en-tête, boutons, pied de page) sont dans commun.css.
 */

/* ---------- Intro vidéo (G-14, js/ouverture.js) ---------- */
/*
 * Calque jamais affiché sans html.ouverture-active. .ouverture__plan recule jusqu'à l'anneau ;
 * .ouverture__photo (ajoutée par le script) est placée par calcul à la sortie.
 */
.ouverture {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: var(--encre);
  touch-action: none;
}
.ouverture-active .ouverture,
.ouverture--fondu { display: block; }

.ouverture--sortie,
.ouverture--fondu {
  background: transparent;
  pointer-events: none;
}

.ouverture__plan {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;   /* un tap ne donne pas le focus à la vidéo : il ne doit pas couper l'intro */
}

.ouverture__photo {
  position: absolute;
  max-width: none;
}

.ouverture__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ouverture__passer {
  position: absolute;
  right: var(--marge);
  bottom: max(1.5rem, env(safe-area-inset-bottom) + 1rem);
  height: 48px;
  padding: 0 var(--e-3);
  border: 1.5px solid var(--fond);
  border-radius: 0;
  background: var(--encre);
  color: var(--fond);
  font: 600 1rem/1.2 var(--police);
  cursor: pointer;
}
@media (hover: hover) {
  .ouverture__passer:hover { background: var(--fond); color: var(--encre); }
}
.ouverture__passer:focus-visible {
  outline: 2px solid var(--fond);
  outline-offset: 3px;
  background: var(--fond);
  color: var(--encre);
}

/* Pendant l'intro : tout est masqué sauf Nébuleuse, et rien ne défile. ouverture.js révèle ces éléments à la sortie. */
.ouverture-active { overflow: hidden; }
/* Sous Windows, la place réservée à la barre de défilement est hors du calque : sombre pendant la vidéo,
   claire dès la sortie. */
.ouverture-active { background: var(--encre); }
.ouverture-active:has(.ouverture--sortie) { background: none; }
.ouverture-active .entete { opacity: 0; transform: translateY(-100%); }
.ouverture-active .intro__nom,
.ouverture-active .intro__sous-titre { opacity: 0; transform: translateY(12px); }
.ouverture-active .flux__item:nth-child(2) .flux__lien { opacity: 0; transform: translateX(-48px); }
.ouverture-active .flux__item:nth-child(5) .flux__lien { opacity: 0; transform: translateX(48px); }
.ouverture-active .flux__fleche,
.ouverture-active .flux__aide,
.ouverture-active .bloc,
.ouverture-active .pied { opacity: 0; }
.ouverture-active .entete,
.ouverture-active .page { pointer-events: none; }

/* ---------- Premier écran : titre réduit (design.md, modifications validées §1) ---------- */
.intro { padding-block: var(--e-4) var(--e-3); }

.intro h1 {
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -.03em;
}

/* Nom en capitales par le CSS : le HTML garde « Georges » (lecteurs d'écran, SEO). */
.intro__nom { display: block; text-transform: uppercase; }

.intro__sous-titre {
  display: block;
  margin-top: .75rem;
  max-width: 40rem;
  font-size: 1rem;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--gris);
}

/* ---------- Œuvres : flux des tableaux (G-03) ---------- */
/*
 * Deux modes :
 * - par défaut (sans JS, ou « réduire les animations ») : liste verticale, centrée ;
 * - html.flux-actif (posée par js/flux.js) : anneau en perspective, animé en transform/opacity.
 */

/* Taille d'affichage : une hauteur commune, réduite si l'image serait plus large que 86vw.
   Aucune image n'atteint sa largeur native (max. 713 px affichés pour 862 px natifs). */
.flux__img {
  --h-max: min(50vh, 460px);
  --r: 1;                                   /* largeur / hauteur */
  width: auto;
  max-width: none;
  height: min(var(--h-max), 86vw / var(--r));
  box-shadow: 0 20px 40px rgba(22, 21, 20, .18);
}
@supports (height: 1svh) {
  .flux__img { --h-max: min(50svh, 460px); }
}
.flux__img--vertical { --r: .606; }
.flux__img--paysage  { --r: 1.55; }

.flux__liste {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-6);
  padding: var(--e-3) 0;
  list-style: none;
}

.flux__lien {
  display: block;
  color: inherit;
  text-decoration: none;
}

.flux__lien figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
}

/* Légende « 01 / 05 — Titre » : 15 px, titre en encre. */
.flux__legende {
  display: flex;
  align-items: baseline;
  gap: .3em;
  font-size: .9375rem;
  color: var(--gris);
  white-space: nowrap;
}
.flux__legende h3 { font-size: inherit; font-weight: 600; color: var(--encre); }

.flux__lien:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* G-14, A2 : léger grossissement au survol ou au focus clavier ; l'ombre, elle, ne s'anime pas. */
@media (prefers-reduced-motion: no-preference) {
  .flux-actif .flux__lien { transition: transform .3s ease-out; }
  .flux-actif .flux__lien:focus-visible { transform: scale(1.02); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .flux-actif .flux__lien:hover { transform: scale(1.02); }
}

.flux__aide {
  padding-inline: var(--marge);
  text-align: center;
}
.flux__aide-glisser { display: none; }

/* ----- Mode anneau ----- */
.flux-actif .flux {
  position: relative;
  height: min(74vh, 700px);
  overflow: hidden;
  perspective: 1400px;
  touch-action: pan-y;          /* le doigt peut toujours faire défiler la page verticalement */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
}
@supports (height: 1svh) {
  .flux-actif .flux { height: min(74svh, 700px); }
}
.flux-actif .flux.est-glisse { cursor: grabbing; }

.flux-actif .flux__liste { display: block; padding: 0; }

/* Chaque tableau est posé au centre ; js/flux.js le place sur l'anneau (transform, opacity). */
.flux-actif .flux__item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flux-actif .flux__aide-glisser { display: inline; }

/* Flèches précédent / suivant, au-dessus des tableaux. */
.flux__fleche {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border: 1.5px solid var(--encre);
  border-radius: 50%;
  background: rgba(243, 240, 234, .85);   /* --fond à 85 % */
  color: var(--encre);
  font: 400 1.375rem/1 var(--police);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.flux__fleche[hidden] { display: none; }
.flux__fleche--prec { left: 16px; }
.flux__fleche--suiv { right: 16px; }

/* Pause / lecture : sous la flèche suivante, 48 px (zone cliquable minimale, design §5). */
.flux__pause {
  right: 18px;
  width: 48px;
  height: 48px;
  margin-top: 38px;
}
.flux__pause svg { fill: currentColor; }
.flux__icone-lecture,
.flux__pause[aria-pressed="true"] .flux__icone-pause { display: none; }
.flux__pause[aria-pressed="true"] .flux__icone-lecture { display: block; }

@media (hover: hover) {
  .flux__fleche:hover { background: var(--encre); color: var(--fond); }
}

@media (min-width: 768px) {
  .flux__fleche--prec { left: var(--marge); }
  .flux__fleche--suiv { right: var(--marge); }
  .flux__pause { right: calc(var(--marge) + 2px); }
}

/* ---------- Blocs suivants ---------- */
.bloc { padding-block: var(--entre-blocs); }

.bloc h2 { margin-bottom: var(--e-3); }

.bloc p { max-width: 60ch; }

/* À propos (G-07) : 60 caractères par ligne au plus. En Archivo, 60ch (largeur du « 0 »)
   donne ~80 caractères réels ; 23em en donne ~60. */
.a-propos__texte { max-width: 23em; }
.a-propos__texte .insecable { white-space: nowrap; } /* noms de lieux jamais coupés */

.bloc--contact { background: var(--fond-2); }

/* Contact (G-04) : boutons empilés sur mobile, côte à côte dès 768 px. */
.contact__actions {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

@media (min-width: 768px) {
  .contact__actions { flex-direction: row; flex-wrap: wrap; }
}

.contact__lieu { margin-top: var(--e-3); }

/* G-14, A1 : titre, texte et actions montent à l'entrée dans l'écran, une seule fois.
   L'état masqué n'existe que si js/apparitions.js a posé la classe : sans JS, tout reste lisible.
   Écran seulement : à l'impression, tout doit sortir, même sans avoir fait défiler la page. */
@media screen and (prefers-reduced-motion: no-preference) {
  .apparitions .bloc > .conteneur > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
  }
  .apparitions .bloc > .conteneur > :nth-child(2) { transition-delay: 80ms; }
  .apparitions .bloc > .conteneur > :nth-child(3) { transition-delay: 160ms; }
  .apparitions .bloc > .conteneur > :nth-child(4) { transition-delay: 240ms; }
  .apparitions .bloc.est-vu > .conteneur > * { opacity: 1; transform: none; }
  .apparitions .bloc.sans-effet > .conteneur > * { transition: none; }
}