/* Composants UI Sailoé — fidèles à l'identité actuelle, modernisés */
/* ======================================================
HEADER + NAVIGATION
Pattern Sailoé : logo gauche 30rem / nav center / lang right
====================================================== */
.sl-header {
position: sticky; top: 0; z-index: var(--sl-z-header);
background: var(--sl-color-white);
border-bottom: 1px solid var(--sl-color-border);
}
.sl-header__inner {
display: grid;
grid-template-columns: minmax(180px, 240px) 1fr auto;
align-items: center;
gap: var(--sl-space-8);
min-height: var(--sl-header-h);
padding-block: var(--sl-space-4);
}
.sl-header__logo {
font-family: var(--sl-font-serif);
font-size: 1.875rem;
font-weight: var(--sl-fw-bold);
color: var(--sl-color-anchor);
text-decoration: none;
letter-spacing: var(--sl-tracking-tight);
}
.sl-header__logo img { max-width: 185px; height: auto; }
.sl-header__logo .sl-logo-img { display: block; width: 140px; height: auto; }
.sl-header__nav { justify-self: center; }
.sl-nav { display: flex; gap: var(--sl-space-8); align-items: center; }
.sl-nav > li { position: relative; }
.sl-nav > li > a {
color: var(--sl-color-anchor-soft);
text-decoration: none;
font-weight: var(--sl-fw-medium);
font-size: var(--sl-fs-sm);
padding: var(--sl-space-3) var(--sl-space-1);
display: inline-flex; align-items: center; gap: 4px;
transition: color var(--sl-duration) var(--sl-ease);
}
.sl-nav > li > a:hover,
.sl-nav > li.current-menu-item > a,
.sl-nav > li.menu-item-has-children:hover > a { color: var(--sl-color-brand); }
.sl-nav .sub-menu {
position: absolute; top: 100%; left: 0;
background: var(--sl-color-white);
border: 1px solid var(--sl-color-border);
border-radius: var(--sl-radius-md);
padding: var(--sl-space-2);
min-width: 220px;
box-shadow: var(--sl-shadow-lg);
opacity: 0; visibility: hidden;
transform: translateY(8px);
transition: opacity var(--sl-duration) var(--sl-ease), transform var(--sl-duration) var(--sl-ease), visibility 0s linear var(--sl-duration);
list-style: none;
}
.sl-nav > li:hover > .sub-menu,
.sl-nav > li:focus-within > .sub-menu {
opacity: 1; visibility: visible; transform: translateY(0);
transition-delay: 0s;
}
.sl-nav .sub-menu a {
display: block;
padding: var(--sl-space-3) var(--sl-space-4);
color: var(--sl-color-anchor-soft);
font-size: var(--sl-fs-sm);
text-decoration: none;
border-radius: var(--sl-radius-sm);
transition: background var(--sl-duration) var(--sl-ease), color var(--sl-duration) var(--sl-ease);
}
.sl-nav .sub-menu a:hover { background: var(--sl-color-brand-pale); color: var(--sl-color-brand); }
.sl-header__actions { display: flex; align-items: center; gap: var(--sl-space-3); }
.sl-lang-switcher {
display: flex; gap: var(--sl-space-1); align-items: center;
font-family: var(--sl-font-display);
font-size: var(--sl-fs-xs);
letter-spacing: var(--sl-tracking-wider);
text-transform: uppercase;
}
.sl-lang-switcher li { padding-inline: var(--sl-space-2); }
.sl-lang-switcher a { color: var(--sl-color-ink-400); text-decoration: none; font-weight: var(--sl-fw-medium); }
.sl-lang-switcher .current-lang a, .sl-lang-switcher li.current-lang { color: var(--sl-color-brand); }
.sl-burger { display: none; width: 36px; height: 36px; flex-direction: column; gap: 5px; padding: 6px; background: none; border: 0; cursor: pointer; }
.sl-burger span { display: block; height: 2px; background: var(--sl-color-anchor); border-radius: 2px; }
@media (max-width: 980px) {
.sl-header__nav { display: none; }
.sl-burger { display: flex; }
}
/* ======================================================
RAIL FLOTTANT CONTACT (4 icônes)
Pattern Sailoé .Contact-select — signature reconnaissable
====================================================== */
.sl-rail-contact {
position: fixed; right: 0; top: 50%; transform: translateY(-50%);
z-index: var(--sl-z-rail);
display: flex; flex-direction: column; gap: var(--sl-space-2);
background: var(--sl-color-white);
border: 1px solid var(--sl-color-border);
border-right: 0;
border-radius: var(--sl-radius-md) 0 0 var(--sl-radius-md);
padding: var(--sl-space-3);
box-shadow: var(--sl-shadow-md);
}
.sl-rail-contact a, .sl-rail-contact button {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
background: var(--sl-color-brand-pale);
color: var(--sl-color-brand);
border: 1px solid transparent;
border-radius: var(--sl-radius-full);
text-decoration: none;
transition: background var(--sl-duration) var(--sl-ease), color var(--sl-duration) var(--sl-ease), transform var(--sl-duration) var(--sl-ease);
}
.sl-rail-contact a:hover, .sl-rail-contact button:hover {
background: var(--sl-color-brand);
color: var(--sl-color-white);
transform: scale(1.08);
}
.sl-rail-contact svg { width: 20px; height: 20px; }
@media (max-width: 680px) {
.sl-rail-contact { display: none; } /* Une barre bottom fixée pour mobile sera ajoutée plus tard */
}
/* ======================================================
BOUTONS
Pattern Sailoé .Btn : pilule outlined 3px cyan
====================================================== */
.sl-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--sl-space-2);
padding: 12px 28px;
font-family: var(--sl-font-sans);
font-size: var(--sl-fs-sm);
font-weight: var(--sl-fw-medium);
border-radius: var(--sl-radius-xl);
border: 3px solid var(--sl-color-brand);
background: transparent;
color: var(--sl-color-anchor-soft);
text-decoration: none;
letter-spacing: 0.02em;
cursor: pointer;
transition: transform var(--sl-duration) var(--sl-ease), box-shadow var(--sl-duration) var(--sl-ease), background var(--sl-duration) var(--sl-ease), color var(--sl-duration) var(--sl-ease);
white-space: nowrap;
}
.sl-btn:hover { background: var(--sl-color-brand); color: var(--sl-color-white); transform: translateY(-1px); box-shadow: var(--sl-shadow-brand); }
.sl-btn:active { transform: translateY(0); }
.sl-btn--primary { background: var(--sl-color-brand); color: var(--sl-color-white); }
.sl-btn--primary:hover { background: var(--sl-color-brand-dark); border-color: var(--sl-color-brand-dark); }
.sl-btn--inverse { color: var(--sl-color-white); }
.sl-btn--inverse:hover { background: var(--sl-color-white); color: var(--sl-color-anchor); border-color: var(--sl-color-white); }
.sl-btn--ghost { border-color: transparent; background: var(--sl-color-sand-light); color: var(--sl-color-anchor); }
.sl-btn--ghost:hover { background: var(--sl-color-sand); color: var(--sl-color-anchor); border-color: transparent; box-shadow: none; }
.sl-btn--lg { padding: 18px 36px; font-size: var(--sl-fs-base); }
.sl-btn--sm { padding: 8px 18px; font-size: var(--sl-fs-xs); border-width: 2px; }
.sl-cta-row { display: flex; flex-wrap: wrap; gap: var(--sl-space-3); align-items: center; }
.sl-cta-row--center { justify-content: center; }
/* ======================================================
HERO
====================================================== */
.sl-hero {
position: relative;
overflow: hidden;
}
/* Variante "scénique" : full-bleed image, min-height grand, contenu en bas (utilisée par single-destination, hero home) */
.sl-hero--scenic {
position: relative;
min-height: clamp(560px, 80vh, 820px);
display: flex; align-items: flex-end;
color: var(--sl-color-white);
background: var(--sl-color-anchor);
overflow: hidden;
}
/* Background texto outline signature aussi sur heros scéniques (généralisé V5 — variant blanc subtil) */
.sl-hero--scenic::before {
content: "NAVIGUER • VOYAGER • PARTAGER";
position: absolute;
bottom: 8%; left: 50%;
transform: translateX(-50%);
font-size: clamp(2.5rem, 8vw, 7rem);
font-weight: 900;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
letter-spacing: 0.06em;
white-space: nowrap;
pointer-events: none;
z-index: 1;
font-family: var(--sl-font-display);
}
.sl-hero--scenic > .sl-container { position: relative; z-index: 2; }
.sl-hero__media { position: absolute; inset: 0; z-index: 0; }
.sl-hero__media img, .sl-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.sl-hero__media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(38,38,38,0.0) 35%, rgba(38,38,38,0.55) 75%, rgba(38,38,38,0.85) 100%);
}
.sl-hero__inner { position: relative; z-index: 1; padding-block: clamp(3rem, 10vw, 6rem); max-width: 760px; }
.sl-hero__eyebrow {
display: inline-block;
font-family: var(--sl-font-display);
font-size: var(--sl-fs-sm);
font-weight: var(--sl-fw-medium);
letter-spacing: var(--sl-tracking-widest);
text-transform: uppercase;
color: var(--sl-color-brand-light);
margin-bottom: var(--sl-space-5);
}
.sl-hero__title {
color: var(--sl-color-white);
font-size: clamp(2.5rem, 6.5vw, 5rem);
font-weight: var(--sl-fw-bold);
line-height: var(--sl-lh-tight);
margin-bottom: var(--sl-space-5);
}
.sl-hero__title--serif {
font-family: var(--sl-font-serif);
font-weight: var(--sl-fw-regular);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.sl-hero__subtitle {
font-size: clamp(1.1rem, 1.8vw, 1.375rem);
line-height: var(--sl-lh-snug);
color: rgba(255, 255, 255, 0.88);
margin-bottom: var(--sl-space-8);
max-width: 600px;
}
/* ======================================================
SECTION HEADERS
====================================================== */
.sl-section__header { display: flex; flex-direction: column; gap: var(--sl-space-3); margin-bottom: var(--sl-space-12); max-width: 720px; }
.sl-section__header--center { margin-inline: auto; text-align: center; align-items: center; }
.sl-section__eyebrow {
font-family: var(--sl-font-display);
font-size: var(--sl-fs-xs);
letter-spacing: var(--sl-tracking-wider);
text-transform: uppercase;
color: var(--sl-color-brand);
font-weight: var(--sl-fw-semi);
}
.sl-section__title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); margin: 0; color: var(--sl-color-anchor); }
.sl-section__subtitle { font-size: var(--sl-fs-md); color: var(--sl-color-text-soft); line-height: var(--sl-lh-snug); margin: 0; }
/* ======================================================
USP / BANDEAU RÉASSURANCE (chiffres clés Sailoé)
====================================================== */
.sl-usp { padding-block: var(--sl-space-12); background: var(--sl-color-sand); }
.sl-usp__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sl-space-8); }
@media (max-width: 880px) { .sl-usp__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sl-usp__grid { grid-template-columns: 1fr; } }
.sl-usp__item { text-align: center; }
.sl-usp__num {
display: block;
font-family: var(--sl-font-serif);
font-size: clamp(2.25rem, 4.5vw, 3.25rem);
font-weight: var(--sl-fw-bold);
color: var(--sl-color-brand);
margin-bottom: var(--sl-space-2);
line-height: 1;
}
.sl-usp__label {
font-family: var(--sl-font-display);
font-size: var(--sl-fs-xs);
letter-spacing: var(--sl-tracking-wider);
text-transform: uppercase;
color: var(--sl-color-text-soft);
}
/* ======================================================
CARDS GRID
====================================================== */
.sl-cards-grid { display: grid; gap: var(--sl-space-6); }
.sl-cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sl-cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sl-cards-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sl-cards-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1180px) { .sl-cards-grid--5 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 980px) { .sl-cards-grid--5, .sl-cards-grid--4 { grid-template-columns: repeat(3, 1fr); } .sl-cards-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .sl-cards-grid--5, .sl-cards-grid--4, .sl-cards-grid--3 { grid-template-columns: repeat(2, 1fr); } .sl-cards-grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .sl-cards-grid--5, .sl-cards-grid--4, .sl-cards-grid--3, .sl-cards-grid--2 { grid-template-columns: 1fr; } }
/* ======================================================
CARD générique
====================================================== */
.sl-card {
position: relative;
background: var(--sl-color-bg);
border-radius: var(--sl-radius-lg);
overflow: hidden;
border: 1px solid var(--sl-color-border);
display: flex; flex-direction: column;
transition: transform var(--sl-duration) var(--sl-ease), box-shadow var(--sl-duration) var(--sl-ease), border-color var(--sl-duration) var(--sl-ease);
}
.sl-card:hover { transform: translateY(-4px); box-shadow: var(--sl-shadow-lg); border-color: var(--sl-color-border-strong); }
.sl-card__media { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--sl-color-ink-100); }
.sl-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sl-duration-slow) var(--sl-ease); }
.sl-card:hover .sl-card__media img { transform: scale(1.04); }
.sl-card__body { padding: var(--sl-space-5); display: flex; flex-direction: column; gap: var(--sl-space-3); flex: 1; }
.sl-card__title {
font-family: var(--sl-font-sans);
font-size: var(--sl-fs-lg);
font-weight: var(--sl-fw-semi);
line-height: var(--sl-lh-snug);
margin: 0;
color: var(--sl-color-anchor);
}
.sl-card__title a { color: inherit; text-decoration: none; }
.sl-card__title a:hover { color: var(--sl-color-brand); }
.sl-card__subtitle {
color: var(--sl-color-ink-400);
font-size: var(--sl-fs-xs);
font-weight: var(--sl-fw-regular);
text-transform: uppercase;
letter-spacing: var(--sl-tracking-wide);
}
.sl-card__excerpt { color: var(--sl-color-text-soft); font-size: var(--sl-fs-sm); line-height: var(--sl-lh-normal); margin: 0; }
.sl-card__meta {
display: flex; gap: var(--sl-space-4); align-items: center;
font-size: var(--sl-fs-xs); color: var(--sl-color-text-soft);
text-transform: uppercase;
letter-spacing: var(--sl-tracking-wide);
font-weight: var(--sl-fw-medium);
}
.sl-card__meta-icon { color: var(--sl-color-brand); display: inline-flex; align-items: center; gap: 4px; }
.sl-card__meta-icon svg { width: 18px; height: 18px; }
.sl-card__footer { margin-top: auto; padding-top: var(--sl-space-3); display: flex; justify-content: space-between; align-items: center; }
.sl-card__cta {
font-size: var(--sl-fs-sm); color: var(--sl-color-brand);
font-weight: var(--sl-fw-semi); text-decoration: none;
display: inline-flex; align-items: center; gap: var(--sl-space-1);
}
.sl-card__cta::after { content: "→"; transition: transform var(--sl-duration) var(--sl-ease); }
.sl-card:hover .sl-card__cta::after { transform: translateX(4px); }
/* ======================================================
CARD BATEAU (location + vente)
Identité Sailoé : pastille prix cyan top-left
====================================================== */
.sl-card--boat .sl-card__media { aspect-ratio: 3/2; }
.sl-card--boat .sl-card__price {
position: absolute; top: var(--sl-space-3); left: var(--sl-space-3);
z-index: 2;
background: var(--sl-color-brand);
color: var(--sl-color-white);
padding: var(--sl-space-2) var(--sl-space-3);
border-radius: var(--sl-radius-md);
font-size: var(--sl-fs-xs);
font-weight: var(--sl-fw-medium);
line-height: var(--sl-lh-tight);
text-align: center;
min-width: 110px;
}
.sl-card--boat .sl-card__price-from { display: block; font-size: 0.7rem; opacity: 0.9; margin-bottom: 2px; }
.sl-card--boat .sl-card__price-value { font-weight: var(--sl-fw-bold); font-size: var(--sl-fs-base); }
.sl-card--boat .sl-card__price-unit { display: block; font-size: 0.7rem; opacity: 0.9; }
/* ======================================================
CARD DESTINATION (hub home + footer)
====================================================== */
.sl-card--destination {
position: relative;
aspect-ratio: 4/5;
border-radius: var(--sl-radius-lg);
overflow: hidden;
border: 0;
transition: transform var(--sl-duration) var(--sl-ease), box-shadow var(--sl-duration) var(--sl-ease);
}
.sl-card--destination .sl-card__media { aspect-ratio: auto; position: absolute; inset: 0; }
.sl-card--destination .sl-card__media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(38,38,38,0.85) 100%);
}
.sl-card--destination .sl-card__body {
position: relative; z-index: 1;
margin-top: auto; padding: var(--sl-space-6) var(--sl-space-6) var(--sl-space-8);
color: var(--sl-color-white);
}
.sl-card--destination .sl-card__title { color: var(--sl-color-white); font-family: var(--sl-font-serif); font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: var(--sl-fw-bold); letter-spacing: 0.02em; }
.sl-card--destination .sl-card__subtitle { color: var(--sl-color-brand-light); font-size: var(--sl-fs-xs); }
/* ======================================================
CARD TÉMOIGNAGE
Pattern Sailoé .Bloc--testimony : noire arrondie 42px texte blanc
====================================================== */
.sl-card--testimonial {
background: var(--sl-color-anchor);
color: var(--sl-color-white);
border: 0;
border-radius: var(--sl-radius-2xl);
padding: var(--sl-space-8);
display: flex; flex-direction: column;
}
.sl-card--testimonial::before {
content: """;
font-family: var(--sl-font-serif);
font-size: 4rem;
line-height: 0.7;
color: var(--sl-color-brand);
margin-bottom: var(--sl-space-3);
}
.sl-card--testimonial .sl-quote {
font-size: var(--sl-fs-md);
line-height: var(--sl-lh-snug);
color: var(--sl-color-white);
margin-bottom: var(--sl-space-5);
flex: 1;
}
.sl-card--testimonial .sl-author {
display: flex; align-items: center; gap: var(--sl-space-3);
padding-top: var(--sl-space-4);
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.sl-card--testimonial .sl-author img {
width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
}
.sl-card--testimonial .sl-author__name {
font-weight: var(--sl-fw-semi);
font-size: var(--sl-fs-sm);
}
.sl-card--testimonial .sl-author__meta {
font-size: var(--sl-fs-xs);
color: rgba(255, 255, 255, 0.6);
}
.sl-stars { display: inline-flex; gap: 2px; color: var(--sl-color-brand); margin-bottom: var(--sl-space-3); font-size: var(--sl-fs-md); }
.sl-stars::before { content: "★★★★★"; letter-spacing: 2px; }
/* ======================================================
HOME HUB DESTINATION 50/50 (pattern Sailoé HomeSquareContainer)
====================================================== */
.sl-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
@media (max-width: 880px) { .sl-split { grid-template-columns: 1fr; } }
.sl-split__media { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.sl-split__media img { width: 100%; height: 100%; object-fit: cover; }
.sl-split__content {
padding: clamp(2rem, 5vw, 4rem);
display: flex; flex-direction: column; justify-content: center; gap: var(--sl-space-4);
}
.sl-split--reverse .sl-split__media { order: 2; }
@media (max-width: 880px) { .sl-split--reverse .sl-split__media { order: 0; } }
/* ======================================================
FAQ ACCORDION
Pattern Sailoé .Faq-article — bouton noir carré + chevron rotation
====================================================== */
.sl-faq { display: flex; flex-direction: column; gap: 0; }
.sl-faq__item {
border-bottom: 1px solid var(--sl-color-border);
padding: var(--sl-space-5) 0;
}
.sl-faq__question {
width: 100%;
display: flex; justify-content: space-between; align-items: center; gap: var(--sl-space-4);
background: none; border: 0;
font-family: var(--sl-font-sans);
font-size: var(--sl-fs-md);
font-weight: var(--sl-fw-semi);
color: var(--sl-color-anchor);
text-align: left;
cursor: pointer;
padding: 0;
}
.sl-faq__icon {
flex-shrink: 0;
width: 36px; height: 36px;
background: var(--sl-color-anchor);
color: var(--sl-color-white);
border-radius: var(--sl-radius-md);
display: flex; align-items: center; justify-content: center;
transition: transform var(--sl-duration) var(--sl-ease), background var(--sl-duration) var(--sl-ease);
}
.sl-faq__icon::after {
content: ""; display: block;
width: 8px; height: 8px;
border: 2px solid var(--sl-color-white);
border-top: 0; border-left: 0;
transform: rotate(45deg) translate(-1px, -1px);
transition: transform var(--sl-duration) var(--sl-ease);
}
.sl-faq__item[open] .sl-faq__icon { background: var(--sl-color-brand); }
.sl-faq__item[open] .sl-faq__icon::after { transform: rotate(225deg) translate(-1px, -1px); }
.sl-faq__answer {
padding-top: var(--sl-space-4);
color: var(--sl-color-text);
line-height: var(--sl-lh-loose);
}
/* ======================================================
FOOTER
====================================================== */
.sl-footer {
background: var(--sl-color-anchor);
color: rgba(255, 255, 255, 0.75);
padding-block: var(--sl-space-16) var(--sl-space-8);
}
.sl-footer__top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: var(--sl-space-12);
padding-bottom: var(--sl-space-12);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 980px) { .sl-footer__top { grid-template-columns: repeat(2, 1fr); gap: var(--sl-space-8); } }
@media (max-width: 600px) { .sl-footer__top { grid-template-columns: 1fr; } }
.sl-footer h3 {
color: var(--sl-color-white);
font-family: var(--sl-font-display);
font-size: var(--sl-fs-xs);
text-transform: uppercase;
letter-spacing: var(--sl-tracking-wider);
font-weight: var(--sl-fw-semi);
margin-bottom: var(--sl-space-4);
}
.sl-footer__brand { display: flex; flex-direction: column; gap: var(--sl-space-4); }
.sl-footer__logo .sl-logo-text {
font-family: var(--sl-font-serif);
font-size: 1.875rem;
color: var(--sl-color-white);
font-weight: var(--sl-fw-bold);
}
.sl-footer__logo .sl-logo-img { display: block; width: 160px; height: auto; }
.sl-footer__logo .sl-logo-img--invert { filter: brightness(0) invert(1); }
.sl-footer__tagline {
font-size: var(--sl-fs-sm);
line-height: var(--sl-lh-loose);
max-width: 320px;
color: rgba(255, 255, 255, 0.75);
}
.sl-footer__col ul { display: flex; flex-direction: column; gap: var(--sl-space-2); list-style: none; padding: 0; margin: 0; }
.sl-footer__col a {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
font-size: var(--sl-fs-sm);
transition: color var(--sl-duration) var(--sl-ease);
}
.sl-footer__col a:hover { color: var(--sl-color-brand-light); }
.sl-footer__col__city {
display: block;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
font-weight: var(--sl-fw-regular);
margin-top: 2px;
}
.sl-footer__contact address {
font-style: normal; font-size: var(--sl-fs-sm); margin-bottom: var(--sl-space-4);
display: flex; flex-direction: column; gap: var(--sl-space-3);
}
/* Ciblage strict : seulement les liens DANS address (téléphone, mail), PAS les boutons */
.sl-footer__contact address a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.sl-footer__contact address a:hover { color: var(--sl-color-brand-light); }
/* Bouton CTA footer : brand cyan plein, texte blanc — visible sur fond foncé */
.sl-footer__contact .sl-btn {
display: inline-flex; align-items: center; justify-content: center;
background: var(--sl-color-brand); color: #fff !important;
padding: 0.75rem 1.5rem; border: 1.5px solid var(--sl-color-brand);
border-radius: 100px; font-weight: 700; font-size: 0.9rem;
letter-spacing: 0.02em; transition: all 0.2s ease;
margin-top: 0.5rem;
}
.sl-footer__contact .sl-btn:hover {
background: #fff; color: var(--sl-color-brand) !important;
border-color: #fff;
}
/* Social icons : blanc par défaut + brand cyan au hover (cohérence design system) */
.sl-footer__social { display: flex; gap: var(--sl-space-3); margin-top: var(--sl-space-3); }
.sl-footer__social a {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
transition: background var(--sl-duration) var(--sl-ease), transform 0.2s ease;
}
.sl-footer__social a:hover { background: var(--sl-color-brand); transform: translateY(-2px); }
.sl-footer__social svg { width: 18px; height: 18px; fill: #fff; transition: fill var(--sl-duration) var(--sl-ease); }
.sl-footer__social a:hover svg { fill: #fff; }
.sl-footer__bottom {
padding-top: var(--sl-space-8);
display: flex; flex-wrap: wrap; gap: var(--sl-space-6);
align-items: center; justify-content: space-between;
font-size: var(--sl-fs-xs);
color: rgba(255, 255, 255, 0.5);
}
.sl-footer__legal-nav { display: flex; gap: var(--sl-space-6); list-style: none; padding: 0; margin: 0; }
.sl-footer__legal-nav a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.sl-footer__legal-nav a:hover { color: var(--sl-color-white); }
/* ======================================================
ARTICLE LAYOUT (single.php)
====================================================== */
.sl-article__hero { padding-block: var(--sl-space-16) var(--sl-space-12); background: var(--sl-color-bg-soft); }
.sl-article__title { font-size: clamp(2rem, 4.5vw, 3.25rem); margin-bottom: var(--sl-space-5); color: var(--sl-color-anchor); }
.sl-article__lead { font-size: var(--sl-fs-lg); color: var(--sl-color-text-soft); max-width: 720px; line-height: var(--sl-lh-snug); }
.sl-article__cover { margin-block: var(--sl-space-8); }
.sl-article__cover img { width: 100%; border-radius: var(--sl-radius-lg); aspect-ratio: 21/9; object-fit: cover; }
.sl-article__content { padding-block: var(--sl-space-8) var(--sl-space-12); font-size: var(--sl-fs-md); }
.sl-article__cta-business {
background: var(--sl-color-brand-pale);
padding: var(--sl-space-10);
border-radius: var(--sl-radius-lg);
margin-bottom: var(--sl-space-12);
}
.sl-article__cta-business h2 { font-size: var(--sl-fs-xl); margin-bottom: var(--sl-space-4); color: var(--sl-color-anchor); }
.sl-article__cta-buttons { display: flex; flex-wrap: wrap; gap: var(--sl-space-3); }
/* ======================================================
PAGE GENERIQUE
====================================================== */
.sl-page__header { padding-bottom: var(--sl-space-8); border-bottom: 1px solid var(--sl-color-border); margin-bottom: var(--sl-space-10); }
.sl-page__title { font-size: clamp(2rem, 4.5vw, 3rem); color: var(--sl-color-anchor); }
.sl-page__lead { font-size: var(--sl-fs-md); color: var(--sl-color-text-soft); line-height: var(--sl-lh-snug); max-width: 720px; }
/* ======================================================
FICHE BATEAU (tabs ancres + specs grid + price card)
====================================================== */
.sl-boat-tabs {
background: var(--sl-color-white);
border-bottom: 1px solid var(--sl-color-border);
position: sticky;
top: var(--sl-header-h);
z-index: var(--sl-z-raised);
}
.sl-boat-tabs__list {
display: flex;
gap: var(--sl-space-4);
list-style: none;
padding: 0;
margin: 0;
overflow-x: auto;
}
.sl-boat-tabs__list li { flex-shrink: 0; }
.sl-boat-tabs__list a {
display: inline-block;
padding: var(--sl-space-4) var(--sl-space-3);
font-family: var(--sl-font-display);
font-size: var(--sl-fs-xs);
font-weight: var(--sl-fw-semi);
text-transform: uppercase;
letter-spacing: var(--sl-tracking-wide);
color: var(--sl-color-anchor-soft);
text-decoration: none;
border-bottom: 3px solid transparent;
transition: color var(--sl-duration) var(--sl-ease), border-color var(--sl-duration) var(--sl-ease);
}
.sl-boat-tabs__list a:hover, .sl-boat-tabs__list a:focus {
color: var(--sl-color-brand);
border-color: var(--sl-color-brand);
}
.sl-boat-specs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sl-space-4);
}
@media (max-width: 880px) { .sl-boat-specs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sl-boat-specs { grid-template-columns: 1fr; } }
.sl-boat-specs__item {
display: flex; justify-content: space-between; align-items: baseline;
padding: var(--sl-space-4);
background: var(--sl-color-white);
border-radius: var(--sl-radius-md);
border: 1px solid var(--sl-color-border);
}
.sl-boat-specs__label { color: var(--sl-color-ink-400); font-size: var(--sl-fs-sm); }
.sl-boat-specs__value { font-weight: var(--sl-fw-semi); color: var(--sl-color-anchor); font-size: var(--sl-fs-md); }
.sl-price-card {
background: var(--sl-color-brand-pale);
padding: var(--sl-space-8);
border-radius: var(--sl-radius-lg);
max-width: 520px;
}
.sl-price-card__amount {
font-family: var(--sl-font-serif);
font-size: clamp(2.25rem, 4.5vw, 3rem);
font-weight: var(--sl-fw-bold);
color: var(--sl-color-brand);
line-height: 1;
}
.sl-price-card__unit {
font-size: var(--sl-fs-base);
color: var(--sl-color-text-soft);
font-weight: var(--sl-fw-regular);
margin-left: var(--sl-space-2);
}
.sl-price-card__note { color: var(--sl-color-text-soft); font-size: var(--sl-fs-sm); margin-top: var(--sl-space-4); }
.sl-eyebrow {
display: inline-block;
font-family: var(--sl-font-display);
font-size: var(--sl-fs-xs);
font-weight: var(--sl-fw-semi);
text-transform: uppercase;
letter-spacing: var(--sl-tracking-wider);
color: var(--sl-color-brand);
}
/* ======================================================
UTILS
====================================================== */
.sl-text-center { text-align: center; }
.sl-text-soft { color: var(--sl-color-text-soft); }
.sl-mt-4 { margin-top: var(--sl-space-4); }
.sl-mt-8 { margin-top: var(--sl-space-8); }
.sl-mt-12 { margin-top: var(--sl-space-12); }
.sl-mb-4 { margin-bottom: var(--sl-space-4); }
.sl-mb-8 { margin-bottom: var(--sl-space-8); }
.sl-center { text-align: center; }
.sl-container--narrow { max-width: 880px; margin-left: auto; margin-right: auto; }
.sl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ======================================================
V2 — EXTENSIONS UI/UX archi cible
====================================================== */
/* Sections : variantes */
.sl-section--alt { background: var(--sl-color-sand); }
.sl-section--center { text-align: center; padding: 6rem 0; }
.sl-section--cta-band { background: linear-gradient(180deg, var(--sl-color-anchor) 0%, #1a1a1a 100%); color: #fff; padding: 5rem 0; }
.sl-section--cta-band h2, .sl-section--cta-band p { color: #fff; }
.sl-section--toc { padding: 2rem 0 0; }
/* Grids */
.sl-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 768px) { .sl-grid-2 { grid-template-columns: 1fr; gap: 2rem; } }
.sl-cards-grid { display: grid; gap: 1.5rem; }
.sl-cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sl-cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .sl-cards-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sl-cards-grid--2, .sl-cards-grid--3 { grid-template-columns: 1fr; } }
/* USP grid */
.sl-usp-grid { display: grid; gap: 2rem; }
.sl-usp-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .sl-usp-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sl-usp-grid--4 { grid-template-columns: 1fr; } }
.sl-usp { padding: 1.75rem 1.5rem; border-left: 3px solid var(--sl-color-brand); background: rgba(28, 155, 219, 0.03); border-radius: 0 var(--sl-radius-lg) var(--sl-radius-lg) 0; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sl-usp:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(28, 155, 219, 0.08); }
.sl-usp__num { font-size: 2.5rem; font-weight: 700; color: var(--sl-color-brand); line-height: 1; margin-bottom: 0.5rem; font-family: var(--sl-font-serif, "Playfair Display", serif); }
.sl-usp__title { font-size: 1.1rem; margin: 0 0 0.5rem; color: var(--sl-color-anchor); }
.sl-usp p { font-size: 0.94rem; color: var(--sl-color-text-soft); margin: 0; line-height: 1.5; }
/* Cards génériques */
.sl-card { display: block; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; color: inherit; }
.sl-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.10); }
.sl-card__image { background-size: cover; background-position: center; aspect-ratio: 16/10; position: relative; }
.sl-card__body { padding: 1.5rem; }
.sl-card__title { font-size: 1.15rem; margin: 0 0 0.5rem; color: var(--sl-color-anchor); }
.sl-card__excerpt { font-size: 0.94rem; color: var(--sl-color-text-soft); margin: 0 0 1rem; line-height: 1.5; }
.sl-card__cta { color: var(--sl-color-brand); font-weight: 600; font-size: 0.9rem; }
.sl-card__meta { font-size: 0.85rem; color: var(--sl-color-text-soft); margin: 0; }
.sl-card__meta-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.sl-card__chip { position: absolute; top: 1rem; left: 1rem; background: var(--sl-color-brand); color: #fff; padding: 0.25rem 0.75rem; border-radius: 100px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
/* Card spécifique : info / NAP */
.sl-card--info, .sl-card--nap { padding: 2rem; background: var(--sl-color-sand); border-radius: 12px; box-shadow: none; }
.sl-card--info:hover, .sl-card--nap:hover { transform: none; box-shadow: none; }
.sl-card--info .sl-card__title, .sl-card--nap .sl-card__title { font-size: 1.1rem; margin-bottom: 1rem; color: var(--sl-color-anchor); }
/* Card team */
.sl-card--team { padding: 2rem; text-align: center; background: #fff; border-radius: 12px; }
.sl-team__photo { font-size: 3rem; margin-bottom: 0.75rem; }
.sl-team__name { font-size: 1.1rem; margin: 0; color: var(--sl-color-anchor); }
.sl-team__role { font-size: 0.85rem; color: var(--sl-color-brand); font-weight: 600; margin: 0.25rem 0 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.sl-card--team p { font-size: 0.92rem; color: var(--sl-color-text-soft); }
/* Définition list NAP */
.sl-dl { margin: 0; display: grid; gap: 0.75rem; }
.sl-dl dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sl-color-text-soft); font-weight: 600; margin: 0; }
.sl-dl dd { margin: 0; color: var(--sl-color-anchor); font-weight: 500; }
.sl-dl dd a { color: var(--sl-color-brand); }
/* Eyebrow + lead unifiés */
.sl-eyebrow { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sl-color-brand); font-weight: 600; margin: 0 0 0.75rem; font-family: var(--sl-font-mono, 'Inter', sans-serif); }
.sl-hero__lead { font-size: 1.15rem; line-height: 1.55; color: var(--sl-color-text-soft); max-width: 720px; margin: 1rem 0 1.5rem; }
.sl-hero--has-image { color: #fff; background-size: cover; background-position: center; padding: 8rem 0 5rem; min-height: 480px; display: flex; align-items: center; }
.sl-hero--has-image .sl-hero__title, .sl-hero--has-image .sl-hero__lead, .sl-hero--has-image .sl-eyebrow { color: #fff; }
.sl-hero--has-image .sl-eyebrow { color: rgba(255,255,255,0.85); }
.sl-hero--has-image .sl-hero__lead { color: rgba(255,255,255,0.92); }
/* CTA rows */
.sl-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.sl-cta-row .sl-btn { white-space: nowrap; }
/* Fiche bateau — présentation : 1 CTA principal + liens secondaires (colonne étroite 480px : évite l'empilement de 3 pills) */
.sl-cta-row--boat { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.sl-inline-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.sl-inline-links a { color: var(--sl-color-brand); font-weight: 600; font-size: 0.95rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.sl-inline-links a::after { content: "\2192"; transition: transform .2s; }
.sl-inline-links a:hover { text-decoration: underline; }
.sl-inline-links a:hover::after { transform: translateX(3px); }
/* Boutons additionnels */
.sl-btn--lg { padding: 1.1rem 2.5rem; font-size: 1.05rem; }
.sl-btn--inverse { background: #fff; color: var(--sl-color-anchor); border: 2px solid #fff; }
.sl-btn--inverse:hover { background: var(--sl-color-brand); color: #fff; border-color: var(--sl-color-brand); }
/* Témoignages */
.sl-card--testimonial { background: var(--sl-color-anchor); color: #fff; padding: 2rem; border-radius: 42px; }
.sl-card--testimonial:hover { transform: none; }
.sl-rating { color: #FFD700; font-size: 1.1rem; margin-bottom: 0.75rem; letter-spacing: 0.1em; }
.sl-quote { font-size: 1.05rem; line-height: 1.55; margin: 0 0 1rem; font-style: italic; color: #fff; border: none; padding: 0; }
.sl-cite { font-size: 0.88rem; color: rgba(255,255,255,0.7); font-style: normal; }
/* Cards related */
.sl-card--related { padding: 1.5rem; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; transition: all .25s; }
.sl-card--related:hover { border-color: var(--sl-color-brand); transform: translateY(-2px); }
.sl-card--related h3 { font-size: 1rem; color: var(--sl-color-anchor); }
.sl-card--related p { font-size: 0.9rem; color: var(--sl-color-text-soft); margin: 0.5rem 0; }
/* TOC sommaire */
.sl-toc { background: var(--sl-color-sand); padding: 2rem; border-radius: 12px; border-left: 4px solid var(--sl-color-brand); }
.sl-toc__title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sl-color-brand); font-weight: 700; margin: 0 0 1rem; }
.sl-toc ol { margin: 0; padding-left: 1.5rem; }
.sl-toc li { margin-bottom: 0.5rem; }
.sl-toc a { color: var(--sl-color-anchor); text-decoration: none; border-bottom: 1px dotted rgba(0,0,0,0.2); }
.sl-toc a:hover { color: var(--sl-color-brand); border-bottom-color: var(--sl-color-brand); }
/* FAQ accordion */
.sl-faq { display: grid; gap: 0.75rem; }
.sl-faq__item { border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 0.25rem 1.5rem; background: #fff; transition: border-color .25s; }
.sl-faq__item[open] { border-color: var(--sl-color-brand); }
.sl-faq__q { cursor: pointer; padding: 1.2rem 0; font-weight: 600; color: var(--sl-color-anchor); list-style: none; position: relative; }
.sl-faq__q::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--sl-color-brand); transition: transform .25s; }
.sl-faq__item[open] .sl-faq__q::after { transform: translateY(-50%) rotate(45deg); }
.sl-faq__q::-webkit-details-marker { display: none; }
.sl-faq__a { padding: 0 0 1.2rem; color: var(--sl-color-text-soft); line-height: 1.6; }
/* Callout / Aside */
.sl-callout { background: var(--sl-color-sand); padding: 2rem; border-radius: 12px; border-left: 4px solid var(--sl-color-brand); margin: 2rem 0; }
.sl-callout__title { font-size: 1.1rem; margin: 0 0 0.75rem; color: var(--sl-color-anchor); }
.sl-callout__note { font-size: 0.82rem; color: var(--sl-color-text-soft); margin-top: 0.75rem; }
.sl-callout--ressource .sl-btn { margin-top: 1rem; }
/* Chips */
.sl-chip { display: inline-block; padding: 0.3rem 0.75rem; background: rgba(28, 155, 219, 0.1); color: var(--sl-color-brand); border-radius: 100px; font-size: 0.82rem; font-weight: 500; }
/* Prose article */
/* V11 — Refonte .sl-prose pour alignement design system (H2 sl-h2 style, espacements augmentés). */
.sl-prose { line-height: 1.75; color: var(--sl-color-text); font-size: 1.0625rem; }
.sl-prose > *:first-child { margin-top: 0; }
.sl-prose h2 {
font-size: clamp(1.75rem, 3vw, 2.25rem);
line-height: 1.2;
margin: 3.5rem 0 1.25rem;
color: var(--sl-color-anchor);
font-weight: var(--sl-fw-bold);
font-family: var(--sl-font-serif, "Playfair Display", serif);
letter-spacing: -0.01em;
}
.sl-prose h2::after { content: '.'; color: var(--sl-color-brand); }
.sl-prose h3 {
font-size: 1.375rem;
line-height: 1.3;
margin: 2.5rem 0 0.85rem;
color: var(--sl-color-anchor);
font-weight: var(--sl-fw-bold);
}
.sl-prose p { margin: 0 0 1.25rem; }
.sl-prose strong { color: var(--sl-color-anchor); font-weight: var(--sl-fw-bold); }
.sl-prose ul, .sl-prose ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.sl-prose ul li::marker { color: var(--sl-color-brand); }
.sl-prose li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.sl-prose a { color: var(--sl-color-brand); text-decoration: underline; text-underline-offset: 3px; transition: opacity var(--sl-duration); }
.sl-prose a:hover { opacity: 0.7; }
.sl-prose blockquote {
border-left: 4px solid var(--sl-color-brand);
padding: 0.5rem 0 0.5rem 1.5rem;
margin: 2rem 0;
font-style: italic;
color: var(--sl-color-anchor-soft);
}
.sl-prose hr {
border: 0;
height: 1px;
background: rgba(0, 0, 0, 0.08);
margin: 3rem 0;
}
.sl-prose--article { font-size: 1.05rem; }
/* V11 — CAROUSEL MARQUEE témoignages homepage (défilement infini smooth) */
.sl-marquee {
overflow: hidden;
position: relative;
margin: var(--sl-space-6) 0;
padding: 0;
width: 100%;
mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.sl-marquee__track {
display: flex;
gap: var(--sl-space-5);
width: max-content;
animation: sl-marquee-scroll 80s linear infinite;
will-change: transform;
}
.sl-marquee:hover .sl-marquee__track,
.sl-marquee:focus-within .sl-marquee__track {
animation-play-state: paused;
}
.sl-marquee__item {
flex: 0 0 auto;
width: clamp(280px, 28vw, 420px);
}
@keyframes sl-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - var(--sl-space-5) / 2)); }
}
@media (prefers-reduced-motion: reduce) {
.sl-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
.sl-marquee { mask-image: none; -webkit-mask-image: none; }
}
/* Newsletter band */
.sl-newsletter { background: var(--sl-color-sand); padding: 4rem 0; }
.sl-newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 768px) { .sl-newsletter__inner { grid-template-columns: 1fr; gap: 2rem; } }
.sl-newsletter__title { font-size: 1.6rem; margin: 0 0 0.5rem; color: var(--sl-color-anchor); }
.sl-newsletter__copy p { color: var(--sl-color-text-soft); margin: 0; }
.sl-newsletter__form { display: flex; gap: 0.5rem; }
.sl-newsletter__input { flex: 1; padding: 1rem 1.5rem; border: 2px solid #fff; border-radius: 100px; font-size: 0.95rem; background: #fff; min-width: 0; }
.sl-newsletter__input:focus { border-color: var(--sl-color-brand); outline: none; }
@media (max-width: 480px) { .sl-newsletter__form { flex-direction: column; } }
/* Sticky CTA mobile */
.sl-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-top: 1px solid rgba(0,0,0,0.08); padding: 0.5rem; display: none; gap: 0.5rem; box-shadow: 0 -4px 12px rgba(0,0,0,0.06); }
.sl-sticky-cta__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.85rem 0.5rem; border-radius: 100px; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: opacity .2s; min-height: 44px; }
.sl-sticky-cta__btn--phone { background: var(--sl-color-anchor); color: #fff; }
.sl-sticky-cta__btn--wa { background: #25D366; color: #fff; }
.sl-sticky-cta__btn--quote { background: var(--sl-color-brand); color: #fff; flex: 1.5; }
.sl-sticky-cta__btn:hover { opacity: 0.9; }
@media (max-width: 768px) {
.sl-sticky-cta { display: flex; }
body { padding-bottom: 64px; }
.sl-rail-contact { display: none; }
}
/* Footer enrichi V2 */
.sl-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 2rem; padding: 4rem 0 3rem; }
@media (max-width: 1024px) { .sl-footer__top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { .sl-footer__top { grid-template-columns: 1fr; } }
.sl-footer__col h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 1rem; color: #fff; opacity: 0.95; }
.sl-footer__col ul { list-style: none; padding: 0; margin: 0; }
.sl-footer__col li { margin-bottom: 0.6rem; font-size: 0.9rem; }
.sl-footer__col a { color: rgba(255,255,255,0.78); text-decoration: none; transition: color .2s; }
.sl-footer__col a:hover { color: var(--sl-color-brand); }
.sl-footer__col__city { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.45); margin-top: 0.15rem; }
/* Specs / Price card pour bateaux */
.sl-specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 2rem 0; padding: 1.5rem; background: var(--sl-color-sand); border-radius: 12px; }
.sl-spec { padding: 0.75rem; }
.sl-spec__label { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sl-color-text-soft); font-weight: 600; margin-bottom: 0.25rem; }
.sl-spec__value { display: block; font-size: 1.15rem; font-weight: 600; color: var(--sl-color-anchor); }
.sl-price-card { padding: 2rem; background: var(--sl-color-anchor); color: #fff; border-radius: 16px; }
.sl-price-card__from { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }
.sl-price-card__amount { font-size: 2.5rem; font-weight: 700; margin: 0.25rem 0; font-family: var(--sl-font-serif, "Playfair Display", serif); }
.sl-price-card__period { font-size: 0.95rem; opacity: 0.8; margin-bottom: 1.5rem; }
/* Tabs ancres CPT bateau-vente */
.sl-tabs-anchors { position: sticky; top: var(--sl-header-h); z-index: 40; background: #fff; border-bottom: 1px solid rgba(0,0,0,0.08); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sl-tabs-anchors ul { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.sl-tabs-anchors li a { display: block; padding: 1rem 1.5rem; font-size: 0.92rem; font-weight: 600; color: var(--sl-color-text-soft); text-decoration: none; border-bottom: 3px solid transparent; transition: all .2s; white-space: nowrap; }
.sl-tabs-anchors li a:hover, .sl-tabs-anchors li a.is-active { color: var(--sl-color-brand); border-bottom-color: var(--sl-color-brand); }
/* Hero pâles V4 — photo de fond subtile + overlay sand + texto outline + min-height premium */
.sl-hero--pale,
.sl-hero--blog, .sl-hero--itineraires, .sl-hero--ressource, .sl-hero--base, .sl-hero--pourquoi {
position: relative;
padding: clamp(6rem, 13vw, 9.5rem) 0 clamp(7rem, 15vw, 11rem);
background:
/* voile clair surtout à gauche (protège le texte) → l'image se voit nettement à droite/au centre */
linear-gradient(95deg, rgba(247,246,242,0.92) 0%, rgba(247,246,242,0.58) 40%, rgba(247,246,242,0.14) 72%, rgba(247,246,242,0.03) 100%),
/* fondu vers le blanc PUR en bas, démarré tôt et progressif → raccord invisible avec la section suivante */
linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 48%, rgba(255,255,255,0.55) 74%, rgba(255,255,255,0.92) 90%, rgba(255,255,255,1) 100%),
var(--sl-hero-bg, linear-gradient(135deg, var(--sl-color-sand) 0%, var(--sl-color-sand-light) 100%)) var(--sl-hero-pos, center) / cover no-repeat,
linear-gradient(180deg, var(--sl-color-sand) 0%, #fff 100%);
color: var(--sl-color-anchor);
overflow: hidden;
min-height: clamp(620px, 74vh, 840px);
display: flex;
flex-direction: column;
justify-content: center;
}
/* Mobile : le texte passe pleine largeur → voile vertical plus couvrant + fondu blanc pur en bas */
@media (max-width: 768px) {
.sl-hero--pale,
.sl-hero--blog, .sl-hero--itineraires, .sl-hero--ressource, .sl-hero--base, .sl-hero--pourquoi {
background:
linear-gradient(180deg, rgba(247,246,242,0.74) 0%, rgba(247,246,242,0.60) 45%, rgba(255,255,255,0.96) 88%, rgba(255,255,255,1) 100%),
var(--sl-hero-bg, linear-gradient(135deg, var(--sl-color-sand) 0%, var(--sl-color-sand-light) 100%)) var(--sl-hero-pos, center) / cover no-repeat,
linear-gradient(180deg, var(--sl-color-sand) 0%, #fff 100%);
min-height: clamp(480px, 72vh, 600px);
}
}
/* Background texto outline signature Sailoé sur TOUS les heros pâles (généralisé V4 après feedback Baptiste 22h) */
.sl-hero--pale::before,
.sl-hero--blog::before, .sl-hero--itineraires::before, .sl-hero--ressource::before, .sl-hero--base::before, .sl-hero--pourquoi::before {
content: "NAVIGUER • VOYAGER • PARTAGER";
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: clamp(2.5rem, 8vw, 7rem);
font-weight: 900;
color: transparent;
-webkit-text-stroke: 1.2px rgba(38, 38, 38, 0.07);
text-stroke: 1.2px rgba(38, 38, 38, 0.07);
letter-spacing: 0.06em;
white-space: nowrap;
pointer-events: none;
z-index: 0;
font-family: var(--sl-font-display);
}
/* Variante background texto explicite (override pour templates qui le poseraient manuellement) */
.sl-hero__bg-text {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: clamp(2.5rem, 8vw, 7rem);
font-weight: 900;
color: transparent;
-webkit-text-stroke: 1.2px rgba(38, 38, 38, 0.07);
letter-spacing: 0.06em;
white-space: nowrap;
pointer-events: none;
z-index: 0;
}
/* Z-index pour que le contenu hero passe au-dessus du texto outline */
.sl-hero--pale > .sl-container,
.sl-hero--blog > .sl-container, .sl-hero--itineraires > .sl-container, .sl-hero--ressource > .sl-container, .sl-hero--base > .sl-container, .sl-hero--pourquoi > .sl-container {
position: relative;
z-index: 1;
}
.sl-hero--pale .sl-hero__title,
.sl-hero--blog .sl-hero__title, .sl-hero--itineraires .sl-hero__title, .sl-hero--ressource .sl-hero__title, .sl-hero--base .sl-hero__title, .sl-hero--pourquoi .sl-hero__title {
color: var(--sl-color-anchor);
font-size: clamp(2rem, 4.5vw, 3.5rem);
margin: 0;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.05;
}
.sl-hero--pale .sl-hero__lead,
.sl-hero--blog .sl-hero__lead, .sl-hero--itineraires .sl-hero__lead, .sl-hero--ressource .sl-hero__lead, .sl-hero--base .sl-hero__lead, .sl-hero--pourquoi .sl-hero__lead {
color: var(--sl-color-text-soft);
max-width: 640px;
font-size: 1.05rem;
line-height: 1.6;
}
.sl-hero--pale .sl-eyebrow,
.sl-hero--blog .sl-eyebrow, .sl-hero--itineraires .sl-eyebrow, .sl-hero--ressource .sl-eyebrow, .sl-hero--base .sl-eyebrow, .sl-hero--pourquoi .sl-eyebrow {
color: var(--sl-color-brand);
}
/* Hero avec image (full-bleed) : padding cohérent et min-height raisonnable */
.sl-hero--croisiere-dest, .sl-hero--comparatif { padding: clamp(4rem, 10vw, 7rem) 0 clamp(3rem, 8vw, 5rem); }
/* Page sections */
.sl-page { padding-bottom: 0; }
.sl-page__title { font-size: 2.2rem; margin: 0 0 1rem; color: var(--sl-color-anchor); font-family: var(--sl-font-serif, "Playfair Display", serif); }
.sl-page__lead { font-size: 1.1rem; line-height: 1.6; color: var(--sl-color-text-soft); margin: 0 0 1.5rem; }
.sl-section { padding: 4rem 0; }
.sl-section--testimonials { padding-bottom: 5rem; }
/* Card variants additionnels */
.sl-card--boat { position: relative; }
.sl-card--croisiere { display: flex; flex-direction: column; }
.sl-card--itineraire { display: flex; flex-direction: column; }
.sl-card--post { display: flex; flex-direction: column; }
/* Scroll smooth for anchors */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 100px; }
/* ====================================================================
V3 — Composants premium (Brand book Sailoé HD E2 — Manrope, spacing premium)
Résolution feedback Baptiste 11/05 21h
==================================================================== */
/* Override font-family globale pour aligner brand book */
body { font-family: var(--sl-font-sans); font-feature-settings: 'ss01', 'cv11'; }
h1, h2, h3, h4, h5, h6 { font-family: var(--sl-font-display); font-weight: 800; letter-spacing: -0.02em; }
/* Section header pattern réutilisable */
.sl-section__header { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.sl-section__header--inline { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 0.75rem 2rem; margin: 0 0 2.5rem; max-width: none; width: 100%; text-align: left; }
.sl-section__header--inline > div { flex: 1 1 60%; max-width: 760px; }
.sl-section__header--inline > .sl-link { flex: 0 0 auto; white-space: nowrap; padding-bottom: 0.35rem; }
.sl-section__lead { font-size: 1.05rem; color: var(--sl-color-text-soft); line-height: 1.6; margin: 1rem 0 0; }
.sl-section__footer-cta { text-align: center; margin-top: 3rem; }
.sl-h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); margin: 0; color: var(--sl-color-anchor); letter-spacing: -0.02em; line-height: 1.1; }
.sl-h3 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); margin: 0; color: var(--sl-color-anchor); letter-spacing: -0.01em; }
.sl-eyebrow--inverse { color: rgba(255,255,255,0.8) !important; }
.sl-dot { color: var(--sl-color-brand); }
/* Split layout (text + image / cards) */
.sl-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; }
@media (max-width: 900px) { .sl-split { grid-template-columns: 1fr; gap: 2rem; } }
.sl-split__copy { max-width: 480px; }
.sl-split__copy p { color: var(--sl-color-text-soft); line-height: 1.6; }
.sl-split__visual img { width: 100%; height: auto; border-radius: 12px; box-shadow: var(--sl-shadow-lg); }
.sl-split__items, .sl-split__cards { display: grid; gap: 1rem; }
/* Mode-card (3 modes navigation) */
.sl-mode-card { padding: 2rem; background: #fff; border-radius: 12px; box-shadow: var(--sl-shadow-sm); border-left: 4px solid var(--sl-color-brand); transition: transform .25s ease, box-shadow .25s ease; }
.sl-mode-card:hover { transform: translateX(4px); box-shadow: var(--sl-shadow-md); }
.sl-mode-card__num { font-size: 2rem; font-weight: 800; color: var(--sl-color-brand); line-height: 1; margin-bottom: 0.5rem; }
.sl-mode-card h3 { font-size: 1.2rem; margin: 0 0 0.5rem; color: var(--sl-color-anchor); }
.sl-mode-card p { font-size: 0.94rem; color: var(--sl-color-text-soft); margin: 0; line-height: 1.5; }
/* DEST-GRID : grid premium pour Hub Locations */
.sl-dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 1024px) { .sl-dest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sl-dest-grid { grid-template-columns: 1fr; } }
.sl-dest-card { display: block; position: relative; background: var(--sl-color-anchor); border-radius: 16px; overflow: hidden; text-decoration: none; color: #fff; transition: transform .35s var(--sl-ease-out), box-shadow .35s var(--sl-ease-out); aspect-ratio: 3/4; }
.sl-dest-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px -16px rgba(0,0,0,0.30); }
.sl-dest-card__image { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s var(--sl-ease-out); }
.sl-dest-card:hover .sl-dest-card__image { transform: scale(1.06); }
.sl-dest-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.85) 100%); }
.sl-dest-card__body { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.75rem; z-index: 2; }
.sl-dest-card__kicker { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; margin: 0 0 0.5rem; }
.sl-dest-card__title { font-size: clamp(1.5rem, 2.5vw, 2.2rem); margin: 0 0 1rem; font-weight: 800; letter-spacing: -0.02em; }
.sl-dest-card__meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sl-dest-card__meta .sl-chip { background: rgba(255,255,255,0.18); color: #fff; backdrop-filter: blur(4px); }
.sl-dest-card__cta { font-size: 0.92rem; font-weight: 600; color: var(--sl-color-brand-light); transition: color .25s; }
.sl-dest-card:hover .sl-dest-card__cta { color: #fff; }
/* TWIN-CARD : achat hub (neuf + occasion side by side) */
.sl-twin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 900px) { .sl-twin-grid { grid-template-columns: 1fr; } }
.sl-twin-card { display: block; background: #fff; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--sl-shadow-md); transition: transform .35s var(--sl-ease-out), box-shadow .35s; }
.sl-twin-card:hover { transform: translateY(-6px); box-shadow: var(--sl-shadow-xl); }
.sl-twin-card__image { position: relative; aspect-ratio: 16/9; background-size: cover; background-position: center; }
.sl-twin-card__tag { position: absolute; top: 1.25rem; left: 1.25rem; background: var(--sl-color-brand); color: #fff; padding: 0.5rem 1rem; border-radius: 100px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; }
.sl-twin-card__tag--alt { background: var(--sl-color-anchor); }
.sl-twin-card__body { padding: 2.5rem; }
.sl-twin-card__title { font-size: 1.75rem; margin: 0 0 1rem; color: var(--sl-color-anchor); letter-spacing: -0.02em; }
.sl-twin-card__body p { font-size: 1rem; line-height: 1.6; color: var(--sl-color-text-soft); margin: 0 0 1.5rem; }
.sl-twin-card__features { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.5rem; }
.sl-twin-card__features li { font-size: 0.94rem; color: var(--sl-color-text); }
.sl-twin-card__cta { color: var(--sl-color-brand); font-weight: 700; font-size: 0.95rem; }
/* Steps (process achat) */
.sl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 1024px) { .sl-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sl-steps { grid-template-columns: 1fr; } }
.sl-step { padding: 2rem; background: #fff; border-radius: 12px; box-shadow: var(--sl-shadow-sm); }
.sl-step__num { font-size: 0.85rem; color: var(--sl-color-brand); font-weight: 700; letter-spacing: 0.1em; margin-bottom: 1rem; }
.sl-step h3 { font-size: 1.15rem; margin: 0 0 0.5rem; color: var(--sl-color-anchor); }
.sl-step p { font-size: 0.92rem; color: var(--sl-color-text-soft); margin: 0; line-height: 1.5; }
/* CONTACT — formulaire premium multi-step (V6.3 compacté 17/05) */
.sl-contact-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 1024px) { .sl-contact-grid { grid-template-columns: 1fr; } }
.sl-contact-form-wrap { background: #fff; border-radius: 16px; padding: 2rem; box-shadow: var(--sl-shadow-md); }
@media (max-width: 640px) { .sl-contact-form-wrap { padding: 1.25rem; } }
.sl-form__step { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--sl-color-border); }
.sl-form__step:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sl-form__step-num { font-size: 0.72rem; color: var(--sl-color-brand); font-weight: 700; letter-spacing: 0.15em; margin: 0 0 0.25rem; }
.sl-form__step-title { font-size: 1.2rem; color: var(--sl-color-anchor); margin: 0 0 0.9rem; letter-spacing: -0.02em; }
.sl-form-row { display: grid; gap: 0.75rem; margin-bottom: 0.6rem; }
.sl-form-row--2 { grid-template-columns: 1fr 1fr; }
.sl-form-row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .sl-form-row--2, .sl-form-row--3 { grid-template-columns: 1fr; } }
.sl-form-field { display: flex; flex-direction: column; gap: 0.3rem; }
.sl-form-field label { font-size: 0.82rem; font-weight: 600; color: var(--sl-color-anchor); letter-spacing: 0.02em; }
.sl-form-field input, .sl-form-field select, .sl-form-field textarea {
padding: 0.65rem 0.85rem; border: 1.5px solid var(--sl-color-border); border-radius: 10px; font-family: inherit; font-size: 0.92rem; background: #fff; transition: border-color .2s, box-shadow .2s;
}
.sl-form-field textarea { min-height: 90px; }
.sl-form-field input:focus, .sl-form-field select:focus, .sl-form-field textarea:focus {
outline: none; border-color: var(--sl-color-brand); box-shadow: 0 0 0 4px rgba(28,155,219,0.12);
}
.sl-form-tile { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.9rem 0.75rem; border: 1.5px solid var(--sl-color-border); border-radius: 12px; cursor: pointer; transition: all .25s; background: #fff; text-align: center; }
.sl-form-tile:hover { border-color: var(--sl-color-brand); }
.sl-form-tile input { position: absolute; opacity: 0; }
.sl-form-tile:has(input:checked) { border-color: var(--sl-color-brand); background: rgba(28,155,219,0.05); box-shadow: 0 0 0 4px rgba(28,155,219,0.10); }
.sl-form-tile__icon { font-size: 1.5rem; line-height: 1; }
.sl-form-tile__label { font-weight: 600; font-size: 0.85rem; color: var(--sl-color-anchor); }
.sl-form-checkbox { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--sl-color-text-soft); cursor: pointer; margin-top: 0.5rem; }
.sl-form-checkbox input { flex-shrink: 0; margin-top: 0.2rem; }
.sl-form-checkbox a { color: var(--sl-color-brand); }
.sl-form__submit { text-align: center; margin-top: 1.25rem; }
.sl-form__note { font-size: 0.78rem; color: var(--sl-color-text-soft); margin-top: 0.6rem; }
/* CONTACT INFO sidebar */
.sl-contact-info { display: grid; gap: 1.5rem; }
.sl-contact-card { background: #fff; border-radius: 12px; padding: 2rem; box-shadow: var(--sl-shadow-sm); }
.sl-contact-card--direct { background: var(--sl-color-anchor); color: #fff; }
.sl-contact-card--direct h3 { color: #fff; }
.sl-contact-card--direct p { color: rgba(255,255,255,0.85); }
.sl-contact-card h3 { font-size: 1.1rem; margin: 0 0 1rem; color: var(--sl-color-anchor); }
.sl-contact-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; color: inherit; text-decoration: none; font-weight: 600; border-top: 1px solid rgba(255,255,255,0.10); }
.sl-contact-link:first-of-type { border-top: none; }
.sl-contact-link:hover { color: var(--sl-color-brand-light); }
.sl-contact-link--wa:hover { color: #25D366; }
.sl-contact-hours strong { color: var(--sl-color-anchor); }
.sl-contact-bases { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.sl-contact-bases li { display: flex; flex-direction: column; gap: 0.15rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--sl-color-border); font-size: 0.9rem; }
.sl-contact-bases li:last-child { border-bottom: none; }
.sl-contact-bases strong { color: var(--sl-color-anchor); }
.sl-text-soft { color: var(--sl-color-text-soft); font-size: 0.85rem; }
/* ACTU featured */
.sl-actu-featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--sl-shadow-md); margin-bottom: 4rem; background: #fff; }
@media (max-width: 900px) { .sl-actu-featured { grid-template-columns: 1fr; } }
.sl-actu-featured__image { position: relative; min-height: 380px; background-size: cover; background-position: center; }
.sl-actu-featured__date { position: absolute; top: 1.5rem; left: 1.5rem; background: #fff; color: var(--sl-color-anchor); padding: 0.5rem 1rem; border-radius: 100px; font-size: 0.82rem; font-weight: 700; }
.sl-actu-featured__body { padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
.sl-actu-featured__body h2 { margin: 0.75rem 0 1rem; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.sl-actu-featured__body p { color: var(--sl-color-text-soft); line-height: 1.6; margin-bottom: 1.5rem; }
/* Mini-cards (actu sidebar split) */
.sl-mini-card { display: block; background: #fff; padding: 1.5rem; border-radius: 12px; box-shadow: var(--sl-shadow-sm); text-decoration: none; color: inherit; transition: transform .25s; }
.sl-mini-card:hover { transform: translateY(-3px); }
.sl-mini-card h4 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--sl-color-anchor); }
.sl-mini-card p { font-size: 0.88rem; color: var(--sl-color-text-soft); margin: 0; }
/* Empty state */
.sl-empty-state { text-align: center; padding: 4rem 2rem; background: var(--sl-color-sand-light); border-radius: 12px; color: var(--sl-color-text-soft); }
/* Link basique */
.sl-link { color: var(--sl-color-brand); font-weight: 600; text-decoration: none; font-size: 0.95rem; }
.sl-link:hover { text-decoration: underline; }
/* Card boat mini (hub achat) */
.sl-cards-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .sl-cards-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sl-cards-grid--4 { grid-template-columns: 1fr; } }
.sl-card--boat-mini .sl-card__title { font-size: 1.05rem; }
.sl-card--boat-mini .sl-card__excerpt { font-size: 0.85rem; }
/* Tighter prose for narrow contexts */
.sl-prose--narrow { max-width: 760px; margin: 0 auto; }
/* Background texto outline signature Sailoé (brand book) — pour sections cta-band */
.sl-section--cta-band { position: relative; overflow: hidden; }
.sl-section--cta-band::before {
content: "NAVIGUER • VOYAGER • PARTAGER";
position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
font-size: clamp(3rem, 10vw, 8rem); font-weight: 900;
color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.05);
text-align: center; white-space: nowrap; letter-spacing: 0.08em;
pointer-events: none; z-index: 0;
}
.sl-section--cta-band > * { position: relative; z-index: 1; }
/* Buttons refonte premium */
.sl-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.95rem 2rem; border-radius: 100px; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all .25s; cursor: pointer; border: 2px solid transparent; font-family: inherit; }
.sl-btn--primary { background: var(--sl-color-brand); color: #fff; }
.sl-btn--primary:hover { background: var(--sl-color-brand-dark); transform: translateY(-2px); box-shadow: var(--sl-shadow-brand); }
.sl-btn--outline { background: transparent; color: var(--sl-color-brand); border-color: var(--sl-color-brand); }
.sl-btn--outline:hover { background: var(--sl-color-brand); color: #fff; }
.sl-btn--inverse { background: #fff; color: var(--sl-color-anchor); }
.sl-btn--inverse:hover { background: var(--sl-color-brand); color: #fff; }
.sl-btn--sm { padding: 0.6rem 1.25rem; font-size: 0.85rem; }
.sl-btn--lg { padding: 1.1rem 2.5rem; font-size: 1.05rem; }
/* Text point signature Sailoé : point bleu après titre */
.sl-text-point::after { content: '.'; color: var(--sl-color-brand); }
/* ====================================================================
V4 — Tabs catégories blog + sections par catégorie
==================================================================== */
.sl-section--cats { padding: 2rem 0; background: #fff; border-bottom: 1px solid var(--sl-color-border); position: sticky; top: 88px; z-index: 40; backdrop-filter: blur(10px); }
.sl-cat-tabs { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.5rem 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sl-cat-tabs::-webkit-scrollbar { display: none; }
.sl-cat-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.4rem; border-radius: 100px; border: 1.5px solid var(--sl-color-border); background: #fff; color: var(--sl-color-text); text-decoration: none; font-size: 0.92rem; font-weight: 600; white-space: nowrap; transition: all .25s; }
.sl-cat-tab:hover { border-color: var(--sl-color-brand); color: var(--sl-color-brand); }
.sl-cat-tab.is-active { background: var(--sl-color-anchor); color: #fff; border-color: var(--sl-color-anchor); }
.sl-section--cat-block { padding: 4rem 0; }
.sl-section--cat-block:nth-child(even) { background: var(--sl-color-sand-light); }
.sl-cta-row--center { justify-content: center; }
/* Variante hero avec image de fond + overlay (V4 — premium photographic) */
.sl-hero--with-bg {
background: var(--sl-color-anchor);
}
.sl-hero--with-bg::before { color: rgba(255,255,255,0.04); -webkit-text-stroke-color: rgba(255,255,255,0.08); }
.sl-hero--with-bg .sl-hero__title,
.sl-hero--with-bg .sl-hero__lead,
.sl-hero--with-bg .sl-eyebrow { color: rgba(255,255,255,0.95); }
.sl-hero--with-bg .sl-eyebrow { color: var(--sl-color-brand-light); }
/* Section header améliorée mobile */
@media (max-width: 768px) {
.sl-section__header--inline { flex-direction: column; align-items: flex-start; }
.sl-section--cats { top: 0; }
}
/* ====================================================================
V5 — Composants additionnels pour cohérence globale templates
==================================================================== */
/* Rating hero (page témoignages) */
.sl-rating-hero { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.sl-rating-hero strong { font-size: 1.25rem; color: var(--sl-color-anchor); }
.sl-rating-stars { color: #FFD700; font-size: 1.3rem; letter-spacing: 0.05em; }
/* Cite avec meta (témoignages) */
.sl-cite__meta { display: block; font-size: 0.78rem; opacity: 0.7; margin-top: 0.25rem; font-style: normal; }
/* Callout CTA (pour single.php article blog) */
.sl-callout--cta { margin: 3rem 0; padding: 2.5rem; background: var(--sl-color-anchor); color: #fff; border-radius: 16px; border-left: 4px solid var(--sl-color-brand); }
.sl-callout--cta .sl-eyebrow { color: var(--sl-color-brand-light); }
.sl-callout--cta .sl-callout__title { color: #fff; font-size: 1.5rem; margin: 0.5rem 0 1rem; letter-spacing: -0.02em; }
.sl-callout--cta p { color: rgba(255,255,255,0.85); margin-bottom: 1.5rem; }
.sl-callout--cta .sl-btn--outline { border-color: rgba(255,255,255,0.3); color: #fff; }
.sl-callout--cta .sl-btn--outline:hover { background: var(--sl-color-brand); border-color: var(--sl-color-brand); }
/* sl-section--alt — accent neutre */
.sl-section--alt { background: var(--sl-color-sand-light); }
.sl-section--tight { padding: 2rem 0; }
/* Container narrow utilité prose lecture */
.sl-prose--article p { font-size: 1.05rem; line-height: 1.75; }
.sl-prose--article h2 { font-size: 1.65rem; margin: 2.5rem 0 1rem; color: var(--sl-color-anchor); letter-spacing: -0.02em; }
.sl-prose--article h2::after { content: '.'; color: var(--sl-color-brand); }
.sl-prose--article h3 { font-size: 1.25rem; margin: 2rem 0 0.75rem; color: var(--sl-color-anchor); }
.sl-prose--article ul, .sl-prose--article ol { padding-left: 1.5rem; }
.sl-prose--article a { color: var(--sl-color-brand); text-decoration: underline; text-underline-offset: 3px; }
/* Split visual = image responsive */
.sl-split__visual img { width: 100%; height: auto; display: block; }
/* Buttons inverse outline (utilisé sur cta-band) */
.sl-btn--outline[style*="color:#fff"] { background: transparent; }
.sl-btn--outline[style*="color:#fff"]:hover { background: rgba(255,255,255,0.1); }
/* ===========================================================
* V6 — Cards équipe + story (page Qui sommes-nous) — 17/05
* =========================================================== */
/* Story card (3 sociétés fusionnées) */
.sl-card--story {
background: #fff;
border-radius: 16px;
padding: 2rem;
border-top: 4px solid var(--sl-color-brand);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sl-card--story:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.sl-card--story .sl-eyebrow {
margin-bottom: 0.5rem;
}
.sl-card--story .sl-card__title {
font-size: 1.35rem;
margin: 0 0 0.75rem;
letter-spacing: -0.02em;
}
.sl-card--story p {
color: var(--sl-color-anchor);
opacity: 0.85;
line-height: 1.6;
margin: 0;
}
/* Member card (équipe Sailoé) */
.sl-card--member {
background: #fff;
border-radius: 20px;
padding: 2rem 1.25rem;
text-align: center;
border: 1px solid rgba(0,0,0,0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sl-card--member:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.sl-member__avatar {
width: 72px;
height: 72px;
margin: 0 auto 1rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--sl-color-brand) 0%, var(--sl-color-mint) 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.4rem;
letter-spacing: 0.02em;
}
.sl-card--member .sl-card__title {
font-size: 1.05rem;
margin: 0 0 0.25rem;
color: var(--sl-color-anchor);
}
.sl-card--member .sl-card__subtitle {
display: block;
font-size: 0.85rem;
color: var(--sl-color-brand);
font-weight: 600;
margin: 0 0 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sl-card--member .sl-card__meta {
font-size: 0.8rem;
color: var(--sl-color-anchor);
opacity: 0.6;
margin: 0;
}
/* Section header lead utility (texte sous H2) */
.sl-section__header .sl-section__lead {
max-width: 720px;
margin: 1rem auto 0;
font-size: 1.05rem;
line-height: 1.65;
color: var(--sl-color-anchor);
opacity: 0.8;
}
.sl-section__header[class*='center'] .sl-section__lead,
.sl-page--locations-hub .sl-section__header .sl-section__lead,
.sl-page--qui .sl-section__header .sl-section__lead { text-align: center; }
/* ===========================================================
* V6.2 — Team cards riches (page Qui sommes-nous) — 17/05
* =========================================================== */
.sl-team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
}
@media (max-width: 900px) {
.sl-team-grid { grid-template-columns: 1fr; }
}
.sl-team-card {
background: #fff;
border-radius: 24px;
padding: 2rem;
border: 1px solid rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
gap: 1rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sl-team-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}
.sl-team-card__head {
display: flex;
align-items: center;
gap: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.sl-team-card__head .sl-member__avatar {
flex-shrink: 0;
margin: 0;
width: 64px;
height: 64px;
font-size: 1.2rem;
}
.sl-team-card__meta { flex: 1; }
.sl-team-card__name {
font-size: 1.15rem;
font-weight: 800;
margin: 0 0 0.15rem;
color: var(--sl-color-anchor);
letter-spacing: -0.01em;
}
.sl-team-card__role {
font-size: 0.85rem;
color: var(--sl-color-brand);
font-weight: 700;
margin: 0 0 0.1rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sl-team-card__base {
font-size: 0.8rem;
color: var(--sl-color-anchor);
opacity: 0.6;
margin: 0;
}
.sl-team-card__bio {
font-size: 0.95rem;
line-height: 1.6;
color: var(--sl-color-anchor);
margin: 0;
}
.sl-team-card__role-long {
font-size: 0.9rem;
line-height: 1.55;
color: var(--sl-color-anchor);
opacity: 0.85;
margin: 0;
padding: 0.75rem 1rem;
background: var(--sl-color-sand-light, #faf8f4);
border-left: 3px solid var(--sl-color-brand);
border-radius: 0 8px 8px 0;
}
.sl-team-card__role-long strong { color: var(--sl-color-anchor); }
.sl-team-card__fun {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.sl-team-card__fun li {
display: flex;
flex-direction: column;
gap: 0.15rem;
font-size: 0.85rem;
line-height: 1.45;
}
.sl-team-card__fun-label {
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--sl-color-brand);
}
.sl-team-card__fun-val {
color: var(--sl-color-anchor);
opacity: 0.85;
font-style: italic;
}
/* ===========================================================
* V7 — Team cards PHOTO (page Qui sommes-nous) — 17/05 PM
* Photos scrapées prod sailoe.com + design épuré
* =========================================================== */
.sl-team-grid--photos {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
@media (max-width: 1100px) {
.sl-team-grid--photos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
.sl-team-grid--photos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.sl-team-grid--photos { grid-template-columns: 1fr; }
}
.sl-team-card--photo {
background: #fff;
border-radius: 18px;
border: 1px solid rgba(0,0,0,0.06);
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 0;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sl-team-card--photo:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}
.sl-team-card__photo {
margin: 0;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
background: #eef2f5;
}
.sl-team-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform 0.5s ease;
}
.sl-team-card--photo:hover .sl-team-card__photo img {
transform: scale(1.04);
}
.sl-team-card--photo .sl-team-card__body {
padding: 1.25rem 1.4rem 1.4rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.sl-team-card--photo .sl-team-card__name {
font-size: 1.1rem;
font-weight: 800;
margin: 0;
color: var(--sl-color-anchor);
letter-spacing: -0.01em;
}
.sl-team-card--photo .sl-team-card__role {
font-size: 0.78rem;
color: var(--sl-color-brand);
font-weight: 700;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sl-team-card--photo .sl-team-card__base {
font-size: 0.78rem;
color: var(--sl-color-anchor);
opacity: 0.55;
margin: 0;
}
.sl-team-card--photo .sl-team-card__bio {
font-size: 0.9rem;
line-height: 1.55;
color: var(--sl-color-anchor);
opacity: 0.88;
margin: 0.35rem 0 0;
}
.sl-team-card__details {
margin-top: 0.25rem;
border-top: 1px solid rgba(0,0,0,0.06);
padding-top: 0.75rem;
}
.sl-team-card__details summary {
cursor: pointer;
font-size: 0.8rem;
font-weight: 700;
color: var(--sl-color-brand);
text-transform: uppercase;
letter-spacing: 0.04em;
list-style: none;
position: relative;
padding-right: 1.4rem;
user-select: none;
transition: opacity 0.15s ease;
}
.sl-team-card__details summary::-webkit-details-marker { display: none; }
.sl-team-card__details summary::after {
content: '+';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 1.1rem;
line-height: 1;
font-weight: 400;
color: var(--sl-color-brand);
transition: transform 0.2s ease;
}
.sl-team-card__details[open] summary::after {
content: '−';
}
.sl-team-card__details summary:hover { opacity: 0.7; }
.sl-team-card__details .sl-team-card__fun {
list-style: none;
margin: 0.75rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.sl-team-card__details .sl-team-card__fun li {
display: block;
font-size: 0.82rem;
line-height: 1.5;
color: var(--sl-color-anchor);
opacity: 0.85;
}
.sl-team-card__details .sl-team-card__fun strong {
color: var(--sl-color-brand);
font-weight: 700;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.03em;
display: block;
margin-bottom: 0.1rem;
}
/* ======================================================
FILTRES CATALOGUE (V8.1) — achat-neuf / achat-occasion / locations-hub
====================================================== */
.sl-filters {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--sl-radius-lg);
padding: var(--sl-space-4) var(--sl-space-5);
margin-bottom: var(--sl-space-6);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}
.sl-filters__row {
display: flex;
flex-wrap: wrap;
gap: var(--sl-space-3) var(--sl-space-3);
align-items: end;
}
.sl-filters__row > .sl-filters__field { flex: 1 1 130px; min-width: 0; }
.sl-filters__row > .sl-filters__reset { flex: 0 0 auto; }
.sl-filters__field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sl-filters__field > span {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--sl-color-anchor-soft);
}
.sl-filters__field select {
appearance: none;
-webkit-appearance: none;
background-color: #fff;
border: 1px solid rgba(28, 155, 219, 0.28);
border-radius: var(--sl-radius-md);
padding: 0.6rem 2.25rem 0.6rem 0.85rem;
font-size: var(--sl-fs-sm);
color: var(--sl-color-anchor);
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 14px;
transition: border-color var(--sl-duration) var(--sl-ease);
}
.sl-filters__field select:focus {
outline: none;
border-color: var(--sl-color-brand);
box-shadow: 0 0 0 3px rgba(0, 168, 200, 0.15);
}
.sl-filters__field select:hover {
border-color: var(--sl-color-brand);
}
.sl-filters__reset {
background: transparent;
border: 1px solid var(--sl-color-brand);
color: var(--sl-color-brand);
padding: 0.6rem 1rem;
border-radius: var(--sl-radius-md);
font-weight: var(--sl-fw-medium);
font-size: var(--sl-fs-sm);
cursor: pointer;
transition: all var(--sl-duration) var(--sl-ease);
height: fit-content;
align-self: end;
}
.sl-filters__reset:hover {
background: var(--sl-color-brand);
color: #fff;
}
.sl-filters__count {
margin: var(--sl-space-3) 0 0;
padding-top: var(--sl-space-3);
border-top: 1px solid rgba(0, 0, 0, 0.06);
font-size: var(--sl-fs-sm);
color: var(--sl-color-anchor-soft);
}
.sl-filters__count strong {
color: var(--sl-color-brand);
font-weight: var(--sl-fw-bold);
font-size: 1.1rem;
}
.sl-filters__empty {
margin-top: var(--sl-space-6);
padding: var(--sl-space-5);
text-align: center;
background: var(--sl-color-sand);
border-radius: var(--sl-radius-md);
color: var(--sl-color-anchor-soft);
}
.sl-link {
background: none;
border: none;
padding: 0;
color: var(--sl-color-brand);
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: color .2s ease;
}
.sl-link:hover { color: var(--sl-color-anchor); text-decoration: underline; }
/* Card hidden by filter */
.sl-card.is-hidden { display: none !important; }
/* Chip sm pour bases multi-destination */
.sl-chip--sm {
font-size: 0.7rem;
padding: 0.2rem 0.5rem;
}
.sl-card__bases {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin: 0.4rem 0;
}
.sl-card__price--soon {
background: var(--sl-color-anchor-soft) !important;
}
@media (max-width: 680px) {
.sl-filters { padding: var(--sl-space-3); }
.sl-filters__row > .sl-filters__field { flex: 1 1 calc(50% - var(--sl-space-3) / 2); }
.sl-filters__row > .sl-filters__reset { flex: 1 1 100%; }
}
/* ======================================================
HEADER TRANSPARENT (toutes pages) — call 26/05
Ewena/Baptiste : header + menu transparents sur TOUTES les pages,
par-dessus le hero pâle (fondu blanc + texto fond), home incluse.
- Pages à hero sombre/image (blog-hub, croisiere-destination, comparatif) → .sl-header--on-dark : texte + logo blancs.
- Pages à hero pâle clair (home, destinations, contact…) → texte sombre (défaut).
- Au scroll → header solide blanc + texte sombre (partout).
Fil d'Ariane rendu dans .sl-main, superposé au hero (effet fondu, espacé du header).
====================================================== */
/* --- Header transparent (fixed, par-dessus le hero) --- */
.sl-header.sl-header--overlay {
position: fixed;
top: 0; left: 0; right: 0;
background: transparent;
border-bottom-color: transparent;
box-shadow: none;
transition: background var(--sl-duration-slow) var(--sl-ease),
border-color var(--sl-duration-slow) var(--sl-ease),
box-shadow var(--sl-duration-slow) var(--sl-ease);
}
/* Décalage sous la barre d'admin WordPress (en mode connecté uniquement) */
.admin-bar .sl-header.sl-header--overlay { top: 32px; }
@media screen and (max-width: 782px) {
.admin-bar .sl-header.sl-header--overlay { top: 46px; }
}
/* Le sous-menu déroulant reste sur fond blanc → liens sombres partout */
.sl-header--overlay .sl-nav .sub-menu a { color: var(--sl-color-anchor-soft); }
.sl-header--overlay .sl-nav .sub-menu a:hover { color: var(--sl-color-brand); }
/* --- Variante fond sombre (home + heros image) : texte + logo blancs --- */
.sl-header--overlay.sl-header--on-dark .sl-nav > li > a,
.sl-header--overlay.sl-header--on-dark .sl-lang-switcher a,
.sl-header--overlay.sl-header--on-dark .sl-lang-switcher li.current-lang { color: rgba(255, 255, 255, 0.92); }
.sl-header--overlay.sl-header--on-dark .sl-nav > li > a:hover,
.sl-header--overlay.sl-header--on-dark .sl-nav > li.menu-item-has-children:hover > a { color: #fff; }
.sl-header--overlay.sl-header--on-dark .sl-burger span { background: #fff; }
.sl-header--overlay.sl-header--on-dark .sl-logo-img { filter: brightness(0) invert(1); transition: filter var(--sl-duration-slow) var(--sl-ease); }
/* --- État scrollé : header solide blanc + texte sombre (prioritaire, bat --on-dark) --- */
.sl-header.sl-header--overlay.is-scrolled {
background: var(--sl-color-white);
border-bottom-color: var(--sl-color-border);
box-shadow: var(--sl-shadow-sm);
}
.sl-header--overlay.is-scrolled .sl-nav > li > a,
.sl-header--overlay.is-scrolled .sl-lang-switcher a,
.sl-header--overlay.is-scrolled.sl-header--on-dark .sl-nav > li > a,
.sl-header--overlay.is-scrolled.sl-header--on-dark .sl-lang-switcher a { color: var(--sl-color-anchor-soft); }
.sl-header--overlay.is-scrolled .sl-lang-switcher li.current-lang,
.sl-header--overlay.is-scrolled .sl-nav > li > a:hover { color: var(--sl-color-brand); }
.sl-header--overlay.is-scrolled .sl-burger span { background: var(--sl-color-anchor); }
.sl-header--overlay.is-scrolled .sl-logo-img,
.sl-header--overlay.is-scrolled.sl-header--on-dark .sl-logo-img { filter: none; }
/* --- Fil d'Ariane superposé au hero (pages internes) --- */
/* Le hero peut être enfant direct de .sl-main (home) OU wrappé dans (pages internes) → combinateur descendant. */
.sl-main { position: relative; }
body:not(.home) .sl-main:has(.sl-hero) .sl-breadcrumb {
position: absolute;
top: calc(var(--sl-header-h) + 1.5rem); /* espace entre le header et le fil d'Ariane (retour 26/05) */
left: 0; right: 0; z-index: 6;
background: transparent; border: 0; margin: 0;
}
/* Sur hero sombre, liens du fil d'Ariane en blanc */
.sl-main--on-dark .sl-breadcrumb,
.sl-main--on-dark .sl-breadcrumb a,
.sl-main--on-dark .sl-breadcrumb span { color: rgba(255, 255, 255, 0.85); }
/* Pages internes SANS hero : on pousse le contenu sous le header fixed */
body:not(.home) .sl-main:not(:has(.sl-hero)) { padding-top: calc(var(--sl-header-h) + 2.5rem); }
/* Heros (home + internes) : padding-top pour loger le header transparent + le fil d'Ariane espacés.
Marge haute généreuse (retour 26/05) → on voit davantage l'image de fond. */
.sl-main .sl-hero {
padding-top: calc(var(--sl-header-h) + clamp(6rem, 9vw, 8rem));
}
/* 1ère section sous le hero (destinations passées en tête de home) : top un peu resserré */
.sl-section--first { padding-top: clamp(3rem, 6vw, 4.5rem); }
/* ====================================================================
RETOURS CALL 26/05 — lot web design (cartes arrondies, bento
destinations, form contact, sidebar blog auteur + sommaire).
Bloc en fin de fichier = gagne la cascade sur les définitions V6.
==================================================================== */
/* --- 1. Cartes plus arrondies (Ewena : "trop brutes" → cohérence site arrondi) --- */
/* Le bloc V6 (.sl-card border-radius:12px) écrasait le 20px voulu → on restaure + on harmonise. */
.sl-card { border-radius: var(--sl-radius-lg); } /* 20px — croisières, articles connexes, related */
.sl-card__media,
.sl-card__image { border-radius: 0; } /* clippé par le overflow:hidden de la carte */
.sl-card__chip { border-radius: var(--sl-radius-full); }
/* Fix sticky tabs blog : header passé de 88 → 96px (token --sl-header-h) */
.sl-section--cats { top: var(--sl-header-h); }
/* --- 2. Section destinations HOME : mosaïque bento (proposition alternative Ewena) --- */
/* Hiérarchie business : Seychelles + Caraïbes (P1 cœur de cible) en grandes tuiles,
Corse / Bretagne / Polynésie en tuiles secondaires. */
.sl-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sl-space-5); }
.sl-bento__item {
position: relative;
display: flex;
overflow: hidden;
border-radius: 28px;
text-decoration: none;
background: var(--sl-color-anchor);
transition: transform var(--sl-duration) var(--sl-ease), box-shadow var(--sl-duration) var(--sl-ease);
}
.sl-bento__item--xl { grid-column: span 3; aspect-ratio: 16 / 10; } /* 2 par ligne — phares */
.sl-bento__item--md { grid-column: span 2; aspect-ratio: 4 / 5; } /* 3 par ligne — secondaires */
.sl-bento__media { position: absolute; inset: 0; }
.sl-bento__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sl-duration-slow) var(--sl-ease); }
.sl-bento__item::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(0,0,0,0) 32%, rgba(38,38,38,0.88) 100%);
}
.sl-bento__item:hover { transform: translateY(-4px); box-shadow: var(--sl-shadow-lg); }
.sl-bento__item:hover .sl-bento__media img { transform: scale(1.05); }
.sl-bento__flag {
position: absolute; top: var(--sl-space-4); left: var(--sl-space-4); z-index: 2;
display: inline-flex; align-items: center; gap: 0.4em;
background: rgba(255,255,255,0.16); backdrop-filter: blur(8px);
color: #fff; padding: 0.4rem 0.85rem; border-radius: var(--sl-radius-full);
font-size: 0.68rem; font-weight: var(--sl-fw-bold);
text-transform: uppercase; letter-spacing: var(--sl-tracking-wide);
}
.sl-bento__body {
position: relative; z-index: 2; margin-top: auto;
padding: clamp(1.6rem, 2.2vw, 2.6rem) clamp(1.6rem, 2.2vw, 2.6rem) clamp(1.8rem, 2.4vw, 2.9rem);
color: #fff; display: flex; flex-direction: column; gap: var(--sl-space-2);
}
.sl-bento__sub {
font-size: var(--sl-fs-xs); color: var(--sl-color-brand-light);
text-transform: uppercase; letter-spacing: var(--sl-tracking-wide); font-weight: var(--sl-fw-semi);
}
.sl-bento__title {
margin: 0; color: #fff; font-family: var(--sl-font-serif);
font-size: clamp(1.5rem, 2.2vw, 2.25rem); font-weight: var(--sl-fw-bold); line-height: var(--sl-lh-tight);
}
.sl-bento__item--md .sl-bento__title { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.sl-bento__cta {
margin-top: var(--sl-space-2);
display: inline-flex; align-items: center; gap: 0.4em; align-self: flex-start;
background: rgba(255,255,255,0.14); backdrop-filter: blur(6px);
color: #fff; padding: 0.5rem 1.1rem; border-radius: var(--sl-radius-full);
font-size: var(--sl-fs-sm); font-weight: var(--sl-fw-semi);
transition: background var(--sl-duration) var(--sl-ease);
}
.sl-bento__cta::after { content: "→"; transition: transform var(--sl-duration) var(--sl-ease); }
.sl-bento__item:hover .sl-bento__cta { background: var(--sl-color-brand); }
.sl-bento__item:hover .sl-bento__cta::after { transform: translateX(3px); }
@media (max-width: 900px) {
.sl-bento { grid-template-columns: repeat(2, 1fr); }
.sl-bento__item--xl, .sl-bento__item--md { grid-column: span 1; aspect-ratio: 4 / 5; }
}
@media (max-width: 520px) {
.sl-bento { grid-template-columns: 1fr; }
.sl-bento__item--xl, .sl-bento__item--md { aspect-ratio: 16 / 11; }
}
/* --- 3. Formulaire contact : sortir du "tout blanc" (champs invisibles sur carte blanche) --- */
.sl-contact-form-wrap { border-top: 4px solid var(--sl-color-brand); }
.sl-form-field input,
.sl-form-field select,
.sl-form-field textarea {
background: var(--sl-color-ink-50); /* léger fond gris → le champ se voit */
border-color: var(--sl-color-border);
}
.sl-form-field input:focus,
.sl-form-field select:focus,
.sl-form-field textarea:focus {
background: #fff; /* le champ actif s'éclaircit */
border-color: var(--sl-color-brand);
}
.sl-form-tile { background: var(--sl-color-ink-50); border-color: transparent; }
.sl-form-tile:has(input:checked) { background: rgba(28,155,219,0.06); }
/* --- 4. Article blog : layout contenu + sidebar (auteur EAT + sommaire) --- */
.sl-article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
@media (max-width: 1024px) { .sl-article-layout { grid-template-columns: 1fr; } }
.sl-article-aside {
position: sticky; top: calc(var(--sl-header-h) + 1.5rem);
display: grid; gap: var(--sl-space-5);
}
@media (max-width: 1024px) { .sl-article-aside { position: static; } }
/* Ancres TOC : le titre ne se cache pas sous le header fixe au clic */
.sl-prose h2 { scroll-margin-top: calc(var(--sl-header-h) + 1.25rem); }
/* Sommaire (réutilise .sl-toc existant, ajustements sidebar) */
.sl-article-aside .sl-toc { font-size: var(--sl-fs-sm); }
.sl-article-aside .sl-toc ol { list-style: none; padding-left: 0; counter-reset: toc; }
.sl-article-aside .sl-toc li { counter-increment: toc; }
.sl-article-aside .sl-toc a { display: flex; gap: 0.5rem; border-bottom: 0; align-items: baseline; }
.sl-article-aside .sl-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--sl-color-brand); font-weight: var(--sl-fw-bold); font-size: 0.78rem; }
/* Carte auteur (humanisation / signaux EAT) */
.sl-author-card {
background: var(--sl-color-anchor); color: #fff;
border-radius: var(--sl-radius-lg); padding: var(--sl-space-6);
display: flex; flex-direction: column; gap: var(--sl-space-3);
}
.sl-author-card__avatar {
width: 56px; height: 56px; border-radius: 50%;
background: var(--sl-color-brand); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
}
.sl-author-card__avatar svg { width: 28px; height: 28px; }
.sl-author-card__by { margin: 0; font-size: var(--sl-fs-xs); text-transform: uppercase; letter-spacing: var(--sl-tracking-wide); color: var(--sl-color-brand-light); font-weight: var(--sl-fw-semi); }
.sl-author-card__name { margin: 0; font-size: var(--sl-fs-lg); font-weight: var(--sl-fw-bold); color: #fff; }
.sl-author-card__bio { margin: 0; font-size: var(--sl-fs-sm); line-height: var(--sl-lh-normal); color: rgba(255,255,255,0.78); }
.sl-author-card a.sl-link { color: var(--sl-color-brand-light); }
.sl-author-card a.sl-link:hover { color: #fff; }
/* ====================================================================
MENU MOBILE (tiroir off-canvas) + fix header mobile + barre bottom
Ajout 03/06 — navigation mobile/tablette + polish sticky CTA.
==================================================================== */
/* Header : sur mobile/tablette, on masque le CTA texte (présent dans le tiroir
+ la barre bottom) pour libérer la place et garantir le burger visible. */
@media (max-width: 980px) {
.sl-header__cta { display: none; }
/* Nav masquée (display:none) => repli en flex pour coller le burger à droite. */
.sl-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sl-space-3); }
/* Langue retirée du header (présente dans le tiroir) => header épuré : logo / burger. */
.sl-header__actions { gap: var(--sl-space-2); }
.sl-header__actions .sl-lang-switcher { display: none; }
}
/* Animation burger -> croix quand le menu est ouvert. */
.sl-burger span { transition: transform .25s var(--sl-ease), opacity .2s var(--sl-ease); transform-origin: center; }
.sl-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sl-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sl-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Tiroir mobile. */
.sl-mobile-menu { position: fixed; inset: 0; z-index: var(--sl-z-modal); }
.sl-mobile-menu[hidden] { display: none; }
.sl-mobile-menu__overlay {
position: absolute; inset: 0;
background: rgba(18, 28, 38, 0.5);
opacity: 0; transition: opacity .3s var(--sl-ease);
}
.sl-mobile-menu__panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(86vw, 360px);
background: var(--sl-color-white);
box-shadow: -8px 0 34px rgba(0, 0, 0, 0.16);
transform: translateX(100%);
transition: transform .32s var(--sl-ease-out);
display: flex; flex-direction: column;
padding: 1.1rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom));
overflow-y: auto; overscroll-behavior: contain;
}
.sl-mobile-menu.is-open .sl-mobile-menu__overlay { opacity: 1; }
.sl-mobile-menu.is-open .sl-mobile-menu__panel { transform: none; }
.sl-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.sl-mobile-menu__brand { font-family: var(--sl-font-serif); font-size: 1.4rem; letter-spacing: .06em; color: var(--sl-color-anchor); }
.sl-mobile-menu__close {
width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
background: var(--sl-color-bg-soft); border: 0; border-radius: var(--sl-radius-full);
cursor: pointer; color: var(--sl-color-anchor);
}
.sl-mobile-menu__close svg { width: 22px; height: 22px; }
/* Navigation dans le tiroir : parents + sous-menus dépliés. */
.sl-mobile-menu__nav { margin-top: .5rem; }
.sl-mobile-nav, .sl-mobile-menu__nav ul { list-style: none; margin: 0; padding: 0; }
.sl-mobile-nav > li { border-bottom: 1px solid var(--sl-color-border); padding: .35rem 0; }
.sl-mobile-nav > li > a {
display: block; padding: .55rem .15rem; font-weight: var(--sl-fw-semibold, 600);
color: var(--sl-color-anchor); text-decoration: none; font-size: 1.06rem;
}
.sl-mobile-nav .sub-menu { padding: 0 0 .4rem .35rem; }
.sl-mobile-nav .sub-menu a {
display: block; padding: .5rem .15rem; color: var(--sl-color-anchor-soft);
text-decoration: none; font-size: .95rem;
}
.sl-mobile-nav > li > a:active,
.sl-mobile-nav .sub-menu a:active,
.sl-mobile-nav a:hover { color: var(--sl-color-brand); }
.sl-mobile-menu__cta { margin: 1.1rem 0 .25rem; width: 100%; justify-content: center; }
.sl-mobile-menu__contact { display: flex; gap: .6rem; margin-top: .9rem; }
.sl-mobile-menu__contact a {
flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem;
padding: .7rem .5rem; border-radius: var(--sl-radius-md);
background: var(--sl-color-brand-pale); color: var(--sl-color-brand);
text-decoration: none; font-weight: 600; font-size: .88rem;
}
.sl-mobile-menu__contact svg { width: 18px; height: 18px; }
.sl-mobile-menu__lang { margin-top: 1.2rem; justify-content: center; }
/* Verrou du scroll quand le menu est ouvert + on masque la barre bottom. */
body.sl-menu-open { overflow: hidden; }
body.sl-menu-open .sl-sticky-cta { display: none !important; }
/* Sécurité : pas de tiroir sur desktop. */
@media (min-width: 981px) { .sl-mobile-menu { display: none !important; } }
/* ---- Barre bottom mobile (sticky CTA) : version polie ---- */
.sl-sticky-cta {
padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom));
gap: .5rem;
background: rgba(255, 255, 255, 0.97);
}
.sl-sticky-cta__btn {
border-radius: var(--sl-radius-md);
font-size: .82rem; font-weight: 600;
gap: .4rem; padding: .72rem .5rem; min-height: 46px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
line-height: 1;
}
.sl-sticky-cta__btn svg { flex: 0 0 auto; }
.sl-sticky-cta__btn--wa { background: #1FaF52; }
.sl-sticky-cta__btn--quote { flex: 1.5; box-shadow: 0 2px 8px rgba(28, 155, 219, 0.32); }
/* Safe-area : marge basse du contenu pour ne pas masquer sous la barre. */
@media (max-width: 768px) {
body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}
/* ---- V13 (11/06) : page équipe - textes Ewena + cartes logo (membres sans photo) + sous-section Seychelles ---- */
.sl-team-card__photo--logo { display: flex; align-items: center; justify-content: center; background: #f3f1ea; }
.sl-team-card__photo--logo img { width: 62%; height: auto; max-height: 46%; object-fit: contain; }
.sl-team-card--photo:hover .sl-team-card__photo--logo img { transform: none; }
.sl-team-card__more { margin: 0.65rem 0 0; font-size: 0.92rem; line-height: 1.6; color: #4d4d4d; }
.sl-team-subhead { margin: 3.25rem 0 1.5rem; }
/* ---- V13b (11/06) : cartes équipe compactes (grid align start + dépliant scrollable) + icônes SVG ---- */
.sl-team-grid--photos { align-items: start; }
.sl-team-card__details-body { max-height: 15rem; overflow-y: auto; padding-right: 0.4rem; scrollbar-width: thin; scrollbar-color: var(--sl-color-brand) transparent; }
.sl-form-tile__icon svg, .sl-team__photo svg { display: block; margin-inline: auto; }
.sl-form-tile__icon { color: var(--sl-color-brand); }
.sl-team__photo { color: var(--sl-color-brand); }
/* ---- V13c (11/06) : cartes équipe UNIFORMES (bio clampée 4 lignes + "Plus sur" épinglé bas + rangées égales) ---- */
.sl-team-grid--photos { align-items: stretch; }
.sl-team-card--photo { display: flex; flex-direction: column; }
.sl-team-card--photo .sl-team-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.sl-team-card__bio { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sl-team-card__details { margin-top: auto; }
/* ===== Fiche bateau refonte (16/06) : hero modele, galerie, lightbox, plan ===== */
.sl-hero--boat .sl-hero__boatname {
margin: -0.15rem 0 0.4rem;
font-style: italic;
color: var(--sl-color-anchor-soft);
font-size: var(--sl-fs-md);
}
.sl-boat-keyinfo { font-weight: var(--sl-fw-medium); }
.sl-boat-gallery-section { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.sl-boat-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
gap: 0.6rem;
border-radius: var(--sl-radius-lg);
overflow: hidden;
}
.sl-boat-gallery__item {
position: relative;
padding: 0; border: 0; cursor: pointer; overflow: hidden;
background: var(--sl-color-sand);
aspect-ratio: 4 / 3;
}
.sl-boat-gallery__item--lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.sl-boat-gallery__item img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform var(--sl-duration) var(--sl-ease);
}
.sl-boat-gallery__item:hover img { transform: scale(1.05); }
.sl-boat-gallery__item--extra { display: none; }
.sl-boat-gallery__more {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: rgba(38, 38, 38, 0.55); color: #fff; font-size: 1.5rem; font-weight: 700;
}
.sl-boat-gallery__view { margin-top: 1rem; }
@media (max-width: 720px) {
.sl-boat-gallery { grid-template-columns: repeat(2, 1fr); }
.sl-boat-gallery__item--lead { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
}
.sl-lightbox {
position: fixed; inset: 0; z-index: 2000;
display: flex; align-items: center; justify-content: center;
background: rgba(15, 23, 28, 0.92);
padding: clamp(1rem, 4vw, 3rem);
}
.sl-lightbox[hidden] { display: none; }
.sl-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
.sl-lightbox__btn {
position: absolute; background: rgba(255,255,255,0.12); border: 0; color: #fff; cursor: pointer;
width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
transition: background var(--sl-duration) var(--sl-ease);
}
.sl-lightbox__btn:hover { background: rgba(255,255,255,0.25); }
.sl-lightbox__btn svg { width: 24px; height: 24px; }
.sl-lightbox__close { top: 1rem; right: 1rem; }
.sl-lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.sl-lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
.sl-lightbox__counter {
position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
color: #fff; font-size: var(--sl-fs-sm); letter-spacing: 0.05em;
background: rgba(0,0,0,0.4); padding: 0.3rem 0.8rem; border-radius: 999px;
}
@media (max-width: 600px) { .sl-lightbox__prev { left: 0.3rem; } .sl-lightbox__next { right: 0.3rem; } }
.sl-boat-plan__fig { margin: 0; text-align: center; }
.sl-boat-plan__fig a { display: inline-block; max-width: 100%; }
.sl-boat-plan__fig img { max-width: 100%; height: auto; border-radius: var(--sl-radius-md); border: 1px solid rgba(0,0,0,0.08); background: #fff; }
.sl-boat-plan__cap { margin-top: 0.6rem; font-size: var(--sl-fs-sm); color: var(--sl-color-anchor-soft); }
/* ===== Fixes UI 16/06 (retours Baptiste) ===== */
/* Carte bateau : la méta ne se compresse plus, elle passe à la ligne proprement */
.sl-card--boat .sl-card__meta { flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; }
.sl-card--boat .sl-card__meta span { white-space: nowrap; }
.sl-card--boat .sl-card__meta span:not(:last-child)::after { content: "·"; margin-left: 0.5rem; color: var(--sl-color-text-soft); opacity: 0.6; }
/* Sécurité : un cta-band reste toujours foncé même combiné à --alt */
.sl-section--cta-band.sl-section--alt { background: linear-gradient(180deg, var(--sl-color-anchor) 0%, #1a1a1a 100%); }
/* V12 — Tableaux dans .sl-prose (contenu éditorial) : stylisation design system Sailoé. */
.sl-prose table {
width: 100%;
border-collapse: collapse;
margin: 0 0 1.75rem;
font-size: 0.975rem;
line-height: 1.5;
background: var(--sl-color-white);
border: 1px solid var(--sl-color-border);
}
.sl-prose thead th {
background: var(--sl-color-brand-pale);
color: var(--sl-color-anchor);
font-weight: var(--sl-fw-bold, 700);
text-align: left;
border-bottom: 2px solid var(--sl-color-brand);
}
.sl-prose th,
.sl-prose td {
padding: 0.7rem 0.95rem;
border-bottom: 1px solid var(--sl-color-border);
vertical-align: top;
}
.sl-prose tbody tr:nth-child(even) { background: var(--sl-color-ink-50); }
.sl-prose tbody tr:hover { background: var(--sl-color-brand-pale); }
.sl-prose td:first-child { font-weight: var(--sl-fw-medium, 600); color: var(--sl-color-anchor); }
.sl-prose table + p { margin-top: 0; }
@media (max-width: 640px) {
.sl-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; font-size: 0.9rem; }
}
/* V13 — figures & encart "callout" dans .sl-prose (pages money, pilote croisière). */
.sl-prose figure { margin: 2rem 0; }
.sl-prose figure img { width: 100%; height: auto; display: block; border-radius: 14px; }
.sl-prose figcaption { margin-top: 0.6rem; font-size: 0.875rem; color: var(--sl-color-text-soft); font-style: italic; }
.sl-callout { background: var(--sl-color-brand-pale); border-left: 4px solid var(--sl-color-brand); border-radius: 12px; padding: 1.4rem 1.6rem; margin: 2rem 0; }
.sl-callout p { margin: 0 0 0.85rem; }
.sl-callout p:last-child { margin: 0; }
.sl-callout strong { color: var(--sl-color-brand-darker); }
.sl-callout__cta { display: inline-block; background: var(--sl-color-brand); color: #fff; padding: 0.6rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none; }
.sl-callout__cta:hover { background: var(--sl-color-brand-dark); }
/* V14 — fix CTA encart (specificite > .sl-prose a) + listes a puces/numerotees stylees. */
.sl-prose .sl-callout__cta { color: #fff; }
.sl-prose .sl-callout__cta:hover { color: #fff; }
.sl-prose ul { list-style: none; padding-left: 0; }
.sl-prose ul li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; }
.sl-prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--sl-color-brand); }
.sl-prose ol { list-style: none; counter-reset: sl-ol; padding-left: 0; }
.sl-prose ol li { position: relative; padding-left: 2.4rem; margin-bottom: 0.7rem; counter-increment: sl-ol; }
.sl-prose ol li::before { content: counter(sl-ol); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; background: var(--sl-color-brand-pale); color: var(--sl-color-brand-darker); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; }
/* Newsletter : zone de message et mention legale */
.sl-newsletter__zone { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.sl-newsletter__msg { margin: 0; font-size: 0.88rem; min-height: 1.1em; }
.sl-newsletter__msg--ok { color: #1a7f4b; font-weight: 600; }
.sl-newsletter__msg--err { color: #c0392b; font-weight: 600; }
.sl-newsletter__legal { margin: 0; font-size: 0.76rem; line-height: 1.4; opacity: 0.7; }
.sl-newsletter__legal a { color: inherit; text-decoration: underline; }