/*
* Zephyr — Async CSS (below-the-fold)
* Charger via preload + onload pour éviter le blocage du rendu :
*
*
*
*
* Contient tout ce qui n'est PAS dans critical.css.
*/
/* ── Section padding ── */
.section-padding{padding-top:64px;padding-bottom:64px}
@media(min-width:1024px){.section-padding{padding-top:96px;padding-bottom:96px}}
/* ── Quick facts ── */
.quick-facts{background:var(--color-bg-light)}
.quick-facts__grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
list-style:none;margin:0;padding:0;
}
@media(min-width:640px){.quick-facts__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.quick-facts__grid{grid-template-columns:repeat(6,1fr)}}
.quick-facts__item{
background:var(--color-bg-warm);border-radius:16px;padding:24px 16px;
text-align:center;border:1px solid var(--color-border);
}
.quick-facts__icon{width:30px;height:30px;display:block;margin-bottom:8px;color:var(--cz-brass,#A8845C)}.quick-facts__icon svg{width:100%;height:100%;display:block}
.quick-facts__label{
display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;
color:var(--color-text-secondary);font-weight:700;margin-bottom:4px;
}
.quick-facts__value{display:block;font-size:14px;font-weight:600;color:var(--color-text)}
/* ── Experience block ── */
.experience-block .experience-block__inner{
display:grid;grid-template-columns:1fr;gap:48px;align-items:center;
}
@media(min-width:1024px){.experience-block .experience-block__inner{grid-template-columns:1fr 1fr;gap:64px}}
.experience-block__title{margin-bottom:16px}
.experience-block__body{margin-bottom:16px}
.experience-block__cta{margin-top:8px}
.experience-block__img{border-radius:16px;width:100%;height:auto;object-fit:cover}
/* ── Itinerary timeline ── */
.itinerary-timeline{background:var(--color-bg-warm)}
.itinerary-timeline__heading{text-align:center;margin-bottom:48px}
.itinerary-timeline__list{list-style:none;margin:0;padding:0;position:relative}
.itinerary-timeline__list::before{
content:'';position:absolute;left:20px;top:0;bottom:0;
width:2px;background:var(--color-border);
}
@media(min-width:1024px){.itinerary-timeline__list::before{left:50%;transform:translateX(-50%)}}
.itinerary-timeline__item{
display:flex;gap:24px;padding-bottom:32px;position:relative;
}
.itinerary-timeline__marker{
flex-shrink:0;width:40px;height:40px;border-radius:50%;
background:var(--color-accent);color:#fff;
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:14px;z-index:1;
}
.itinerary-timeline__content{flex:1;padding-top:8px}
.itinerary-timeline__step-title{font-size:18px;font-weight:600;margin-bottom:8px}
.itinerary-timeline__step-desc{font-size:14px;margin:0}
/* ── Included list ── */
.included-list{background:var(--color-bg-light)}
.included-list__heading{text-align:center;margin-bottom:48px}
.included-list__grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:640px){.included-list__grid{grid-template-columns:1fr 1fr}}
.included-list__col-title{font-size:18px;margin-bottom:16px}
.included-list__items{list-style:none;margin:0;padding:0}
.included-list__item{
display:flex;align-items:flex-start;gap:8px;
padding:8px 0;border-bottom:1px solid var(--color-border);
font-size:14px;
}
.included-list__item:last-child{border-bottom:none}
/* ── Gallery grid ── */
.gallery-grid{background:var(--color-bg-warm)}
.gallery-grid__heading{text-align:center;margin-bottom:32px}
.gallery-grid__grid{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:auto;
gap:12px;
}
.gallery-grid__item--large{grid-column:1/-1}
@media(min-width:640px){
.gallery-grid__grid{grid-template-columns:repeat(4,1fr)}
.gallery-grid__item--large{grid-column:span 2;grid-row:span 2}
}
.gallery-grid__item img{
width:100%;height:100%;object-fit:cover;border-radius:12px;
transition:transform .25s ease;
}
.gallery-grid__item:hover img{transform:scale(1.02)}
/* ── Trust bar ── */
.trust-bar{background:var(--color-accent);padding:24px 0}
.trust-bar__inner{
display:flex;flex-wrap:wrap;gap:24px;
align-items:center;justify-content:center;
}
.trust-bar__item{display:flex;align-items:center;gap:8px;color:#fff}
.trust-bar__icon{width:22px;height:22px;color:var(--cz-brass,#A8845C)}.trust-bar__icon svg{width:100%;height:100%;display:block}
.trust-bar__text{font-size:14px;font-weight:600}
/* ── CTA strip ── */
.cta-strip{
background:linear-gradient(135deg,var(--color-accent),var(--color-accent-hover));
padding:64px 0;
}
.cta-strip__inner{text-align:center}
.cta-strip__title{color:#fff;margin-bottom:8px}
.cta-strip__subtitle{color:rgba(255,255,255,.85);margin-bottom:32px;font-size:18px}
.btn--white{background:#fff;color:var(--color-accent);border-color:#fff}
.btn--white:hover{background:var(--color-bg-warm)}
/* ── FAQ accordion ── */
.faq-accordion{background:var(--color-bg-light)}
.faq-accordion__heading{text-align:center;margin-bottom:48px}
.faq-accordion__wrap{max-width:760px}
.faq-accordion__item{
border-bottom:1px solid var(--color-border);
overflow:hidden;
}
.faq-accordion__question{
display:flex;justify-content:space-between;align-items:center;
padding:20px 0;cursor:pointer;list-style:none;
font-family:var(--font-heading);font-size:20px;font-weight:600;
color:var(--color-text);
}
.faq-accordion__question::-webkit-details-marker{display:none}
.faq-accordion__icon::after{content:'+'`font-size:1.5rem;transition:transform .2s ease}
details[open] .faq-accordion__icon::after{content:'−'}
.faq-accordion__answer{padding-bottom:20px;font-size:15px}
/* ── Form section ── */
.form-section{background:var(--color-bg-light)}
.form-section__wrap{max-width:640px}
.form-section__heading{text-align:center;margin-bottom:8px}
.form-section__subheading{text-align:center;color:var(--color-text-secondary);margin-bottom:48px}
/* ── Hero SEO pages — styles de base + backgrounds AVIF ── */
.hero{
position:relative;min-height:100svh;display:flex;align-items:flex-end;
padding-bottom:48px;background-size:cover;background-position:center;
background-repeat:no-repeat;color:#fff;
}
.hero::after{
content:'';position:absolute;inset:0;
background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.2) 60%,transparent 100%);
pointer-events:none;
}
.hero__content{position:relative;z-index:1;max-width:800px;padding:0 24px}
@media(min-width:1024px){.hero__content{padding:0 48px}}
.hero__title{
font-size:clamp(2rem,5vw,56px);font-weight:600;color:#fff;
margin-bottom:16px;text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.hero__subtitle{
font-size:clamp(1rem,2.5vw,28px);color:rgba(255,255,255,.9);
margin-bottom:32px;font-weight:300;text-shadow:0 1px 4px rgba(0,0,0,.2);
}
.cta-btn{
display:inline-flex;align-items:center;justify-content:center;
min-height:44px;padding:16px 32px;border-radius:8px;
font-weight:700;text-decoration:none;cursor:pointer;border:2px solid transparent;
transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.cta-btn--primary{background-color:#1A6B6B;color:#fff;border-color:#1A6B6B}
.cta-btn--primary:hover{background-color:#145454;border-color:#145454}
.cta-btn--secondary{background-color:#fff;color:#1A6B6B;border-color:#fff}
.cta-btn--outline{background-color:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
/* Hero backgrounds — JPEG fallback + AVIF */
.hero--day-charter{background-image:url('/images/day-charter/hero-day-charter.jpg')}
.hero--saint-martin{background-image:url('/images/saint-martin/hero-private-catamaran-saint-martin.jpg')}
.hero--romantic{background-image:url('/images/romantic/hero-romantic-catamaran-overnight.jpg')}
.hero--family{background-image:url('/images/family/hero-family-catamaran-caribbean.jpg')}
.hero--wedding{background-image:url('/images/wedding/hero-catamaran-wedding-anniversary.jpg')}
@supports(background-image:image-set(url('a.avif') type('image/avif'))){
.hero--day-charter{background-image:image-set(url('/images/day-charter/hero-day-charter.avif') type('image/avif'),url('/images/day-charter/hero-day-charter.jpg') type('image/jpeg'))}
.hero--saint-martin{background-image:image-set(url('/images/saint-martin/hero-private-catamaran-saint-martin.avif') type('image/avif'),url('/images/saint-martin/hero-private-catamaran-saint-martin.jpg') type('image/jpeg'))}
.hero--romantic{background-image:image-set(url('/images/romantic/hero-romantic-catamaran-overnight.avif') type('image/avif'),url('/images/romantic/hero-romantic-catamaran-overnight.jpg') type('image/jpeg'))}
.hero--family{background-image:image-set(url('/images/family/hero-family-catamaran-caribbean.avif') type('image/avif'),url('/images/family/hero-family-catamaran-caribbean.jpg') type('image/jpeg'))}
.hero--wedding{background-image:image-set(url('/images/wedding/hero-catamaran-wedding-anniversary.avif') type('image/avif'),url('/images/wedding/hero-catamaran-wedding-anniversary.jpg') type('image/jpeg'))}
}
/* Sections supplémentaires articles SEO */
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 24px}
@media(min-width:1024px){.container{padding:0 48px}}
.why-zephyr,.featured-offer,.whats-included,.cta-final{padding:64px 0}
.why-zephyr{background:var(--color-bg-warm,#F8F4EE)}
.usp-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:32px}
@media(min-width:640px){.usp-grid{grid-template-columns:repeat(3,1fr)}}
.usp-card{background:#fff;border-radius:16px;padding:32px 24px;border:1px solid #DDD6CB;text-align:center}
.usp-card__icon{display:block;width:34px;height:34px;margin-bottom:12px;color:var(--cz-brass,#A8845C)}.usp-card__icon svg{width:100%;height:100%;display:block}
.usp-card__title{font-size:18px;font-weight:600;color:#1C2B2B;margin-bottom:8px}
.offer-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px}
/* Cartes d'offres — définies ici et non dans une feuille de page : utilisées par
private-catamaran-saint-martin (grille), romantic-catamaran-overnight et
private-catamaran-wedding-anniversary (.offer-links en flex). Elles vivaient dans
private-catamaran-saint-martin.css, qu'aucune page ne chargeait : les cartes de ces
3 pages tombaient donc en display:block, sans fond ni filet. — 2026-07-29
Attention : sur day-charter et family, .offer-links ne contient que des boutons,
aucune .offer-card — ces règles ne les touchent pas. */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:32px}
.offer-card{
background:var(--color-bg-warm,#F8F4EE);border:1px solid var(--color-border,#DDD6CB);
border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:12px;
}
.offer-links>.offer-card{flex:1 1 280px}
/* Le thème force text-transform:uppercase + letter-spacing:2px sur les titres. */
.offer-card h3,.offer-card h4{
font-family:var(--font-heading,'Cormorant Garamond',Georgia,serif);
font-size:1.25rem;line-height:1.25;text-transform:none;letter-spacing:0;
color:var(--color-text,#1C2B2B);
}
.offer-card .cta-btn{margin-top:auto;align-self:flex-start}
.faq{padding:64px 0;background:var(--color-bg-light,#fff)}
.faq__list{max-width:720px;margin:0 auto}
.faq__item{border-bottom:1px solid #DDD6CB}
.faq__question{
display:block;width:100%;padding:20px 0;cursor:pointer;list-style:none;
font-size:18px;font-weight:600;color:#1C2B2B;
}
.faq__question::-webkit-details-marker{display:none}
.faq__answer{padding-bottom:20px;font-size:15px;color:#5A7070}
.cta-final{text-align:center;background:var(--color-accent,#1A6B6B);color:#fff;padding:80px 24px}
.cta-final h2{color:#fff}
/* Le pictogramme du bouton WhatsApp vit dans un sans
classe : on vise le