/* ── Road2Luxe — home-prefooter.css ──────────────────────────
   Section pré-footer : photo plein cadre + scrim sable/charbon
   + titre + formulaire compact (destination seule).
   Referme la home, fond charbon fondu dans le footer.
   ──────────────────────────────────────────────────────────── */


/* ── Structure ─────────────────────────────────────────────── */

/* Pas d'`overflow:hidden` ici : il rognerait le panneau du dropdown Destination
   dès qu'il dépasse le bas de la section (écrans courts). Le débord de la photo
   (sur-hauteur parallax) est clippé par `.r2l-prefooter__media` à la place. */
.r2l-prefooter {
	position:         relative;
	min-height:       clamp(600px, 78vh, 860px);
	background-color: var(--r2l-charbon);
	display:          flex;
	align-items:      flex-start;
}

.r2l-prefooter__media {
	position: absolute;
	inset:    0;
	overflow: hidden;
}


/* ⚠️ .r2l-prefooter__bg est un <picture> (le thème auto-wrappe les <img> pour
   servir le WebP) → élément NON-remplacé qui ne peint pas. On dimensionne le
   conteneur ET on cible l'<img> interne (sans classe), sinon celui-ci retombe
   sur `img,video{height:auto}` (hauteur intrinsèque → bande en haut sur mobile).

   Conteneur = boîte de parallax, sur-hauteur 20 % via insets top/bottom:-10%
   (hauteur DÉFINIE, pas un % contre un parent `auto`). Le JS anime son translateY. */
.r2l-prefooter__bg {
	position:    absolute;
	inset:       -10% 0; /* top/bottom:-10% ; left/right:0 */
	display:     block;
	will-change: transform;
}

.r2l-prefooter__bg img {
	display:         block;
	width:           100%;
	height:          100%;
	object-fit:      cover;
	/* Ancre le bas de l'image (zone motards/route). */
	object-position: center 70%;
}

/* Scrim triple couche :
   haut → sable 100 % opaque → fondu vers transparent (~18 %) pour masquer
          la couture avec la section précédente (#F7F3EE) sans transition visible ;
   bas  → charbon pour fondre naturellement dans le footer. */
.r2l-prefooter__scrim {
	position:       absolute;
	inset:          0;
	background:
		linear-gradient(to bottom, rgba(247,243,238,1) 0%, rgba(247,243,238,0) 8%),
		linear-gradient(to bottom, transparent 52%, rgba(44,40,42,.87) 100%);
	z-index:        1;
	pointer-events: none;
}

/* Contenu ancré dans la zone éclaircie (tiers supérieur) */
.r2l-prefooter__inner {
	position:        relative;
	z-index:         2;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	text-align:      center;
	width:           100%;
	padding-top:     var(--r2l-s-12);
	padding-bottom:  var(--r2l-s-16);
}


/* ── Typographie ───────────────────────────────────────────── */

/* Eyebrow — fond photo clair en haut : terre-sec fonctionne */
.r2l-prefooter .r2l-eyebrow {
	color:         var(--r2l-terre-sec);
	margin-bottom: var(--r2l-s-3);
	text-shadow:   0 0 12px rgba(247,243,238,1), 0 0 28px rgba(247,243,238,.9), 0 0 48px rgba(247,243,238,.7);
}

.r2l-prefooter__title {
	font-size:   var(--r2l-text-h2);
	font-weight: 700;
	color:       var(--r2l-charbon);
	margin:      0 0 var(--r2l-s-3);
	text-wrap:   balance;
	/* Halo sable : invisible sur fond #F7F3EE, actif sur zones photo contrastées */
	text-shadow: 0 0 14px rgba(247,243,238,1), 0 0 32px rgba(247,243,238,.95), 0 0 60px rgba(247,243,238,.8);
}

/* Accent éditorial — Terre, comme .r2l-exp__accent / .r2l-promesse__accent */
.r2l-prefooter__accent {
	color: var(--r2l-terre-sec);
}

.r2l-prefooter__sub {
	font-size:   var(--r2l-text-corps);
	font-weight: 500;
	color:       var(--r2l-terre-corps);
	margin:      0 0 var(--r2l-s-6);
	max-width:   48ch;
	text-wrap:   balance;
	text-shadow: 0 0 14px rgba(247,243,238,1), 0 0 32px rgba(247,243,238,.95), 0 0 60px rgba(247,243,238,.8);
}

.r2l-prefooter__search {
	width: 100%;
}


/* ── Formulaire compact — 1 champ + bouton ─────────────────── */

.r2l-search-form--compact {
	max-width:    580px;
	margin-inline: auto;
}

/* Supprime l'animation autonome du .bar — le .r2l-rise parent gère le reveal */
.r2l-search-form--compact .bar {
	animation: none;
}

/* Seul champ : ne pas appliquer le flex 1.6 (ratio prévu pour 3 champs) */
.r2l-search-form--compact .fld:first-child {
	flex: 1;
}


/* ── Mobile ─────────────────────────────────────────────────── */

/* Parallax coupé < 768px : pas de sur-hauteur. Le conteneur épouse la section
   (inset:0) et l'<img> reçoit un plancher EXPLICITE en vh (toujours résoluble)
   qui garantit le recouvrement même si height:100% ne se résout pas. */
@media (max-width: 768px) {
	.r2l-prefooter__bg {
		inset: 0;
	}
	.r2l-prefooter__bg img {
		min-height: clamp(600px, 78vh, 860px);
	}
}

@media (max-width: 600px) {
	.r2l-prefooter__inner {
		padding-top:    var(--r2l-s-8);
		padding-bottom: var(--r2l-s-12);
	}
}