/* ==========================================================================
   Sybailes parapente — styles.css
   Feuille de style unique du site (variables, thèmes clair/sombre,
   header, hero, sections, lightbox, formulaire, footer, responsive).
   ==========================================================================
*/
:root {
	--ink:#0a2540;
	--bg:#f3f9ff;
	--surface:#fff;
	--pale:#e3f2fd;
	--line:#cfe3f4;
	--muted:#46647f;
	--link:#1565c0;
	--btn:#1976d2;
	--btn-h:#0d5cb0;
	--sky:#8fd3ff;
	--deep:#0a3d78;
	box-sizing:border-box;
	padding-top:env(safe-area-inset-top,0px);
	padding-bottom:env(safe-area-inset-bottom,0px)
}
@media (prefers-color-scheme:dark) {
	:root:not([data-theme="light"]) {
		--ink:#e6f2ff;
		--bg:#06192c;
		--surface:#0c2742;
		--pale:#0f3052;
		--line:#1b3d60;
		--muted:#9bb8d2;
		--link:#7cc4ff
	}
}
:root[data-theme="dark"] {
	--ink:#e6f2ff;
	--bg:#06192c;
	--surface:#0c2742;
	--pale:#0f3052;
	--line:#1b3d60;
	--muted:#9bb8d2;
	--link:#7cc4ff
}
html {
	scroll-behavior:smooth;
	scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))
}
*,*::before,*::after {
	box-sizing:border-box
}
body {
	margin:0;
	background:var(--bg);
	color:var(--ink);
	font:400 1.0625rem/1.65 Figtree,system-ui,sans-serif
}
body::before {
	content:"";
	position:fixed;
	inset:0 0 auto;
	height:env(safe-area-inset-top,0px);
	z-index:60;
	background:var(--deep)
}
h1,h2,h3 {
	font-family:"Bricolage Grotesque",Figtree,sans-serif;
	line-height:1.1;
	margin:0 0 .6em;
	letter-spacing:-.01em
}
h2 {
	font-size:clamp(1.9rem,4vw,2.8rem);
	font-weight:800
}
h3 {
	font-size:1.25rem;
	font-weight:600
}
a {
	color:var(--link)
}
p {
	margin:0 0 1em;
	max-width:68ch
}
.wrap {
	max-width:1120px;
	margin:0 auto;
	padding:0 1.25rem
}
section {
	padding:5rem 0
}
.btn {
	display:inline-block;
	background:var(--btn);
	color:#fff;
	text-decoration:none;
	font-weight:600;
	padding:.85rem 1.6rem;
	border-radius:999px;
	border:2px solid var(--btn);
	cursor:pointer;
	font:inherit;
	font-weight:600;
	transition:background .2s
}
.btn:hover {
	background:var(--btn-h);
	border-color:var(--btn-h)
}
.btn.ghost {
	background:transparent;
	border-color:#fff;
	color:#fff
}
.btn.ghost:hover {
	background:rgba(255,255,255,.18)
}
:focus-visible {
	outline:3px solid var(--sky);
	outline-offset:3px
}
/* Header */
header {
	position:fixed;
	top:env(safe-area-inset-top,0px);
	left:0;
	right:0;
	z-index:50;
	transition:background .3s,box-shadow .3s
}
header.solid {
	background:var(--deep);
	box-shadow:0 2px 14px rgba(0,30,70,.3)
}
.bar {
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:72px
}
.logo {
	font:800 1.3rem "Bricolage Grotesque",sans-serif;
	color:#fff;
	text-decoration:none;
	display:flex;
	align-items:center;
	gap:.5rem
}
nav ul {
	display:flex;
	gap:1.6rem;
	list-style:none;
	margin:0;
	padding:0;
	align-items:center
}
nav a {
	color:#fff;
	text-decoration:none;
	font-weight:500
}
nav a:hover {
	text-decoration:underline
}
.burger {
	display:none;
	background:none;
	border:0;
	color:#fff;
	font-size:1.8rem;
	cursor:pointer
}
.bar {
	gap:1rem
}
.logo {
	margin-right:auto
}
nav {
	order:1
}
.lang {
	order:2;
	display:flex;
	flex:none;
	border:1.5px solid rgba(255,255,255,.75);
	border-radius:999px;
	overflow:hidden
}
.lang button {
	background:none;
	border:0;
	color:#fff;
	font:600 .85rem Figtree,system-ui,sans-serif;
	padding:.4rem .85rem;
	cursor:pointer
}
.lang button[aria-pressed="true"] {
	background:#fff;
	color:var(--deep)
}
.burger {
	order:3
}
/* Hero */
.hero {
	position:relative;
	min-height:100svh;
	padding:0;
	overflow:hidden;
	color:#fff;
	display:flex;
	align-items:flex-end;
	background:linear-gradient(180deg,#0a3d78 0%,#1976d2 45%,#8fd3ff 80%,#e3f2fd 100%)
}
.hero .photo {
	position:absolute;
	inset:-12% 0 0 0;
	background:center bottom/cover no-repeat;
	will-change:transform
}
.hero::after {
	content:"";
	position:absolute;
	inset:0;
	z-index:1;
	background:linear-gradient(180deg,rgba(6,35,75,.25) 0%,rgba(6,35,75,0) 35%,rgba(6,35,75,.72) 100%)
}
.glider {
	position:absolute;
	z-index:2;
	top:13%;
	left:0;
	width:clamp(70px,9vw,130px);
	pointer-events:none;
	animation:fly 28s linear -4s infinite
}
.glider img {
	width:100%;
	display:block;
	transform-origin:50% 12%;
	animation:sway 5s ease-in-out infinite alternate;
	filter:drop-shadow(0 8px 10px rgba(0,40,90,.25))
}
@keyframes fly {
	0% {
		transform:translate(-20vw,7vh)
	}
	50% {
		transform:translate(48vw,-2vh)
	}
	100% {
		transform:translate(112vw,6vh)
	}
}
@keyframes sway {
	from {
		transform:rotate(-3deg)
	}
	to {
		transform:rotate(3deg)
	}
}
.hero .in {
	position:relative;
	z-index:2;
	padding-bottom:7rem;
	padding-top:8rem
}
.hero h1 {
	font-size:clamp(2.6rem,7vw,5.2rem);
	font-weight:800;
	max-width:14ch;
	text-shadow:0 2px 24px rgba(0,40,90,.45)
}
.hero p.place {
	font-size:clamp(1.3rem,3.2vw,2rem);
	font-weight:600;
	margin:.4rem 0 1rem;
	text-shadow:0 2px 16px rgba(0,40,90,.5)
}
.hero p.lead {
	font-size:1.25rem;
	max-width:44ch;
	text-shadow:0 1px 12px rgba(0,40,90,.5)
}
.pills {
	display:flex;
	flex-wrap:wrap;
	gap:.6rem;
	margin:1.5rem 0 2rem;
	padding:0;
	list-style:none
}
.pills li {
	background:rgba(255,255,255,.18);
	backdrop-filter:blur(6px);
	border:1px solid rgba(255,255,255,.4);
	padding:.4rem 1rem;
	border-radius:999px;
	font-weight:500
}
.cta {
	display:flex;
	gap:.8rem;
	flex-wrap:wrap
}
.cue {
	position:absolute;
	z-index:2;
	bottom:1.5rem;
	left:50%;
	translate:-50% 0;
	color:#fff;
	font-size:2rem;
	text-decoration:none;
	animation:bob 1.8s ease-in-out infinite
}
@keyframes bob {
	50% {
		transform:translateY(8px)
	}
}
/* Infos */
.two {
	display:grid;
	grid-template-columns:1.5fr 1fr;
	gap:3rem;
	align-items:start
}
.checks {
	list-style:none;
	padding:0;
	margin:0 0 1.5rem
}
.checks li {
	padding:.55rem 0 .55rem 2rem;
	border-bottom:1px solid var(--line);
	position:relative
}
.checks li::before {
	content:"";
	position:absolute;
	left:0;
	top:1rem;
	width:.9rem;
	height:.9rem;
	border-radius:50%;
	background:var(--sky);
	border:3px solid var(--btn)
}
.price {
	position:sticky;
	top:96px;
	background:var(--deep);
	color:#fff;
	border-radius:22px;
	padding:2rem
}
.price .n {
	font:800 3.4rem "Bricolage Grotesque",sans-serif;
	line-height:1
}
.price ul {
	list-style:none;
	padding:0;
	margin:1rem 0 1.5rem
}
.price li {
	padding:.3rem 0;
	border-bottom:1px solid rgba(255,255,255,.2)
}
.price .opt {
	border-bottom:1px solid rgba(255,255,255,.25);
	padding:.8rem 0
}
.price .opt span {
	display:block;
	font-size:.92rem;
	opacity:.9
}
.price .opt .n {
	font-size:2.4rem
}
.price .btn {
	width:100%;
	text-align:center;
	background:#fff;
	color:var(--deep);
	border-color:#fff
}
.price .btn:hover {
	background:var(--sky);
	border-color:var(--sky)
}
/* Programme */
.alt {
	background:var(--pale)
}
.steps {
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:1rem;
	list-style:none;
	padding:0;
	margin:2rem 0 0;
	counter-reset:s
}
.steps li {
	counter-increment:s;
	background:var(--surface);
	border-radius:18px;
	padding:1.4rem;
	border-top:5px solid var(--btn)
}
.steps li::before {
	content:counter(s);
	font:800 2rem "Bricolage Grotesque",sans-serif;
	color:var(--link)
}
.steps h3 {
	font-size:1.05rem;
	margin:.2rem 0 .4rem
}
.steps p {
	font-size:.95rem;
	margin:0
}
/* Pratique */
.grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.2rem;
	margin-top:2rem
}
.card {
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:18px;
	padding:1.5rem
}
.card h3 {
	color:var(--link)
}
.card p {
	margin:0;
	font-size:.98rem
}
/* Vidéo + images */
.ph {
	background:linear-gradient(135deg,#a9defc,#4aa3e8);
	display:grid;
	place-items:center;
	color:#fff;
	font-weight:600;
	text-align:center;
	padding:1rem;
	border-radius:18px;
	min-height:200px
}
.video {
	aspect-ratio:16/9;
	position:relative;
	cursor:pointer;
	border:0;
	width:100%;
	font:inherit;
	background:linear-gradient(135deg,#0a3d78,#1976d2)
}
.video span {
	width:84px;
	height:84px;
	border-radius:50%;
	background:#fff;
	color:var(--deep);
	display:grid;
	place-items:center;
	font-size:2rem;
	padding-left:6px
}
.gal {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:.8rem;
	margin-top:2rem
}
.gal button {
	display:block;
	width:100%;
	min-height:0;
	padding:0;
	border:0;
	border-radius:18px;
	cursor:zoom-in;
	font:inherit;
	aspect-ratio:4/3;
	background-size:cover;
	background-position:center;
	transition:filter .25s
}
.gal button:nth-child(1) {
	grid-column:span 2;
	grid-row:span 2;
	aspect-ratio:auto;
	height:100%
}
.gal button:nth-child(7) {
	grid-column:1/-1;
	aspect-ratio:16/7
}
.mono .portrait {
	background-size:cover;
	background-position:center 30%
}
.ln {
	display:block;
	margin-bottom:.45rem
}
.gal button:hover {
	filter:brightness(1.08)
}
.lb {
	position:fixed;
	inset:0;
	background:rgba(3,20,40,.92);
	display:none;
	place-items:center;
	z-index:90;
	padding:1.5rem
}
.lb.on {
	display:grid
}
.lb .ph {
	width:min(1000px,100%);
	height:min(82vh,100%);
	background-color:transparent;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center
}
.lb .x {
	position:absolute;
	top:calc(1rem + env(safe-area-inset-top,0px));
	right:1.2rem;
	font-size:2.4rem;
	color:#fff;
	background:none;
	border:0;
	cursor:pointer
}
.lb .nav {
	position:absolute;
	top:50%;
	translate:0 -50%;
	width:52px;
	height:52px;
	border-radius:50%;
	border:0;
	background:rgba(255,255,255,.22);
	color:#fff;
	font-size:2rem;
	line-height:1;
	cursor:pointer
}
.lb .nav:hover {
	background:rgba(255,255,255,.4)
}
.lb .prev {
	left:1rem
}
.lb .next {
	right:1rem
}
.lb .cnt {
	position:absolute;
	bottom:calc(1rem + env(safe-area-inset-bottom,0px));
	left:50%;
	translate:-50% 0;
	color:#fff;
	font-weight:600
}
/* Moniteur */
.mono {
	display:grid;
	grid-template-columns:1fr 1.4fr;
	gap:3rem;
	align-items:center
}
.mono .ph {
	aspect-ratio:4/5
}
/* Avis */
.rev {
	display:flex;
	gap:1rem;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	padding:1rem 0;
	scrollbar-width:none
}
.rev article {
	flex:0 0 min(380px,85%);
	scroll-snap-align:start;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:18px;
	padding:1.5rem
}
.stars {
	color:#f5a623;
	letter-spacing:.1em
}
.rev small {
	color:var(--muted)
}
.arrows {
	display:flex;
	gap:.6rem
}
.arrows button {
	width:46px;
	height:46px;
	border-radius:50%;
	border:2px solid var(--btn);
	background:none;
	color:var(--link);
	font-size:1.3rem;
	cursor:pointer
}
.head {
	display:flex;
	justify-content:space-between;
	align-items:end;
	gap:1rem;
	flex-wrap:wrap
}
/* Autres vols */
.cards2 {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1.4rem;
	margin-top:2rem
}
.fl {
	background:var(--surface);
	border-radius:22px;
	overflow:hidden;
	border:1px solid var(--line)
}
.fl .ph {
	border-radius:0;
	min-height:190px
}
.fl div.b {
	padding:1.4rem
}
/* Réserver */
.book {
	background:var(--deep);
	color:#fff
}
.book a {
	color:var(--sky)
}
form {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1rem;
	margin-top:1.5rem
}
label {
	display:grid;
	gap:.3rem;
	font-weight:500
}
input,select,textarea {
	font:inherit;
	padding:.8rem 1rem;
	border-radius:12px;
	border:2px solid transparent;
	background:#fff;
	color:#0a2540
}
.full {
	grid-column:1/-1
}
.smsbox {
	background:rgba(255,255,255,.12);
	border:1px solid rgba(255,255,255,.3);
	border-radius:18px;
	padding:1.4rem;
	margin:1.5rem 0
}
.smsbox p {
	margin:0 0 .7rem
}
.smsbox .btn {
	background:#fff;
	color:#0a3d78;
	border-color:#fff
}
.smsbox .btn:hover {
	background:var(--sky);
	border-color:var(--sky)
}
#ok {
	display:none;
	background:var(--sky);
	color:var(--deep);
	padding:1rem 1.2rem;
	border-radius:12px;
	font-weight:600
}
footer {
	background:#04203f;
	color:#cfe6fa;
	padding:3rem 0 5.5rem;
	font-size:.95rem
}
footer a {
	color:#fff
}
footer .f {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:2rem
}
.mob {
	display:none
}
.wa {
	position:fixed;
	right:1rem;
	bottom:calc(1rem + env(safe-area-inset-bottom,0px));
	z-index:55;
	background:#1976d2;
	color:#fff;
	border-radius:999px;
	padding:.8rem 1.3rem;
	text-decoration:none;
	font-weight:600;
	box-shadow:0 6px 20px rgba(0,40,90,.4)
}
@media (max-width:860px) {
	section {
		padding:3.5rem 0
	}
	.burger {
		display:block
	}
	nav ul {
		position:absolute;
		top:72px;
		left:0;
		right:0;
		flex-direction:column;
		background:var(--deep);
		padding:1.2rem;
		display:none;
		gap:1rem
	}
	nav ul.open {
		display:flex
	}
	.two,.mono,.cards2,form {
		grid-template-columns:1fr
	}
	.steps {
		grid-template-columns:1fr 1fr
	}
	.grid {
		grid-template-columns:1fr
	}
	.gal {
		grid-template-columns:1fr 1fr
	}
	.gal button:nth-child(1) {
		grid-row:auto;
		aspect-ratio:4/3;
		height:auto
	}
	.gal button:nth-child(7) {
		aspect-ratio:16/9
	}
	.gal button:nth-child(10) {
		grid-column:1/-1;
		aspect-ratio:16/10
	}
	.price {
		position:static
	}
	.hero .in {
		padding-bottom:5rem
	}
	.glider {
		top:11%
	}
}
@media (prefers-reduced-motion:reduce) {
	.glider {
		left:58%
	}
	* {
		animation:none!important;
		scroll-behavior:auto!important;
		transition:none!important
	}
}
.page {
	display:none
}
.page.on {
	display:block
}
.page:not(#p-accueil) {
	padding-top:calc(72px + 1rem);
	min-height:80vh
}
nav a.cur:not(.btn) {
	text-decoration:underline;
	text-underline-offset:6px
}
.grid .card:last-child:nth-child(3n+1) {
	grid-column:1/-1
}
.pr {
	font:800 2.6rem "Bricolage Grotesque",sans-serif;
	color:var(--link);
	line-height:1;
	margin:.4rem 0 .8rem
}
a.fl {
	display:block;
	padding:1.6rem;
	text-decoration:none;
	color:inherit;
	transition:transform .2s
}
a.fl:hover {
	transform:translateY(-4px)
}
a.fl p {
	margin:0
}
.num {
	font:800 1.6rem "Bricolage Grotesque",sans-serif;
	margin:1rem 0 0
}
.cta .wa-btn {
	display:inline-flex;
	align-items:center;
	gap:.6rem;
	background:#25d366;
	border-color:#25d366;
	color:#05301a
}
.cta .wa-btn:hover {
	background:#1fb855;
	border-color:#1fb855
}
.fl .warn {
	margin-top:.7rem;
	font-weight:600;
	color:var(--link)
}
.price .opt .warn {
	margin-top:.5rem;
	font-weight:600;
	opacity:1;
	color:var(--sky)
}
.mono .ph.portrait {
	aspect-ratio:8/7;
	background-position:center;
	width:100%
}
/* Réserver : plus d’air entre le bouton SMS et WhatsApp */
.smsbox .cta {
	margin-bottom:0
}
.smsbox .num {
	margin:4rem 0 .7rem;
	padding-top:2.75rem;
	border-top:1px solid rgba(255,255,255,.25)
}
.smsrow {
	align-items:center;
	gap:1rem 1.6rem
}
.smsrow .tel {
	font:800 1.5rem "Bricolage Grotesque",Figtree,sans-serif;
	color:#fff;
	text-decoration:none;
	white-space:nowrap
}
.smsrow .tel:hover {
	text-decoration:underline
}
/* Moniteurs : second moniteur (photo à droite sur grand écran) */
@media (min-width:861px) {
	.mono.flip {
		grid-template-columns:1.4fr 1fr
	}
	.mono.flip .ph {
		order:2
	}
}
.mono .ph.dh span {
	font:800 clamp(3.5rem,9vw,6rem) "Bricolage Grotesque",Figtree,sans-serif;
	letter-spacing:.06em;
	opacity:.92
}
.mono .tags {
	display:flex;
	flex-wrap:wrap;
	gap:.5rem;
	margin:0 0 1.4rem
}
.mono .tags .tag {
	margin:0
}
.mono .tag {
	display:inline-block;
	background:var(--pale);
	border:1px solid var(--line);
	color:var(--link);
	padding:.4rem 1.1rem;
	border-radius:999px;
	font-weight:600;
	font-size:.97rem;
	margin:0 0 1.3rem
}
.legal h2 {
	margin-bottom:.3em
}
.legal h3 {
	margin:1.8em 0 .4em;
	color:var(--link)
}
.legal ul {
	max-width:68ch;
	padding-left:1.2rem
}
.legal mark {
	background:#ffe9a8;
	color:#5a3d00;
	padding:0 .25em;
	border-radius:4px
}
.legal .upd {
	color:var(--muted);
	font-size:.92rem
}
footer .f a {
	text-underline-offset:3px
}


/* Vidéo sous la galerie */
.gal-video {
	margin:2rem auto 0;
	max-width:560px;
	aspect-ratio:1/1;
	border-radius:16px;
	overflow:hidden;
	background:#06234b
}
.gal-video video {
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
	pointer-events:none
}

/* Réserver : encadré WhatsApp vert à côté du numéro */
.smsrow .wabox {
	display:inline-flex;
	align-items:center;
	gap:.6rem;
	background:#25D366;
	color:#fff;
	padding:.65rem 1.2rem;
	border-radius:12px;
	text-decoration:none;
	font-weight:500;
	box-shadow:0 4px 14px rgba(0,0,0,.2);
	transition:background .2s,transform .2s
}
.smsrow .wabox strong {
	font-weight:800;
	white-space:nowrap
}
.smsrow .wabox:hover {
	background:#1ebe5a;
	transform:translateY(-1px)
}
.smsrow .wabox:focus-visible {
	outline:3px solid #fff;
	outline-offset:2px
}
@media (max-width:480px) {
	.smsrow .wabox {
		width:100%;
		justify-content:center;
		padding:.65rem .8rem;
		gap:.5rem;
		font-size:.95rem
	}
}