/* Cantal Parapente — feuille de style commune (piste C « Brume ») */
:root{
  --bg:#ffffff; --mist:#eef3f7; --mist-2:#f6f9fb;
  --ink:#17222c; --muted:#6f7d89; --line:#e4eaef;
  --accent:#4a8bb5; --accent-dark:#2f6d96; --warm:#e2b54a;
  --radius:18px; --radius-lg:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Jost,system-ui,sans-serif;font-weight:300;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.serif{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400}
em.serif,h1 em,h2 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400}
h1 em{color:var(--accent)}

/* ── Navigation ── */
.site-nav{display:flex;align-items:center;justify-content:space-between;padding:28px 0;gap:24px}
.logo{font-weight:500;letter-spacing:.32em;text-transform:uppercase;font-size:15px;white-space:nowrap}
.logo span{color:var(--accent)}
.menu{display:flex;gap:28px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.menu a{padding:4px 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.menu a:hover,.menu a[aria-current="page"]{border-color:var(--ink)}
.menu .cta{color:var(--accent)}
.burger{display:none;background:none;border:0;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;color:var(--ink)}

/* ── Éléments communs ── */
.eyebrow{display:block;font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);font-weight:400}
h1{font-weight:300;font-size:clamp(40px,6.2vw,86px);line-height:1.05;letter-spacing:-.01em}
h2{font-weight:300;font-size:clamp(30px,4vw,50px);line-height:1.12}
h3{font-weight:400;font-size:24px;line-height:1.3}
.lead{color:var(--muted);font-size:18px}
.btn{display:inline-block;border:1px solid var(--ink);padding:14px 34px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;border-radius:60px;transition:background .2s,color .2s}
.btn:hover{background:var(--ink);color:#fff}
.btn.solid{background:var(--ink);color:#fff}
.btn.solid:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btns{display:flex;gap:14px;flex-wrap:wrap}
section{padding:110px 0}
.muted{color:var(--muted)}

/* ── Accueil ── */
.hero{text-align:center;padding:60px 0 0}
.hero h1{margin:20px auto 0;max-width:1000px}
.hero .lead{max-width:580px;margin:24px auto 0}
.hero .btns{justify-content:center;margin-top:34px}
.pano{margin-top:70px;height:560px;background:url(../img/vol-puy-mary-panorama.jpg) center/cover;background-image:image-set(url(../img/vol-puy-mary-panorama.webp) type('image/webp'),url(../img/vol-puy-mary-panorama.jpg) type('image/jpeg'));border-radius:var(--radius-lg)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.split p{color:var(--muted);font-size:17px;margin-bottom:16px}
.tiles{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px;margin-top:70px}
.tile{position:relative;border-radius:var(--radius);overflow:hidden;height:420px;color:#fff}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.tile:hover img{transform:scale(1.04)}
.tile div{position:absolute;inset:auto 0 0 0;padding:28px;background:linear-gradient(transparent,rgba(15,30,45,.65))}
.tile p{font-size:14px;opacity:.9}
.meteo{background:var(--mist);border-radius:var(--radius-lg);padding:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;align-items:center}
.meteo b{display:block;font-size:34px;font-weight:300}
.meteo span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.meteo-note{grid-column:1/-1;font-size:13px;color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5bb07a;margin-right:8px;vertical-align:middle}

/* ── En-tête de page intérieure ── */
.page-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;padding:50px 0 30px}
.page-hero h1{font-size:clamp(38px,5.2vw,72px);margin-top:18px}
.page-hero .lead{margin-top:22px;max-width:520px}
.page-hero .btns{margin-top:32px}
.page-hero img{width:100%;height:560px;object-fit:cover;border-radius:var(--radius-lg)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:70px;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts b{display:block;font-size:30px;font-weight:300}
.facts span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ── Formules ── */
.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:56px}
.section-head .lead{max-width:440px;font-size:16px}
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.offer{background:var(--mist-2);border:1px solid var(--line);border-radius:var(--radius);padding:36px;display:flex;flex-direction:column}
.offer.featured{background:#fff;border-color:var(--accent);box-shadow:0 24px 50px -30px rgba(47,109,150,.45)}
.offer{position:relative}
.offer .badge{position:absolute;top:-13px;left:36px;background:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:40px;padding:3px 12px}
.offer .duration{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.offer p{color:var(--muted);font-size:15px;margin:18px 0 26px;flex:1}
.offer .price{font-size:44px;font-weight:300;line-height:1}
.offer .price small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.extras{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.extra{border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.extra h3{font-size:19px}
.extra p{font-size:14px;color:var(--muted);margin-top:6px}
.note{font-size:14px;color:var(--muted);margin-top:26px}

/* ── Déroulé ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;counter-reset:s}
.step{border-top:1px solid var(--ink);padding-top:22px}
.step::before{counter-increment:s;content:"0" counter(s);display:block;font-family:'Playfair Display',Georgia,serif;font-style:italic;color:var(--accent);font-size:22px;margin-bottom:10px}
.step p{font-size:15px;color:var(--muted);margin-top:8px}

/* ── Bandeau photo + texte ── */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.feature img{width:100%;height:520px;object-fit:cover;border-radius:var(--radius-lg)}
.feature p{color:var(--muted);font-size:17px;margin-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chips span{font-size:13px;border:1px solid var(--line);border-radius:40px;padding:6px 16px;background:var(--mist-2)}

/* ── FAQ ── */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line);padding:24px 0}
.faq summary{cursor:pointer;list-style:none;font-size:19px;font-weight:400;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:24px;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p,.faq details li{color:var(--muted);font-size:16px}
.faq details p{margin-top:12px}
.faq details ul{margin:10px 0 0 18px}

/* ── Appel à l'action ── */
.cta-band{background:var(--mist);border-radius:var(--radius-lg);padding:80px 40px;text-align:center}
.cta-band .lead{max-width:560px;margin:18px auto 0}
.cta-band .btns{justify-content:center;margin-top:32px}

/* ── Texte référencement ── */
.seo-text{max-width:860px;color:var(--muted);font-size:15px}
.seo-text h2{font-size:26px;color:var(--ink);margin-bottom:14px}
.seo-text p{margin-bottom:14px}

/* ── Pied de page ── */
.site-footer{border-top:1px solid var(--line);padding:60px 0 40px;font-size:14px;color:var(--muted)}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.site-footer h4{font-weight:400;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.site-footer li{list-style:none;margin-bottom:6px}
.site-footer .legal{margin-top:40px;font-size:12px;letter-spacing:.06em}

/* ── Mobile ── */
@media(max-width:900px){
  .wrap{padding:0 16px}
  section{padding:70px 0}
  .burger{display:block}
  .menu{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:8px 16px 20px;border-bottom:1px solid var(--line);z-index:20}
  .menu.open{display:flex}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line)}
  .site-nav{position:relative}
  .pano{height:320px;margin-top:44px}
  .split,.tiles,.page-hero,.offers,.extras,.feature,.site-footer .cols{grid-template-columns:1fr;gap:24px}
  .tile{height:300px}
  .meteo{grid-template-columns:1fr 1fr;padding:30px}
  .page-hero img{height:340px}
  .facts,.steps{grid-template-columns:1fr 1fr;gap:26px}
  .section-head{flex-direction:column;align-items:start;gap:16px}
  .feature img{height:320px}
  .cta-band{padding:56px 22px}
}

/* ── Vidéo verticale (page Baptêmes) ── */
.video-frame{justify-self:center;width:min(100%,340px);aspect-ratio:9/16;border-radius:var(--radius-lg);overflow:hidden;background:var(--mist);box-shadow:0 30px 60px -30px rgba(23,34,44,.35)}
.video-frame iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:900px){.video-frame{width:min(100%,300px)}}

/* ── Projets / cartes numérotées ── */
.projects{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.project{border-top:1px solid var(--ink);padding-top:22px}
.project .num{display:block;font-family:'Playfair Display',Georgia,serif;font-style:italic;color:var(--accent);font-size:22px;margin-bottom:10px}
.project p{color:var(--muted);font-size:15px;margin-top:8px}
.maroc{background:#fbf6ee}
.maroc-card{background:linear-gradient(160deg,#f3e3c8,#e9cfa6);border-radius:var(--radius-lg);min-height:420px;padding:48px;display:flex;flex-direction:column;justify-content:flex-end}
.maroc-card .maroc-big{font-size:clamp(54px,7vw,92px);font-weight:300;line-height:1;margin-top:auto;color:#5a3a17}
.maroc-card .maroc-sub{color:#7a5a35;font-size:17px;margin-top:8px}

/* ── Page météo ── */
.anchors{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.anchors a{font-size:13px;border:1px solid var(--line);border-radius:40px;padding:6px 16px;background:var(--mist-2)}
.anchors a:hover{border-color:var(--ink)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tab{font:inherit;font-size:13px;letter-spacing:.06em;background:#fff;border:1px solid var(--line);border-radius:40px;padding:8px 18px;cursor:pointer;color:var(--ink)}
.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.windy{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--mist)}
.windy iframe{width:100%;height:720px;border:0;display:block}
.ema-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
.ema-controls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.ema-days{display:flex;gap:8px}
.ema-hour{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--muted)}
.ema-hour output{min-width:44px;color:var(--ink);font-weight:400}
.ema-hour input{width:220px;accent-color:var(--accent)}
.ema-graph svg{width:100%;height:auto;display:block}
.ema-legend{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:13px;color:var(--muted);margin-top:10px}
.ema-legend span{display:inline-block;width:22px;height:0;border-top:2px solid;margin-right:-10px;vertical-align:middle}
.ema-legend .l-t{border-color:#d0493a}.ema-legend .l-td{border-color:#3b7fc4}
.ema-legend .l-dry{border-color:#e0b26a;border-top-style:dashed}.ema-legend .l-wet{border-color:#79b48c;border-top-style:dashed}
.ema-legend .l-plomb{border-color:var(--ink);border-top-style:dotted}
.ema-source{font-size:12px;color:var(--muted);margin-top:8px}
.ema-source a{text-decoration:underline}
.links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.link-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;transition:border-color .2s,transform .2s}
.link-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.link-card p{font-size:14px;color:var(--muted);margin-top:4px}
.link-card span{display:inline-block;margin-top:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
@media(max-width:900px){
  .projects,.links{grid-template-columns:1fr 1fr;gap:24px}
  .windy iframe{height:560px}
  .ema-card{padding:16px}
  .ema-hour input{width:150px}
  .maroc-card{min-height:260px;padding:30px}
}
@media(max-width:560px){.projects,.links{grid-template-columns:1fr}}
.video-fallback{position:relative;display:block;width:100%;height:100%}
.video-fallback img{width:100%;height:100%;object-fit:cover}
.video-fallback span{white-space:nowrap;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.92);border-radius:40px;padding:10px 22px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.projects.three{grid-template-columns:repeat(3,1fr)}

/* ── Agenda ── */
.events{display:grid;gap:16px;max-width:980px}
.event{display:grid;grid-template-columns:170px 1fr;gap:34px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.event-date{background:var(--mist);border-radius:14px;padding:20px 14px;text-align:center}
.event-date b{display:block;font-size:26px;font-weight:300;line-height:1.2}
.event-date span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.event-tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.event h3{margin-top:4px}
.event p{color:var(--muted);font-size:15px;margin-top:8px}
.event .event-meta{font-size:13px;color:var(--ink)}

/* ── Contact ── */
.contact-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:60px;align-items:start}
.cform{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;display:grid;gap:18px}
.cform[hidden]{display:none}
.cform label{display:grid;gap:6px;font-size:13px;letter-spacing:.04em;color:var(--muted)}
.cform input,.cform select,.cform textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--mist-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--accent);background:#fff}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform button{cursor:pointer;font-family:inherit}
.form-msg{font-size:14px;color:var(--accent-dark);min-height:1em}
.contact-side h3{font-size:13px;letter-spacing:.24em;text-transform:uppercase;margin:0 0 8px}
.contact-side p{color:var(--muted);margin-bottom:28px}
.contact-side a{color:var(--ink)}
@media(max-width:900px){
  .event{grid-template-columns:1fr;gap:16px;padding:22px}
  .event-date{text-align:left;display:flex;gap:12px;align-items:baseline}
  .contact-grid,.frow{grid-template-columns:1fr;gap:16px}
  .cform{padding:20px}
}

/* ── Sites de vol ── */
.access{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:center;background:var(--mist-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px 40px}
.site-block{padding:80px 0}
.site-block + .site-block{border-top:1px solid var(--line)}
.site-stats{display:flex;flex-wrap:wrap;gap:30px;margin:22px 0 6px}
.site-stats b{display:block;font-size:24px;font-weight:300}
.site-stats span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ── Textes légaux ── */
.legal-text{max-width:820px}
.legal-text h2{font-size:clamp(28px,3.4vw,40px);margin:60px 0 10px;padding-top:20px;border-top:1px solid var(--line)}
.legal-text h2:first-child{margin-top:0;border-top:0;padding-top:0}
.legal-text h3{font-size:19px;margin:28px 0 6px}
.legal-text p,.legal-text li{color:var(--muted);font-size:16px}
.legal-text p{margin-bottom:10px}
.legal-text ul{margin:6px 0 12px 20px}
.legal-text strong{color:var(--ink);font-weight:400}
mark.todo{background:#fff1b8;color:#6b5300;padding:1px 6px;border-radius:4px}
@media(max-width:900px){.access{grid-template-columns:1fr;padding:24px}.site-block{padding:56px 0}}
.menu .lang{border:1px solid var(--line);border-radius:30px;padding:3px 10px;letter-spacing:.12em}
.menu .lang:hover{border-color:var(--ink)}
@media(max-width:900px){.menu .lang{align-self:flex-start;margin-top:10px;padding:6px 14px}}

/* ── Logo ── */
.site-nav .logo img{height:46px;width:auto;display:block}
.logo-foot img{height:96px;width:auto;display:block}
@media(max-width:900px){.site-nav .logo img{height:38px}}

/* ── Photos des sites de vol ── */
.site-block .feature img{height:560px}
.site-duo{display:grid;grid-template-rows:2fr 1fr;gap:12px;height:560px;min-width:0}
.site-duo picture{display:block;height:100%;min-height:0}
.site-duo img,.site-block .site-duo img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg);display:block}
@media(max-width:900px){.site-block .feature img{height:380px}.site-duo{height:460px}}

/* ── Galerie baptême ── */
.gallery{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:280px 280px;gap:12px}
.gallery > :first-child{grid-row:1 / 3}
.gallery > :nth-child(4){grid-column:2 / 4}
.gallery picture{display:block;height:100%;min-height:0}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);display:block}
@media(max-width:900px){
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:340px 200px 200px}
  .gallery > :first-child{grid-row:auto;grid-column:1 / 3}
  .gallery > :nth-child(4){grid-column:1 / 3}
}

/* ── Photo Maroc ── */
.maroc-card{background:linear-gradient(to top,rgba(45,28,12,.78) 0%,rgba(45,28,12,.15) 55%,rgba(45,28,12,0) 75%),url(../img/maroc-parapente-mirleft.jpg) center/cover;color:#fff}
.maroc-card .eyebrow{color:#f3d7a6}
.maroc-card .maroc-big{color:#fff}
.maroc-card .maroc-sub{color:#f6e7cf}
.maroc-card{justify-content:flex-start;background:linear-gradient(to bottom,rgba(45,28,12,.62) 0%,rgba(45,28,12,.12) 45%,rgba(45,28,12,0) 65%),url(../img/maroc-parapente-mirleft.jpg) center 60%/cover}
.maroc-card .maroc-big{margin-top:14px;font-size:clamp(46px,5.5vw,76px)}
@media(max-width:900px){.maroc-card{min-height:360px;padding:24px}.maroc-card .maroc-big{font-size:44px;margin-top:8px}.maroc-card .maroc-sub{font-size:15px}}

/* ── Bandeau balise (accueil) ── */
#balise{grid-template-columns:1.5fr repeat(4,1fr)}
#balise .dot{background:#9fb0bd;margin-right:8px}
#balise b{font-size:30px;transition:opacity .3s}
#balise:not(.ready) b{opacity:.5}
.b-arrow{display:inline-block;font-style:normal;color:var(--accent)}
.meteo-note a{text-decoration:underline}
@media(max-width:900px){#balise{grid-template-columns:1fr 1fr}#balise > div:first-child{grid-column:1 / 3}}
#balise .meteo-note span{font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted)}
#balise #b-mode{font-size:22px;line-height:1.3;margin-top:6px}

picture{display:block}
.tile picture{height:100%}