/* =========================================================
   index-style.css — particularités de la page d'accueil
   Dépend de global.css (variables, header de base, etc.)
   ========================================================= */

/* ---------------------------------------------------------
   Bloc "primo" — image plein cadre en tête de page
   100% de la largeur, 90% de la hauteur du viewport
   --------------------------------------------------------- */
.primo{
  padding: 0;
}
.primo-media{
  position: relative;
  width: 100%;
  height: 80vh;
  background-color: var(--bg-paper);
  overflow: hidden;
}

/* ---------------------------------------------------------
   Slideshow — 4 images, fondu d'opacité, boucle infinie
   --------------------------------------------------------- */
.primo-slideshow{
  position: absolute;
  inset: 0;
  z-index: 2;
}
.primo-slideshow img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: primoSlideshow 16s infinite;
}
.primo-slideshow img:nth-child(1){ animation-delay: 0s; }
.primo-slideshow img:nth-child(2){ animation-delay: 4s; }
.primo-slideshow img:nth-child(3){ animation-delay: 8s; }
.primo-slideshow img:nth-child(4){ animation-delay: 12s; }

@keyframes primoSlideshow{
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}

/* évite le clignotement rapide provoqué par la règle globale
   prefers-reduced-motion (qui réduit les durées à 0.001ms) :
   on fige plutôt sur la première image, sans animation 
   */
@media (prefers-reduced-motion: reduce){
  .primo-slideshow img{ animation: none; opacity: 0; }
  .primo-slideshow img:first-child{ opacity: 1; }
}

.primo-media .siteTitle {
	position: absolute; text-align: left;
	bottom: -5px; z-index:3; max-width: 1280px;
	width: 100%; left: 50%; translate: -50% 0; padding: 0 var(--gutter);
	display: flex;
}

.primo-media .siteTitle .siteTitleBlock {
	background: rgb(239, 239, 239);
	height: 100%; position: relative;
	padding:0 1.5rem; width:25svw
}


.primo-media .frame-mark{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  opacity: 0.5;
}
.primo-media .frame-mark svg{ width: 34px; height: 34px; }
.primo-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.primo-copy{
  max-width: 760px;
  margin: clamp(1.8rem, 4vw, 2.8rem) auto 0;
  text-align: center;
  padding: 0 var(--gutter) clamp(2.5rem, 5vw, 4rem);
}
.primo-title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  margin: 0.9rem 0 1rem;
  text-decoration:underline;
  position: absolute;
  bottom: 0;
  z-index: 10;
  left: var(--gutter);
  background: rgb(239, 239, 239);
  margin: 0;
  padding: .5rem 2rem 0 2rem;
  border-radius: .5rem .5rem 0 0;
}
p.primo-text{
  color: rgb(50, 50, 45);
  font-size: .85rem;
  margin: 0 0 1.8rem;
  line-height:1.2rem;
}
.apropos {
	text-align:right;
}
 
 .apropos p {
	float: right;
	padding: 0 1rem 0 0;
 }

/* ---------------------------------------------------------
   En-tête flottant au-dessus du primo
   Fond flouté (verre) au chargement, qui disparaît une fois
   90% de la hauteur du viewport parcourue au scroll.
   --------------------------------------------------------- */
.site-header--floating{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;

}

.site-header {
	border-bottom: none !important;
}
/* navigateurs sans support de backdrop-filter : fond translucide simple */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header--floating{ background: rgba(239, 239, 239, 0.78); }
}

.site-header--floating.is-scrolled{
  background:rgba(239, 239, 239, 0.75);
  border-bottom-color: var(--rule);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 720px){
  .primo-media{ height: 78vh; }
}