/* ════════════════════════════════════════════════
Seniors Mag — Design system public (v2)
Fidèle à la maquette graphiste — 2026
════════════════════════════════════════════════ */
/* Forcer le font-display sur les icônes Bootstrap chargées via CDN */
@font-face {
font-family: "bootstrap-icons";
src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2?...") format("woff2");
font-display: swap !important;
}
:root {
--blue: #0a4d8c;
--blue-dark: #073a6b;
--blue-deep: #062e55;
--blue-soft: #e8f1f9;
--blue-mid: #1565b0;
--navy: #005288; /* Figma exact — nav active, portail label */
--crimson: #D42E5A; /* Figma exact — bouton "Choisir ma région" */
--orange: #f29132;
--orange-dark: #e07a1a;
--orange-soft: #fdecdc;
--coral: #e8604a;
--gray-bg: #f5f8fb;
--gray-line: #e3e8ef;
--gray-border: #dee2e6;
--gray-text: #64748b;
--gray-mute: #6b7a8a;
--text: #1c2a3a;
--text-soft: #475569;
--white: #ffffff;
--shadow-sm: 0 2px 6px rgba(10,77,140,.06);
--shadow: 0 6px 20px rgba(10,77,140,.08);
--shadow-lg: 0 14px 40px rgba(10,77,140,.12);
--radius: 14px;
--radius-sm: 10px;
--radius-lg: 20px;
--font: 'Inter', system-ui, -apple-system, sans-serif;
--font-h: 'Poppins', var(--font);
--font-brand: 'Lexend Deca', 'Poppins', var(--font);
--transition: .25s cubic-bezier(.4,0,.2,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
main { padding-bottom: 5rem; }
body {
font-family: var(--font);
color: var(--text-soft);
background: var(--white);
font-size: 15px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-h); color: var(--text); font-weight: 800; line-height: 1.2; }
img { max-width: 100%; display: block; }
a { color: var(--blue); }
/* ═══════════════════════ HEADER ═══════════════════════ */
.sm-header {
background: var(--white);
box-shadow: 0 2px 8px rgba(0,82,136,.08);
}
/* ── Top bar ────────────────────────────────────────────────────── */
.sm-header-top { background: var(--white); padding: .75rem 0; border-bottom: 1px solid var(--gray-line); }
.sm-header-top-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
/* Logo */
.sm-logo, .sm-footer-logo {
display: inline-flex;
align-items: baseline;
text-decoration: none;
font-family: var(--font-brand);
font-weight: 700;
font-size: 1.6rem;
letter-spacing: -.3px;
line-height: 1;
gap: 0;
}
.sm-logo:hover, .sm-footer-logo:hover { text-decoration: none; opacity: .92; }
.sm-logo-img { height: 58px; width: auto; display: block; }
.sm-logo-seniors { color: var(--navy); }
.sm-logo-mag { color: var(--crimson); }
.sm-footer-logo .sm-logo-seniors { color: #fff; }
.sm-footer-logo .sm-logo-mag { color: var(--crimson); }
.sm-logo-blue { color: var(--navy); }
.sm-logo-orange { color: var(--orange); }
.sm-logo-tld { color: var(--navy); font-size: .9rem; font-weight: 600; opacity: .8; margin-left: 1px; }
/* "Portail national" + bouton région */
.sm-header-top-right {
display: flex;
align-items: center;
gap: 1.5rem;
}
.sm-portail-link {
font-family: var(--font-brand);
color: var(--navy);
font-size: 20px;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
transition: opacity var(--transition);
}
.sm-portail-link:hover { opacity: .75; color: var(--navy); }
.sm-btn-region {
font-family: var(--font-brand);
background: var(--crimson);
color: #fff;
border: none;
border-radius: 999px;
font-size: 20px;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
padding: 12px 28px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(212,46,90,.3);
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
white-space: nowrap;
}
.sm-btn-region:hover {
background: #b8244c;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(212,46,90,.4);
}
/* Dropdown régions */
.sm-region-menu {
border: 1px solid var(--gray-line);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
padding: .35rem 0;
min-width: 290px;
max-height: 60vh;
overflow-y: auto;
}
.sm-region-menu .dropdown-item {
font-size: .85rem;
padding: .5rem 1rem;
color: var(--text);
}
.sm-region-menu .dropdown-item:hover { background: var(--blue-soft); color: var(--navy); }
.sm-region-menu .dropdown-item.active { background: var(--navy); color: #fff; }
/* ── Nav bar ────────────────────────────────────────────────────── */
.sm-header-nav { background: var(--white); }
.sm-header-nav .container { display: flex; align-items: stretch; min-height: 72px; }
/* Burger (mobile) */
.sm-nav-toggler {
display: none;
background: transparent;
border: none;
color: var(--navy);
font-size: 1.6rem;
padding: .65rem 0;
cursor: pointer;
line-height: 1;
align-self: center;
margin-left: auto;
}
.sm-nav-collapse { width: 100%; }
.sm-nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: stretch;
justify-content: center;
gap: 0;
height: 100%;
}
/* Chaque lien nav : icône au-dessus, texte en dessous, centré */
.sm-nav-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .3rem;
padding: 10px clamp(.55rem, 1.8vw, 2.2rem);
min-height: 72px;
color: #005288;
font-family: var(--font-brand);
font-size: 13px;
font-weight: 600;
line-height: 1;
letter-spacing: .02em;
text-decoration: none;
white-space: nowrap;
transition: color var(--transition), background var(--transition);
border-radius: 8px 8px 0 0;
}
.sm-nav-link i {
font-size: 1.2rem;
color: #005288;
transition: color var(--transition);
}
.sm-nav-svg {
width: 24px;
height: 24px;
display: block;
flex-shrink: 0;
transition: filter var(--transition);
}
/* Hover */
.sm-nav-link:hover {
color: var(--navy);
background: var(--blue-soft);
border-radius: 8px 8px 0 0;
}
.sm-nav-link:hover i { color: var(--navy); }
/* Actif — fond navy, texte + icône blancs, arrondi haut uniquement */
.sm-nav-link.is-active {
background: var(--navy);
color: #fff;
border-radius: 8px 8px 0 0;
}
.sm-nav-link.is-active i { color: #fff; }
.sm-nav-link.is-active .sm-nav-svg { filter: brightness(0) invert(1); }
/* ── Responsive ─────────────────────────────────────────────────── */
@media (min-width: 992px) {
.sm-nav-collapse { display: block !important; }
}
@media (max-width: 991.98px) {
.sm-header-top-inner { flex-wrap: nowrap; }
.sm-header-top-right { display: none !important; }
.sm-nav-toggler { display: flex; font-size: 2rem; padding: .4rem .5rem; margin-left: auto; }
.sm-header-top { padding: .5rem 0; }
.sm-logo-img { height: 44px; }
.sm-header-nav { min-height: 0 !important; padding: 0 !important; }
.sm-header-nav .container { min-height: 0 !important; padding: 0 !important; }
.sm-nav-collapse.collapse:not(.show) { display: none; }
.sm-nav-list {
flex-direction: column;
align-items: stretch;
padding: .5rem 0;
height: auto;
}
.sm-nav-link {
flex-direction: row;
justify-content: flex-start;
gap: .75rem;
padding: .75rem 1rem;
min-height: unset;
font-size: 16px;
border-radius: 0;
}
.sm-nav-link.is-active {
border-radius: 0;
border-left: 4px solid var(--crimson);
background: var(--blue-soft);
color: var(--navy);
}
.sm-nav-link.is-active i { color: var(--navy); }
}
@media (max-width: 575.98px) {
.sm-logo-img { height: 44px; }
.sm-btn-region { font-size: 15px; padding: 10px 18px; }
.sm-portail-link { font-size: 15px; }
}
/* ═══════════════════════ FOOTER ═══════════════════════ */
.sm-footer {
background: transparent;
padding: 0;
margin-top: 0;
position: relative;
}
/* ── Newsletter flottante ── */
.sm-footer-newsletter-wrap {
position: relative;
z-index: 2;
padding: 0 0 0;
margin-bottom: -80px;
}
.sm-footer-newsletter-card {
position: relative;
overflow: hidden;
background: #005288;
box-shadow: 0 4px 24px rgba(0, 82, 136, 0.25);
border-radius: 24px;
padding: 48px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 48px;
}
.sm-footer-newsletter-card::before {
content: '';
position: absolute;
inset: 0;
background: url('../img/background/newsletter_background.png') center/cover no-repeat;
z-index: 0;
pointer-events: none;
}
.sm-footer-newsletter-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, #005288 0%, rgba(0, 82, 136, 0) 100%);
z-index: 1;
pointer-events: none;
}
.sm-footer-nl-intro,
.sm-footer-nl-form-wrap {
position: relative;
z-index: 2;
}
.sm-footer-nl-intro {
display: flex;
flex-direction: column;
gap: 16px;
flex: 1 1 auto;
}
.sm-footer-nl-heading-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.sm-footer-nl-eyebrow {
font-family: var(--font-brand);
font-size: 1.25rem;
font-weight: 500;
text-transform: uppercase;
color: #fff;
margin: 0;
line-height: 1.25;
}
.sm-footer-nl-title {
font-family: var(--font-brand);
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.25;
}
.sm-footer-nl-sub {
font-family: var(--font-brand);
font-size: 1.25rem;
font-weight: 400;
color: #F1F6FD;
margin: 0;
line-height: 1.4;
}
.sm-footer-nl-form-wrap {
flex: 0 0 auto;
width: 529px;
max-width: 100%;
}
.sm-footer-nl-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.sm-footer-nl-field {
display: flex;
flex-direction: row;
height: 48px;
}
.sm-footer-nl-input {
flex: 1 1 auto;
border: none;
outline: none;
background: #fff;
border-radius: 999px 0 0 999px;
padding: 0 16px;
font-family: var(--font-brand);
font-size: 1.1875rem;
font-weight: 400;
color: #1E3748;
}
.sm-footer-nl-input::placeholder { color: #797676; }
.sm-footer-nl-btn {
flex: 0 0 auto;
border: none;
outline: none;
background: #D42E5A;
border-radius: 0 999px 999px 0;
padding: 0 28px;
font-family: var(--font-brand);
font-size: 1.25rem;
font-weight: 600;
color: #fff;
cursor: pointer;
white-space: nowrap;
transition: background .2s;
}
.sm-footer-nl-btn:hover { background: #b8254c; }
.sm-footer-nl-check {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.sm-footer-nl-check input[type="checkbox"] {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 4px;
accent-color: #fff;
cursor: pointer;
}
.sm-footer-nl-check span {
font-family: var(--font-brand);
font-size: 1.125rem;
font-weight: 400;
color: #fff;
line-height: 1.56;
}
.sm-footer-nl-check a { color: #fff; text-decoration: underline; }
/* ── Navigation footer ── */
.sm-footer-nav {
background: #F1F6FD;
position: relative;
z-index: 1;
padding: 128px 0 64px;
}
.sm-footer-nav-row { gap: 2rem 0; align-items: flex-start; }
.sm-footer-logo {
display: inline-flex;
align-items: baseline;
text-decoration: none;
font-family: var(--font-h);
font-weight: 800;
font-size: 1.5rem;
letter-spacing: -.5px;
line-height: 1;
margin-bottom: .75rem;
}
.sm-footer-desc {
font-family: var(--font-brand);
font-size: 1.1875rem;
font-weight: 400;
color: #005288;
line-height: 1.5;
margin-bottom: 1.5rem;
}
.sm-footer-col-block { display: flex; flex-direction: column; gap: 4px; }
.sm-footer-col-heading {
font-family: var(--font-brand);
font-size: 1.375rem;
font-weight: 600;
color: #005288;
margin: 0 0 4px;
line-height: 1.27;
}
.sm-footer-col-trait {
width: 24px;
height: 4px;
background: #D42E5A;
border-radius: 2px;
margin-bottom: 8px;
flex-shrink: 0;
}
.sm-footer-links { list-style: none; padding: 0; margin: 0; }
.sm-footer-links li { margin-bottom: .5rem; }
.sm-footer-links a {
font-family: var(--font-brand);
font-size: 1.125rem;
font-weight: 400;
color: #38627D;
text-decoration: none;
line-height: 1.38;
transition: color .2s;
}
.sm-footer-links a:hover { color: #005288; }
/* ── Bas footer ── */
.sm-footer-bottom {
background: #F1F6FD;
border-top: 1px solid #D0DEE8;
padding: 1.25rem 0;
text-align: center;
}
.sm-footer-bottom-text {
font-family: var(--font-brand);
font-size: .875rem;
color: #38627D;
margin: 0;
}
.sm-footer-bottom-text a {
color: #38627D;
text-decoration: none;
transition: color .2s;
}
.sm-footer-bottom-text a:hover { color: #005288; }
.sm-sep { color: #B0C4D2; margin: 0 .65rem; }
/* ── Responsive footer ── */
@media (max-width: 991.98px) {
.sm-footer-newsletter-card {
flex-direction: column;
align-items: flex-start;
gap: 2rem;
padding: 2rem;
}
.sm-footer-nl-form-wrap { width: 100%; }
.sm-footer-newsletter-wrap { margin-bottom: -60px; }
.sm-footer-nav { padding-top: 100px; }
}
@media (max-width: 575.98px) {
.sm-footer-newsletter-card { padding: 1.5rem; border-radius: 16px; }
.sm-footer-nl-field { flex-direction: column; height: auto; gap: .5rem; }
.sm-footer-nl-input { border-radius: 999px; height: 48px; }
.sm-footer-nl-btn { border-radius: 999px; height: 48px; width: 100%; }
.sm-footer-newsletter-wrap { margin-bottom: -40px; }
.sm-footer-nav { padding-top: 80px; }
}
/* ═══════════════════════ HELPERS ═══════════════════════ */
.sm-eyebrow {
display: inline-block;
font-family: var(--font-h);
font-size: .72rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gray-mute);
margin: 0 0 .55rem;
}
.sm-eyebrow--white { color: rgba(255,255,255,.85); }
.sm-text-blue { color: var(--blue); }
.sm-section-h2 {
font-family: var(--font-h);
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
font-weight: 800;
color: var(--orange);
line-height: 1.2;
margin: 0 0 .75rem;
}
.sm-section-divider {
width: 60px;
height: 3px;
background: var(--orange);
border-radius: 3px;
margin-bottom: 2rem;
}
.sm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
border: none;
border-radius: 8px;
font-family: var(--font-h);
font-weight: 600;
font-size: .88rem;
padding: .7rem 1.5rem;
text-decoration: none;
cursor: pointer;
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
white-space: nowrap;
}
.sm-btn-orange {
background: var(--orange);
color: #fff;
box-shadow: 0 4px 12px rgba(242,145,50,.25);
}
.sm-btn-orange:hover { background: var(--orange-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(242,145,50,.35); }
.sm-btn-blue {
background: var(--blue);
color: #fff;
box-shadow: 0 4px 12px rgba(10,77,140,.2);
}
.sm-btn-blue:hover { background: var(--blue-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(10,77,140,.3); }
.sm-btn-block { width: 100%; }
.sm-circle-arrow {
width: 38px; height: 38px;
border-radius: 50%;
border: 2px solid var(--orange);
background: var(--white);
color: var(--orange);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .9rem;
cursor: pointer;
transition: background var(--transition), color var(--transition), transform var(--transition);
flex-shrink: 0;
}
.sm-circle-arrow:hover { background: var(--orange); color: #fff; transform: scale(1.05); }
.sm-circle-arrow--white {
border-color: rgba(255,255,255,.6);
background: transparent;
color: #fff;
}
.sm-circle-arrow--white:hover { background: rgba(255,255,255,.15); border-color: #fff; color: #fff; }
.sm-arrow-link {
display: inline-flex;
align-items: center;
gap: .4rem;
color: var(--blue);
font-family: var(--font-h);
font-weight: 700;
font-size: .85rem;
text-decoration: none;
transition: gap var(--transition), color var(--transition);
}
.sm-arrow-link i { color: var(--blue); font-size: 1.1rem; transition: transform var(--transition); }
.sm-arrow-link:hover { gap: .6rem; color: var(--orange); }
.sm-arrow-link:hover i { color: var(--orange); transform: translateX(2px); }
.sm-arrow-link--sm { font-size: .8rem; }
/* ═══════════════════════ 1. HERO ═══════════════════════ */
.sm-hero {
position: relative;
background: var(--blue-soft);
overflow: hidden;
}
.sm-hero-slider {
position: relative;
height: clamp(360px, 48vw, 480px);
}
.sm-hero-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity .8s ease, visibility .8s ease;
display: flex;
align-items: center;
}
.sm-hero-slide.is-active { opacity: 1; visibility: visible; }
.sm-hero-slide .container { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
.sm-hero-bg {
position: absolute;
inset: 0;
z-index: 1;
}
.sm-hero-bg::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(95deg, rgba(232,241,249,.96) 0%, rgba(232,241,249,.7) 35%, rgba(232,241,249,.15) 65%, transparent 100%);
z-index: 2;
}
.sm-hero-bg--1 {
background:
radial-gradient(ellipse at 80% 50%, #f7c8a8 0%, transparent 60%),
linear-gradient(135deg, #d4e6f4 0%, #b8d4e9 100%);
}
.sm-hero-bg--1::after {
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
width: 65%;
background:
radial-gradient(circle at 30% 60%, rgba(217,151,103,.45) 0%, transparent 35%),
radial-gradient(circle at 70% 50%, rgba(160,110,75,.35) 0%, transparent 40%),
radial-gradient(ellipse at 50% 80%, rgba(80,140,180,.5) 0%, transparent 55%);
z-index: 1;
}
.sm-hero-bg--2 {
background: linear-gradient(135deg, #e8d5c0 0%, #c8a888 100%);
}
.sm-hero-bg--2::after {
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
width: 60%;
background: radial-gradient(ellipse at 60% 50%, rgba(120,80,60,.4) 0%, transparent 60%);
}
.sm-hero-bg--3 {
background: linear-gradient(135deg, #c5d8e8 0%, #8fb5d3 100%);
}
.sm-hero-bg--3::after {
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
width: 60%;
background: radial-gradient(ellipse at 60% 50%, rgba(60,100,140,.4) 0%, transparent 60%);
}
.sm-hero-content {
max-width: 540px;
position: relative;
z-index: 3;
}
.sm-hero-title {
font-family: var(--font-h);
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 800;
color: var(--blue);
line-height: 1.18;
margin: 0 0 1rem;
}
.sm-hero-divider {
width: 60px;
height: 3px;
background: var(--orange);
border-radius: 3px;
margin-bottom: 1.25rem;
}
.sm-hero-sub {
font-size: .92rem;
color: var(--text);
line-height: 1.65;
margin: 0 0 1.5rem;
}
.sm-hero-btn {
display: inline-flex;
align-items: center;
background: var(--blue);
color: #fff;
border-radius: 8px;
font-family: var(--font-h);
font-weight: 600;
font-size: .88rem;
padding: .7rem 1.6rem;
text-decoration: none;
box-shadow: 0 6px 18px rgba(10,77,140,.25);
transition: background var(--transition), transform var(--transition);
}
.sm-hero-btn:hover { background: var(--blue-dark); color: #fff; transform: translateY(-1px); }
.sm-hero-controls {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 1rem;
z-index: 5;
}
.sm-hero-arrow {
width: 32px; height: 32px;
border-radius: 50%;
border: 1.5px solid var(--orange);
background: rgba(255,255,255,.85);
color: var(--orange);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .82rem;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.sm-hero-arrow:hover { background: var(--orange); color: #fff; }
.sm-hero-dots { display: flex; gap: .45rem; align-items: center; }
.sm-hero-dot {
width: 9px; height: 9px;
border-radius: 50%;
border: none;
background: rgba(10,77,140,.25);
padding: 0;
cursor: pointer;
transition: background var(--transition), width var(--transition);
}
.sm-hero-dot.is-active { background: var(--orange); width: 26px; border-radius: 5px; }
/* ═══════════════════════ HERO v2 (Figma — image réelle) ═══════════════════════ */
.sm-hero2 {
position: relative;
min-height: clamp(580px, 65vw, 860px);
background-color: #001e3c;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sm-hero2::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
}
/* Slides individuels */
.sm-hero2-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity .8s ease, visibility .8s ease;
background-color: var(--navy);
background-image: var(--hero-bg, none);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sm-hero2-slide.is-active { opacity: 1; visibility: visible; }
/* Gradient overlay (Figma : 292.55deg, transparent → navy) */
.sm-hero2-overlay {
position: absolute;
inset: 0;
background: linear-gradient(292.55deg, rgba(0,82,136,0) 35%, #005288 100%);
z-index: 1;
}
/* Container centré verticalement */
.sm-hero2-container {
position: relative;
z-index: 2;
flex: 1;
display: flex;
align-items: center;
padding-top: clamp(3rem, 8vw, 7rem);
padding-bottom: clamp(3rem, 8vw, 5rem);
}
/* Bloc de contenu gauche */
.sm-hero2-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
/* Pill "Magazine du mois" */
.sm-hero2-eyebrow {
display: inline-flex;
align-items: center;
gap: .5rem;
background: var(--crimson);
color: #fff;
font-family: var(--font-brand);
font-size: .82rem;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
padding: .5rem 1.1rem;
border-radius: 999px;
letter-spacing: .08em;
}
.sm-hero2-eyebrow i { color: #fff; font-size: .95rem; }
/* H1 */
.sm-hero2-title {
font-family: var(--font-brand);
font-size: clamp(1.9rem, 4vw, 3rem);
font-weight: 700;
line-height: 1.25;
color: #fff;
margin: 0;
}
/* Sous-titre */
.sm-hero2-subtitle {
font-family: var(--font-brand);
font-size: clamp(.95rem, 1.5vw, 1.2rem);
font-weight: 400;
line-height: 1.55;
color: rgba(255,255,255,.92);
margin: 0;
max-width: 580px;
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Rangée de boutons */
.sm-hero2-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
/* Bouton blanc (primary) */
.sm-hero2-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-brand);
font-weight: 600;
font-size: 1rem;
line-height: 1;
padding: .8rem 1.8rem;
border-radius: 999px;
text-decoration: none;
transition: opacity var(--transition), transform var(--transition);
white-space: nowrap;
}
.sm-hero2-btn:hover { transform: translateY(-2px); opacity: .9; }
.sm-hero2-btn--primary {
background: #fff;
color: var(--navy);
}
.sm-hero2-btn--primary:hover { color: var(--navy); }
.sm-hero2-btn--outline {
background: transparent;
color: #fff;
border: 2.5px solid #fff;
}
.sm-hero2-btn--outline:hover { color: #fff; }
/* Dots carrousel */
.sm-hero2-dots {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
gap: .6rem;
padding: .75rem 0 1rem;
background: transparent;
}
.sm-hero2-dot {
width: 18px;
height: 18px;
border-radius: 50%;
border: none;
padding: 0;
cursor: pointer;
background: var(--navy);
transition: background var(--transition), transform var(--transition);
flex-shrink: 0;
}
.sm-hero2-dot.is-active { background: var(--crimson); }
.sm-hero2-dot:hover:not(.is-active) { transform: scale(1.15); }
/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
.sm-hero2-title { font-size: clamp(1.5rem, 6vw, 2rem); }
.sm-hero2-subtitle { font-size: .9rem; }
.sm-hero2-btn { font-size: .88rem; padding: .7rem 1.4rem; }
.sm-hero2-dot { width: 13px; height: 13px; }
}
/* ── Slide Magazine du mois ─────────────────────────────────────── */
.sm-hero2-slide--mag {
--hero-bg: none;
background-color: #001e3c;
background-image:
radial-gradient(ellipse 80% 60% at 10% 20%, rgba(0,82,136,.90) 0%, transparent 65%),
radial-gradient(ellipse 60% 80% at 90% 80%, rgba(0,40,80,.85) 0%, transparent 60%),
radial-gradient(ellipse 55% 55% at 75% 10%, rgba(0,100,180,.50) 0%, transparent 55%),
radial-gradient(ellipse 40% 40% at 30% 85%, rgba(212,46,90,.18) 0%, transparent 55%);
overflow: hidden;
}
.sm-hero2-slide--mag .sm-hero2-overlay { background: transparent; }
/* Blobs */
.sm-mag-blob {
position: absolute;
border-radius: 50%;
filter: blur(70px);
pointer-events: none;
z-index: 0;
opacity: .55;
}
.sm-mag-blob--1 {
width: 520px; height: 520px;
top: -160px; left: -100px;
background: radial-gradient(circle, #0066aa, #003366);
animation: blobDrift1 18s ease-in-out infinite alternate;
}
.sm-mag-blob--2 {
width: 380px; height: 380px;
bottom: -120px; right: 5%;
background: radial-gradient(circle, #004a80, #001a40);
animation: blobDrift2 22s ease-in-out infinite alternate;
}
.sm-mag-blob--3 {
width: 260px; height: 260px;
top: 30%; right: 35%;
background: radial-gradient(circle, rgba(212,46,90,.6), transparent);
animation: blobDrift3 14s ease-in-out infinite alternate;
}
@keyframes blobDrift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(40px,30px) scale(1.08); } }
@keyframes blobDrift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-30px,-40px) scale(1.05); } }
@keyframes blobDrift3 { from { transform: translate(0,0); } to { transform: translate(20px,-20px); } }
/* Grain */
.sm-mag-noise {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 200px 200px;
}
/* Badge eyebrow — commun mag + slides sombres */
.sm-hero2-slide--mag .sm-hero2-eyebrow,
.sm-hero2-slide--dark .sm-hero2-eyebrow {
display: inline-flex;
align-items: center;
gap: .55rem;
background: #D42E5A;
border: none;
color: #fff;
font-size: .8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
padding: .5rem 1.1rem;
border-radius: 999px;
box-shadow: 0 4px 16px rgba(212,46,90,.45);
}
.sm-hero2-slide--mag .sm-hero2-eyebrow i,
.sm-hero2-slide--dark .sm-hero2-eyebrow i { color: #fff; font-size: .95rem; }
/* Titre & sous-titre */
.sm-hero2-slide--mag .sm-hero2-title,
.sm-hero2-slide--dark .sm-hero2-title {
font-size: clamp(1.9rem, 3.5vw, 3.2rem);
line-height: 1.2;
color: #fff;
text-shadow: 0 2px 24px rgba(0,0,0,.3);
}
.sm-hero2-slide--mag .sm-hero2-subtitle,
.sm-hero2-slide--dark .sm-hero2-subtitle {
color: rgba(255,255,255,.82);
font-size: clamp(.95rem, 1.3vw, 1.1rem);
line-height: 1.65;
}
/* Boutons */
.sm-hero2-slide--mag .sm-hero2-btn--primary,
.sm-hero2-slide--dark .sm-hero2-btn--primary {
background: #fff;
color: #003366;
font-weight: 700;
box-shadow: 0 4px 20px rgba(255,255,255,.25);
transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.sm-hero2-slide--mag .sm-hero2-btn--primary:hover,
.sm-hero2-slide--dark .sm-hero2-btn--primary:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 8px 32px rgba(255,255,255,.35);
background: #f0f8ff;
color: #002f5c;
}
.sm-hero2-slide--mag .sm-hero2-btn--outline,
.sm-hero2-slide--dark .sm-hero2-btn--outline {
border-color: rgba(255,255,255,.55);
color: rgba(255,255,255,.9);
backdrop-filter: blur(6px);
transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.sm-hero2-slide--mag .sm-hero2-btn--outline:hover,
.sm-hero2-slide--dark .sm-hero2-btn--outline:hover {
transform: translateY(-3px);
background: rgba(255,255,255,.12);
border-color: #fff;
color: #fff;
}
/* Couverture magazine */
.sm-mag-cover-wrap {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 2;
}
@media (min-width: 992px) {
.sm-mag-cover-wrap {
padding-right: 0px;
transform: scale(1.35);
transform-origin: center center;
}
}
.sm-mag-cover-glow {
position: absolute;
width: 350px; height: 350px;
border-radius: 50%;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle at center, rgba(255,255,255,.15) 0%, rgba(0,115,191,.20) 40%, transparent 70%);
filter: blur(40px);
z-index: 0;
pointer-events: none;
}
.sm-mag-cover-reflection {
width: 200px;
height: 15px;
background: rgba(0,0,0,.4);
border-radius: 50%;
filter: blur(12px);
margin-top: 20px;
z-index: 0;
pointer-events: none;
}
.sm-mag-cover-img {
display: block;
width: 100%;
max-width: 280px;
height: auto;
border-radius: 8px;
position: relative;
z-index: 1;
transform: rotate(5deg);
transform-origin: bottom center;
pointer-events: auto;
box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 24px 50px rgba(0,0,0,.45);
}
@media (max-width: 991.98px) {
.sm-mag-cover-wrap {
padding: 2rem 0;
transform: scale(1.15);
transform-origin: center center;
}
.sm-mag-cover-img { transform: rotate(0deg); }
.sm-hero2-slide--mag .sm-hero2-content,
.sm-hero2-slide--dark .sm-hero2-content { align-items: center; text-align: center; }
.sm-hero2-slide--mag .sm-hero2-actions,
.sm-hero2-slide--dark .sm-hero2-actions { justify-content: center; }
}
/* ═══════════════════════ 2. INTRO ═══════════════════════ */
/* ═══════════════════════ 2. INTRO / SERVICES ═══════════════════════ */
.sm-intro {
background: var(--white);
padding: 5rem 0;
}
.sm-intro-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.sm-intro-title {
font-family: var(--font-brand);
font-size: clamp(1.6rem, 2.8vw, 2.25rem);
font-weight: 700;
color: var(--navy);
line-height: 1.25;
margin: 0;
}
.sm-intro-divider {
width: 48px;
height: 8px;
background: var(--crimson);
border-radius: 4px;
flex-shrink: 0;
}
.sm-intro-sub {
font-family: var(--font-brand);
font-size: clamp(.95rem, 1.3vw, 1.2rem);
font-weight: 400;
color: #1E3748;
line-height: 1.65;
margin: 0;
}
.sm-intro-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
/* Boutons pill */
.sm-intro-btn {
display: inline-flex;
align-items: center;
gap: .6rem;
font-family: var(--font-brand);
font-weight: 600;
font-size: 1rem;
line-height: 1;
padding: .85rem 1.8rem;
border-radius: 999px;
text-decoration: none;
transition: opacity var(--transition), transform var(--transition);
white-space: nowrap;
}
.sm-intro-btn:hover { opacity: .88; transform: translateY(-2px); }
.sm-intro-btn--crimson {
background: var(--crimson);
color: #fff;
padding-right: .6rem;
}
.sm-intro-btn--crimson:hover { color: #fff; }
.sm-intro-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255,255,255,.22);
font-size: 1rem;
flex-shrink: 0;
}
.sm-intro-btn--navy {
background: var(--navy);
color: #fff;
}
.sm-intro-btn--navy:hover { color: #fff; }
/* Photo droite */
.sm-intro-visual {
width: 100%;
aspect-ratio: 3/2;
border-radius: 24px;
overflow: hidden;
background: url('../img/homepage/trouver_un_service.jpg') center/cover no-repeat;
box-shadow: 0 4px 32px rgba(0,82,136,.12);
position: relative;
}
@media (max-width: 991.98px) {
.sm-intro-visual { aspect-ratio: 16/9; }
}
/* ═══════════════════════ 3. SOLUTIONS ═══════════════════════ */
/* ═══════════════════════ 3. SOLUTIONS ═══════════════════════ */
/* ════ SOLUTIONS AU QUOTIDIEN ════════════════════════════════════════════ */
.sm-solutions {
background: linear-gradient(180deg, #fff 0%, #EEF4FC 40%, #EEF4FC 100%);
position: relative;
overflow: hidden;
}
.sm-solutions::before {
content: '';
position: absolute;
top: -120px;
right: -200px;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,82,136,.06) 0%, transparent 70%);
pointer-events: none;
}
.sm-solutions-inner {
display: flex;
flex-direction: column;
align-items: center;
padding: 72px 0 88px;
gap: 48px;
max-width: 1300px;
margin: 0 auto;
width: 100%;
}
/* ── Header section ──────────────────────────── */
.sm-solutions-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
padding: 0 1rem;
}
.sm-solutions-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-brand);
font-size: .78rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--crimson);
background: rgba(212,46,90,.08);
padding: 5px 14px;
border-radius: 999px;
}
.sm-solutions-title {
font-family: var(--font-brand);
font-weight: 700;
font-size: clamp(28px, 4vw, 40px);
line-height: 1.2;
color: var(--navy);
margin: 0;
}
.sm-solutions-lead {
font-family: var(--font-brand);
font-size: 1rem;
color: var(--gray-text);
margin: 0;
}
/* ── Carousel wrapper ────────────────────────── */
.sm-solutions-carousel-wrap {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
padding: 0 1.5rem;
}
/* ── Flèches ─────────────────────────────────── */
.sm-sol-arrow {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid var(--crimson);
background: transparent;
color: var(--crimson);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
cursor: pointer;
transition: background .2s, color .2s, transform .2s, box-shadow .2s;
z-index: 2;
}
.sm-sol-arrow:hover {
background: var(--crimson);
color: #fff;
transform: scale(1.08);
box-shadow: 0 6px 18px rgba(212,46,90,.3);
}
/* ── Piste scrollable ────────────────────────── */
.sm-solutions-track {
display: flex;
gap: 20px;
flex: 1;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x mandatory;
padding: 12px 4px 16px;
align-items: stretch;
}
.sm-solutions-track::-webkit-scrollbar { display: none; }
/* ── Carte — full overlay design ─────────────── */
.sm-sol-card {
flex-shrink: 0;
width: 390px;
height: 300px;
scroll-snap-align: start;
border-radius: 20px;
overflow: hidden;
position: relative;
display: block;
text-decoration: none;
box-shadow: 0 8px 28px rgba(0,40,80,.14);
transition: transform .3s cubic-bezier(.22,.68,0,1.2), box-shadow .3s;
}
.sm-sol-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 50px rgba(0,40,80,.22);
text-decoration: none;
}
/* Image de fond pleine carte */
.sm-sol-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.sm-sol-card:hover .sm-sol-img { transform: scale(1.06); }
/* Placeholder sans image */
.sm-sol-img--ph {
background: linear-gradient(135deg, #1a4a7a 0%, #005288 50%, #0a7fd4 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5rem;
color: rgba(255,255,255,.3);
}
/* Gradient overlay bas de carte */
.sm-sol-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,20,50,0) 0%,
rgba(0,20,50,.15) 40%,
rgba(0,20,50,.75) 75%,
rgba(0,20,50,.92) 100%
);
transition: opacity .3s;
}
.sm-sol-card:hover .sm-sol-overlay {
background: linear-gradient(
to bottom,
rgba(0,20,50,0) 0%,
rgba(0,20,50,.2) 35%,
rgba(0,20,50,.82) 70%,
rgba(0,20,50,.95) 100%
);
}
/* Petite barre accent crimson en haut */
.sm-sol-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--crimson);
z-index: 3;
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
.sm-sol-card:hover::before { transform: scaleX(1); }
/* Contenu texte en bas */
.sm-sol-content {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 24px 20px 20px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 6px;
}
.sm-sol-name {
font-family: var(--font-brand);
font-size: 1.25rem;
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.3;
text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.sm-sol-sub {
font-family: var(--font-brand);
font-size: .88rem;
font-weight: 400;
color: rgba(255,255,255,.82);
margin: 0;
line-height: 1.45;
}
.sm-sol-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 7px 16px;
background: var(--crimson);
color: #fff;
font-family: var(--font-brand);
font-size: .82rem;
font-weight: 700;
letter-spacing: .04em;
border-radius: 999px;
width: fit-content;
transition: background .2s, gap .2s;
}
.sm-sol-card:hover .sm-sol-cta {
background: #b8223f;
gap: 10px;
}
/* ═══════════════════════ 4. SALONS ═══════════════════════ */
/* ═══════════════════════ 5. SALONS ═══════════════════════ */
.sm-salons { background: #fff; padding: 5rem 0; }
.sm-salons-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-bottom: 1.5rem;
}
.sm-salons-title {
font-family: var(--font-brand);
font-size: clamp(1.5rem, 2.8vw, 2.25rem);
font-weight: 700;
color: #005288;
margin: 0;
line-height: 1.25;
}
.sm-salons-divider {
width: 48px;
height: 8px;
background: #D42E5A;
border-radius: 4px;
}
.sm-salons-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 2rem;
align-items: start;
}
.sm-salons-list { display: flex; flex-direction: column; gap: 1.25rem; }
/* ── Carte salon ─────────────────────────────────────────── */
.sm-salon-card {
display: flex;
flex-direction: row;
align-items: center;
gap: 1.5rem;
padding: 1rem;
background: #fff;
border: 1px solid #ECECEC;
box-shadow: 0 4px 24px rgba(0,0,0,.15);
border-radius: 32px 32px 32px 0;
transition: transform var(--transition), box-shadow var(--transition);
}
.sm-salon-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,.2); }
/* Image */
.sm-salon-img {
/* Card home : variante -card (600×800, ratio 3:4 portrait) */
flex-shrink: 0;
width: 213px;
height: 269px;
border-radius: 24px 0 0 0;
overflow: hidden;
background: #1a6fa8;
}
.sm-salon-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.sm-salon-img-placeholder {
width: 100%; height: 100%;
background: linear-gradient(135deg, #1a6fa8 0%, #004f84 100%);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: .75rem;
}
.sm-salon-img-title {
font-family: var(--font-brand);
font-size: 1.1rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: 1px;
}
.sm-salon-img-date {
margin-top: .5rem;
background: #fff;
color: #005288;
font-family: var(--font-brand);
font-size: .78rem;
font-weight: 700;
padding: .2rem .6rem;
border-radius: 4px;
}
/* Corps */
.sm-salon-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.sm-salon-info {
display: flex;
flex-direction: column;
gap: .75rem;
}
/* Badge lieu */
.sm-salon-place {
display: inline-flex;
align-items: center;
gap: .5rem;
background: #0066A6;
color: #fff;
font-family: var(--font-brand);
font-size: 1.125rem;
font-weight: 500;
padding: 6px 8px;
align-self: flex-start;
line-height: 1;
}
/* Titre */
.sm-salon-title {
font-family: var(--font-brand);
font-size: clamp(1.1rem, 1.8vw, 1.5rem);
font-weight: 700;
color: #005288;
margin: 0;
line-height: 1.25;
}
.sm-salon-title a { color: inherit; text-decoration: none; }
.sm-salon-title a:hover { opacity: .8; }
/* Date */
.sm-salon-date {
font-family: var(--font-brand);
font-size: clamp(1rem, 1.5vw, 1.25rem);
font-weight: 500;
color: #C1204C;
margin: 0;
}
/* Description */
.sm-salon-desc {
font-family: var(--font-brand);
font-size: clamp(.9rem, 1.3vw, 1.1875rem);
font-weight: 400;
color: #1E3748;
line-height: 1.75rem;
margin: 0;
}
/* Lien "Voir la fiche" */
.sm-salon-voir {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--font-brand);
font-size: clamp(.95rem, 1.4vw, 1.25rem);
font-weight: 700;
color: #005288;
text-decoration: underline;
text-underline-offset: 3px;
transition: opacity var(--transition);
}
.sm-salon-voir:hover { opacity: .75; color: #005288; }
.sm-salon-voir i { font-size: 2rem; text-decoration: none; }
/* Bouton CTA agenda */
.sm-salons-cta { margin-top: .25rem; }
.sm-salons-cta-btn {
display: inline-flex;
align-items: center;
gap: .625rem;
padding: .75rem .5rem .75rem 1.75rem;
background: #D42E5A;
color: #fff;
font-family: var(--font-brand);
font-size: clamp(.95rem, 1.4vw, 1.25rem);
font-weight: 500;
border-radius: 999px;
text-decoration: none;
transition: opacity var(--transition);
}
.sm-salons-cta-btn:hover { opacity: .88; color: #fff; }
.sm-salons-cta-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,.25);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
/* Aside publicité */
.sm-salons-aside {
display: flex;
flex-direction: column;
gap: 1rem;
position: sticky;
top: 180px;
}
.sm-pub-block {
border: 1px dashed var(--gray-line);
border-radius: var(--radius-sm);
padding: .5rem;
background: var(--white);
}
.sm-pub-label {
display: block;
font-size: .68rem;
font-weight: 600;
color: var(--gray-mute);
text-align: right;
padding-bottom: .35rem;
}
.sm-pub-inner {
background: #d8dde5;
border-radius: 6px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
color: #6b7a8a;
font-family: var(--font-h);
font-weight: 700;
font-size: .95rem;
}
.sm-pub-block--alt .sm-pub-inner-empty {
height: 100px;
border-radius: 6px;
}
/* ═══════════════════════ 5. RÉGIONS ═══════════════════════ */
.sm-regions {
position: relative;
padding: 0;
overflow: hidden;
}
.sm-regions-bg {
position: absolute;
inset: 0;
background:
url('../img/background/acces_par_region_background.webp') center 30% / cover no-repeat;
z-index: 0;
}
.sm-regions-bg::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 82, 136, 0.85);
z-index: 1;
}
.sm-regions .container {
position: relative;
z-index: 2;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.sm-regions-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.sm-regions-title {
font-family: var(--font-brand);
font-size: clamp(1.5rem, 2.8vw, 2.25rem);
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.25;
}
.sm-regions-arrows { display: flex; gap: .75rem; flex-shrink: 0; }
/* Flèches crimson spécifiques à la section régions */
.sm-reg-arrow {
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: var(--crimson);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
cursor: pointer;
flex-shrink: 0;
transition: opacity var(--transition), transform var(--transition);
box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.sm-reg-arrow:hover { opacity: .88; transform: scale(1.06); }
.sm-regions-track-wrap { overflow: hidden; }
.sm-regions-track {
display: flex;
gap: 1.688rem; /* 27px */
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x mandatory;
padding-bottom: .25rem;
align-items: stretch;
}
.sm-regions-track::-webkit-scrollbar { display: none; }
.sm-region-pill {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 3px solid #008ADE;
color: #fff;
border-radius: 10px;
font-family: var(--font-brand);
font-size: 1.125rem;
font-weight: 600;
padding: 10px 20px;
min-height: 66px;
min-width: 140px;
text-decoration: none;
text-align: center;
line-height: 1.3;
scroll-snap-align: start;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.sm-region-pill:hover {
background: rgba(0,138,222,.15);
border-color: #fff;
color: #fff;
}
/* ═══════════════════════ 6. STATS ═══════════════════════ */
.sm-stats {
position: relative;
isolation: isolate;
background: #F1F6FD;
padding: 2.5rem 0;
}
.sm-stats::after {
content: '';
position: absolute;
inset: 0;
background: url('../img/background/header_background.png') center/cover no-repeat;
z-index: 1;
pointer-events: none;
}
.sm-stats .container {
position: relative;
z-index: 2;
}
.sm-stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 10px;
text-align: center;
}
.sm-stat-number {
font-family: var(--font-brand);
font-size: clamp(2.5rem, 4vw, 3rem);
font-weight: 700;
color: #005288;
line-height: 1.25;
margin: 0;
}
.sm-stat-divider {
width: 48px;
height: 8px;
background: #D42E5A;
border-radius: 4px;
flex-shrink: 0;
}
.sm-stat-label {
font-family: var(--font-brand);
font-size: clamp(1rem, 1.8vw, 1.625rem);
font-weight: 500;
color: #005288;
line-height: 2rem;
margin: 0;
}
/* ═══════════════════════ 7. ACTUALITÉS ═══════════════════════ */
.sm-actu { background: #fff; padding: 5rem 0; }
/* Header section */
.sm-actu-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-bottom: 2rem;
}
.sm-actu-title {
font-family: var(--font-brand);
font-size: clamp(1.5rem, 2.8vw, 2.25rem);
font-weight: 700;
color: #005288;
margin: 0;
line-height: 1.25;
}
.sm-actu-divider {
width: 48px;
height: 8px;
background: #D42E5A;
border-radius: 4px;
}
/* Catégorie (badge crimson) */
.sm-actu-cat {
display: inline-block;
font-family: var(--font-brand);
font-size: clamp(.85rem, 1.2vw, 1.25rem);
font-weight: 500;
color: #D42E5A;
margin: 0;
}
/* Date */
.sm-actu-date {
font-family: var(--font-brand);
font-size: clamp(.85rem, 1.2vw, 1.1875rem);
font-weight: 400;
color: var(--gray-text);
white-space: nowrap;
}
/* Placeholder image générique */
.sm-actu-img-ph {
width: 100%; height: 100%;
min-height: 200px;
}
.sm-actu-img-ph--couple {
background:
radial-gradient(ellipse at 35% 55%, rgba(180,120,80,.7) 0%, transparent 40%),
radial-gradient(ellipse at 65% 50%, rgba(140,90,60,.6) 0%, transparent 40%),
radial-gradient(ellipse at 50% 80%, rgba(80,140,180,.4) 0%, transparent 50%),
linear-gradient(135deg, #cdb89e 0%, #a89070 100%);
}
/* ── Article featured (horizontal) ─────────────────────── */
.sm-actu-feat {
display: grid;
grid-template-columns: 38% 1fr;
gap: 0;
background: #fff;
border: 1px solid #ECECEC;
box-shadow: 0 2px 16px rgba(0,0,0,.10);
border-radius: 20px;
overflow: hidden;
margin-bottom: 2rem;
transition: transform var(--transition), box-shadow var(--transition);
}
.sm-actu-feat:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.15); }
.sm-actu-feat-img {
overflow: hidden;
border-radius: 14px;
min-height: 200px;
max-height: 220px;
background: #d4c8b8;
margin: 12px 0 12px 12px;
}
.sm-actu-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-actu-feat-body {
padding: 1rem 0;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: .75rem;
margin: 16px 1.5rem 16px 1.5rem;
}
.sm-actu-feat-info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.sm-actu-feat-title {
font-family: var(--font-brand);
font-size: clamp(.95rem, 1.5vw, 1.2rem);
font-weight: 700;
color: #005288;
line-height: 1.25;
margin: 0;
}
.sm-actu-feat-title a { color: inherit; text-decoration: none; }
.sm-actu-feat-title a:hover { opacity: .8; }
.sm-actu-feat-exc {
font-family: var(--font-brand);
font-size: clamp(.8rem, 1.1vw, .95rem);
font-weight: 400;
color: #1E3748;
line-height: 1.75rem;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sm-actu-feat-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
/* ── Lien "Lire la suite / Lire plus" ──────────────────── */
.sm-actu-lire {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--font-brand);
font-size: clamp(.875rem, 1.3vw, 1.25rem);
font-weight: 700;
color: #005288;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
transition: opacity var(--transition);
}
.sm-actu-lire:hover { opacity: .75; color: #005288; }
.sm-actu-lire i { font-size: 2rem; text-decoration: none; }
/* ── Grille 3 cards égales ──────────────────────────────── */
.sm-actu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
align-items: stretch;
}
.sm-actu-card {
background: #fff;
border: 1px solid #ECECEC;
box-shadow: 0 4px 24px rgba(0,0,0,.15);
border-radius: 24px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--transition), box-shadow var(--transition);
}
.sm-actu-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.sm-actu-card-img {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 16px;
background: #d4c8b8;
margin: 12px 12px 0;
}
.sm-actu-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-actu-card-body {
padding: 0 1.5rem 1rem;
display: flex;
flex-direction: column;
flex: 1;
gap: 1rem;
margin-top: 1.25rem;
}
.sm-actu-card-info {
display: flex;
flex-direction: column;
gap: 1rem;
flex: 1;
}
.sm-actu-card-title {
font-family: var(--font-brand);
font-size: clamp(.95rem, 1.5vw, 1.375rem);
font-weight: 700;
color: #005288;
line-height: 1.75rem;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sm-actu-card-title a { color: inherit; text-decoration: none; }
.sm-actu-card-title a:hover { opacity: .8; }
.sm-actu-card-exc {
font-family: var(--font-brand);
font-size: clamp(.8rem, 1.1vw, 1.1875rem);
font-weight: 400;
color: #1E3748;
line-height: 1.75rem;
margin: 0;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sm-actu-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
flex-wrap: wrap;
}
/* ═══════════════════════ 7. NEWSLETTER ═══════════════════════ */
.sm-newsletter { background: var(--white); padding: 0 0 4rem; }
.sm-newsletter-card {
position: relative;
background: #005288;
border-radius: 24px;
padding: 48px;
overflow: hidden;
box-shadow: 0px 4px 24px rgba(0, 82, 136, 0.25);
}
/* Rectangle 147 — image de fond */
.sm-newsletter-card::before {
content: '';
position: absolute;
inset: 0;
background: url('../img/background/newsletter_background.png') center/cover no-repeat;
z-index: 0;
pointer-events: none;
}
/* Rectangle 148 — dégradé du navy vers transparent */
.sm-newsletter-pattern {
position: absolute;
inset: 0;
background: linear-gradient(180deg, #005288 0%, rgba(0, 82, 136, 0) 100%);
z-index: 1;
pointer-events: none;
}
.sm-newsletter-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 2.5rem;
align-items: center;
}
.sm-newsletter-title {
font-family: var(--font-h);
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
font-weight: 800;
color: #fff;
line-height: 1.2;
margin: 0 0 .6rem;
}
.sm-newsletter-sub {
font-size: .85rem;
color: rgba(255,255,255,.75);
line-height: 1.6;
margin: 0;
}
.sm-newsletter-form { display: flex; flex-direction: column; gap: .85rem; }
.sm-newsletter-input-row {
display: flex;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.sm-newsletter-input {
flex: 1;
border: none;
padding: .85rem 1.1rem;
font-size: .88rem;
color: var(--text);
outline: none;
background: transparent;
}
.sm-newsletter-input::placeholder { color: var(--gray-mute); }
.sm-newsletter-submit {
background: var(--orange);
color: #fff;
border: none;
padding: .85rem 1.6rem;
font-family: var(--font-h);
font-weight: 700;
font-size: .85rem;
cursor: pointer;
transition: background var(--transition);
white-space: nowrap;
}
.sm-newsletter-submit:hover:not(:disabled) { background: var(--orange-dark); }
.sm-newsletter-submit:disabled { opacity: .8; cursor: default; }
.sm-newsletter-check {
display: flex;
align-items: flex-start;
gap: .55rem;
font-size: .72rem;
color: rgba(255,255,255,.75);
line-height: 1.55;
cursor: pointer;
}
.sm-newsletter-check input {
margin-top: .15rem;
accent-color: var(--orange);
flex-shrink: 0;
}
.sm-newsletter-check a {
color: #fff;
text-decoration: underline;
}
/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width: 991.98px) {
.sm-newsletter-grid { grid-template-columns: 1fr; gap: 2rem; }
.sm-sol-card { width: 320px; height: 270px; }
.sm-sol-arrow { width: 38px; height: 38px; font-size: .9rem; }
.sm-solutions-inner { padding: 52px 0 72px; gap: 36px; }
.sm-salons-grid { grid-template-columns: 1fr; }
.sm-salons-aside { display: none; }
.sm-salon-img { width: 160px; height: 200px; }
.sm-actu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
.sm-hero-slider { height: 460px; }
.sm-hero-content { max-width: 100%; }
.sm-sol-card { width: 260px; height: 240px; }
.sm-sol-name { font-size: 1.1rem; }
.sm-solutions-inner { padding: 40px 0 60px; gap: 28px; }
.sm-solutions-carousel-wrap { gap: 10px; }
.sm-salon-card { flex-direction: column; border-radius: 24px 24px 24px 0; }
.sm-salon-img { width: 100%; height: 180px; border-radius: 16px 16px 0 0; }
.sm-actu-grid { grid-template-columns: 1fr; }
.sm-actu-card-img { aspect-ratio: 4 / 3; }
.sm-newsletter-card { padding: 1.75rem; }
.sm-newsletter-input-row { flex-direction: column; }
.sm-newsletter-submit { width: 100%; }
}
/* ═══════════════════════ LEAD FORM CARD ═══════════════════════ */
.form-card {
background: linear-gradient(145deg, #1e3a5f 0%, #0f2540 100%);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(15, 37, 64, .28), 0 2px 8px rgba(0,0,0,.12);
border: 1px solid rgba(255,255,255,.08);
}
.form-card-header {
background: linear-gradient(90deg, var(--orange, #e07b39) 0%, #d96a2a 100%);
color: #fff;
font-size: 1rem;
font-weight: 700;
padding: 1rem 1.4rem;
display: flex;
align-items: center;
gap: .55rem;
letter-spacing: .01em;
}
.form-card-header i { font-size: 1.1rem; opacity: .9; }
.form-card-body {
padding: 1.4rem 1.4rem 1.6rem;
color: #e2eaf4;
}
.form-card-body .form-label {
color: #b8cde8;
font-size: .78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: .3rem;
}
.form-card-body .form-control,
.form-card-body .form-select {
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.15);
color: #fff;
border-radius: 8px;
font-size: .88rem;
transition: border-color .2s, background .2s;
}
.form-card-body .form-control::placeholder { color: rgba(255,255,255,.35); }
.form-card-body .form-control:focus,
.form-card-body .form-select:focus {
background: rgba(255,255,255,.12);
border-color: var(--orange, #e07b39);
color: #fff;
box-shadow: 0 0 0 3px rgba(224,123,57,.25);
outline: none;
}
.form-card-body .form-select option { background: #1e3a5f; color: #fff; }
.form-card-body p { color: #a8c0dc; }
.form-card-body .alert-success {
background: rgba(16,185,129,.15);
border: 1px solid rgba(16,185,129,.35) !important;
color: #6ee7b7;
border-radius: 10px;
}
.form-card-body .alert-danger {
background: rgba(239,68,68,.15);
border: 1px solid rgba(239,68,68,.3) !important;
color: #fca5a5;
border-radius: 10px;
}
/* Pulsating accent dot on the header */
.form-card-header::before {
content: '';
display: inline-block;
width: 8px; height: 8px;
background: #fff;
border-radius: 50%;
opacity: .7;
animation: formcard-pulse 2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes formcard-pulse {
0%, 100% { opacity: .7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.3); }
}
/* ═══════════════════════ LEGACY (compat pages internes) ═══════════════════════ */
.btn-coral {
display: inline-flex;
align-items: center;
gap: .4rem;
background: var(--orange);
color: #fff;
border: 2px solid var(--orange);
border-radius: 8px;
font-weight: 600;
font-size: .9rem;
padding: .6rem 1.4rem;
cursor: pointer;
text-decoration: none;
transition: background var(--transition), transform var(--transition);
}
.btn-coral:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; transform: translateY(-1px); }
.btn-navy {
display: inline-flex;
align-items: center;
gap: .4rem;
background: transparent;
color: var(--blue);
border: 2px solid var(--blue);
border-radius: 8px;
font-weight: 600;
font-size: .9rem;
padding: .6rem 1.4rem;
cursor: pointer;
text-decoration: none;
transition: background var(--transition), color var(--transition);
}
.btn-navy:hover { background: var(--blue); color: #fff; }
.btn-danger { background: var(--orange) !important; border-color: var(--orange) !important; border-radius: 8px !important; font-weight: 600 !important; }
.btn-danger:hover { background: var(--orange-dark) !important; border-color: var(--orange-dark) !important; }
.btn-outline-danger { color: var(--orange) !important; border-color: var(--orange) !important; border-radius: 8px !important; font-weight: 600 !important; }
.btn-outline-danger:hover { background: var(--orange) !important; color: #fff !important; }
.page-hero { background: var(--blue); padding: 3rem 0 2.5rem; }
.page-hero-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; color: #fff; margin-bottom: .4rem; }
.page-hero-sub { color: rgba(255,255,255,.7); font-size: .95rem; margin: 0; }
.page-breadcrumb { background: var(--gray-bg); border-bottom: 1px solid var(--gray-line); padding: .65rem 0; }
.breadcrumb { margin: 0; font-size: .82rem; }
.breadcrumb-item a { color: var(--blue); text-decoration: none; font-weight: 500; }
.breadcrumb-item a:hover { color: var(--orange); }
.breadcrumb-item.active { color: var(--gray-mute); }
.section-light { background: var(--gray-bg); }
.section-white { background: var(--white); }
.text-coral { color: var(--orange) !important; }
.text-navy { color: var(--blue) !important; }
.bg-navy { background: var(--blue) !important; }
.bg-coral { background: var(--orange) !important; }
.bg-gray { background: var(--gray-bg) !important; }
.form-control, .form-select {
border-color: var(--gray-line);
border-radius: var(--radius-sm) !important;
font-size: .9rem;
padding: .6rem .9rem;
color: var(--text);
}
.form-control:focus, .form-select:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(10,77,140,.12);
outline: none;
}
.form-label { font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: .35rem; }
/* ═══════════════════════════════════════════════════
PAGES INTERNES — hero, filtres, cartes, pagination…
════════════════════════════════════════════════════ */
/* ── Page Hero (pages internes) ── */
.sm-page-hero {
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
padding: 3rem 0 2.75rem;
position: relative;
overflow: hidden;
}
.sm-page-hero::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(255,255,255,.04) 0%, transparent 60%);
pointer-events: none;
}
.sm-page-hero .container { position: relative; z-index: 1; }
.sm-page-hero-title {
font-family: var(--font-h);
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 800;
color: #fff;
margin: 0 0 .4rem;
line-height: 1.2;
}
.sm-page-hero-sub {
color: rgba(255,255,255,.7);
font-size: .95rem;
margin: 0;
}
/* ══════════════════════════════════════════════════
ANNUAIRE — Header (breadcrumb + intro)
════════════════════════════════════════════════════ */
/* Wrapper header — fond #F1F6FD + pattern décoratif en overlay */
.sm-ann-header {
position: relative;
isolation: isolate;
}
.sm-ann-header::after {
content: '';
position: absolute;
inset: 0;
background: url('../img/background/header_background.png') center/cover no-repeat;
z-index: 2;
pointer-events: none;
}
/* ── Breadcrumb annuaire ── */
.sm-ann-breadcrumb {
background: #F1F6FD;
padding: 16px 0;
position: relative;
z-index: 1;
}
.sm-ann-bc-list {
display: flex;
flex-direction: row;
align-items: center;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
}
.sm-ann-bc-item {
font-family: var(--font-brand);
font-size: 1.125rem;
font-weight: 400;
color: #005288;
line-height: 1.38;
}
.sm-ann-bc-link {
font-family: var(--font-brand);
font-size: 1.125rem;
font-weight: 400;
color: #005288;
text-decoration: none;
transition: opacity .2s;
}
.sm-ann-bc-link:hover { opacity: .75; }
.sm-ann-bc-current {
font-weight: 600;
}
.sm-ann-bc-sep {
font-size: 1rem;
color: #005288;
padding: 0 6px;
display: flex;
align-items: center;
}
/* ── Intro annuaire ── */
.sm-ann-intro {
background: #F1F6FD;
padding: 60px 0 80px;
position: relative;
z-index: 1;
}
.sm-ann-intro-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
text-align: center;
}
.sm-ann-intro-title {
font-family: var(--font-brand);
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 700;
color: #005288;
margin: 0;
line-height: 1.25;
}
.sm-ann-intro-sub {
font-family: var(--font-brand);
font-size: clamp(1rem, 1.5vw, 1.25rem);
font-weight: 400;
color: #005288;
line-height: 1.75;
margin: 0;
}
@media (max-width: 767.98px) {
.sm-ann-intro { padding: 2.5rem 0 3rem; }
.sm-ann-intro-inner { gap: 1.25rem; }
}
/* ══════════════════════════════════════════════════
ANNUAIRE — Section résultats + sidebar
════════════════════════════════════════════════════ */
.sm-ann-section { background: #fff; padding: 80px 0; }
.sm-ann-section > .container-xl {
max-width: 1260px;
}
.sm-ann-section .row { --bs-gutter-x: clamp(1.5rem, 4vw, 4rem); }
.sm-ann-sidebar { position: sticky; top: 180px; align-self: flex-start; }
.sm-results-block { display: flex; flex-direction: column; gap: 32px; }
/* ── Sidebar filtres ── */
.sm-sdbr-filter {
display: flex;
flex-direction: column;
gap: 24px;
}
.sm-sdbr-filter form {
display: flex;
flex-direction: column;
gap: 20px;
}
.sm-sdbr-header {
display: flex;
flex-direction: column;
gap: 6px;
}
.sm-sdbr-title {
font-family: var(--font-brand);
font-size: 1rem;
font-weight: 600;
color: #005288;
margin: 0;
line-height: 1.25;
}
.sm-sdbr-bar {
height: 4px;
width: 100%; /* align-self: stretch → pleine largeur */
background: #D42E5A;
border-radius: 0;
flex-shrink: 0;
}
.sm-sdbr-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.sm-sdbr-sub {
font-family: var(--font-brand);
font-size: 0.78rem;
font-weight: 600;
color: #005288;
margin: 0;
line-height: 1.25;
text-transform: uppercase;
letter-spacing: .04em;
}
.sm-sdbr-checks {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 4px;
}
.sm-sdbr-check {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 10px;
cursor: pointer;
margin: 0;
}
.sm-sdbr-check input[type="radio"],
.sm-sdbr-check input[type="checkbox"] {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 4px; /* padding 4px 0 0 du Figma */
border: 1px solid #1E3748;
border-radius: 2px;
background: #fff;
accent-color: #005288;
cursor: pointer;
}
.sm-sdbr-check span {
font-family: var(--font-brand);
font-size: 0.875rem;
font-weight: 400;
color: #1E3748;
line-height: 1.4;
}
.sm-sdbr-input {
width: 100%;
height: 42px;
border: 1px solid #1E3748;
border-radius: 8px;
padding: 0 12px;
font-family: var(--font-brand);
font-size: 0.875rem;
color: #1E3748;
background: #fff;
outline: none;
transition: border-color .2s;
}
.sm-sdbr-input::placeholder { color: #797676; }
.sm-sdbr-input:focus { border-color: #005288; }
.sm-sdbr-select { appearance: auto; cursor: pointer; }
.sm-sdbr-dist {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border: 1px solid #1E3748;
border-radius: 8px;
overflow: hidden;
height: 48px;
padding: 0 12px;
gap: 10px;
}
.sm-sdbr-dist-num {
flex: 1 1 auto;
border: none !important;
border-radius: 0;
height: 100%;
padding: 0;
font-family: var(--font-brand);
font-size: 0.875rem;
color: #797676;
background: transparent;
outline: none;
}
.sm-sdbr-dist-unit {
flex: 0 0 auto;
font-family: var(--font-brand);
font-size: 0.875rem;
font-weight: 400;
color: #1E3748;
}
.sm-sdbr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 24px;
height: 42px;
border: none;
border-radius: 999px;
background: #D42E5A;
font-family: var(--font-brand);
font-size: 0.875rem;
font-weight: 600;
color: #fff;
cursor: pointer;
transition: background .2s;
white-space: nowrap;
align-self: flex-start;
}
.sm-sdbr-btn:hover { background: #b8254c; }
/* ── Carte formulaire contact (navy) ── */
.sm-contact-card {
background: #005288;
border-radius: 10px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
.sm-contact-card-title {
font-family: var(--font-brand);
font-size: 1rem;
font-weight: 600;
color: #fff;
margin: 0;
line-height: 1.25;
}
.sm-contact-form { display: flex; flex-direction: column; gap: 24px; }
.sm-contact-group { display: flex; flex-direction: column; gap: 4px; }
.sm-contact-label {
font-family: var(--font-brand);
font-size: 0.72rem;
font-weight: 700;
color: #fff;
text-transform: uppercase;
letter-spacing: .05em;
margin: 0;
line-height: 1.4;
}
.sm-contact-field {
display: block;
width: 100%;
height: 42px;
border: none;
border-radius: 8px;
padding: 0 12px;
font-family: var(--font-brand);
font-size: 0.875rem;
color: #1E3748;
background: #fff;
outline: none;
appearance: auto;
}
.sm-contact-field::placeholder { color: #797676; }
.sm-contact-field:focus { box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
.sm-contact-rgpd {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 10px;
cursor: pointer;
margin: 0;
}
.sm-contact-rgpd input[type="checkbox"] {
flex-shrink: 0;
width: 16px;
height: 16px;
background: #fff;
border-radius: 2px;
margin-top: 4px;
cursor: pointer;
}
.sm-contact-rgpd span {
font-family: var(--font-brand);
font-size: 0.78rem;
font-weight: 400;
color: #fff;
line-height: 1.4;
}
.sm-contact-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 10px 24px;
height: 44px;
border: none;
border-radius: 999px;
background: #D42E5A;
font-family: var(--font-brand);
font-size: 0.9rem;
font-weight: 600;
color: #fff;
cursor: pointer;
transition: background .2s;
}
.sm-contact-btn:hover { background: #b8254c; }
.sm-contact-feedback {
font-family: var(--font-brand);
font-size: 1rem;
padding: .75rem 1rem;
border-radius: 8px;
display: flex;
align-items: center;
gap: .5rem;
}
.sm-contact-feedback--ok { background: rgba(255,255,255,.15); color: #fff; }
.sm-contact-feedback--err { background: rgba(212,46,90,.35); color: #fff; }
/* ── Titres de sections résultats ── */
.sm-results-section-title {
font-family: var(--font-brand);
font-size: clamp(1.1rem, 1.6vw, 1.5rem);
font-weight: 700;
color: #005288;
margin: 0;
line-height: 1.25;
padding-bottom: 6px;
}
.sm-results-section-sub {
font-family: var(--font-brand);
font-size: clamp(1rem, 1.3vw, 1.25rem);
font-weight: 700;
color: #005288;
margin: 0;
line-height: 1.25;
}
/* ── Carte partenaire ── */
.sm-pcard {
background: #fff;
border: 1px solid #ECECEC;
box-shadow: 0 2px 16px rgba(0,0,0,.15);
border-radius: 32px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
.sm-pcard--premium {
border: 2px solid #D42E5A;
box-shadow: 0 2px 16px rgba(212,46,90,.15);
}
.sm-pcard-top {
display: flex;
flex-direction: row;
align-items: center;
gap: 32px;
}
.sm-pcard-logo {
flex-shrink: 0;
width: 180px;
height: 130px;
border-radius: 12px;
overflow: hidden;
background: #fff;
border: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.sm-pcard-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.sm-pcard-logo--std { width: 110px; height: 80px; border-radius: 8px; }
.sm-pcard-meta {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.sm-pcard-name {
font-family: var(--font-brand);
font-size: 1.05rem;
font-weight: 700;
color: #005288;
margin: 0;
line-height: 1.25;
}
.sm-pcard-location {
font-family: var(--font-brand);
font-size: 0.875rem;
font-weight: 500;
color: #005288;
margin: 0;
display: flex;
align-items: center;
gap: .4rem;
}
.sm-pcard-rating {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
}
.sm-star-on { color: #D42E5A; font-size: 1rem; }
.sm-star-off { color: #ccc; font-size: 1rem; }
.sm-pcard-score {
font-family: var(--font-brand);
font-size: 0.9rem;
font-weight: 500;
color: #D42E5A;
margin-left: 4px;
}
.sm-pcard-avis {
font-family: var(--font-brand);
font-size: 0.8rem;
font-weight: 400;
color: #797676;
}
.sm-pcard-desc {
font-family: var(--font-brand);
font-size: 0.875rem;
font-weight: 400;
color: #1E3748;
line-height: 1.65;
margin: 0;
}
.sm-pcard-actions {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.sm-pcard-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 10px 22px;
border-radius: 999px;
font-family: var(--font-brand);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: background .2s, color .2s, border-color .2s;
border: none;
}
.sm-pcard-btn--call {
background: #fff;
border: 3px solid #005288 !important;
color: #005288;
}
.sm-pcard-btn--call:hover:not(:disabled) { background: #005288; color: #fff; }
.sm-pcard-btn--call:disabled { opacity: .45; cursor: default; }
.sm-pcard-btn--view {
background: #D42E5A;
color: #fff;
padding: 12px 8px 12px 28px;
}
.sm-pcard-btn--view:hover { background: #b8254c; color: #fff; }
.sm-pcard-arrow {
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(255,255,255,.25);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
flex-shrink: 0;
}
.sm-pcard-btn--locked {
background: #837E7E;
color: #fff;
cursor: default;
}
/* ── Bannière pub inline ── */
.sm-pw-inline {
border-radius: 20px;
overflow: hidden;
max-height: 180px;
}
.sm-pw-inline .sm-pw-img,
.sm-pw-inline img {
width: 100%;
max-height: 180px;
object-fit: cover;
display: block;
}
/* ── Responsive annuaire section ── */
@media (max-width: 991.98px) {
.sm-ann-section { padding: 3rem 0; }
.sm-ann-sidebar { position: static; }
.sm-pcard-top { flex-direction: column; align-items: flex-start; gap: 1rem; }
.sm-pcard-logo { width: 130px; height: 90px; padding: 8px; }
.sm-pcard-actions { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
.sm-pcard { border-radius: 20px; padding: 16px; }
.sm-pcard-btn { font-size: 1rem; padding: 10px 16px; height: 44px; }
.sm-pcard-btn--view { padding: 10px 10px 10px 16px; }
.sm-pcard-arrow { width: 32px; height: 32px; }
.sm-contact-card { padding: 1.25rem; }
}
/* ── Annuaire CTA block (every N results) ── */
.sm-ann-cta-block {
border-radius: 20px;
background: linear-gradient(135deg, #005288 0%, #003d68 100%);
overflow: hidden;
position: relative;
}
.sm-ann-cta-block::before {
content: '';
position: absolute;
inset: 0;
background: url('/img/background/header_background.png') center/cover no-repeat;
opacity: .08;
pointer-events: none;
}
.sm-ann-cta-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 32px 36px;
flex-wrap: wrap;
}
.sm-ann-cta-icon {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(255,255,255,.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #fff;
}
.sm-ann-cta-text {
display: flex;
flex-direction: column;
gap: 6px;
font-family: 'Lexend Deca', sans-serif;
flex: 1;
}
.sm-ann-cta-text strong {
font-size: 1.2rem;
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.sm-ann-cta-text span {
font-size: .95rem;
color: rgba(255,255,255,.8);
line-height: 1.5;
}
.sm-ann-cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #D42E5A;
color: #fff;
font-family: 'Lexend Deca', sans-serif;
font-weight: 600;
font-size: 1rem;
border-radius: 999px;
padding: 14px 28px;
text-decoration: none;
white-space: nowrap;
transition: opacity .2s, transform .15s;
flex-shrink: 0;
}
.sm-ann-cta-btn:hover { opacity: .9; color: #fff; transform: translateY(-1px); }
@media (max-width: 575.98px) {
.sm-ann-cta-inner { padding: 24px 20px; }
.sm-ann-cta-btn { width: 100%; justify-content: center; }
}
/* ── Fil d'Ariane ── */
.sm-breadcrumb {
background: var(--gray-bg);
border-bottom: 1px solid var(--gray-line);
padding: .75rem 0;
}
.sm-bc-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem;
list-style: none;
margin: 0;
padding: 0;
font-size: .82rem;
}
.sm-bc-list li { display: flex; align-items: center; gap: .35rem; }
.sm-bc-list a { color: var(--blue); text-decoration: none; font-weight: 500; }
.sm-bc-list a:hover { color: var(--orange); }
.sm-bc-list i { font-size: .65rem; color: var(--gray-mute); }
.sm-bc-list [aria-current] { color: var(--gray-mute); }
/* ── Barre de filtres (bande horizontale) ── */
.sm-filter-bar {
background: var(--white);
border: 1px solid var(--gray-line);
border-radius: var(--radius);
padding: 1.25rem;
box-shadow: var(--shadow-sm);
}
.sm-filter-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 1rem;
align-items: end;
}
.sm-filter-field { display: flex; flex-direction: column; }
.sm-filter-label {
font-family: var(--font-h);
font-size: .75rem;
font-weight: 700;
color: var(--text);
margin-bottom: .35rem;
display: flex;
align-items: center;
gap: .3rem;
}
.sm-filter-input {
border: 1.5px solid var(--gray-line);
border-radius: var(--radius-sm);
padding: .6rem .85rem;
font-size: .88rem;
color: var(--text);
background: var(--white);
width: 100%;
transition: border-color var(--transition), box-shadow var(--transition);
outline: none;
font-family: var(--font);
}
.sm-filter-input:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(10,77,140,.1);
}
.sm-filter-select {
border: 1.5px solid var(--gray-line);
border-radius: var(--radius-sm);
padding: .6rem .85rem;
font-size: .88rem;
color: var(--text);
background: var(--white);
width: 100%;
transition: border-color var(--transition);
outline: none;
cursor: pointer;
font-family: var(--font);
}
.sm-filter-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10,77,140,.1); }
.sm-filter-actions { display: flex; flex-direction: column; gap: .5rem; }
.sm-btn-reset {
text-align: center;
font-size: .8rem;
color: var(--gray-mute);
text-decoration: none;
transition: color var(--transition);
cursor: pointer;
}
.sm-btn-reset:hover { color: var(--blue); }
/* ── Filtre sidebar (articles/actualités) ── */
.sm-filter-sidebar {
background: var(--white);
border: 1px solid var(--gray-line);
border-radius: var(--radius);
padding: 1.25rem;
box-shadow: var(--shadow-sm);
position: sticky;
top: 180px;
}
.sm-filter-sidebar-title {
font-family: var(--font-h);
font-size: .92rem;
font-weight: 800;
color: var(--blue);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: .4rem;
}
.sm-textarea {
border: 1.5px solid var(--gray-line);
border-radius: var(--radius-sm);
padding: .65rem .85rem;
font-size: .88rem;
color: var(--text);
background: var(--white);
width: 100%;
font-family: var(--font);
resize: vertical;
transition: border-color var(--transition), box-shadow var(--transition);
outline: none;
}
.sm-textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10,77,140,.1); }
.sm-field-error { color: #dc2626; font-size: .78rem; margin-top: .25rem; display: block; }
.sm-field-hint { color: var(--gray-mute); font-size: .78rem; margin-top: .25rem; display: block; }
/* ── Compteur résultats ── */
.sm-results-count {
font-size: .88rem;
color: var(--gray-mute);
margin-bottom: 1.25rem;
}
.sm-results-count strong { color: var(--text); font-weight: 700; }
/* ── Liste partenaires ── */
.sm-partner-list { display: flex; flex-direction: column; gap: 1rem; }
.sm-partner-card {
display: grid;
grid-template-columns: 100px 1fr auto;
gap: 1.25rem;
align-items: center;
background: var(--white);
border: 1px solid var(--gray-line);
border-radius: var(--radius);
padding: 1.25rem;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition), transform var(--transition);
}
.sm-partner-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.sm-partner-card--premium { border-left: 4px solid var(--orange); }
.sm-partner-logo {
width: 100px; height: 80px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--gray-line);
border-radius: var(--radius-sm);
background: var(--gray-bg);
overflow: hidden;
flex-shrink: 0;
}
.sm-partner-logo img { max-height: 60px; max-width: 80px; object-fit: contain; }
.sm-partner-logo-ph { font-size: 2rem; color: var(--gray-mute); }
.sm-partner-info-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .25rem; }
.sm-partner-name { font-family: var(--font-h); font-size: 1.05rem; font-weight: 800; color: var(--blue); margin: 0; }
.sm-partner-location { font-size: .8rem; color: var(--gray-mute); margin: 0 0 .35rem; display: flex; align-items: center; gap: .3rem; }
.sm-partner-location i { color: var(--orange); }
.sm-partner-desc { font-size: .85rem; color: var(--text-soft); margin: 0; line-height: 1.55; }
.sm-partner-cta { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; min-width: 130px; }
.sm-partner-locked {
display: inline-flex; align-items: center; gap: .3rem;
font-size: .78rem; color: var(--gray-mute);
background: var(--gray-bg); border-radius: 6px; padding: .4rem .75rem;
text-align: center; justify-content: center;
}
.sm-premium-badge {
display: inline-flex; align-items: center; gap: .3rem;
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #fff; border-radius: 999px;
font-family: var(--font-h);
font-size: .7rem; font-weight: 700; padding: .2rem .65rem;
}
/* ── Carte détail partenaire / article ── */
.sm-detail-card {
background: var(--white);
border: 1px solid var(--gray-line);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.sm-detail-card-header {
background: var(--blue);
color: #fff;
padding: .9rem 1.5rem;
font-family: var(--font-h);
font-size: .9rem;
font-weight: 700;
display: flex;
align-items: center;
gap: .5rem;
}
.sm-detail-logo-wrap {
background: var(--gray-bg);
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--gray-line);
}
.sm-detail-logo-wrap img { max-height: 100px; max-width: 200px; object-fit: contain; }
.sm-detail-body { padding: 2rem; }
.sm-detail-title {
font-family: var(--font-h);
font-size: 1.6rem;
font-weight: 800;
color: var(--blue);
margin-bottom: .4rem;
}
.sm-detail-location {
display: flex; align-items: center; gap: .4rem;
font-size: .88rem; color: var(--gray-mute); margin-bottom: 1.5rem;
}
.sm-detail-location i { color: var(--orange); }
.sm-detail-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-line); }
.sm-detail-section-title {
font-family: var(--font-h); font-size: 1rem; font-weight: 800; color: var(--blue); margin-bottom: .6rem;
}
.sm-detail-text { font-size: .92rem; color: var(--text-soft); line-height: 1.7; }
/* ── Sidebar card (ancienne règle supprimée — voir section article detail) ── */
.sm-sidebar-card-header {
background: var(--blue);
color: #fff;
padding: .9rem 1.25rem;
font-family: var(--font-h);
font-size: .88rem;
font-weight: 700;
display: flex;
align-items: center;
gap: .45rem;
}
.sm-sidebar-card-body { padding: 1.25rem; }
.sm-contact-row {
display: flex;
align-items: flex-start;
gap: .85rem;
padding: .85rem 0;
border-bottom: 1px solid var(--gray-line);
}
.sm-contact-row:last-of-type { border-bottom: none; }
.sm-contact-icon {
width: 36px; height: 36px; border-radius: 8px;
background: var(--blue-soft);
display: flex; align-items: center; justify-content: center;
color: var(--blue); font-size: .9rem; flex-shrink: 0;
}
.sm-contact-label-alt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-mute); margin: 0 0 .15rem; }
.sm-contact-value { font-size: .85rem; color: var(--text); margin: 0; }
.sm-contact-value[href] { color: var(--blue); text-decoration: none; }
.sm-contact-value[href]:hover { color: var(--orange); }
.sm-contact-divider { border-top: 1px solid var(--gray-line); margin: 1rem 0; }
.sm-contact-note { font-size: .82rem; color: var(--gray-mute); margin-bottom: .5rem; }
/* ── Alertes ── */
.sm-alert {
display: flex; align-items: center; gap: .6rem;
padding: .9rem 1.1rem;
border-radius: var(--radius-sm);
font-size: .88rem; font-weight: 500;
}
.sm-alert--success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.sm-alert--error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
/* ── Grille articles (liste actualités) ── */
.sm-articles-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
}
.sm-article-card {
background: var(--white);
border: 1px solid var(--gray-line);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
transition: transform var(--transition), box-shadow var(--transition);
}
.sm-article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.sm-article-card-img-link {
display: block;
height: 175px;
overflow: hidden;
background: var(--blue-soft);
}
.sm-article-card-img-link img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sm-article-card:hover .sm-article-card-img-link img { transform: scale(1.04); }
.sm-article-img-ph {
height: 100%; width: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 2.5rem; color: var(--blue); opacity: .2;
}
.sm-article-card-body {
padding: 1.1rem;
flex: 1;
display: flex;
flex-direction: column;
gap: .4rem;
}
.sm-article-card-title {
font-family: var(--font-h); font-size: .95rem; font-weight: 800; color: var(--blue);
line-height: 1.35; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sm-article-card-title a { color: inherit; text-decoration: none; }
.sm-article-card-title a:hover { color: var(--orange); }
.sm-article-card-exc {
font-size: .8rem; color: var(--gray-mute); line-height: 1.55; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
flex: 1;
}
.sm-article-card-meta {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
padding-top: .5rem; border-top: 1px solid var(--gray-line); margin-top: auto;
}
/* ── Salons page (grille) ── */
.sm-region-filter-bar {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 2rem;
}
.sm-region-filter-btn {
display: inline-flex;
align-items: center;
gap: .3rem;
background: var(--white);
border: 1.5px solid var(--gray-line);
color: var(--text);
border-radius: 8px;
font-family: var(--font-h);
font-size: .8rem;
font-weight: 600;
padding: .45rem 1rem;
text-decoration: none;
transition: background var(--transition), color var(--transition), border-color var(--transition);
white-space: nowrap;
}
.sm-region-filter-btn:hover, .sm-region-filter-btn.is-active {
background: var(--blue); color: #fff; border-color: var(--blue);
}
.sm-salons-page-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.sm-salon-page-card {
background: var(--white);
border: 1px solid var(--gray-line);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
transition: transform var(--transition), box-shadow var(--transition);
}
.sm-salon-page-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.sm-salon-page-img { height: 180px; overflow: hidden; background: var(--blue-soft); }
.sm-salon-page-img img { width: 100%; height: 100%; object-fit: cover; }
.sm-salon-page-img-ph {
height: 100%;
background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.9);
font-family: var(--font-h);
font-size: 1.1rem;
font-weight: 900;
letter-spacing: 2px;
text-align: center;
line-height: 1.3;
}
.sm-salon-page-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.sm-salon-location-tag {
display: inline-flex; align-items: center; gap: .3rem;
font-size: .78rem; color: var(--blue); font-weight: 600; margin: 0;
}
.sm-salon-location-tag i { color: var(--orange); }
.sm-salon-page-title {
font-family: var(--font-h); font-size: 1rem; font-weight: 800; color: var(--blue); margin: 0; line-height: 1.3;
}
.sm-salon-page-title a { color: inherit; text-decoration: none; }
.sm-salon-page-title a:hover { color: var(--orange); }
.sm-salon-page-desc { font-size: .8rem; color: var(--gray-mute); line-height: 1.55; flex: 1; margin: 0; }
.sm-salon-page-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .75rem; }
/* ── Pagination ── */
.sm-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: .35rem;
margin-top: 2.5rem;
flex-wrap: wrap;
}
.sm-page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px; height: 38px;
border: 1.5px solid var(--gray-line);
background: var(--white);
color: var(--text);
border-radius: var(--radius-sm);
font-family: var(--font-h);
font-size: .85rem;
font-weight: 600;
text-decoration: none;
transition: background var(--transition), border-color var(--transition), color var(--transition);
padding: 0 .6rem;
}
.sm-page-btn:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.sm-page-btn.is-current { background: var(--blue); border-color: var(--blue); color: #fff; cursor: default; }
.sm-page-dots { color: var(--gray-mute); font-size: .85rem; padding: 0 .3rem; }
/* ── Empty state ── */
.sm-empty-state {
text-align: center;
padding: 4rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.sm-empty-state i { font-size: 3rem; color: var(--gray-line); }
.sm-empty-state p { font-size: .95rem; color: var(--gray-mute); margin: 0; }
/* ── Responsive pages internes ── */
@media (max-width: 991.98px) {
.sm-filter-grid { grid-template-columns: 1fr 1fr; }
.sm-partner-card { grid-template-columns: 80px 1fr; }
.sm-partner-cta { grid-column: 1 / -1; flex-direction: row; }
.sm-salons-page-grid { grid-template-columns: repeat(2, 1fr); }
.sm-filter-sidebar { position: static; }
.sm-sidebar-card { position: static; }
}
@media (max-width: 575.98px) {
.sm-filter-grid { grid-template-columns: 1fr; }
.sm-partner-card { grid-template-columns: 1fr; }
.sm-articles-grid { grid-template-columns: 1fr; }
.sm-salons-page-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════
PAGE SALONS (sm-sl-*) — v3 Bootstrap-native
Layout 100% Bootstrap row/col ; CSS = visuel only
═══════════════════════════════════════════════════ */
.sm-sl-page { background: linear-gradient(175deg, #eef5fd 0%, #fdf0f4 60%, #eef5fd 100%); background-attachment: fixed; min-height: 60vh; }
/* ── Hero header salons ── */
.sm-sl-hero {
position: relative;
background: linear-gradient(135deg, #002d52 0%, #005288 45%, #c42353 100%);
overflow: hidden;
padding: 0;
}
.sm-sl-hero::before {
content: '';
position: absolute;
inset: 0;
background: url('../img/background/header_background.png') center/cover no-repeat;
opacity: .18;
pointer-events: none;
}
/* Cercles décoratifs */
.sm-sl-hero::after {
content: '';
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: rgba(255,255,255,.04);
right: -120px;
top: -180px;
pointer-events: none;
}
.sm-sl-hero-inner {
position: relative;
z-index: 2;
}
/* Breadcrumb dans le hero */
.sm-sl-hero-bc {
padding: 14px 0;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.sm-sl-hero-bc-list {
display: flex;
align-items: center;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
}
.sm-sl-hero-bc-item {
font-family: var(--font-brand);
font-size: .9rem;
font-weight: 500;
color: rgba(255,255,255,.75);
}
.sm-sl-hero-bc-link {
color: rgba(255,255,255,.75);
text-decoration: none;
transition: color .2s;
}
.sm-sl-hero-bc-link:hover { color: #fff; }
.sm-sl-hero-bc-current { color: #fff; font-weight: 700; }
.sm-sl-hero-bc-sep { color: rgba(255,255,255,.4); margin: 0 .5rem; font-size: .8rem; }
/* Contenu principal du hero */
.sm-sl-hero-body {
padding: 2.5rem 0 2.75rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.sm-sl-hero-left { flex: 1 1 auto; }
.sm-sl-hero-tag {
display: inline-flex;
align-items: center;
gap: .45rem;
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.25);
color: #fff;
font-family: var(--font-brand);
font-size: .72rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
padding: .3rem .9rem;
border-radius: 20px;
margin-bottom: 1rem;
}
.sm-sl-hero-title {
font-family: var(--font-brand);
font-size: clamp(1.75rem, 3.5vw, 3rem);
font-weight: 900;
color: #fff;
line-height: 1.15;
margin: 0 0 .85rem;
}
.sm-sl-hero-title span { color: var(--crimson); }
.sm-sl-hero-sub {
font-family: var(--font-brand);
font-size: clamp(.9rem, 1.4vw, 1.05rem);
color: rgba(255,255,255,.8);
line-height: 1.6;
margin: 0;
max-width: 540px;
}
/* Stats à droite */
.sm-sl-hero-stats {
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
flex-shrink: 0;
}
.sm-sl-hero-stat {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
border-radius: 16px;
padding: 1.1rem 1.5rem;
text-align: center;
min-width: 110px;
backdrop-filter: blur(4px);
}
.sm-sl-hero-stat-num {
display: block;
font-family: var(--font-brand);
font-size: 1.9rem;
font-weight: 900;
color: #fff;
line-height: 1;
margin-bottom: .3rem;
}
.sm-sl-hero-stat-label {
display: block;
font-family: var(--font-brand);
font-size: .7rem;
font-weight: 600;
color: rgba(255,255,255,.7);
letter-spacing: .06em;
text-transform: uppercase;
}
/* Vague arrondie en bas du hero */
.sm-sl-hero-wave {
display: block;
width: 100%;
height: 52px;
background: #F5F0EB;
clip-path: ellipse(55% 100% at 50% 100%);
margin-top: -1px;
}
/* Corps de page sous le header */
.sm-sl-page-body {
background: #fff;
}
/* ── 3 Prochains salons ─────────────────────────────────────────── */
.sm-sl-next {
background: #fff;
padding: 2.5rem 0 2rem;
border-bottom: 1px solid #edf0f5;
}
.sm-sl-next-head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
margin-bottom: 1.5rem; flex-wrap: wrap;
}
.sm-sl-next-label {
font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--crimson); margin: 0 0 .25rem; display: flex; align-items: center; gap: .3rem;
}
.sm-sl-next-title {
font-family: var(--font-brand); font-size: 1.4rem; font-weight: 800;
color: var(--text); margin: 0; line-height: 1.2;
}
.sm-sl-next-cta {
display: inline-flex; align-items: center; gap: .5rem;
background: var(--navy); color: #fff; font-size: .85rem; font-weight: 700;
text-decoration: none; padding: .6rem 1.3rem; border-radius: 24px;
transition: var(--transition); white-space: nowrap;
}
.sm-sl-next-cta:hover { background: var(--blue-dark); color: #fff; }
.sm-sl-next-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.sm-sl-next-card {
background: #fff; border: 1px solid #e4eaf3;
border-radius: 18px; padding: 1.25rem 1.5rem 1.5rem;
display: flex; flex-direction: column; gap: .5rem;
text-decoration: none; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
box-shadow: 0 3px 14px rgba(0,82,136,.07);
}
.sm-sl-next-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,82,136,.14); border-color: #b8cde8; }
.sm-sl-next-card-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sm-sl-next-badge {
font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
background: var(--navy); color: #fff; padding: .25rem .65rem; border-radius: 10px;
}
.sm-sl-next-theme {
font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
color: var(--crimson); background: rgba(212,46,90,.08); padding: .2rem .55rem; border-radius: 8px;
}
.sm-sl-next-name {
font-family: var(--font-brand); font-size: 1rem; font-weight: 700;
color: var(--text); margin: .25rem 0 0; line-height: 1.3;
}
.sm-sl-next-ville {
font-size: .82rem; color: var(--gray-text); margin: 0;
display: flex; align-items: center; gap: .3rem;
}
.sm-sl-next-link {
margin-top: auto; padding-top: .75rem; font-size: .82rem; font-weight: 700;
color: var(--blue); display: flex; align-items: center; gap: .3rem;
}
@media (max-width: 767.98px) {
.sm-sl-next-grid { grid-template-columns: 1fr; }
.sm-sl-next-head { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
.sm-sl-next-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Barre d'onglets dans le contenu, en haut de page */
.sm-tabs-bar {
padding: 2rem 0 0;
display: flex;
justify-content: center;
}
.sm-tabs-bar-inner {
display: inline-flex;
gap: .35rem;
background: #fff;
border: 1px solid rgba(0,82,136,.12);
border-radius: 14px;
padding: .35rem;
box-shadow: 0 2px 16px rgba(0,82,136,.08);
}
.sm-tabs-bar-btn {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .65rem 1.75rem;
font-family: var(--font-brand);
font-size: .95rem;
font-weight: 500;
color: rgba(0,82,136,.55);
background: transparent;
border: none;
border-radius: 10px;
cursor: pointer;
transition: color .2s, background .2s;
white-space: nowrap;
}
.sm-tabs-bar-btn i { font-size: .95rem; }
.sm-tabs-bar-btn:hover { color: var(--navy); background: rgba(0,82,136,.05); }
.sm-tabs-bar-btn.is-active {
color: #fff;
background: var(--crimson);
font-weight: 600;
box-shadow: 0 3px 12px rgba(212,46,90,.28);
}
.sm-tabs-bar-btn.is-active i { opacity: 1; }
@media (max-width: 767.98px) {
.sm-sl-hero-body { padding: 1.75rem 0 2rem; flex-direction: column; }
.sm-sl-hero-stats { width: 100%; justify-content: center; }
.sm-sl-hero-stat { min-width: 90px; padding: .85rem 1rem; }
.sm-sl-tab-btn { padding: .85rem 1rem .75rem; font-size: .85rem; }
}
/* ── Filtres ── */
.sm-sl-filters-wrap { padding: 1.5rem 0 1.25rem; background: #F5F0EB; }
.sm-sl-filters-inner {
background: #fff;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,.09);
border: 1px solid rgba(0,0,0,.06);
display: flex;
align-items: stretch;
overflow: hidden;
}
.sm-sl-filter-group {
flex: 1 1 0;
min-width: 0;
padding: .9rem 1.4rem;
border-right: 1px solid #ECECEC;
}
.sm-sl-filter-label {
display: block;
font-family: var(--font-brand);
font-size: .6rem;
font-weight: 700;
color: #5a6a77;
letter-spacing: .08em;
text-transform: uppercase;
margin: 0 0 .18rem;
}
.sm-sl-filter-select {
display: block;
width: 100%;
border: none;
outline: none;
background: transparent;
font-family: var(--font-brand);
font-size: .95rem;
font-weight: 600;
color: #005288;
padding: 0;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23005288' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0 center;
box-shadow: none;
}
.sm-sl-filter-select:disabled { color: #9AA5B0; cursor: default; }
.sm-sl-filter-select:focus { outline: none; box-shadow: none; }
.sm-sl-filter-btn-wrap { flex: 0 0 150px; }
.sm-sl-filters-wrap { padding: 1.5rem 0 1.25rem; background: rgba(238,245,253,.85); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0,82,136,.08); }
.sm-sl-filter-btn {
display: block;
width: 100%;
height: 100%;
min-height: 64px;
background: #005288;
color: #fff;
border: none;
cursor: pointer;
font-family: var(--font-brand);
font-size: .95rem;
font-weight: 800;
padding: 0 1.5rem;
transition: background .2s;
white-space: nowrap;
letter-spacing: .03em;
}
.sm-sl-filter-btn:hover { background: #003a6b; }
/* ── Corps ── */
.sm-sl-body { padding: 2rem 0 4rem; }
/* ── À LA UNE — carte principale ── */
.sm-sl-une-card {
background: #fff;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 8px 40px rgba(0,82,136,.14);
height: 100%;
border: 1px solid rgba(0,82,136,.07);
transition: box-shadow .25s;
}
.sm-sl-une-card:hover {
box-shadow: 0 0 0 3px rgba(212,46,90,.1), 0 14px 48px rgba(0,82,136,.18);
}
/* Côté image */
.sm-sl-une-img-wrap {
position: relative;
height: 100%;
min-height: 360px;
background: #1a3a5c;
overflow: hidden;
}
.sm-sl-une-img-wrap img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.sm-sl-une-card:hover .sm-sl-une-img-wrap img { transform: scale(1.04); }
.sm-sl-une-img-ph {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: rgba(255,255,255,.25);
}
.sm-sl-une-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,20,60,.88) 0%, rgba(0,20,60,.3) 50%, transparent 80%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2rem;
pointer-events: none;
}
.sm-sl-une-overlay > * { pointer-events: auto; }
.sm-sl-une-badge {
position: absolute;
top: 1.25rem; left: 1.25rem;
background: #D42E5A;
color: #fff;
font-family: var(--font-brand);
font-size: .68rem; font-weight: 800;
letter-spacing: .1em;
padding: .28rem .9rem;
border-radius: 20px;
pointer-events: none;
}
.sm-sl-une-overlay-title {
font-family: var(--font-brand);
font-size: clamp(1.1rem, 2vw, 1.6rem);
font-weight: 800;
color: #fff;
line-height: 1.25;
margin: 0 0 .4rem;
text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.sm-sl-une-overlay-date {
font-family: var(--font-brand);
font-size: .85rem; font-weight: 600;
color: rgba(255,255,255,.8);
margin: 0 0 1rem;
}
.sm-sl-une-overlay-cta {
display: inline-flex;
align-items: center;
gap: .4rem;
font-family: var(--font-brand);
font-size: .82rem; font-weight: 700;
color: #fff;
text-decoration: none;
border: 1.5px solid rgba(255,255,255,.65);
border-radius: 24px;
padding: .38rem 1rem;
transition: background .2s;
align-self: flex-start;
}
.sm-sl-une-overlay-cta:hover { background: rgba(255,255,255,.18); color: #fff; }
/* Côté infos */
.sm-sl-une-info {
padding: 2rem 1.75rem;
height: 100%;
display: flex;
flex-direction: column;
}
.sm-sl-une-info-city {
font-family: var(--font-brand);
font-size: .67rem; font-weight: 900;
color: var(--crimson);
letter-spacing: .15em;
text-transform: uppercase;
margin: 0 0 .55rem;
}
.sm-sl-une-info-title {
font-family: var(--font-brand);
font-size: clamp(1.2rem, 2vw, 1.7rem);
font-weight: 900;
color: #002d52;
line-height: 1.25;
margin: 0 0 .85rem;
}
.sm-sl-une-info-desc {
font-family: var(--font-brand);
font-size: .95rem;
color: #4a5e72;
line-height: 1.75;
margin: 0;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sm-sl-une-info-foot {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid rgba(0,82,136,.1);
}
.sm-sl-une-info-date {
font-family: var(--font-brand);
font-size: 1rem; font-weight: 700;
color: #005288;
margin: 0 0 1rem;
display: flex; align-items: center;
}
.sm-sl-une-info-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.sm-sl-btn {
display: inline-flex;
align-items: center;
gap: .4rem;
font-family: var(--font-brand);
font-size: .83rem; font-weight: 800;
border-radius: 24px;
padding: .5rem 1.25rem;
text-decoration: none;
transition: background .22s, color .22s, box-shadow .22s;
border: 1.5px solid #005288;
color: #005288;
background: transparent;
white-space: nowrap;
}
.sm-sl-btn:hover { background: #005288; color: #fff; }
/* ── Visuel partenaire ── */
.sm-sl-une-ad-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* ── En-tête section liste ── */
.sm-sl-list-section { padding-top: 1.5rem; }
.sm-sl-list-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 2rem;
}
.sm-sl-list-eyebrow {
font-family: var(--font-brand);
font-size: .72rem; font-weight: 800;
color: #D42E5A; letter-spacing: .12em;
text-transform: uppercase; margin: 0 0 .3rem;
}
.sm-sl-list-title {
font-family: var(--font-brand);
font-size: clamp(1.5rem, 2.5vw, 2.1rem);
font-weight: 900; color: #002d52; margin: 0; line-height: 1.2;
}
.sm-sl-list-count {
font-family: var(--font-brand);
font-size: .68rem; font-weight: 800;
color: #9AA5B0; letter-spacing: .12em;
text-transform: uppercase; margin: 0;
}
/* ── Carte salon (grille) ── */
.sm-sl-card {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,82,136,.08);
display: flex;
flex-direction: column;
height: 100%;
transition: transform .25s, box-shadow .25s, border-color .25s;
border: 1px solid rgba(0,82,136,.08);
border-top: 3px solid var(--crimson);
}
.sm-sl-card:hover {
transform: translateY(-5px);
box-shadow: 0 0 0 3px rgba(212,46,90,.08), 0 14px 36px rgba(0,82,136,.14);
border-color: rgba(212,46,90,.25);
}
/* Carte agrandie quand 1 ou 2 salons seulement */
.sm-sl-card--large .sm-sl-card-img-wrap { height: 280px; }
.sm-sl-card--large .sm-sl-card-body { padding: 1.5rem 1.6rem 1.6rem; gap: .7rem; }
.sm-sl-card--large .sm-sl-card-title { font-size: 1.25rem; }
.sm-sl-card--large .sm-sl-card-meta { font-size: .8rem; }
.sm-sl-card-img-wrap {
position: relative;
display: block;
height: 170px;
overflow: hidden;
background: #dde6ef;
text-decoration: none;
flex-shrink: 0;
}
.sm-sl-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.sm-sl-card:hover .sm-sl-card-img-wrap img { transform: scale(1.05); }
.sm-sl-card-img-ph {
width: 100%; height: 100%;
background: linear-gradient(135deg, #002d52 0%, #005288 55%, #c42353 100%);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.25); font-size: 3.5rem;
}
.sm-sl-card-date-badge {
position: absolute; top: 12px; left: 12px;
background: #D42E5A; color: #fff;
font-family: var(--font-brand); font-size: .72rem; font-weight: 800;
letter-spacing: .04em; padding: .28rem .8rem; border-radius: 20px;
}
.sm-sl-card-free-badge {
position: absolute; top: 12px; right: 12px;
background: #1a9e6f; color: #fff;
font-family: var(--font-brand); font-size: .68rem; font-weight: 700;
padding: .22rem .65rem; border-radius: 20px;
display: inline-flex; align-items: center; gap: .25rem;
}
.sm-sl-card-body { padding: 1.1rem 1.25rem 1.2rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.sm-sl-card-meta {
font-family: var(--font-brand); font-size: .7rem; font-weight: 800;
color: var(--crimson); letter-spacing: .1em; text-transform: uppercase; margin: 0;
}
.sm-sl-card-title {
font-family: var(--font-brand);
font-size: clamp(1rem, 1.4vw, 1.15rem);
font-weight: 800; color: #002d52; margin: 0; line-height: 1.3;
}
.sm-sl-card-title a { color: inherit; text-decoration: none; }
.sm-sl-card-title a:hover { color: var(--crimson); }
.sm-sl-card-foot {
margin-top: auto; padding-top: .6rem; border-top: 1px solid rgba(0,82,136,.07);
display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
}
.sm-sl-card-link {
font-family: var(--font-brand); font-size: .82rem; font-weight: 800;
color: #005288; text-decoration: none;
display: inline-flex; align-items: center; gap: .3rem;
transition: color .15s;
}
.sm-sl-card-link::after { content: ' →'; }
.sm-sl-card-link:hover { color: var(--crimson); }
.sm-sl-card-ticket {
font-family: var(--font-brand); font-size: .75rem; font-weight: 600;
color: #9AA5B0; text-decoration: none;
display: inline-flex; align-items: center; gap: .3rem;
}
.sm-sl-card-ticket:hover { color: var(--orange); }
/* ── Responsive ── */
@media (max-width: 991.98px) {
.sm-sl-une-img-wrap { min-height: 280px; }
.sm-sl-filters-inner { flex-direction: column; border-radius: 16px; }
.sm-sl-filter-group { border-right: none; border-bottom: 1px solid #ECECEC; }
.sm-sl-filter-btn-wrap { flex: 0 0 auto; }
.sm-sl-filter-btn { min-height: 52px; }
}
@media (max-width: 575.98px) {
.sm-sl-list-head { flex-direction: column; align-items: flex-start; }
}
/* ═══════════════════════════════════════════════════════════════════
ONGLETS SALONS — SWITCH NAVIGATION (.sm-tabs-*)
═══════════════════════════════════════════════════════════════════ */
/* (ancien sm-tabs-nav-wrap remplacé par sm-sl-hero-tabs dans le hero) */
/* ═══════════════════════════════════════════════════════════════════
ONGLET 1 — EXPÉRIENCE SALONS — AURORA VIVANTE (LUMINEUX)
═══════════════════════════════════════════════════════════════════ */
/* ══ PAGE PRÉSENTATION SALONS (.sm-pres-*) ══════════════════════════ */
/* ── S1 Hero card ─────────────────────────────────────────────────── */
.sm-pres-hero { padding: 2rem 0 2.5rem; }
.sm-pres-hero-card {
position: relative; border-radius: 20px; overflow: hidden;
min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end;
background: #001428;
}
.sm-pres-hero-img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center top; opacity: .42;
}
.sm-pres-hero-card::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to top, rgba(0,12,32,.85) 0%, rgba(0,12,32,.35) 55%, transparent 100%);
}
.sm-pres-hero-body {
position: relative; z-index: 2;
padding: 2.5rem 2.8rem 1.5rem;
max-width: 680px;
}
.sm-pres-hero-tag {
display: inline-block;
font-family: var(--font-brand); font-size: .72rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7);
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
border-radius: 50px; padding: .28rem 1rem; margin-bottom: 1.4rem;
}
.sm-pres-hero-title {
font-family: var(--font-brand);
font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 900;
color: #fff; line-height: 1.12; margin-bottom: 1.2rem;
}
.sm-pres-hero-title em {
font-style: italic; color: var(--crimson);
}
.sm-pres-hero-sub {
font-family: var(--font-brand); font-size: 1.08rem; line-height: 1.7;
color: rgba(255,255,255,.72); max-width: 560px; margin-bottom: 1.8rem;
}
.sm-pres-hero-btns { display: flex; gap: .85rem; flex-wrap: wrap; }
.sm-pres-hero-btn-primary {
font-family: var(--font-brand); font-size: 1rem; font-weight: 700;
color: #fff; background: var(--crimson); border: none; border-radius: 50px;
padding: .75rem 1.7rem; cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.sm-pres-hero-btn-primary:hover { background: #b8203f; transform: translateY(-2px); }
.sm-pres-hero-btn-ghost {
font-family: var(--font-brand); font-size: 1rem; font-weight: 600;
color: rgba(255,255,255,.85);
background: transparent; border: 1.5px solid rgba(255,255,255,.38);
border-radius: 50px; padding: .75rem 1.7rem; cursor: pointer;
transition: border-color .2s, color .2s;
}
.sm-pres-hero-btn-ghost:hover { border-color: rgba(255,255,255,.8); color: #fff; }
/* Ticker catégories */
.sm-pres-ticker {
position: relative; z-index: 2;
border-top: 1px solid rgba(255,255,255,.12);
overflow: hidden; padding: .85rem 0;
}
.sm-pres-ticker-track {
display: flex; gap: 1.4rem; width: max-content;
animation: smMarquee 22s linear infinite;
font-family: var(--font-brand); font-size: .72rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.sm-pres-ticker-dot { color: var(--crimson); opacity: .7; }
/* ── S2 Manifeste + Stats ─────────────────────────────────────────── */
.sm-pres-manifeste { padding: 4rem 0; }
.sm-pres-section-label {
font-family: var(--font-brand); font-size: .72rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: var(--crimson);
margin-bottom: 1.2rem;
}
.sm-pres-manifeste-text {
font-family: var(--font-brand); font-size: 1.2rem; line-height: 1.85;
color: rgba(0,0,0,.7);
}
.sm-pres-manifeste-text strong { color: var(--navy); font-weight: 800; }
.sm-pres-stats-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.5rem;
}
.sm-pres-stat {
padding: 1.25rem 0; border-top: 1.5px solid rgba(0,82,136,.12);
position: relative;
}
.sm-pres-stat::before {
content: ''; position: absolute; top: -1.5px; left: 0; width: 24px; height: 1.5px;
background: var(--crimson);
}
.sm-pres-stat-num {
display: block; font-family: var(--font-brand);
font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 900;
color: var(--navy); line-height: 1; margin-bottom: .3rem;
}
.sm-pres-stat-label {
font-family: var(--font-brand); font-size: .95rem; color: rgba(0,0,0,.65); line-height: 1.45;
}
/* ── S3 Piliers ───────────────────────────────────────────────────── */
.sm-pres-pillars { padding: 1rem 0 3rem; }
.sm-pres-pillar {
display: grid; grid-template-columns: 1fr 1fr; gap: 5rem;
align-items: center; margin-bottom: 5rem;
}
.sm-pres-pillar--reverse { }
.sm-pres-pillar-img-wrap { position: relative; }
.sm-pres-pillar-badge {
position: absolute; top: 1.2rem; left: 1.2rem; z-index: 2;
font-family: var(--font-brand); font-size: .68rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
background: rgba(255,255,255,.92); color: var(--navy);
border-radius: 50px; padding: .3rem .9rem;
box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.sm-pres-pillar-img {
display: block; width: 100%; aspect-ratio: 4/3;
object-fit: cover; border-radius: 16px;
box-shadow: 0 4px 28px rgba(0,0,0,.1);
}
.sm-pres-pillar-header {
display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1rem;
}
.sm-pres-pillar-num {
font-family: var(--font-brand); font-size: 3.2rem; font-weight: 900;
color: #b06070; line-height: 1; letter-spacing: -.04em;
}
.sm-pres-pillar-eyebrow {
font-family: var(--font-brand); font-size: .72rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: var(--crimson);
}
.sm-pres-pillar-title {
font-family: var(--font-brand); font-size: clamp(1.5rem, 2.8vw, 2rem);
font-weight: 800; color: var(--navy); line-height: 1.25; margin-bottom: .9rem;
}
.sm-pres-pillar-desc {
font-size: 1.05rem; color: rgba(0,0,0,.58); line-height: 1.78; margin-bottom: 1.4rem;
}
.sm-pres-pillar-link {
font-family: var(--font-brand); font-size: .7rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--crimson);
}
/* ── S4 Timeline ──────────────────────────────────────────────────── */
.sm-pres-timeline-wrap { padding: 3rem 0; }
.sm-pres-timeline-title {
font-family: var(--font-brand); font-size: clamp(1.9rem, 3.5vw, 2.8rem);
font-weight: 900; color: var(--navy); text-align: center; margin-bottom: 2.8rem;
}
.sm-pres-timeline {
list-style: none; padding: 0; margin: 0 auto; max-width: 560px;
}
.sm-pres-tl-item {
display: flex; gap: 1.5rem; padding-bottom: 2.2rem;
}
.sm-pres-tl-item--last { padding-bottom: 0; }
.sm-pres-tl-left {
display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-top: 3px;
}
.sm-pres-tl-dot {
width: 16px; height: 16px; border-radius: 50%;
border: 2px solid var(--crimson); background: #fff;
flex-shrink: 0; position: relative; z-index: 1;
}
.sm-pres-tl-line {
flex: 1; width: 1.5px; background: rgba(212,46,90,.18); margin-top: 4px;
}
.sm-pres-tl-head {
font-family: var(--font-brand); font-weight: 700; font-size: 1.05rem;
color: var(--navy); margin: 0 0 .3rem;
}
.sm-pres-tl-time {
display: inline-block; min-width: 34px; color: var(--crimson); font-weight: 800;
margin-right: .5rem;
}
.sm-pres-tl-desc {
font-size: 1rem; color: rgba(0,0,0,.55); line-height: 1.7; margin: 0;
}
.sm-pres-tl-link {
display: inline-block; margin-top: .4rem;
font-size: .88rem; font-weight: 700; color: var(--crimson);
text-decoration: none; transition: letter-spacing .15s;
}
.sm-pres-tl-link:hover { letter-spacing: .03em; color: var(--navy); }
/* ── S5 Citation ──────────────────────────────────────────────────── */
.sm-pres-quote-wrap { padding: 1.5rem 0 3rem; }
.sm-pres-quote-card {
background: #fff; border-radius: 20px; padding: 3rem 3.5rem;
max-width: 760px; margin: 0 auto;
box-shadow: 0 2px 24px rgba(0,0,0,.06);
border: 1px solid rgba(0,0,0,.05);
position: relative;
}
.sm-pres-quote-card::before {
content: '\201C'; position: absolute; top: 1.8rem; right: 2.5rem;
font-size: 6rem; color: var(--crimson); opacity: .12;
font-family: Georgia, serif; line-height: 1;
}
.sm-pres-quote-text {
font-family: var(--font-brand); font-size: 1.3rem; line-height: 1.78;
color: var(--navy); font-style: italic; margin: 0 0 2rem;
border: none; padding: 0;
}
.sm-pres-quote-author { display: flex; align-items: center; gap: 1rem; }
.sm-pres-quote-avatar {
width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--navy), var(--crimson));
color: #fff; font-family: var(--font-brand); font-size: .7rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.sm-pres-quote-name {
display: block; font-family: var(--font-brand); font-weight: 700;
font-size: 1rem; color: var(--navy);
}
.sm-pres-quote-loc {
display: block; font-size: .9rem; color: rgba(0,0,0,.62);
}
/* ── S6 CTA card ──────────────────────────────────────────────────── */
.sm-pres-cta-wrap { padding: 0 0 4rem; }
.sm-pres-cta-card {
background: linear-gradient(135deg, var(--navy) 0%, #1a0a35 100%);
border-radius: 20px; padding: 3.5rem;
display: flex; align-items: center; justify-content: space-between;
gap: 2.5rem; flex-wrap: wrap;
}
.sm-pres-cta-eyebrow {
font-family: var(--font-brand); font-size: .72rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5);
margin-bottom: .8rem;
}
.sm-pres-cta-title {
font-family: var(--font-brand); font-size: clamp(2.2rem, 4vw, 3.2rem);
font-weight: 900; color: #fff; line-height: 1.15; margin-bottom: .8rem;
}
.sm-pres-cta-sub {
font-size: 1rem; color: rgba(255,255,255,.45); max-width: 400px; line-height: 1.65;
}
.sm-pres-cta-right { flex-shrink: 0; }
.sm-pres-cta-btn {
display: inline-flex; align-items: center; gap: 1.5rem;
background: #fff; color: var(--navy); border: none; border-radius: 50px;
padding: 1.1rem 1.4rem 1.1rem 2rem; cursor: pointer;
box-shadow: 0 4px 20px rgba(0,0,0,.15);
transition: transform .2s ease, box-shadow .2s ease;
white-space: nowrap;
}
.sm-pres-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.2); }
.sm-pres-cta-btn span {
display: flex; flex-direction: column; text-align: left;
}
.sm-pres-cta-btn small {
font-family: var(--font-brand); font-size: .65rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--crimson);
margin-bottom: .1rem;
}
.sm-pres-cta-btn strong {
font-family: var(--font-brand); font-size: 1.05rem; font-weight: 700;
color: var(--navy);
}
.sm-pres-cta-btn i {
width: 40px; height: 40px; border-radius: 50%;
background: var(--navy); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; flex-shrink: 0;
}
/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
.sm-pres-pillar { grid-template-columns: 1fr; gap: 2rem; }
.sm-pres-pillar--reverse .sm-pres-pillar-img-wrap { order: -1; }
.sm-pres-stats-grid { gap: .75rem 1.5rem; }
}
@media (max-width: 767.98px) {
.sm-pres-hero-body { padding: 1.75rem; }
.sm-pres-hero-title { font-size: 2rem; }
.sm-pres-cta-card { flex-direction: column; padding: 2.5rem 2rem; }
.sm-pres-review-card { padding: 2rem 1.75rem; }
.sm-pres-stats-grid { grid-template-columns: 1fr 1fr; }
}
/* ── Carousel avis ─────────────────────────────────────────────────── */
.sm-pres-reviews-wrap { padding: 1.5rem 0 3rem; }
.sm-pres-carousel { position: relative; }
.sm-pres-carousel-track {
position: relative; min-height: 260px;
}
.sm-pres-review-card {
position: absolute; inset: 0;
background: #fff; border-radius: 20px;
padding: 3rem 3.5rem;
box-shadow: 0 2px 24px rgba(0,0,0,.06);
border: 1px solid rgba(0,0,0,.05);
opacity: 0; pointer-events: none;
transform: translateX(32px);
transition: opacity .45s ease, transform .45s ease;
position: relative;
}
.sm-pres-review-card.is-active {
opacity: 1; pointer-events: auto;
transform: translateX(0);
position: relative;
}
.sm-pres-review-card:not(.is-active) { display: none; }
.sm-pres-review-card::before {
content: '\201C'; position: absolute; top: 1.5rem; right: 2.5rem;
font-size: 6rem; color: var(--crimson); opacity: .1;
font-family: Georgia, serif; line-height: 1;
}
.sm-pres-carousel-nav {
display: flex; align-items: center; justify-content: center;
gap: 1.2rem; margin-top: 1.5rem;
}
.sm-pres-carousel-prev,
.sm-pres-carousel-next {
width: 40px; height: 40px; border-radius: 50%;
background: #fff; border: 1.5px solid rgba(0,82,136,.16);
color: var(--navy); font-size: 1rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s, border-color .2s;
}
.sm-pres-carousel-prev:hover,
.sm-pres-carousel-next:hover {
background: var(--crimson); border-color: var(--crimson); color: #fff;
}
.sm-pres-carousel-dots { display: flex; gap: .25rem; }
.sm-pres-carousel-dot {
width: 24px; height: 24px; border-radius: 50%;
background: transparent; border: none; cursor: pointer;
padding: 0; transition: transform .2s;
display: flex; align-items: center; justify-content: center;
}
.sm-pres-carousel-dot::after {
content: ''; display: block;
width: 8px; height: 8px; border-radius: 50%;
background: rgba(0,82,136,.35); transition: background .2s, transform .2s;
}
.sm-pres-carousel-dot.is-active::after {
background: var(--crimson); transform: scale(1.3);
}
/* ── Séparation agenda ─────────────────────────────────────────────── */
.sm-agenda-header {
padding: 3.5rem 0 1rem;
text-align: center;
}
/* PAGE FICHE SALON — DÉTAIL (.sm-sdv-*)
═══════════════════════════════════════════════════════════════════ */
/* ── Wrapper page ────────────────────────────────────────────────── */
/* sm-sl-page est déjà défini plus haut — sm-sdv-page est un alias */
.sm-sdv-page { background: linear-gradient(175deg, #eef5fd 0%, #fdf0f4 60%, #eef5fd 100%); background-attachment: fixed; min-height: 60vh; }
/* ── Hero body (zone titre dans sm-sl-hero-inner) ────────────────── */
.sm-sdv-hero-body { padding: 2rem 0 2.5rem; }
.sm-sdv-hero-tags {
display: flex; flex-wrap: wrap; gap: .5rem;
margin-bottom: 1.1rem;
}
.sm-sdv-tag {
display: inline-flex; align-items: center; gap: .35rem;
background: rgba(255,255,255,.18);
color: #fff;
font-family: var(--font-brand); font-size: .72rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
padding: .3rem .9rem; border-radius: 20px;
border: 1px solid rgba(255,255,255,.35);
backdrop-filter: blur(4px);
}
.sm-sdv-tag--region { background: rgba(255,255,255,.12); }
.sm-sdv-tag--free { background: rgba(26,158,111,.55); border-color: rgba(26,158,111,.7); }
.sm-sdv-tag--theme { background: rgba(212,46,90,.55); border-color: rgba(212,46,90,.7); }
.sm-sdv-hero-title {
font-family: var(--font-brand);
font-size: clamp(1.8rem, 4vw, 3.2rem);
font-weight: 900;
color: #fff;
line-height: 1.15;
margin: 0 0 1rem;
max-width: 680px;
}
.sm-sdv-hero-meta {
display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
font-family: var(--font-brand); font-size: 1rem; color: rgba(255,255,255,.85);
}
.sm-sdv-hero-meta-item { display: inline-flex; align-items: center; gap: .35rem; }
.sm-sdv-hero-meta-sep { opacity: .4; }
/* ── Body layout ─────────────────────────────────────────────────── */
.sm-sdv-body { padding: 2.5rem 0 4rem; }
/* ── Affiche ─────────────────────────────────────────────────────── */
.sm-sdv-affiche-wrap {
position: relative;
border-radius: 22px;
overflow: hidden;
margin-bottom: 2rem;
box-shadow: 0 8px 36px rgba(0,82,136,.15);
border: 1px solid rgba(0,82,136,.08);
}
.sm-sdv-affiche-img {
/* Affiche salon détail : variante -full (1200×800, ratio 3:2) */
width: 100%;
aspect-ratio: 3 / 2;
max-height: 500px;
object-fit: cover;
display: block;
}
.sm-sdv-affiche-badge {
position: absolute; top: 16px; left: 16px;
background: var(--crimson); color: #fff;
font-family: var(--font-brand); font-size: .76rem; font-weight: 800;
letter-spacing: .06em; text-transform: uppercase;
padding: .35rem 1rem; border-radius: 20px;
}
/* ── KPIs / infos clés ───────────────────────────────────────────── */
.sm-sdv-kpis {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: 2.5rem;
}
.sm-sdv-kpi {
display: flex; align-items: flex-start; gap: .9rem;
background: #fff;
border: 1px solid rgba(0,82,136,.1);
border-radius: 16px;
padding: 1.1rem 1.25rem;
box-shadow: 0 4px 16px rgba(0,82,136,.08);
transition: transform .2s, box-shadow .2s;
}
.sm-sdv-kpi:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,82,136,.13);
}
.sm-sdv-kpi-icon {
flex-shrink: 0;
width: 42px; height: 42px;
background: #005288;
color: #fff; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
}
.sm-sdv-kpi-label {
font-family: var(--font-brand); font-size: .68rem; font-weight: 800;
letter-spacing: .1em; text-transform: uppercase;
color: #5a6a77; margin: 0 0 .25rem;
}
.sm-sdv-kpi-val {
font-family: var(--font-brand); font-size: 1.05rem; font-weight: 800;
color: #002d52; margin: 0; line-height: 1.3;
}
.sm-sdv-prix--gratuit { color: #0f7a55; }
.sm-sdv-prix--payant { color: var(--crimson); }
/* ── Programme ───────────────────────────────────────────────────── */
.sm-sdv-programme {
border-radius: 20px;
overflow: hidden;
margin-bottom: 2.5rem;
box-shadow: 0 8px 36px rgba(0,82,136,.13);
border: 1px solid rgba(0,82,136,.1);
background: #fff;
position: relative;
}
.sm-sdv-programme-header {
background: linear-gradient(135deg, #003a61 0%, #005288 55%, #1262a8 100%);
padding: 1.5rem 2rem;
display: flex; align-items: center; gap: 1rem;
position: relative; overflow: hidden;
}
.sm-sdv-programme-header::before {
content: '';
position: absolute; right: -20px; top: -20px;
width: 130px; height: 130px;
background: rgba(255,255,255,.07);
border-radius: 50%;
pointer-events: none;
}
.sm-sdv-programme-header::after {
content: '';
position: absolute; right: 50px; bottom: -35px;
width: 90px; height: 90px;
background: rgba(255,255,255,.04);
border-radius: 50%;
pointer-events: none;
}
.sm-sdv-programme-icon {
width: 50px; height: 50px; flex-shrink: 0;
background: rgba(255,255,255,.2); border-radius: 14px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 1.35rem;
border: 1px solid rgba(255,255,255,.28);
box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.sm-sdv-programme-title {
font-family: var(--font-brand); font-size: 1.05rem; font-weight: 900;
letter-spacing: .05em; text-transform: uppercase;
color: #fff; margin: 0 0 .2rem;
}
.sm-sdv-programme-subtitle {
font-size: .78rem; color: rgba(255,255,255,.65);
margin: 0; font-style: italic; letter-spacing: .01em;
}
.sm-sdv-programme-body {
padding: 2.25rem 2.25rem 2.5rem;
background: linear-gradient(180deg, #f4f8ff 0%, #fff 120px);
position: relative;
}
.sm-sdv-programme-body::before {
content: '\201C';
position: absolute; top: .75rem; left: 1.6rem;
font-size: 6rem; line-height: 1;
color: rgba(0,82,136,.07);
font-family: Georgia, 'Times New Roman', serif;
pointer-events: none; user-select: none;
}
.sm-sdv-programme-p {
font-size: 1rem; color: #3d4f66;
line-height: 1.85;
margin: 0 0 1.2rem;
position: relative;
}
.sm-sdv-programme-p:last-child { margin-bottom: 0; }
.sm-sdv-programme-p--lead {
font-size: 1.08rem; color: #1c2a3a; font-weight: 600;
border-left: 3px solid #005288;
padding-left: 1rem;
margin-bottom: 1.6rem;
background: rgba(0,82,136,.03);
border-radius: 0 8px 8px 0;
padding-top: .5rem; padding-bottom: .5rem;
}
/* ── Footer actions ─────────────────────────────────────────────── */
.sm-sdv-foot {
display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
padding: 1.5rem 1.75rem;
background: rgba(238,245,253,.6);
border-radius: 0 0 20px 20px;
margin: 0 -1.75rem -1.75rem;
}
.sm-sdv-back-btn {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--font-brand); font-size: .88rem; font-weight: 800;
color: #005288; text-decoration: none;
padding: .65rem 1.3rem; border-radius: 12px;
border: 2px solid #005288;
transition: background .22s, color .22s, border-color .22s, box-shadow .22s;
}
.sm-sdv-back-btn:hover { background: #005288; color: #fff; }
.sm-sdv-share { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
/* ── Sidebar sticky ─────────────────────────────────────────────── */
.sm-sdv-sticky { position: sticky; top: 180px; }
/* ── Sidebar card ────────────────────────────────────────────────── */
.sm-sdv-side-card {
background: #fff;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 6px 28px rgba(0,82,136,.1);
margin-bottom: 1.5rem;
border: 1px solid rgba(0,82,136,.08);
}
.sm-sdv-side-card-header {
background: #005288;
color: #fff;
font-family: var(--font-brand); font-size: .95rem; font-weight: 800;
letter-spacing: .04em; text-transform: uppercase;
padding: 1rem 1.5rem;
display: flex; align-items: center; gap: .5rem;
}
.sm-sdv-side-card-body { padding: 1.5rem; }
.sm-sdv-side-row {
display: flex; align-items: flex-start; gap: 1rem;
padding: .9rem 0;
}
.sm-sdv-side-row:last-child { padding-bottom: 0; }
.sm-sdv-side-icon {
flex-shrink: 0; width: 42px; height: 42px;
background: #D42E5A;
color: #fff; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
}
.sm-sdv-side-row-content { flex: 1; }
.sm-sdv-side-row-label {
font-family: var(--font-brand); font-size: .62rem; font-weight: 800;
letter-spacing: .1em; text-transform: uppercase;
color: #5a6a77; margin: 0 0 .2rem;
}
.sm-sdv-side-row-val {
font-family: var(--font-brand); font-size: 1rem; font-weight: 700;
color: #1a2332; margin: 0;
}
.sm-sdv-side-row-sub {
font-size: .8rem; color: #4a5a6b; margin: .15rem 0 0;
}
.sm-sdv-maps-link {
display: inline-flex; align-items: center; gap: .3rem;
font-size: .78rem; font-weight: 700; color: var(--crimson);
text-decoration: none; margin-top: .4rem;
}
.sm-sdv-maps-link:hover { text-decoration: underline; }
.sm-sdv-tel-link {
font-family: var(--font-brand); font-weight: 700;
color: #005288; text-decoration: none;
font-size: 1rem;
}
.sm-sdv-tel-link:hover { text-decoration: underline; }
.sm-sdv-side-card-foot { padding: 1rem 1.4rem 1.4rem; }
.sm-sdv-billet-btn {
display: flex; align-items: center; justify-content: center; gap: .55rem;
background: #D42E5A;
color: #fff;
font-family: var(--font-brand); font-size: .95rem; font-weight: 800;
padding: 1rem 1.3rem; border-radius: 14px;
text-decoration: none;
transition: background .2s, transform .2s;
}
.sm-sdv-billet-btn:hover { background: #b8203f; color: #fff; transform: translateY(-2px); }
/* ── Sidebar share ───────────────────────────────────────────────── */
.sm-sdv-side-share {
background: #fff;
border: 1px solid rgba(0,82,136,.1);
border-radius: 18px;
padding: 1.2rem 1.35rem;
box-shadow: 0 4px 16px rgba(0,82,136,.07);
}
.sm-sdv-side-share-label {
font-family: var(--font-brand); font-size: .68rem; font-weight: 800;
letter-spacing: .1em; text-transform: uppercase;
color: #5a6a77; margin: 0 0 .75rem;
display: flex; align-items: center; gap: .4rem;
}
.sm-sdv-side-share-label::before {
content: ''; display: block;
width: 18px; height: 2px;
background: var(--crimson); border-radius: 2px;
}
/* ── Boutons partage ─────────────────────────────────────────────── */
.share-btn {
display: inline-flex; align-items: center; gap: .4rem;
padding: .42rem 1rem;
font-family: var(--font-brand); font-size: .8rem; font-weight: 700;
border-radius: 20px;
border: 1.5px solid #d1dae4;
color: #4a5568;
background: #fff;
cursor: pointer;
transition: border-color .18s, color .18s, background .18s;
text-decoration: none;
line-height: 1;
}
.share-btn:hover { border-color: #005288; color: #005288; background: #EEF5FB; }
.share-btn.copied { border-color: var(--crimson); color: var(--crimson); background: #fff0f3; }
/* ── Partenaires du salon ────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════
SECTION PARTENAIRES — lumineux bleu/rose
══════════════════════════════════════════════════════ */
.sm-ptrs {
position: relative;
padding: 3rem 0 3.5rem;
overflow: hidden;
}
/* Éléments décoratifs désactivés */
.sm-ptrs-bg { display: none; }
.sm-ptrs-bg-orb { display: none; }
.sm-ptrs-bg-grid { display: none; }
.sm-ptrs-inner { position: relative; }
/* En-tête — même style que les sections sm-pres-* */
.sm-ptrs-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.25rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.sm-ptrs-head-right {
display: flex;
align-items: center;
gap: .75rem;
flex-wrap: wrap;
}
.sm-ptrs-badge {
display: block;
font-family: var(--font-brand);
font-size: .72rem; font-weight: 800;
letter-spacing: .1em; text-transform: uppercase;
color: var(--crimson); margin: 0 0 .4rem;
}
.sm-ptrs-badge-dot { display: none; }
@keyframes smPtrsPulse {}
.sm-ptrs-title {
font-family: var(--font-brand);
font-size: clamp(1.5rem, 2.5vw, 2.1rem);
font-weight: 800;
color: #005288;
margin: 0 0 .3rem;
line-height: 1.2;
letter-spacing: 0;
}
.sm-ptrs-title em {
font-style: normal;
color: var(--crimson);
-webkit-text-fill-color: unset;
background: none;
}
.sm-ptrs-subtitle {
font-family: var(--font-brand);
color: #6b7fa0;
font-size: .88rem;
margin: 0;
}
/* Flèches */
.sm-ptrs-arrows { display: flex; gap: .5rem; }
.sm-ptrs-arrow {
width: 44px; height: 44px;
border-radius: 50%;
border: 1.5px solid rgba(0,82,136,.2);
background: #fff;
color: var(--navy);
font-size: 1rem;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,82,136,.08);
transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.sm-ptrs-arrow:hover:not(:disabled) {
background: var(--navy);
border-color: var(--navy);
color: #fff;
transform: scale(1.08);
box-shadow: 0 6px 18px rgba(0,82,136,.25);
}
.sm-ptrs-arrow:disabled { opacity: .3; cursor: default; }
/* CTA Devenir partenaire */
.sm-ptrs-cta {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem 1.2rem;
border-radius: 24px;
background: var(--crimson);
color: #fff;
font-family: var(--font-brand);
font-size: .8rem;
font-weight: 700;
text-decoration: none;
letter-spacing: .02em;
transition: background .2s, transform .2s;
white-space: nowrap;
}
.sm-ptrs-cta:hover { background: #b8203f; transform: translateY(-1px); color: #fff; }
.sm-ptrs-cta i { font-size: .72rem; }
/* Viewport + track */
.sm-ptrs-viewport { overflow: hidden; }
.sm-ptrs-track {
display: flex;
gap: 3.5rem;
transition: transform .45s cubic-bezier(.4,0,.2,1);
will-change: transform;
}
.sm-ptrs-track--center {
justify-content: center;
flex-wrap: wrap;
}
/* Partenaire — sans carte, logo nu + étiquette */
.sm-ptrs-card {
flex: 0 0 auto;
width: 200px;
position: relative;
background: none;
border: none;
box-shadow: none;
border-radius: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: .9rem;
text-decoration: none;
cursor: default;
opacity: 0;
transform: translateY(16px);
transition:
opacity .45s calc(var(--i, 0) * .07s) ease,
transform .45s calc(var(--i, 0) * .07s) ease;
}
a.sm-ptrs-card { cursor: pointer; }
.sm-ptrs-card.sm-ptrs--visible { opacity: 1; transform: translateY(0); }
a.sm-ptrs-card:hover { transform: translateY(-4px); }
/* Shine désactivé */
.sm-ptrs-card-shine { display: none; }
/* Logo rond, grand */
.sm-ptrs-logo-ring {
width: 180px; height: 180px;
border-radius: 50%;
padding: 4px;
background: #005288;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.sm-ptrs-logo-wrap {
width: 100%; height: 100%;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sm-ptrs-logo-img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.sm-ptrs-logo-initials {
font-size: 2.8rem;
font-weight: 900;
color: var(--navy);
line-height: 1;
}
/* Étiquette nom — rectangle blanc, texte rose */
.sm-ptrs-name {
font-family: var(--font-brand);
font-size: 1.15rem;
font-weight: 800;
color: var(--crimson);
text-align: center;
margin: 0;
line-height: 1.2;
background: #fff;
border-radius: 10px;
padding: .5rem 1.2rem;
box-shadow: 0 2px 10px rgba(0,0,0,.1);
white-space: nowrap;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.sm-ptrs-sub { display: none; }
.sm-ptrs-visit {
display: inline-flex;
align-items: center;
gap: .3rem;
font-family: var(--font-brand);
font-size: .7rem;
font-weight: 700;
color: var(--navy);
margin-top: -.2rem;
opacity: 0;
transform: translateY(4px);
transition: opacity .2s, transform .2s;
}
a.sm-ptrs-card:hover .sm-ptrs-visit { opacity: 1; transform: translateY(0); }
@media (max-width: 767px) {
.sm-ptrs { padding: 2.5rem 0 3rem; }
.sm-ptrs-card { width: 110px; gap: .65rem; }
.sm-ptrs-logo-ring { width: 100px; height: 100px; }
.sm-ptrs-name { font-size: .85rem; padding: .3rem .7rem; max-width: 120px; }
.sm-ptrs-head { margin-bottom: 1.5rem; }
.sm-ptrs-title { font-size: 1.4rem; }
.sm-ptrs-track { gap: 1.5rem; }
}
/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
.sm-sdv-hero { padding: 2.5rem 0 3rem; }
.sm-sdv-hero-title { font-size: clamp(1.4rem, 5vw, 2rem); }
.sm-sdv-kpis { grid-template-columns: 1fr 1fr; }
.sm-sdv-foot { flex-direction: column; align-items: flex-start; }
.sm-sdv-share { margin-left: 0; }
}
@media (max-width: 575.98px) {
.sm-sdv-kpis { grid-template-columns: 1fr; }
.sm-sdv-programme-body { padding: 1.5rem 1.25rem 2rem; }
.sm-sdv-programme-header { padding: 1.2rem 1.25rem; }
.sm-sdv-partenaire-card { min-width: 90px; padding: .6rem 1rem; }
}
/* ── Bannières publicitaires ── */
.sm-pw-banner {
position: relative;
border-radius: var(--radius, 12px);
overflow: hidden;
background: var(--gray-bg, #f5f7fa);
}
.sm-pw-img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.sm-pw-link { display: block; }
.sm-pw-link:hover .sm-pw-img { opacity: .92; }
.sm-pw-label {
position: absolute;
bottom: 6px;
right: 8px;
font-size: .65rem;
color: rgba(0,0,0,.75);
background: rgba(255,255,255,.9);
padding: 1px 5px;
border-radius: 4px;
pointer-events: none;
}
.sm-pw-caption {
font-size: .8rem;
color: var(--gray-text, #64748b);
padding: .4rem .6rem;
margin: 0;
}
/* Bannière haut de page (partenaires_top, salons_top, etc.) */
.sm-pw-top {
margin-bottom: 1.5rem;
border-radius: var(--radius, 12px);
overflow: hidden;
}
/* Visuel intercalé dans les listes */
.sm-pw-list {
grid-column: 1 / -1;
margin: .5rem 0 1rem;
border-radius: var(--radius, 12px);
overflow: hidden;
background: var(--gray-bg, #f8fafc);
}
/* ═══════════════════════════════════════════════════════════════════
PAGE ARTICLE / INTERVIEW — DÉTAIL
═══════════════════════════════════════════════════════════════════ */
/* ── Breadcrumb ─────────────────────────────────────────────────── */
.sm-detail-breadcrumb {
background: #F1F6FD;
padding: .75rem 0;
}
.sm-detail-breadcrumb .breadcrumb {
--bs-breadcrumb-divider: '';
margin-bottom: 0;
align-items: center;
}
.sm-detail-breadcrumb .breadcrumb-item,
.sm-detail-breadcrumb .breadcrumb-item a {
font-family: var(--font-brand);
font-size: 18px;
font-weight: 400;
color: var(--navy);
text-decoration: none;
line-height: 1;
}
.sm-detail-breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }
.sm-detail-breadcrumb .breadcrumb-item.active {
font-weight: 600;
color: var(--navy);
}
/* Chevron custom — override Bootstrap default */
.sm-detail-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-right: 2px solid var(--navy);
border-top: 2px solid var(--navy);
transform: rotate(45deg);
margin: 0 .5rem .1rem;
padding: 0;
float: none;
vertical-align: middle;
opacity: .7;
}
/* ── En-tête centré ─────────────────────────────────────────────── */
.sm-detail-header {
background: #F1F6FD;
padding: 3.75rem 0 clamp(180px, 22vw, 300px); /* extra bottom = image overlap zone */
text-align: center;
position: relative;
}
.sm-detail-header::after {
content: '';
position: absolute;
inset: 0;
background: url('../img/background/header_background.png') center/cover no-repeat;
opacity: .15;
z-index: 1;
pointer-events: none;
}
.sm-detail-header .sm-detail-header-inner {
position: relative;
z-index: 2;
}
.sm-detail-header-inner { max-width: 900px; margin-inline: auto; }
/* No image: revert to normal bottom padding */
.sm-detail-header--no-img { padding-bottom: 2.5rem; }
.sm-detail-category {
font-family: var(--font-brand);
font-size: 22px;
font-weight: 500;
letter-spacing: 0;
text-transform: uppercase;
color: var(--crimson);
margin-bottom: 1rem;
}
.sm-detail-h1 {
font-family: var(--font-brand);
font-size: clamp(1.8rem, 4vw, 48px);
font-weight: 700;
color: var(--navy);
line-height: 1.25;
margin-bottom: 2rem;
text-align: center;
}
/* Méta 3 colonnes */
.sm-detail-meta {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0;
}
.sm-detail-meta-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 2rem;
}
.sm-detail-meta-label {
font-family: var(--font-brand);
font-size: 20px;
font-weight: 700;
line-height: 28px;
color: var(--navy);
}
.sm-detail-meta-sub {
font-family: var(--font-brand);
font-size: 19px;
font-weight: 400;
line-height: 28px;
color: var(--navy);
}
.sm-detail-meta-sep {
width: 1px;
height: 3rem;
background: var(--gray-line, #e2e8f0);
flex-shrink: 0;
}
/* ── Image à la une ─────────────────────────────────────────────── */
.sm-detail-hero-wrap {
/* pulls image UP into the blue header band */
margin-top: clamp(-180px, -22vw, -300px);
padding: 0 0 3rem;
position: relative;
z-index: 1;
}
.sm-detail-hero-img {
/* Héro article détail : variante -md (600×450, ratio 4:3) */
display: block;
width: 100%;
max-width: 600px;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 24px;
margin: 0 auto;
box-shadow: 0 8px 40px rgba(0,82,136,.15);
}
/* ── Corps ──────────────────────────────────────────────────────── */
.sm-detail-body { padding-bottom: 0; }
/* ── Chapeau (intro de l'article) ───────────────────────────────── */
.article-chapeau {
font-family: var(--font-brand);
font-size: 19px;
font-weight: 400;
line-height: 28px;
color: #1E3748;
border-left: 6px solid var(--crimson);
padding: 0 0 0 24px;
margin-bottom: 2rem;
}
/* ── Tags / mots-clés ───────────────────────────────────────────── */
.sm-article-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 2rem;
}
.sm-article-tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
background: #F1F6FD;
border-radius: 999px;
font-family: 'Lexend Deca', var(--font-brand);
font-size: 19px;
font-weight: 500;
line-height: 28px;
color: #005288;
text-decoration: none;
transition: background var(--transition);
}
.sm-article-tag:hover { background: #dce9f7; color: #005288; }
/* ── Contenu Quill ──────────────────────────────────────────────── */
.sm-article-content {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 19px;
font-weight: 400;
font-style: normal;
line-height: 28px;
letter-spacing: 0;
color: #1E3748;
}
.sm-article-content p {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 19px;
font-weight: 400;
font-style: normal;
line-height: 28px;
letter-spacing: 0;
color: #1E3748;
margin-bottom: 1.25rem;
}
/* h2 — titre de section avec barre crimson */
main .sm-article-content h2,
article .sm-article-content h2,
.col-lg-8 .sm-article-content h2,
.sm-article-content h2 {
font-family: 'Lexend Deca', sans-serif !important;
font-size: 36px !important;
font-weight: 700 !important;
font-style: normal !important;
line-height: 1 !important;
letter-spacing: 0 !important;
color: #005288 !important;
margin-top: 2.5rem !important;
margin-bottom: 0 !important;
padding: 0 !important;
border: none !important;
}
main .sm-article-content h2::after,
article .sm-article-content h2::after,
.col-lg-8 .sm-article-content h2::after,
.sm-article-content h2::after {
content: '' !important;
display: block !important;
width: 48px !important;
height: 8px !important;
background: #D42E5A !important;
border-radius: 0 !important;
margin-top: 12px !important;
margin-bottom: 1.5rem !important;
}
/* h3 — sous-titre bleu sans trait */
main .sm-article-content h3,
article .sm-article-content h3,
.col-lg-8 .sm-article-content h3,
.sm-article-content h3 {
font-family: 'Lexend Deca', sans-serif !important;
font-size: 24px !important;
font-weight: 700 !important;
font-style: normal !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
color: #005288 !important;
margin-top: 2rem !important;
margin-bottom: 1rem !important;
padding: 0 !important;
border: none !important;
}
/* Titres de section écrits comme ...
par l'éditeur */
.sm-article-content .sm-article-section-title {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: #005288;
margin-top: 2.25rem;
margin-bottom: 1rem;
padding-bottom: 0;
}
.sm-article-content .sm-article-section-title strong {
font-weight: 700;
color: #005288;
}
/* strong / em — inline */
.sm-article-content strong,
.sm-article-content b { font-weight: 700; color: #1E3748; }
.sm-article-content em { font-style: italic; }
/* Gras + italique = étiquette/label crimson MAJUSCULES */
.sm-article-content strong em,
.sm-article-content em strong,
.sm-article-content b em,
.sm-article-content em b {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 19px;
font-weight: 700;
font-style: normal;
line-height: 28px;
letter-spacing: 0;
color: #D42E5A;
text-transform: uppercase;
}
/* ── Callout box : label crimson + liste à puces sur fond bleu clair ── */
.sm-article-content .sm-article-callout {
display: flex;
flex-direction: column;
gap: 10px;
padding: 24px;
background: #F1F6FD;
border-radius: 24px;
margin: 1.75rem 0;
}
/* Le du label dans le callout (contient strong>em) */
.sm-article-content .sm-article-callout > p {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 19px;
font-weight: 700;
font-style: normal;
line-height: 28px;
color: #D42E5A;
margin: 0;
text-transform: uppercase;
}
.sm-article-content .sm-article-callout > p strong em,
.sm-article-content .sm-article-callout > p em strong,
.sm-article-content .sm-article-callout > p strong,
.sm-article-content .sm-article-callout > p em {
font-size: 19px;
font-weight: 700;
font-style: normal;
line-height: 28px;
color: #D42E5A;
text-transform: uppercase;
}
.sm-article-content .sm-article-callout ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.sm-article-content .sm-article-callout ul li {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 19px;
font-weight: 400;
font-style: normal;
line-height: 30px;
color: #1E3748;
padding-left: 1.5rem;
position: relative;
}
.sm-article-content .sm-article-callout ul li::before {
content: '▪';
position: absolute;
left: 0;
color: #1E3748;
font-size: .85rem;
line-height: 30px;
}
/* Liens */
.sm-article-content a { color: var(--navy); font-weight: 500; text-underline-offset: 3px; }
.sm-article-content a:hover { color: var(--crimson); }
/* ── Blockquote — citation avec barre gauche crimson ── */
.sm-article-content blockquote {
margin: 1.5rem 0;
padding: 0 0 0 24px;
border-left: 6px solid #D42E5A;
background: transparent;
border-radius: 0;
font-style: normal;
}
/* Blockquotes consécutifs = un seul bloc continu sans gap */
.sm-article-content blockquote + blockquote {
margin-top: 0;
border-top: none;
}
/* Le / en tête = étiquette MAJUSCULES crimson */
.sm-article-content blockquote > p:first-child > strong em,
.sm-article-content blockquote > p:first-child > em strong,
.sm-article-content blockquote > p:first-child > strong,
.sm-article-content blockquote > strong:first-child {
display: block;
font-family: 'Lexend Deca', var(--font-brand);
font-size: 19px;
font-weight: 700;
font-style: normal;
line-height: 28px;
color: #D42E5A;
text-transform: uppercase;
margin-bottom: 4px;
}
.sm-article-content blockquote p {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 19px;
font-weight: 400;
line-height: 28px;
color: #1E3748;
margin-bottom: 0;
}
/* ── Callout (bloc encadré bleu) ── */
.sm-article-content .ql-callout {
margin: 1.5rem 0;
padding: 24px;
background: #F1F6FD;
border-radius: 24px;
color: #1E3748;
}
/* Premier ou = titre du callout */
.sm-article-content .ql-callout > p:first-child > strong,
.sm-article-content .ql-callout > strong:first-child {
display: block;
font-family: var(--font-brand);
font-size: 19px;
font-weight: 700;
line-height: 28px;
color: var(--crimson);
margin-bottom: 10px;
}
.sm-article-content .ql-callout p {
font-family: var(--font-brand);
font-size: 19px;
font-weight: 400;
line-height: 30px;
color: #1E3748;
margin-bottom: 0;
}
/* Listes dans callout */
.sm-article-content .ql-callout ul,
.sm-article-content .ql-callout ol { margin-bottom: 0; padding-left: 0; }
.sm-article-content .ql-callout ul li,
.sm-article-content .ql-callout ol li {
font-family: var(--font-brand);
font-size: 19px;
font-weight: 400;
line-height: 30px;
color: #1E3748;
list-style: none;
padding-left: 1.2rem;
margin-bottom: .25rem;
position: relative;
}
.sm-article-content .ql-callout ul li::before {
content: '';
position: absolute;
left: 0; top: .55em;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--crimson);
}
/* ── Listes standard ── */
.sm-article-content ul,
.sm-article-content ol {
padding-left: 0;
margin-bottom: 1.25rem;
}
.sm-article-content ul li {
list-style: none;
position: relative;
padding-left: 1.25rem;
margin-bottom: .35rem;
font-family: var(--font-brand);
font-size: 19px;
font-weight: 400;
line-height: 30px;
color: #1E3748;
}
.sm-article-content ul li::before {
content: '';
position: absolute;
left: 0; top: .58em;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--crimson);
}
.sm-article-content ol { padding-left: 1.4rem; }
.sm-article-content ol li {
margin-bottom: .35rem;
font-family: var(--font-brand);
font-size: 19px;
line-height: 30px;
color: #1E3748;
}
/* ── Images dans le contenu ── */
.sm-article-content img {
width: 100%;
border-radius: 16px;
margin: 1rem 0;
}
/* ── Bloc auteur ─────────────────────────────────────────────────── */
.sm-detail-author {
display: flex;
flex-direction: column;
gap: 24px;
padding-top: 32px;
}
.sm-detail-author-label {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 22px;
font-weight: 700;
line-height: 28px;
color: #005288;
margin: 0;
}
.sm-detail-author-row {
display: flex;
align-items: flex-start;
gap: 8px;
}
.sm-detail-author-avatar {
flex-shrink: 0;
width: 64px; height: 64px;
border-radius: 50%;
background: #F1F6FD;
color: #005288;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Lexend Deca', var(--font-brand);
font-weight: 700;
font-size: 1.2rem;
}
.sm-detail-author-body { flex: 1; }
.sm-detail-author-name {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 20px;
font-weight: 700;
line-height: 25px;
color: #005288;
margin: 0 0 8px;
display: flex;
align-items: center;
gap: 8px;
}
.sm-detail-author-linkedin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
background: #0A66C2;
color: #fff;
font-size: 15px;
flex-shrink: 0;
transition: opacity .2s;
}
.sm-detail-author-linkedin:hover { opacity: .8; color: #fff; }
.sm-detail-author-role {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 19px;
font-weight: 400;
line-height: 28px;
color: #1E3748;
margin: 0;
}
/* ── Partage ─────────────────────────────────────────────────────── */
.sm-detail-share {
display: flex;
flex-direction: column;
gap: 12px;
border-top: 1px solid #797676;
padding-top: 32px;
margin-top: 2rem;
}
.sm-detail-share-label {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 22px;
font-weight: 700;
line-height: 28px;
color: #005288;
margin: 0;
}
.sm-detail-share .d-flex { flex-wrap: wrap; gap: 12px; }
.sm-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
padding: 8px 16px;
font-family: 'Lexend Deca', var(--font-brand);
font-size: 20px;
font-weight: 600;
line-height: 28px;
border-radius: 999px;
color: #fff;
text-decoration: none;
transition: opacity .18s ease, transform .18s ease;
white-space: nowrap;
}
.sm-share-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }
.sm-share-fb { background: #0072BC; }
.sm-share-tw { background: #0F1419; }
.sm-share-pi { background: #C9353D; }
.sm-share-li { background: #006490; }
.sm-share-x-icon { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
/* ── Sidebar ─────────────────────────────────────────────────────── */
/* Titre de section sidebar + trait crimson */
.sm-sidebar-card {
display: flex;
flex-direction: column;
gap: 32px;
background: transparent;
border: none;
padding: 0;
}
.sm-sidebar-section-title {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 24px;
font-weight: 600;
line-height: 30px;
color: #005288;
margin: 0;
padding-bottom: 6px;
border-bottom: 4px solid #D42E5A;
}
/* Cards articles récents */
.sm-sidebar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 32px; }
.sm-sidebar-item {
background: #fff;
border: 1px solid #ECECEC;
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.15);
border-radius: 24px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 24px;
}
.sm-sidebar-thumb {
display: block;
width: 100%;
max-width: 300px;
aspect-ratio: 4 / 3;
border-radius: 16px;
overflow: hidden;
background: #F1F6FD;
flex-shrink: 0;
margin: 0 auto;
}
.sm-sidebar-thumb img { width: 100%; height: auto; display: block; transition: transform .3s ease; }
.sm-sidebar-thumb:hover img { transform: scale(1.04); }
.sm-sidebar-thumb-ph {
display: flex;
align-items: center;
justify-content: center;
color: #837E7E;
font-size: 2rem;
text-decoration: none;
}
.sm-sidebar-item-body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.sm-sidebar-cat {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 19px;
font-weight: 500;
line-height: 24px;
color: #D42E5A;
text-transform: uppercase;
}
.sm-sidebar-item-title {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 20px;
font-weight: 700;
line-height: 25px;
color: #005288;
text-decoration: none;
display: block;
}
.sm-sidebar-item-title:hover { color: #D42E5A; }
.sm-sidebar-item-date {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 18px;
font-weight: 400;
line-height: 22px;
color: #5f5a5a;
}
.sm-sidebar-item-date i { margin-right: .3rem; }
.sm-sidebar-lireplus {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 19px;
font-weight: 700;
line-height: 24px;
color: #005288;
text-decoration: underline;
text-underline-offset: 3px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.sm-sidebar-lireplus i { font-size: 1.1rem; color: #005288; }
.sm-sidebar-lireplus:hover { color: #D42E5A; }
.sm-sidebar-lireplus:hover i { color: #D42E5A; }
.sm-sidebar-more-btn {
display: block;
margin-top: .5rem;
width: 100%;
padding: .65rem 1rem;
text-align: center;
font-family: 'Lexend Deca', var(--font-brand);
font-size: 18px;
font-weight: 600;
color: #005288;
border: 2px solid #005288;
border-radius: 999px;
text-decoration: none;
transition: background .18s ease, color .18s ease;
}
.sm-sidebar-more-btn:hover { background: #005288; color: #fff; }
/* PDF card */
.sm-sidebar-card-title {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 20px;
font-weight: 700;
line-height: 25px;
color: #005288;
margin: 0 0 8px;
}
.sm-sidebar-card-sub {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 18px;
font-weight: 400;
line-height: 28px;
color: #1E3748;
margin-bottom: 1rem;
}
.sm-sidebar-pdf-icon {
flex-shrink: 0;
width: 48px; height: 48px;
border-radius: 50%;
background: #fff2ef;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
color: #D42E5A;
}
/* Bloc pub */
.sm-sidebar-ad { display: flex; flex-direction: column; gap: 10px; }
.sm-sidebar-ad-label {
font-family: 'Lexend Deca', var(--font-brand);
font-size: 18px;
font-weight: 400;
line-height: 22px;
color: #837E7E;
}
.sm-sidebar-ad-placeholder {
width: 100%;
min-height: 600px;
background: #DDDDDD;
border: 3px dashed #AEAEAE;
border-radius: 0;
}
/* ── Newsletter (page article) ──────────────────────────────────── */
.sm-art-newsletter {
margin-top: 4rem;
background: linear-gradient(135deg, var(--navy, #1a2e4a) 0%, #243d5e 100%);
padding: 3.5rem 0;
position: relative;
overflow: hidden;
}
.sm-art-newsletter::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 90% 20%, rgba(255,255,255,.05) 0%, transparent 35%),
radial-gradient(circle at 10% 80%, rgba(255,255,255,.04) 0%, transparent 30%);
pointer-events: none;
}
.sm-art-newsletter-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 3rem;
align-items: center;
}
.sm-art-newsletter-eyebrow {
font-family: var(--font-h, 'Montserrat', sans-serif);
font-size: .68rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--coral, #e8604a);
margin-bottom: .5rem;
}
.sm-art-newsletter-title {
font-family: var(--font-h, 'Montserrat', sans-serif);
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
font-weight: 800;
color: #fff;
line-height: 1.2;
margin-bottom: .65rem;
}
.sm-art-newsletter-sub { font-size: .85rem; color: rgba(255,255,255,.7); line-height: 1.6; margin: 0; }
.sm-art-newsletter-form { display: flex; flex-direction: column; gap: .9rem; }
.sm-art-newsletter-field {
display: flex;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.sm-art-newsletter-input {
flex: 1;
border: none;
padding: .85rem 1.1rem;
font-size: .88rem;
color: var(--text, #1e2937);
outline: none;
background: transparent;
}
.sm-art-newsletter-input::placeholder { color: var(--gray-mute, #94a3b8); }
.sm-art-newsletter-btn {
background: var(--coral, #e8604a);
color: #fff;
border: none;
padding: .85rem 1.6rem;
font-family: var(--font-h, 'Montserrat', sans-serif);
font-weight: 700;
font-size: .85rem;
cursor: pointer;
white-space: nowrap;
transition: background .18s ease;
}
.sm-art-newsletter-btn:hover { background: #d44f3a; }
.sm-art-newsletter-check {
display: flex;
align-items: flex-start;
gap: .55rem;
font-size: .72rem;
color: rgba(255,255,255,.7);
line-height: 1.55;
cursor: pointer;
}
.sm-art-newsletter-check input { margin-top: .15rem; accent-color: var(--coral, #e8604a); flex-shrink: 0; }
.sm-art-newsletter-check a { color: #fff; text-decoration: underline; }
/* ── Responsive article-détail ──────────────────────────────────── */
@media (max-width: 991.98px) {
.sm-art-newsletter-inner { grid-template-columns: 1fr; gap: 2rem; }
.sm-detail-meta-item { padding: 0 1rem; }
.sm-detail-meta-label { font-size: 16px; }
.sm-detail-meta-sub { font-size: 15px; }
.sm-detail-category { font-size: 18px; }
}
@media (max-width: 575.98px) {
.sm-detail-header { padding: 2rem 0 1.5rem !important; } /* cancel overlap on mobile */
.sm-detail-hero-wrap { margin-top: 0 !important; }
.sm-detail-meta { flex-direction: column; gap: .6rem; }
.sm-detail-meta-sep { display: none; }
.sm-detail-hero-img { border-radius: 12px; }
.sm-share-btn { font-size: .76rem; padding: .45rem .85rem; }
.sm-art-newsletter-field { flex-direction: column; }
.sm-art-newsletter-btn { width: 100%; text-align: center; }
}
/* ════════════════════════════════════════════════════════════════════
SECTION MAGAZINE — Annuaire
════════════════════════════════════════════════════════════════════ */
/* ══ Section magazine — fidèle au Figma ══════════════════════════════
Structure : .sm-mag-section > .sm-mag-banner > [cover] + .sm-mag-row
Bannière 1260px × 253px, orange gradient, border-radius 24px
══════════════════════════════════════════════════════════════════ */
/* Wrapper page — centré, fond blanc, padding-top pour espacer du header */
.sm-mag-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 1rem 0;
background: #fff;
}
/* Bannière orange arrondie — max 1260px */
.sm-mag-banner {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1260px;
min-height: 253px;
padding: 40px 10px;
gap: 10px;
background: linear-gradient(270deg, #E8884E 0%, #E7996A 50%, #E8884E 100%);
border-radius: 24px;
}
/* Couverture — absolue, exactement centrée horizontalement, top 14px */
.sm-mag-banner .sm-mag-cover-wrap {
position: absolute;
left: 50%;
top: 40px;
transform: translateX(-50%) rotate(6.23deg);
width: clamp(140px, 17.6vw, 222px);
pointer-events: none;
z-index: 0;
filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.75));
}
.sm-mag-banner .sm-mag-cover-img { width: 100%; height: auto; display: block; }
/* Ligne de contenu (Frame 126) — z-index 1, padding 0 64px */
.sm-mag-row {
position: relative;
z-index: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 clamp(1rem, 5.1vw, 64px);
width: 100%;
min-height: 173px;
}
/* Colonne gauche (Frame 128) — 527px, gap 16px */
.sm-mag-left {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
width: clamp(180px, 41.8vw, 527px);
flex-shrink: 0;
}
/* Bloc titre — les lignes sont display:block */
.sm-mag-title { margin: 0; }
.sm-mag-title-line1,
.sm-mag-title-line2,
.sm-mag-title-line3 { display: block; }
/* "Le magazine" — Lexend Deca 600, 28px/28px */
.sm-mag-title-line1 {
font-family: 'Lexend Deca', sans-serif;
font-weight: 600;
font-size: clamp(0.9rem, 1.85vw, 1.75rem);
line-height: 1.0;
color: #FFFFFF;
}
/* "Seniors mag" — deux poids différents sur la même ligne */
.sm-mag-title-line2 { font-size: 0; } /* annule l'espace inter-inline */
/* "Seniors" — Lexend Deca 800 ExtraBold, 56px/56px */
.sm-mag-seniors {
font-family: 'Lexend Deca', sans-serif;
font-weight: 800;
font-size: clamp(1.6rem, 3.7vw, 3.5rem);
line-height: 1.0;
color: #FFFFFF;
}
/* " mag" — Lexend Deca 300 Light, 56px/56px */
.sm-mag-mag {
font-family: 'Lexend Deca', sans-serif;
font-weight: 300;
font-size: clamp(1.6rem, 3.7vw, 3.5rem);
line-height: 1.0;
color: #FFFFFF;
}
/* "à fond la vie !" — Merriweather Sans 400 Italic, 24px/36px */
.sm-mag-title-line3 {
font-family: 'Merriweather Sans', serif;
font-weight: 400;
font-style: italic;
font-size: clamp(0.85rem, 1.59vw, 1.5rem);
line-height: clamp(1.1rem, 2.38vw, 2.25rem);
color: #FFFFFF;
}
/* Badge wrapper — absolu, décalé vers la gauche pour empiéter sur la couverture */
.sm-mag-badge-wrap {
position: absolute;
bottom: 20px;
left: calc(50% - 190px);
transform: translateX(-50%);
z-index: 2;
display: flex;
justify-content: center;
}
/* Pill "Et c'est gratuit !" (Frame 130) — bg blanc, texte orange 28px/35px 700 */
.sm-mag-badge {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 6px 16px;
height: clamp(34px, 3.1vw, 47px);
background: #FFFFFF;
border-radius: 999px;
font-family: 'Lexend Deca', sans-serif;
font-weight: 700;
font-size: clamp(0.9rem, 1.85vw, 1.75rem);
line-height: clamp(1.1rem, 2.31vw, 2.2rem);
color: #C4622A;
white-space: nowrap;
}
/* Colonne droite (Frame 127) — 452px, gap 24px, align-end */
.sm-mag-right {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 24px;
width: clamp(150px, 35.9vw, 452px);
flex-shrink: 0;
}
/* "Découvrez les informations du mois" — Lexend Deca 600, 36px/40px, align right */
.sm-mag-subtitle {
font-family: 'Lexend Deca', sans-serif;
font-weight: 600;
font-size: clamp(1.1rem, 2.38vw, 2.25rem);
line-height: clamp(1.3rem, 2.65vw, 2.5rem);
text-align: right;
color: #FFFFFF;
margin: 0;
}
/* Bouton rose (279×49, padding 12px 8px 12px 20px) */
.sm-mag-cta {
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px 8px 12px 20px;
gap: 10px;
height: 49px;
background: #D42E5A;
border-radius: 999px;
text-decoration: none;
transition: opacity .2s;
flex-shrink: 0;
}
.sm-mag-cta:hover { opacity: .88; }
/* Texte bouton — Lexend Deca 600, 24px/30px */
.sm-mag-cta-label {
font-family: 'Lexend Deca', sans-serif;
font-weight: 600;
font-size: clamp(0.85rem, 1.59vw, 1.5rem);
line-height: clamp(1rem, 1.98vw, 1.875rem);
color: #FFFFFF;
white-space: nowrap;
}
/* Icône cercle blanc (40×40) */
.sm-mag-cta-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
}
/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
.sm-mag-banner .sm-mag-cover-wrap { display: none; }
.sm-mag-badge-wrap { position: static; transform: none; margin-top: 12px; }
.sm-mag-row {
flex-direction: column;
align-items: flex-start;
gap: 2rem;
padding: 0 24px;
min-height: unset;
}
.sm-mag-left, .sm-mag-right { width: 100%; }
.sm-mag-right { align-items: flex-start; }
.sm-mag-subtitle { text-align: left; }
}
@media (max-width: 575.98px) {
.sm-mag-section { padding-top: 24px; }
.sm-mag-banner { border-radius: 16px; min-height: unset; }
.sm-mag-badge { font-size: 0.9rem; }
.sm-mag-cta { height: 44px; }
.sm-mag-cta-label { font-size: 0.875rem; }
}
/* ══════════════════════════════════════════════════════════════════
Article cards — liste actualités / interviews (style annuaire)
══════════════════════════════════════════════════════════════════ */
.sm-acard-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.sm-acard {
display: flex;
flex-direction: row;
background: #fff;
border: 1px solid #ECECEC;
box-shadow: 0 2px 16px rgba(0,0,0,.12);
border-radius: 16px;
overflow: hidden;
transition: box-shadow .2s, transform .2s;
}
.sm-acard:hover {
box-shadow: 0 6px 28px rgba(0,0,0,.18);
transform: translateY(-3px);
}
.sm-acard--interview {
border-top: 4px solid #005288;
}
/* Image à gauche */
.sm-acard-img-wrap {
flex-shrink: 0;
width: 260px;
align-self: stretch;
overflow: hidden;
display: block;
background: #f0f4f8;
position: relative;
min-height: 160px;
}
.sm-acard-img-wrap img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .4s ease;
}
.sm-acard:hover .sm-acard-img-wrap img {
transform: scale(1.05);
}
.sm-acard-img-ph {
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: #c0c8d0;
}
/* Corps texte */
.sm-acard-body {
flex: 1 1 auto;
padding: 16px 22px;
display: flex;
flex-direction: column;
gap: 7px;
}
.sm-acard-badges {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.sm-acard-cat {
display: inline-flex;
align-items: center;
padding: .25rem .75rem;
border-radius: 999px;
background: #EDF4FA;
color: #005288;
font-family: var(--font-brand);
font-size: .78rem;
font-weight: 700;
letter-spacing: .4px;
text-transform: uppercase;
}
.sm-acard-itv-badge {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .25rem .75rem;
border-radius: 999px;
background: #005288;
color: #fff;
font-family: var(--font-brand);
font-size: .78rem;
font-weight: 700;
letter-spacing: .4px;
}
.sm-acard-pub-badge {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .2rem .65rem;
border-radius: 999px;
background: #fff3cd;
color: #856404;
border: 1px solid #ffc107;
font-family: var(--font-brand);
font-size: .72rem;
font-weight: 700;
letter-spacing: .3px;
}
.sm-acard--pub { border-left: 3px solid #ffc107; }
.sm-actu-card--pub { border-left: 3px solid #ffc107; }
.sm-acard-title {
font-family: var(--font-brand);
font-size: 1.1rem;
font-weight: 700;
color: #1E3748;
margin: 0;
line-height: 1.35;
}
.sm-acard-title a {
color: inherit;
text-decoration: none;
transition: color .2s;
}
.sm-acard-title a:hover { color: #D42E5A; }
.sm-acard-excerpt {
font-family: var(--font-brand);
font-size: .875rem;
font-weight: 400;
color: #797676;
line-height: 1.55;
margin: 0;
flex: 1 1 auto;
}
.sm-acard-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-top: 4px;
}
.sm-acard-meta {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
font-family: var(--font-brand);
font-size: .8rem;
color: #797676;
}
.sm-acard-meta i { color: #D42E5A; }
.sm-acard-cta {
font-size: 1rem !important;
height: 42px !important;
padding: 8px 8px 8px 20px !important;
white-space: nowrap;
flex-shrink: 0;
}
/* Lien reset filtres */
.sm-acard-reset {
font-family: var(--font-brand);
font-size: .9rem;
color: #797676;
text-decoration: underline;
text-underline-offset: 3px;
transition: color .2s;
}
.sm-acard-reset:hover { color: #D42E5A; }
/* ── Responsive ── */
@media (max-width: 767.98px) {
.sm-acard { flex-direction: column; }
.sm-acard-img-wrap { width: 100%; height: 200px; min-height: 200px; align-self: auto; border-radius: 0; }
.sm-acard-body { padding: 14px 16px; }
.sm-acard-footer { flex-direction: column; align-items: flex-start; }
}
/* ══════════════════════════════════════════════════════════════════
Page Magazine — liste des éditions
══════════════════════════════════════════════════════════════════ */
.sm-mag-page {
background: #fff;
padding: 60px 0 80px;
}
/* ── Numéro en vedette ── */
.sm-mag-featured {
display: flex;
flex-direction: row;
align-items: center;
gap: 72px;
background: linear-gradient(135deg, #EDF4FA 0%, #F8F0F3 100%);
border: 1px solid #E8E8E8;
border-radius: 28px;
padding: 60px 72px;
margin-bottom: 72px;
box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.sm-mag-featured-cover {
flex-shrink: 0;
width: clamp(260px, 28vw, 380px);
filter: drop-shadow(0 12px 36px rgba(0,0,0,.32));
}
.sm-mag-featured-cover img {
width: 100%;
border-radius: 6px;
display: block;
}
.sm-mag-featured-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.sm-mag-featured-badge {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .3rem .9rem;
border-radius: 999px;
background: #D42E5A;
color: #fff;
font-family: var(--font-brand);
font-size: .8rem;
font-weight: 700;
letter-spacing: .04em;
width: fit-content;
}
.sm-mag-featured-title {
font-family: var(--font-brand);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
font-weight: 800;
color: #005288;
margin: 0;
line-height: 1.2;
}
.sm-mag-featured-desc {
font-family: var(--font-brand);
font-size: 1.05rem;
color: #797676;
line-height: 1.7;
margin: 0;
max-width: 520px;
}
.sm-mag-featured-cta {
width: fit-content;
}
/* ── Titre section archives ── */
.sm-mag-archive-head {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 32px;
}
.sm-mag-archive-title {
font-family: var(--font-brand);
font-size: 1.5rem;
font-weight: 700;
color: #005288;
margin: 0;
}
/* ── Grille archives ── */
.sm-mag-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 32px;
}
.sm-mag-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #ECECEC;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,.08);
transition: box-shadow .2s, transform .2s;
}
.sm-mag-card:hover {
box-shadow: 0 6px 24px rgba(0,0,0,.16);
transform: translateY(-4px);
}
.sm-mag-card-cover-link {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 3/4;
background: #f0f4f8;
}
.sm-mag-card-cover-link img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.sm-mag-card:hover .sm-mag-card-cover-link img { transform: scale(1.05); }
.sm-mag-card-overlay {
position: absolute;
inset: 0;
background: rgba(0,82,136,.55);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .25s;
}
.sm-mag-card:hover .sm-mag-card-overlay { opacity: 1; }
.sm-mag-card-overlay span {
color: #fff;
font-family: var(--font-brand);
font-size: 1rem;
font-weight: 700;
display: flex;
align-items: center;
gap: .4rem;
}
.sm-mag-cover-ph {
width: 100%;
height: 100%;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: #c0c8d0;
background: #f0f4f8;
}
.sm-mag-card-body {
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.sm-mag-card-label {
font-family: var(--font-brand);
font-size: .9rem;
font-weight: 700;
color: #1E3748;
margin: 0;
line-height: 1.3;
}
.sm-mag-card-link {
font-family: var(--font-brand);
font-size: .8rem;
font-weight: 600;
color: #D42E5A;
text-decoration: none;
white-space: nowrap;
display: flex;
align-items: center;
gap: .25rem;
transition: color .2s;
}
.sm-mag-card-link:hover { color: #b8254c; }
/* ── Responsive ── */
@media (max-width: 767.98px) {
.sm-mag-featured {
flex-direction: column;
align-items: flex-start;
padding: 32px 28px;
gap: 32px;
}
.sm-mag-featured-cover { width: 200px; }
.sm-mag-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
}
/* ══════════════════════════════════════════════════════════════════
Magazine — blocs par année + modal région
══════════════════════════════════════════════════════════════════ */
/* ── Bloc année ── */
.sm-mag-year-block { margin-bottom: 56px; }
.sm-mag-year-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 28px;
}
.sm-mag-year-label {
font-family: var(--font-brand);
font-size: 1.75rem;
font-weight: 800;
color: #005288;
flex-shrink: 0;
}
.sm-mag-year-line {
flex: 1;
height: 2px;
background: linear-gradient(to right, #D42E5A 0%, #ECECEC 100%);
border-radius: 2px;
}
/* ── Card magazine (refonte) ── */
.sm-mag-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #ECECEC;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,.08);
transition: box-shadow .2s, transform .2s;
cursor: pointer;
outline: none;
}
.sm-mag-card:hover,
.sm-mag-card:focus-visible {
box-shadow: 0 6px 24px rgba(0,0,0,.16);
transform: translateY(-4px);
}
.sm-mag-card--featured {
border-color: #D42E5A;
box-shadow: 0 4px 20px rgba(212,46,90,.18);
}
.sm-mag-card-cover {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
background: #f0f4f8;
}
.sm-mag-card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.sm-mag-card:hover .sm-mag-card-cover img,
.sm-mag-card:focus-visible .sm-mag-card-cover img { transform: scale(1.05); }
.sm-mag-card-overlay {
position: absolute;
inset: 0;
background: rgba(0,82,136,.6);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .25s;
}
.sm-mag-card:hover .sm-mag-card-overlay,
.sm-mag-card:focus-visible .sm-mag-card-overlay { opacity: 1; }
.sm-mag-card-overlay span {
color: #fff;
font-family: var(--font-brand);
font-size: .95rem;
font-weight: 700;
display: flex;
align-items: center;
gap: .4rem;
text-align: center;
}
.sm-mag-featured-pill {
position: absolute;
top: 10px;
left: 10px;
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .25rem .7rem;
border-radius: 999px;
background: #D42E5A;
color: #fff;
font-family: var(--font-brand);
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
z-index: 2;
}
.sm-mag-card-body {
padding: 14px 16px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.sm-mag-card-label {
font-family: var(--font-brand);
font-size: 1.15rem;
font-weight: 800;
color: #1E3748;
margin: 0;
line-height: 1.3;
}
.sm-mag-card-regions-count {
font-family: var(--font-brand);
font-size: 1.15rem;
color: #797676;
white-space: nowrap;
display: flex;
align-items: center;
gap: .3rem;
flex-shrink: 0;
}
.sm-mag-card-regions-count i { color: #D42E5A; font-size: 1.15rem; }
/* ── Placeholder couverture ── */
.sm-mag-cover-ph {
width: 100%;
height: 100%;
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: #c0c8d0;
}
/* ── Modal ── */
.sm-mag-modal {
border: none;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.sm-mag-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 24px 24px 16px;
background: #005288;
color: #fff;
}
.sm-mag-modal-eyebrow {
font-family: var(--font-brand);
font-size: .75rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,255,255,.65);
margin: 0 0 4px;
}
.sm-mag-modal-title {
font-family: var(--font-brand);
font-size: 1.2rem;
font-weight: 800;
color: #fff;
margin: 0;
}
.sm-mag-modal-close {
background: rgba(255,255,255,.15);
border: none;
border-radius: 8px;
color: #fff;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background .2s;
}
.sm-mag-modal-close:hover { background: rgba(255,255,255,.3); }
.sm-mag-modal-body {
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 6px;
max-height: 60vh;
overflow-y: auto;
}
.sm-mag-region-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border: 1px solid #ECECEC;
border-radius: 12px;
text-decoration: none;
color: #1E3748;
font-family: var(--font-brand);
transition: background .15s, border-color .15s;
}
.sm-mag-region-item:hover {
background: #EDF4FA;
border-color: #005288;
color: #005288;
}
.sm-mag-region-name {
display: flex;
align-items: center;
gap: .5rem;
font-size: .9rem;
font-weight: 600;
}
.sm-mag-region-name i { color: #D42E5A; }
.sm-mag-region-action {
font-size: .8rem;
font-weight: 700;
color: #D42E5A;
display: flex;
align-items: center;
gap: .3rem;
white-space: nowrap;
}
.sm-mag-modal-footer {
padding: 12px 16px 16px;
border-top: 1px solid #ECECEC;
text-align: center;
}
.sm-mag-modal-region-link {
font-family: var(--font-brand);
font-size: .82rem;
color: #797676;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: .3rem;
transition: color .2s;
}
.sm-mag-modal-region-link:hover { color: #005288; }
/* ── Responsive ── */
@media (max-width: 575.98px) {
.sm-mag-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.sm-mag-year-label { font-size: 1.4rem; }
}
/* ── Numéro vedette — styles complémentaires ── */
.sm-mag-featured {
cursor: pointer;
outline: none;
transition: box-shadow .2s, transform .2s;
}
.sm-mag-featured:hover,
.sm-mag-featured:focus-visible {
box-shadow: 0 10px 40px rgba(0,0,0,.15);
transform: translateY(-3px);
}
.sm-mag-featured-cover img {
transition: transform .35s ease;
}
.sm-mag-featured:hover .sm-mag-featured-cover img,
.sm-mag-featured:focus-visible .sm-mag-featured-cover img {
transform: scale(1.03);
}
.sm-mag-featured-cover {
overflow: hidden;
border-radius: 8px;
}
.sm-mag-featured-meta {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
font-family: var(--font-brand);
font-size: .85rem;
color: #797676;
}
.sm-mag-featured-region-hint {
color: #16a34a;
font-weight: 600;
display: flex;
align-items: center;
gap: .3rem;
}
.sm-mag-featured-cta {
width: fit-content;
}
.sm-mag-modal-empty {
padding: 1rem;
color: #797676;
font-size: .9rem;
margin: 0;
}
.sm-mag-year-block:first-of-type { margin-top: 0; }
/* ═══════════════════════════════════════════════
Pages d'erreur (404 / 500)
═══════════════════════════════════════════════ */
.sm-error-page {
min-height: 60vh;
display: flex;
align-items: center;
padding: 5rem 0 4rem;
background: var(--gray-bg);
}
.sm-error-inner {
max-width: 560px;
margin: 0 auto;
text-align: center;
}
.sm-error-visual {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
.sm-error-code {
font-family: var(--font-h);
font-size: clamp(6rem, 18vw, 10rem);
font-weight: 900;
line-height: 1;
background: linear-gradient(135deg, var(--navy) 0%, var(--crimson) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
letter-spacing: -.04em;
opacity: .18;
}
.sm-error-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(3rem, 10vw, 5.5rem);
color: var(--navy);
}
.sm-error-title {
font-family: var(--font-h);
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 800;
color: var(--text);
margin: 0 0 1rem;
}
.sm-error-desc {
font-family: var(--font-brand);
font-size: 1rem;
color: var(--gray-text);
line-height: 1.75;
margin: 0 auto 2.5rem;
max-width: 420px;
}
.sm-error-actions {
display: flex;
align-items: center;
justify-content: center;
gap: .75rem;
flex-wrap: wrap;
}
.sm-error-debug {
background: #fff;
border: 1px solid var(--gray-border);
border-radius: var(--radius-sm);
padding: 1rem 1.25rem;
text-align: left;
margin-bottom: 2rem;
font-size: .8rem;
color: var(--gray-text);
}
.sm-error-debug summary {
cursor: pointer;
font-weight: 600;
color: var(--text);
margin-bottom: .5rem;
}
.sm-error-debug pre {
overflow: auto;
max-height: 240px;
margin: 0;
white-space: pre-wrap;
word-break: break-all;
}
/* ═══════════════════════════════════════════════
Pages légales (mentions légales / politique)
═══════════════════════════════════════════════ */
.sm-legal-page {
padding: 3rem 0 5rem;
background: var(--gray-bg);
}
.sm-legal-card {
background: #fff;
border: 1px solid var(--gray-border);
border-radius: var(--radius-lg);
padding: 2.5rem 3rem;
max-width: 780px;
margin: 0 auto;
box-shadow: var(--shadow-sm);
}
.sm-legal-section {
padding-bottom: 2rem;
margin-bottom: 2rem;
border-bottom: 1px solid var(--gray-line);
}
.sm-legal-section--last {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
.sm-legal-heading {
font-family: var(--font-h);
font-size: 1.1rem;
font-weight: 700;
color: var(--navy);
margin: 0 0 1rem;
display: flex;
align-items: center;
gap: .5rem;
}
.sm-legal-heading i { color: var(--crimson); }
.sm-legal-card p,
.sm-legal-card li {
font-family: var(--font-brand);
font-size: .95rem;
color: var(--text-soft);
line-height: 1.75;
margin-bottom: .5rem;
}
.sm-legal-card ul {
padding-left: 1.4rem;
margin-bottom: .5rem;
}
.sm-legal-card a { color: var(--crimson); text-decoration: underline; }
.sm-legal-card a:hover { color: var(--navy); }
@media (max-width: 575px) {
.sm-legal-card { padding: 1.5rem 1.25rem; }
}
/* ═══════════════════════════════════════════════
Page Recherche
═══════════════════════════════════════════════ */
.sm-search-page {
padding: 3rem 0 5rem;
background: var(--gray-bg);
}
.sm-search-form {
display: flex;
gap: 1rem;
align-items: center;
margin-bottom: 2.5rem;
background: #fff;
border: 1px solid var(--gray-border);
border-radius: var(--radius);
padding: 1rem 1.25rem;
box-shadow: var(--shadow-sm);
}
.sm-search-input-wrap {
flex: 1;
position: relative;
}
.sm-search-ico {
position: absolute;
left: .75rem;
top: 50%;
transform: translateY(-50%);
color: var(--gray-text);
font-size: 1rem;
pointer-events: none;
}
.sm-search-input {
width: 100%;
border: 1px solid var(--gray-border);
border-radius: var(--radius-sm);
padding: .6rem .75rem .6rem 2.2rem;
font-family: var(--font-brand);
font-size: .95rem;
color: var(--text);
background: var(--gray-bg);
transition: border-color .2s, box-shadow .2s;
}
.sm-search-input:focus {
outline: none;
border-color: var(--navy);
box-shadow: 0 0 0 3px rgba(0,82,136,.1);
background: #fff;
}
.sm-search-count {
font-family: var(--font-brand);
font-size: .95rem;
color: var(--gray-text);
margin-bottom: 2rem;
}
.sm-search-count strong { color: var(--text); }
.sm-search-count em { color: var(--navy); font-style: normal; }
.sm-search-empty {
text-align: center;
padding: 4rem 1rem;
color: var(--gray-text);
}
.sm-search-empty i {
font-size: 3rem;
display: block;
margin-bottom: 1rem;
color: var(--gray-border);
}
.sm-search-empty p {
font-family: var(--font-brand);
font-size: 1rem;
margin: 0 0 .5rem;
}
.sm-search-empty-hint { font-size: .9rem; }
.sm-search-empty-hint a { color: var(--crimson); }
.sm-search-section {
margin-bottom: 2.5rem;
}
.sm-search-section-title {
font-family: var(--font-h);
font-size: 1rem;
font-weight: 700;
color: var(--navy);
margin: 0 0 .75rem;
display: flex;
align-items: center;
gap: .5rem;
}
.sm-search-section-count {
background: var(--blue-soft);
color: var(--navy);
font-size: .75rem;
font-weight: 600;
border-radius: 20px;
padding: .15rem .6rem;
margin-left: auto;
}
.sm-search-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.sm-search-item {
display: flex;
align-items: center;
gap: .75rem;
padding: .7rem 1rem;
background: #fff;
border: 1px solid var(--gray-border);
border-radius: var(--radius-sm);
text-decoration: none;
transition: background .15s, border-color .15s;
}
.sm-search-item:hover {
background: var(--blue-soft);
border-color: var(--navy);
}
.sm-search-item--locked {
opacity: .6;
cursor: default;
}
.sm-search-item--locked:hover {
background: #fff;
border-color: var(--gray-border);
}
.sm-search-item-title {
flex: 1;
font-family: var(--font-brand);
font-size: .9rem;
color: var(--text);
font-weight: 500;
}
.sm-search-item-meta {
color: var(--gray-text);
font-weight: 400;
}
.sm-search-item-arrow {
color: var(--gray-text);
font-size: .85rem;
flex-shrink: 0;
}
.sm-search-item:hover .sm-search-item-arrow { color: var(--navy); }
.sm-search-item-badge {
font-size: .75rem;
color: var(--gray-text);
background: var(--gray-bg);
border: 1px solid var(--gray-border);
border-radius: 20px;
padding: .1rem .55rem;
white-space: nowrap;
flex-shrink: 0;
}
@media (max-width: 575px) {
.sm-search-form { flex-direction: column; align-items: stretch; }
}
/* ── Page région ──────────────────────────────────────────────────── */
.sm-region-banner { background: linear-gradient(135deg, var(--navy) 0%, #2a4a7f 100%); padding: 2.5rem 0 2rem; }
.sm-region-banner-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.sm-region-banner-title { font-size: 2.2rem; font-weight: 800; color: #fff; margin: .3rem 0 .5rem; }
.sm-region-banner-sub { color: rgba(255,255,255,.75); font-size: .95rem; margin: 0; }
.sm-region-change-btn {
display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.1rem;
border: 1.5px solid rgba(255,255,255,.4); border-radius: 20px; color: #fff;
font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap;
transition: var(--transition); flex-shrink: 0;
}
.sm-region-change-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.sm-region-page { padding: 2.5rem 0 3rem; }
/* Blocs communs */
.sm-region-block { margin-bottom: 2.5rem; }
.sm-region-block-head {
display: flex; align-items: center; justify-content: space-between;
gap: .75rem; padding-bottom: .75rem; margin-bottom: 1.25rem;
border-bottom: 2px solid var(--crimson);
}
.sm-region-block-title {
font-size: 1.1rem; font-weight: 700; color: var(--text-dark);
display: flex; align-items: center; gap: .5rem; margin: 0;
}
.sm-region-block-title i { color: var(--crimson); }
.sm-region-nat-tag {
font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
background: var(--orange); color: #fff; padding: .15rem .45rem; border-radius: 12px;
}
.sm-region-see-all {
font-size: .8rem; font-weight: 600; color: var(--crimson); text-decoration: none;
display: flex; align-items: center; gap: .3rem; white-space: nowrap; flex-shrink: 0;
}
.sm-region-see-all:hover { text-decoration: underline; }
.sm-region-section-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--crimson); margin: 0 0 .5rem; }
.sm-region-empty { color: var(--gray-text); font-style: italic; font-size: .88rem; margin: 0; }
/* Magazine spotlight */
.sm-region-mag-spotlight {
background: var(--navy); border-radius: var(--radius); overflow: hidden;
margin-bottom: 2.5rem; color: #fff;
}
.sm-region-mag-spotlight--national { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); }
.sm-region-national-notice {
background: rgba(255,255,255,.1); padding: .5rem 1.25rem;
font-size: .78rem; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: .5rem;
}
.sm-region-mag-spotlight-inner { display: flex; align-items: stretch; gap: 0; }
.sm-region-mag-spotlight-cover { width: 160px; flex-shrink: 0; overflow: hidden; }
.sm-region-mag-spotlight-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-region-mag-spotlight-body { padding: 1.75rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.sm-region-mag-spotlight-title { font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0; }
.sm-region-mag-spotlight-desc { font-size: .88rem; color: rgba(255,255,255,.7); margin: 0; }
.sm-region-mag-all-link { font-size: .8rem; color: rgba(255,255,255,.6); text-decoration: none; display: flex; align-items: center; gap: .3rem; margin-top: .25rem; }
.sm-region-mag-all-link:hover { color: #fff; }
/* Actualités : article principal + liste */
.sm-region-actu-list { display: flex; flex-direction: column; gap: 0; }
.sm-region-actu-featured {
display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
background: #fff; box-shadow: var(--shadow); text-decoration: none;
margin-bottom: 1rem; transition: var(--transition);
}
.sm-region-actu-featured:hover { box-shadow: var(--shadow-md); }
.sm-region-actu-featured-img { height: 220px; overflow: hidden; }
.sm-region-actu-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.sm-region-actu-featured:hover .sm-region-actu-featured-img img { transform: scale(1.03); }
.sm-region-actu-featured-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .4rem; }
.sm-region-actu-featured-title { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin: 0; line-height: 1.35; }
.sm-region-actu-featured-chapeau { font-size: .85rem; color: var(--gray-text); margin: 0; }
.sm-region-actu-cat { font-size: .67rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--crimson); }
.sm-region-actu-date { font-size: .73rem; color: var(--gray-text); display: flex; align-items: center; gap: .3rem; }
.sm-region-actu-rest { display: flex; flex-direction: column; gap: .4rem; }
.sm-region-actu-row {
display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem;
background: #fff; border-radius: var(--radius); text-decoration: none;
box-shadow: var(--shadow); transition: var(--transition);
}
.sm-region-actu-row:hover { background: var(--gray-bg); }
.sm-region-actu-row-img { width: 64px; height: 48px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--gray-bg); }
.sm-region-actu-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-region-actu-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.sm-region-actu-row-title { font-size: .86rem; font-weight: 600; color: var(--text-dark); line-height: 1.3; margin: 0; }
.sm-region-actu-row-arrow { color: var(--gray-text); font-size: .8rem; flex-shrink: 0; }
/* Interviews */
.sm-region-interview-list { display: flex; flex-direction: column; gap: .4rem; }
.sm-region-interview-row {
display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem;
background: #fff; border-radius: var(--radius); text-decoration: none;
box-shadow: var(--shadow); transition: var(--transition);
}
.sm-region-interview-row:hover { background: var(--navy); color: #fff; }
.sm-region-interview-row:hover .sm-region-interview-title,
.sm-region-interview-row:hover .sm-region-actu-date,
.sm-region-interview-row:hover .sm-region-interview-ico { color: #fff; }
.sm-region-interview-ico { color: var(--navy); font-size: .95rem; flex-shrink: 0; }
.sm-region-interview-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.sm-region-interview-title { font-size: .86rem; font-weight: 600; color: var(--text-dark); line-height: 1.3; margin: 0; }
/* Sidebar cards */
.sm-region-sidebar-card {
background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
padding: 1.25rem; margin-bottom: 1.5rem;
}
.sm-region-sidebar-title {
font-size: 1rem; font-weight: 700; color: var(--text-dark);
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
padding-bottom: .65rem; margin-bottom: 1rem; border-bottom: 2px solid var(--crimson);
}
.sm-region-sidebar-title i { color: var(--crimson); }
.sm-region-sidebar-more {
display: flex; align-items: center; justify-content: center; gap: .35rem;
margin-top: 1rem; font-size: .78rem; font-weight: 600; color: var(--crimson);
text-decoration: none; padding: .4rem; border: 1px solid var(--crimson);
border-radius: 20px; transition: var(--transition);
}
.sm-region-sidebar-more:hover { background: var(--crimson); color: #fff; }
/* Salons sidebar */
.sm-region-salon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.sm-region-salon-item { display: flex; gap: .75rem; align-items: flex-start; }
.sm-region-salon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--crimson); flex-shrink: 0; margin-top: .35rem; }
.sm-region-salon-name { font-size: .88rem; font-weight: 600; color: var(--text-dark); margin: 0 0 .25rem; }
.sm-region-salon-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.sm-region-salon-meta span { font-size: .73rem; color: var(--gray-text); display: flex; align-items: center; gap: .25rem; }
.sm-region-salon-link { font-size: .75rem; font-weight: 600; color: var(--crimson); text-decoration: none; display: inline-block; margin-top: .2rem; }
.sm-region-salon-link:hover { text-decoration: underline; }
/* Partenaires sidebar */
.sm-region-partner-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.sm-region-partner-row {
display: flex; align-items: center; gap: .75rem; padding: .5rem .6rem;
border-radius: 8px; text-decoration: none; transition: var(--transition);
}
.sm-region-partner-row:not(.sm-region-partner-row--locked):hover { background: var(--gray-bg); }
.sm-region-partner-row--locked { opacity: .65; cursor: default; }
.sm-region-partner-avatar {
width: 40px; height: 40px; border-radius: 6px; overflow: hidden;
background: var(--gray-bg); display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: var(--gray-text); font-size: 1.1rem;
}
.sm-region-partner-avatar img { width: 100%; height: 100%; object-fit: contain; }
.sm-region-partner-name { font-size: .84rem; font-weight: 600; color: var(--text-dark); margin: 0; }
.sm-region-partner-city { font-size: .72rem; color: var(--gray-text); margin: .1rem 0 0; display: flex; align-items: center; gap: .25rem; }
.sm-partner-lock-ico { color: var(--gray-text); font-size: .75rem; margin-left: auto; }
/* Anciens magazines sidebar */
.sm-region-mag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.sm-region-mag-row {
display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem;
border-radius: 8px; text-decoration: none; color: var(--text-dark);
font-size: .84rem; font-weight: 500; transition: var(--transition); background: var(--gray-bg);
}
.sm-region-mag-row:hover { background: var(--crimson); color: #fff; }
.sm-region-mag-row i:first-child { color: var(--crimson); font-size: 1rem; }
.sm-region-mag-row:hover i { color: #fff; }
/* Grille 2 colonnes (dans col-lg-8) */
.sm-actu-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 575px) { .sm-actu-grid--2 { grid-template-columns: 1fr; } }
/* Magazine card sidebar */
.sm-region-mag-card { padding: 0; overflow: hidden; }
.sm-region-mag-card-inner { display: flex; align-items: stretch; gap: 0; }
.sm-region-mag-card-cover { width: 110px; flex-shrink: 0; overflow: hidden; }
.sm-region-mag-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-region-mag-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.sm-region-mag-card > .sm-region-nat-tag { padding: .4rem 1.25rem; display: block; font-size: .72rem; border-radius: 0; }
/* Responsive */
@media (max-width: 767px) {
.sm-region-mag-spotlight-inner { flex-direction: column; }
.sm-region-mag-spotlight-cover { width: 100%; height: 180px; }
.sm-region-banner-inner { flex-direction: column; align-items: flex-start; }
.sm-region-mag-card-inner { flex-direction: column; }
.sm-region-mag-card-cover { width: 100%; height: 180px; }
}
/* ── Page choisir ma région ───────────────────────────────────────── */
.sm-region-picker-page { padding: 2.5rem 0 4rem; }
.sm-region-picker-current { margin-top: .75rem; font-size: .85rem; color: rgba(255,255,255,.8); }
.sm-region-picker-current a { color: #fff; font-weight: 600; }
.sm-region-picker-national {
display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
background: var(--gray-bg); border-radius: var(--radius); border: 1px solid var(--gray-border);
margin-bottom: 2rem; flex-wrap: wrap;
}
.sm-region-picker-national > i { font-size: 1.5rem; color: var(--navy); flex-shrink: 0; }
.sm-region-picker-national > div { flex: 1; min-width: 0; }
.sm-region-picker-national strong { display: block; font-size: .95rem; color: var(--text-dark); }
.sm-region-picker-national span { font-size: .82rem; color: var(--gray-text); }
.sm-region-picker-national-btn {
padding: .45rem 1.1rem; border-radius: 20px; background: var(--navy); color: #fff;
font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap;
transition: var(--transition);
}
.sm-region-picker-national-btn:hover { background: var(--crimson); color: #fff; }
.sm-region-picker-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.sm-region-picker-card {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
padding: 1rem 1.25rem; background: #fff; border-radius: var(--radius);
box-shadow: var(--shadow); text-decoration: none; transition: var(--transition);
border: 2px solid transparent;
}
.sm-region-picker-card:hover { border-color: var(--crimson); box-shadow: var(--shadow-md); }
.sm-region-picker-card--active { border-color: var(--crimson); background: #fff8f9; }
.sm-region-picker-card-inner { display: flex; flex-direction: column; gap: .25rem; }
.sm-region-picker-card-name { font-size: .95rem; font-weight: 700; color: var(--text-dark); }
.sm-region-picker-card-badge {
font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--crimson);
}
.sm-region-picker-card-arrow { font-size: 1.3rem; color: var(--gray-text); transition: var(--transition); }
.sm-region-picker-card:hover .sm-region-picker-card-arrow { color: var(--crimson); }
@media (max-width: 991px) { .sm-region-picker-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sm-region-picker-grid { grid-template-columns: 1fr; } }
/* ══════════════════════════════════════════════════
PAGE RÉGION — Design v3 (sm-reg-*)
══════════════════════════════════════════════════ */
/* Breadcrumb clair sur fond bleu */
.breadcrumb-sm-light .breadcrumb-item a { color: rgba(255,255,255,.75); text-decoration: none; font-size: .82rem; }
.breadcrumb-sm-light .breadcrumb-item a:hover { color: #fff; }
.breadcrumb-sm-light .breadcrumb-item.active { color: rgba(255,255,255,.55); font-size: .82rem; }
.breadcrumb-sm-light .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }
/* Bouton "Changer de région" dans le hero */
.sm-region-hero-change-btn {
display: inline-flex; align-items: center; gap: .5rem;
padding: .55rem 1.2rem; border: 1.5px solid rgba(255,255,255,.45);
border-radius: 24px; color: rgba(255,255,255,.9); font-size: .82rem;
font-weight: 600; text-decoration: none; white-space: nowrap;
transition: var(--transition); flex-shrink: 0; align-self: flex-start; margin-top: .35rem;
}
.sm-region-hero-change-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
/* Corps de la page */
.sm-reg-body { padding: 3rem 0 4rem; }
/* ── Sections ──────────────────────────────────── */
.sm-reg-section { margin-bottom: 3rem; }
.sm-reg-section-head {
display: flex; align-items: center; justify-content: space-between;
gap: .75rem; margin-bottom: 1.5rem;
padding-bottom: .75rem; border-bottom: 2.5px solid var(--gray-line);
}
.sm-reg-section-title {
font-family: var(--font-h); font-size: 1.15rem; font-weight: 800;
color: var(--navy); margin: 0; display: flex; align-items: center; gap: .5rem;
}
.sm-reg-section-title i { color: var(--crimson); }
.sm-reg-see-all {
font-size: .9rem; font-weight: 700; color: var(--crimson); text-decoration: none;
display: flex; align-items: center; gap: .4rem; white-space: nowrap;
transition: var(--transition); padding: .35rem .85rem;
border: 1.5px solid var(--crimson); border-radius: 20px;
}
.sm-reg-see-all:hover { background: var(--crimson); color: #fff; opacity: 1; }
.sm-reg-nat-badge {
font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
background: var(--orange); color: #fff; padding: .2rem .5rem; border-radius: 12px;
}
.sm-reg-empty { color: var(--gray-text); font-style: italic; font-size: .9rem; }
.sm-reg-fallback-notice {
display: flex; align-items: center; gap: .5rem; font-size: .8rem;
color: var(--gray-text); background: var(--gray-bg); border-radius: 8px;
padding: .5rem .85rem; margin-bottom: 1rem;
}
/* ── Magazine du mois ──────────────────────────── */
.sm-reg-mag-card {
display: flex; gap: 0; background: var(--navy); border-radius: var(--radius);
overflow: hidden; color: #fff; margin-bottom: 1rem;
box-shadow: var(--shadow-lg);
}
.sm-reg-mag-cover {
width: 180px; flex-shrink: 0; overflow: hidden;
}
.sm-reg-mag-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-reg-mag-cover--ph {
background: rgba(255,255,255,.08); display: flex;
align-items: center; justify-content: center;
color: rgba(255,255,255,.3); font-size: 3rem;
}
.sm-reg-mag-body {
padding: 1.75rem 2rem; display: flex; flex-direction: column; gap: .6rem; flex: 1;
}
.sm-reg-mag-body .sm-actu-cat { color: var(--orange); }
.sm-reg-mag-title { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0; line-height: 1.2; }
.sm-reg-mag-desc { font-size: .88rem; color: rgba(255,255,255,.7); margin: 0; line-height: 1.6; }
.sm-reg-mag-body .btn-coral { align-self: flex-start; margin-top: .25rem; }
/* Anciens numéros (archive) */
.sm-reg-mag-archive {
display: flex; flex-wrap: wrap; gap: .5rem;
}
.sm-reg-mag-archive-item {
display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem;
background: var(--gray-bg); border-radius: 20px; border: 1px solid var(--gray-border);
text-decoration: none; color: var(--text-soft); font-size: .78rem; font-weight: 500;
transition: var(--transition);
}
.sm-reg-mag-archive-item i:first-child { color: var(--crimson); }
.sm-reg-mag-archive-item:hover { background: var(--crimson); color: #fff; border-color: var(--crimson); }
.sm-reg-mag-archive-item:hover i { color: #fff; }
/* ── Grille 2 colonnes pour col-lg-8 ───────────── */
.sm-actu-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 575px) { .sm-actu-grid--2 { grid-template-columns: 1fr; } }
/* ── Interviews ────────────────────────────────── */
.sm-reg-interview-grid { display: flex; flex-direction: column; gap: .6rem; }
.sm-reg-interview-card {
display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem;
background: #fff; border: 1px solid var(--gray-line); border-radius: var(--radius-sm);
text-decoration: none; transition: var(--transition);
box-shadow: var(--shadow-sm);
}
.sm-reg-interview-card:hover { border-color: var(--navy); box-shadow: var(--shadow); }
.sm-reg-interview-img {
width: 70px; height: 56px; border-radius: 8px; overflow: hidden;
flex-shrink: 0; background: var(--blue-soft);
}
.sm-reg-interview-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-reg-interview-img--ph {
display: flex; align-items: center; justify-content: center;
color: var(--navy); font-size: 1.3rem;
}
.sm-reg-interview-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.sm-reg-interview-title {
font-size: .9rem; font-weight: 600; color: var(--text);
line-height: 1.4; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sm-reg-interview-arrow { color: var(--gray-text); font-size: .85rem; flex-shrink: 0; transition: var(--transition); }
.sm-reg-interview-card:hover .sm-reg-interview-arrow { color: var(--navy); transform: translateX(3px); }
/* ── Widgets sidebar ───────────────────────────── */
.sm-reg-widget {
background: #fff; border-radius: var(--radius); border: 1px solid var(--gray-line);
padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
box-shadow: var(--shadow-sm);
}
.sm-reg-widget-head {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
margin-bottom: 1.1rem; padding-bottom: .75rem; border-bottom: 2px solid var(--gray-line);
}
.sm-reg-widget-title {
font-family: var(--font-h); font-size: 1rem; font-weight: 800;
color: var(--navy); margin: 0; display: flex; align-items: center; gap: .45rem;
}
.sm-reg-widget-title i { color: var(--crimson); }
.sm-reg-widget-more {
display: flex; align-items: center; justify-content: center; gap: .35rem;
margin-top: 1rem; padding: .5rem; border: 1.5px solid var(--crimson);
border-radius: 20px; font-size: .78rem; font-weight: 700; color: var(--crimson);
text-decoration: none; transition: var(--transition);
}
.sm-reg-widget-more:hover { background: var(--crimson); color: #fff; }
.sm-reg-widget-see-all {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .85rem; font-weight: 700; color: var(--crimson);
text-decoration: none; white-space: nowrap;
border: 1.5px solid var(--crimson); border-radius: 20px;
padding: .35rem .9rem; transition: var(--transition);
}
.sm-reg-widget-see-all:hover { background: var(--crimson); color: #fff; }
/* Salons */
.sm-reg-salon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.sm-reg-salon-item { display: flex; gap: .85rem; align-items: flex-start; }
.sm-reg-salon-date-badge {
flex-shrink: 0; width: 46px; min-height: 46px; border-radius: 10px;
background: var(--blue-soft); display: flex; flex-direction: column;
align-items: center; justify-content: center; padding: .2rem;
}
.sm-reg-salon-day { font-size: 1.1rem; font-weight: 800; color: var(--navy); line-height: 1; }
.sm-reg-salon-month { font-size: .62rem; font-weight: 700; text-transform: uppercase; color: #A31836; letter-spacing: .04em; }
.sm-reg-salon-info { flex: 1; min-width: 0; }
.sm-reg-salon-name { font-size: .88rem; font-weight: 700; color: var(--text); margin: 0 0 .2rem; line-height: 1.3; }
.sm-reg-salon-meta { font-size: .74rem; color: var(--gray-text); margin: 0; display: flex; align-items: center; gap: .3rem; }
.sm-reg-salon-link { font-size: .75rem; color: var(--crimson); font-weight: 600; }
/* Partenaires */
.sm-reg-partner-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.sm-reg-partner-item--locked { opacity: .6; }
.sm-reg-partner-row {
display: flex; align-items: center; gap: .75rem; padding: .5rem .5rem;
border-radius: 8px; text-decoration: none; transition: var(--transition);
}
.sm-reg-partner-item:not(.sm-reg-partner-item--locked) .sm-reg-partner-row:hover { background: var(--gray-bg); }
.sm-reg-partner-avatar {
width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
background: var(--blue-soft); display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .9rem; color: var(--navy);
}
.sm-reg-partner-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sm-reg-partner-info { flex: 1; min-width: 0; }
.sm-reg-partner-name { font-size: .85rem; font-weight: 600; color: var(--text); margin: 0; }
.sm-reg-partner-city { font-size: .72rem; color: var(--gray-text); margin: .1rem 0 0; display: flex; align-items: center; gap: .25rem; }
.sm-reg-partner-lock { color: var(--gray-text); font-size: .75rem; flex-shrink: 0; }
/* ── Header région (reprend sm-ann-header) ─────── */
.sm-reg-header .sm-ann-intro { padding: 2.5rem 0 3rem; }
.sm-reg-header .sm-ann-intro-inner {
display: flex; flex-direction: row; align-items: flex-start;
justify-content: space-between; gap: 2rem; text-align: left;
}
.sm-reg-header .sm-ann-intro-title { text-align: left; }
.sm-reg-header .sm-ann-intro-sub { text-align: left; max-width: 600px; }
.sm-reg-header-actions { flex-shrink: 0; padding-top: .5rem; }
.sm-reg-change-btn {
display: inline-flex; align-items: center; gap: .5rem;
padding: .6rem 1.3rem; border: 2px solid var(--navy);
border-radius: 24px; color: #fff; font-size: .82rem;
font-weight: 700; text-decoration: none; white-space: nowrap;
transition: var(--transition); background: var(--navy);
}
.sm-reg-change-btn:hover { background: var(--blue-dark); color: #fff; border-color: var(--blue-dark); }
/* ── Page fond blanc ───────────────────────────── */
.sm-reg-page { background: #fff; padding: 3rem 0 4rem; }
.sm-reg-intro-text { padding: 1rem 0 0; color: #5a6e80; font-size: 1rem; line-height: 1.75; }
/* ── Section headers ───────────────────────────── */
.sm-reg-section-head {
display: flex; align-items: center; justify-content: space-between;
gap: .75rem; padding-bottom: .75rem; border-bottom: 2.5px solid var(--gray-line);
}
.sm-reg-section-label {
font-family: var(--font-brand); font-size: 1.15rem; font-weight: 800;
color: var(--navy); margin: 0; display: flex; align-items: center; gap: .5rem;
}
.sm-reg-section-label i { color: var(--crimson); }
/* ── Magazine featured (reprend .sm-mag-featured) ─ */
.sm-reg-mag-featured { gap: 48px; padding: 40px 48px; }
@media (max-width: 767px) {
.sm-reg-mag-featured { flex-direction: column; padding: 24px; gap: 24px; }
.sm-reg-mag-featured .sm-mag-featured-cover { width: 100%; max-width: 200px; margin: 0 auto; }
}
/* ── Archive chips ─────────────────────────────── */
.sm-reg-archive-label {
font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--gray-text); flex-shrink: 0;
}
.sm-reg-archive-list { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sm-reg-archive-chip {
display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem;
background: var(--gray-bg); border: 1px solid var(--gray-border); border-radius: 20px;
text-decoration: none; color: var(--text-soft); font-size: .78rem; font-weight: 500;
transition: var(--transition);
}
.sm-reg-archive-chip i:first-child { color: var(--crimson); }
.sm-reg-archive-chip:hover { background: var(--crimson); color: #fff; border-color: var(--crimson); }
.sm-reg-archive-chip:hover i { color: #fff; }
/* ── Responsive ────────────────────────────────── */
@media (max-width: 991px) {
.sm-reg-header .sm-ann-intro-inner { flex-direction: column; gap: 1rem; }
}
@media (max-width: 767px) {
.sm-reg-body { padding: 1.5rem 0 2.5rem; }
.sm-reg-page { padding: 1.5rem 0 2.5rem; }
}
/* ════════════════════════════════════════════════
Fiche Partenaire Premium — Hero Header
════════════════════════════════════════════════ */
/* Hero wrapper = header complet (breadcrumb + contenu) */
.sm-ph-hero {
position: relative;
isolation: isolate;
background: #F1F6FD;
}
.sm-ph-hero::after {
content: '';
position: absolute;
inset: 0;
background: url('../img/background/header_background.png') center/cover no-repeat;
z-index: 2;
pointer-events: none;
}
/* Breadcrumb intégré dans le hero */
.sm-ph-breadcrumb {
padding: .75rem 0;
position: relative;
z-index: 3;
}
.sm-ph-breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
font-family: var(--font-brand);
font-size: 1.125rem;
}
.sm-ph-breadcrumb ol li a {
color: var(--navy);
text-decoration: none;
font-weight: 400;
transition: var(--transition);
}
.sm-ph-breadcrumb ol li a:hover { text-decoration: underline; }
.sm-ph-breadcrumb ol li.active {
color: var(--navy);
font-weight: 600;
}
.sm-ph-breadcrumb ol li .sm-ph-bc-sep {
display: inline-flex;
align-items: center;
padding: 0 .4rem;
color: var(--navy);
opacity: .5;
font-size: .8rem;
}
.sm-ph-hero-body {
padding: 2.5rem 0 3.5rem;
position: relative;
z-index: 3;
}
.sm-ph-hero-inner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
/* Left block: logo + info */
.sm-ph-left {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1.75rem;
flex: 1;
min-width: 0;
}
/* Logo card */
.sm-ph-logo-card {
flex-shrink: 0;
background: #fff;
border-radius: 24px;
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 220px;
height: 220px;
box-shadow: var(--shadow-sm);
}
.sm-ph-logo-card img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.sm-ph-logo-placeholder {
flex-shrink: 0;
background: #fff;
border-radius: 24px;
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 220px;
height: 220px;
color: var(--gray-text);
font-size: 3.5rem;
box-shadow: var(--shadow-sm);
}
/* Info block */
.sm-ph-info { flex: 1; min-width: 0; }
/* Badge "PARTENAIRE RECOMMANDÉ" */
.sm-ph-badge-recommended {
display: inline-flex;
align-items: center;
gap: .5rem;
background: var(--crimson);
color: #fff;
font-family: var(--font-brand);
font-size: .8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .06em;
padding: .3rem 1rem;
border-radius: 4px;
margin-bottom: .9rem;
}
.sm-ph-badge-recommended i { font-size: .85rem; }
/* Company name */
.sm-ph-company-name {
font-family: var(--font-brand);
font-size: 2.6rem;
font-weight: 700;
color: var(--navy);
line-height: 1.15;
margin: 0 0 .75rem;
word-break: break-word;
}
/* Address line */
.sm-ph-address {
display: flex;
align-items: center;
gap: .45rem;
font-family: var(--font-brand);
font-size: 1.05rem;
font-weight: 400;
color: var(--navy);
margin-bottom: .75rem;
}
.sm-ph-address i { font-size: 1.1rem; flex-shrink: 0; }
/* Categories chips */
.sm-ph-cats {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.sm-ph-cat-chip {
display: inline-flex;
align-items: center;
gap: .3rem;
background: #fff;
border: 1.5px solid var(--navy);
color: var(--navy);
font-family: var(--font-brand);
font-size: .78rem;
font-weight: 500;
padding: .2rem .7rem;
border-radius: 999px;
}
/* Right CTA block */
.sm-ph-cta {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1rem;
flex-shrink: 0;
width: 280px;
}
.sm-ph-btn-site {
display: flex;
align-items: center;
justify-content: center;
gap: .6rem;
padding: .85rem 1.5rem;
background: var(--crimson);
color: #fff;
font-family: var(--font-brand);
font-size: 1rem;
font-weight: 600;
border-radius: 999px;
text-decoration: none;
transition: var(--transition);
border: none;
}
.sm-ph-btn-site i { font-size: 1.1rem; }
.sm-ph-btn-site:hover { background: #b8244a; color: #fff; }
.sm-ph-btn-site--disabled {
background: var(--gray-bg);
color: var(--gray-text);
cursor: default;
border: 1px solid var(--gray-border);
}
.sm-ph-btn-site--disabled:hover { background: var(--gray-bg); color: var(--gray-text); }
.sm-ph-phone-block {
display: flex;
flex-direction: column;
align-items: center;
gap: .35rem;
}
.sm-ph-btn-phone {
display: flex;
align-items: center;
justify-content: center;
gap: .6rem;
padding: .7rem 1.5rem;
border: 2.5px solid var(--navy);
border-radius: 999px;
color: var(--navy);
font-family: var(--font-brand);
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
transition: var(--transition);
width: 100%;
}
.sm-ph-btn-phone:hover { background: var(--navy); color: #fff; }
.sm-ph-phone-note {
font-family: var(--font-brand);
font-size: .8rem;
font-weight: 400;
color: var(--navy);
text-align: center;
line-height: 1.4;
}
/* Responsive hero */
@media (max-width: 991px) {
.sm-ph-hero-inner { flex-direction: column; align-items: stretch; }
.sm-ph-cta { width: 100%; }
.sm-ph-company-name { font-size: 2rem; }
}
@media (max-width: 575px) {
.sm-ph-left { flex-direction: column; align-items: center; text-align: center; }
.sm-ph-address { justify-content: center; }
.sm-ph-cats { justify-content: center; }
.sm-ph-badge-recommended { align-self: center; }
.sm-ph-company-name { font-size: 1.75rem; }
.sm-ph-logo-card,
.sm-ph-logo-placeholder { width: 160px; height: 160px; }
}
/* ════════════════════════════════════════════════
Fiche Partenaire — Corps de page (sm-pd-*)
════════════════════════════════════════════════ */
/* ── Sections ── */
.sm-pd-section {
margin-bottom: 4rem;
}
.sm-pd-section-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-bottom: 2rem;
}
.sm-pd-section-title {
font-family: var(--font-brand);
font-size: 2.1rem;
font-weight: 700;
color: var(--navy);
margin: 0;
line-height: 1.2;
}
.sm-pd-section-bar {
width: 48px;
height: 8px;
background: var(--crimson);
border-radius: 4px;
}
/* ── Description ── */
.sm-pd-description {
font-family: var(--font-brand);
font-size: 19px;
font-weight: 400;
line-height: 28px;
letter-spacing: 0;
color: #1E3748;
margin-bottom: 1.5rem;
}
/* ── Chips avantages ── */
.sm-pd-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.sm-pd-chip {
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: #F1F6FD;
border-radius: 999px;
font-family: var(--font-brand);
font-size: 18px;
font-weight: 400;
line-height: 28px;
letter-spacing: 0;
color: var(--navy);
white-space: nowrap;
}
/* ── Galerie ── */
.sm-pd-gallery-hero {
border-radius: 24px;
overflow: hidden;
margin-bottom: 10px;
}
.sm-pd-gallery-hero img {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
}
.sm-pd-gallery-thumbs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.sm-pd-gallery-thumb {
border-radius: 24px;
overflow: hidden;
aspect-ratio: 3/2;
}
.sm-pd-gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.sm-pd-gallery-thumb:hover img { transform: scale(1.04); }
/* ── Infos pratiques ── */
.sm-pd-infos-grid {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 2rem; /* 32px entre chaque item */
column-gap: 3rem;
}
.sm-pd-info-item {
display: flex;
flex-direction: column;
gap: 4px; /* 4px entre label et valeur */
}
.sm-pd-info-label {
font-family: var(--font-brand);
font-size: 19px;
font-weight: 600;
line-height: 24px;
color: #005288;
letter-spacing: 0;
}
.sm-pd-info-value {
font-family: var(--font-brand);
font-size: 19px;
font-weight: 500;
line-height: 24px;
color: #1E3748;
letter-spacing: 0;
}
/* ── Layout grille fiche partenaire (CSS Grid natif — sticky fiable) ── */
.sm-pd-layout {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 3rem;
padding: 5rem 0 6rem;
align-items: start; /* OBLIGATOIRE : sans ça, les cellules grid s'étirent et sticky ne peut pas sortir du flux */
}
@media (min-width: 992px) {
.sm-pd-layout {
grid-template-columns: 7fr 5fr;
gap: 3.5rem;
}
}
.sm-pd-main-col {
min-width: 0; /* évite le dépassement en grid */
}
.sm-pd-aside {
min-width: 0;
align-self: start; /* redondant avec align-items:start mais explicite */
}
.sm-pd-sticky-wrap {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 110px;
/* Pas de overflow, pas de max-height — le formulaire doit rester dans le flux */
}
.sm-pd-form-card {
background: var(--navy);
border-radius: 24px;
}
.sm-pd-form-title {
font-family: var(--font-brand);
font-size: 1.65rem;
font-weight: 600;
color: #fff;
padding: 2rem 1.75rem 0;
}
.sm-pd-form-body {
padding: 1.5rem 1.75rem 2rem;
}
.sm-pd-field-group {
margin-bottom: 1.1rem;
}
.sm-pd-field-label {
display: block;
font-family: var(--font-brand);
font-size: .85rem;
font-weight: 500;
color: #fff;
margin-bottom: 4px;
letter-spacing: .04em;
}
.sm-pd-field-input {
width: 100%;
background: #fff;
border: none;
border-radius: 8px;
padding: .7rem .85rem;
font-family: var(--font-brand);
font-size: 1rem;
color: #1E3748;
outline: none;
transition: box-shadow var(--transition);
}
.sm-pd-field-input::placeholder { color: #797676; }
.sm-pd-field-input:focus { box-shadow: 0 0 0 2px rgba(212,46,90,.5); }
.sm-pd-field-textarea { resize: vertical; min-height: 140px; }
/* RGPD */
.sm-pd-rgpd {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 1.5rem;
}
.sm-pd-rgpd-check {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 4px;
accent-color: var(--crimson);
cursor: pointer;
}
.sm-pd-rgpd-label {
font-family: var(--font-brand);
font-size: .88rem;
font-weight: 400;
color: #fff;
line-height: 1.55;
cursor: pointer;
}
/* Bouton envoyer */
.sm-pd-form-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .75rem 2rem;
background: var(--crimson);
color: #fff;
font-family: var(--font-brand);
font-size: 1.1rem;
font-weight: 600;
border: none;
border-radius: 999px;
cursor: pointer;
transition: background var(--transition);
}
.sm-pd-form-btn:hover { background: #b8244a; }
/* Alertes dans le formulaire */
.sm-pd-form-success {
background: rgba(255,255,255,.15);
border-radius: 10px;
padding: 1rem 1.25rem;
color: #fff;
font-family: var(--font-brand);
font-size: .95rem;
display: flex;
flex-direction: column;
gap: .5rem;
}
.sm-pd-form-error {
background: rgba(212,46,90,.25);
border-radius: 10px;
padding: .75rem 1rem;
color: #fff;
font-family: var(--font-brand);
font-size: .88rem;
margin-bottom: 1rem;
}
/* ── Responsive corps ── */
@media (max-width: 767px) {
.sm-pd-gallery-hero img { height: 260px; }
.sm-pd-gallery-thumbs { grid-template-columns: repeat(2, 1fr); }
.sm-pd-infos-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.sm-pd-section-title { font-size: 1.65rem; }
}
/* ══════════════════════════════════════════════════════════════════
Header mobile — overlay plein écran avec grille 2 colonnes
══════════════════════════════════════════════════════════════════ */
/* Masquer les blocs overlay sur desktop */
@media (min-width: 992px) {
.sm-mob-nav-top,
.sm-mob-nav-bottom { display: none !important; }
}
/* Mobile : quand le collapse est ouvert → plein écran */
@media (max-width: 991.98px) {
.sm-nav-collapse.show {
position: fixed;
inset: 0;
z-index: 1050;
background: #fff;
overflow-y: auto;
display: flex !important;
flex-direction: column;
}
/* En-tête overlay : logo + X */
.sm-mob-nav-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--gray-line);
flex-shrink: 0;
}
.sm-mob-nav-close-btn {
background: transparent;
border: none;
font-size: 2rem;
color: var(--navy);
cursor: pointer;
line-height: 1;
padding: 4px 8px;
display: flex;
align-items: center;
justify-content: center;
}
/* Grille 2 colonnes */
.sm-nav-list {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 20px 16px;
height: auto;
align-items: stretch;
flex: 1;
}
.sm-nav-link {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 20px 12px;
min-height: 90px;
font-size: 13px;
border-radius: 12px;
background: #F1F6FD;
text-align: center;
color: var(--navy);
}
.sm-nav-svg { width: 36px; height: 36px; }
.sm-nav-link.is-active {
background: var(--navy);
color: #fff;
border-left: none;
border-radius: 12px;
}
.sm-nav-link.is-active .sm-nav-svg { filter: brightness(0) invert(1); }
.sm-nav-link:hover { background: var(--blue-soft); border-radius: 12px; }
.sm-nav-link.is-active:hover { background: var(--navy); }
/* Pied overlay : portail + région */
.sm-mob-nav-bottom {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 20px 16px 32px;
border-top: 1px solid var(--gray-line);
flex-shrink: 0;
}
.sm-mob-portail-link {
color: var(--navy);
font-family: var(--font-brand);
font-weight: 600;
font-size: 15px;
text-decoration: none;
}
.sm-mob-portail-link:hover { text-decoration: underline; }
}
/* ══════════════════════════════════════════════════════════════════
Magazine mobile — couverture visible, débordante en bas
══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
.sm-mag-section {
padding-top: 40px;
padding-bottom: 60px;
}
.sm-mag-banner {
border-radius: 12px;
min-height: 540px;
padding: 20px 15px 170px;
overflow: visible;
align-items: flex-start;
justify-content: flex-start;
}
.sm-mag-banner .sm-mag-cover-wrap {
display: block !important;
position: absolute;
left: 26px;
bottom: -40px;
top: auto;
transform: rotate(6.23deg);
width: 180px;
z-index: 2;
pointer-events: none;
filter: drop-shadow(0px 4px 12px rgba(0,0,0,.75));
}
.sm-mag-row {
flex-direction: column;
align-items: flex-start;
gap: 32px;
padding: 0;
min-height: unset;
position: relative;
z-index: 1;
}
.sm-mag-left, .sm-mag-right { width: 100%; }
.sm-mag-right { align-items: flex-end; gap: 24px; }
.sm-mag-subtitle { text-align: center; font-size: 2rem; line-height: 2.5rem; }
.sm-mag-cta { width: 100%; justify-content: center; height: 49px; }
.sm-mag-cta-label { font-size: 1.5rem; }
.sm-mag-badge-wrap {
position: absolute;
bottom: 30px;
right: 15px;
left: auto;
transform: none;
z-index: 3;
}
.sm-mag-badge { font-size: 1.5rem; }
}
/* ══════════════════════════════════════════════════════════════════
Annuaire mobile — barre fixe en bas
══════════════════════════════════════════════════════════════════ */
.sm-mob-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1040;
background: #fff;
border-top: 1px solid #989494;
padding: 16px 15px;
gap: 16px;
align-items: center;
}
.sm-mob-bar-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
height: 52px;
background: #F1F6FD;
border-radius: 999px;
border: none;
cursor: pointer;
font-family: var(--font-brand);
font-weight: 600;
font-size: 1.1rem;
color: var(--navy);
transition: background .2s;
white-space: nowrap;
}
.sm-mob-bar-btn:hover { background: #ddeaf8; }
/* Ajouter du padding en bas sur les pages qui ont la barre */
.sm-ann-section { padding-bottom: calc(80px + 84px); }
@media (min-width: 992px) {
.sm-ann-section { padding-bottom: 80px; }
}
/* ══════════════════════════════════════════════════════════════════
Bottom sheets (Filtres + Contact)
══════════════════════════════════════════════════════════════════ */
.sm-mob-sheet {
position: fixed;
inset: 0;
z-index: 1060;
pointer-events: none;
opacity: 0;
transition: opacity .25s;
}
.sm-mob-sheet.is-open {
pointer-events: auto;
opacity: 1;
}
.sm-mob-sheet-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.4);
}
.sm-mob-sheet-panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-radius: 10px 10px 0 0;
padding: 0 15px 60px;
max-height: 90vh;
overflow-y: auto;
transform: translateY(100%);
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.sm-mob-sheet.is-open .sm-mob-sheet-panel {
transform: translateY(0);
}
.sm-mob-sheet-panel--navy { background: var(--navy); }
.sm-mob-sheet-inner { padding: 20px 0 40px; }
.sm-mob-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
gap: 10px;
}
.sm-mob-sheet-title {
font-family: var(--font-brand);
font-weight: 600;
font-size: 1.5rem;
color: var(--navy);
line-height: 1;
}
.sm-mob-sheet-title--white { color: #fff; }
.sm-mob-sheet-close {
background: transparent;
border: none;
font-size: 2rem;
cursor: pointer;
color: var(--navy);
line-height: 1;
padding: 4px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sm-mob-sheet-close--white { color: #fff; }
.sm-mob-sheet-divider {
height: 4px;
background: var(--crimson);
margin: 6px 0 24px;
border-radius: 2px;
}
/* Groupes filtres */
.sm-mob-sheet-group { margin-bottom: 24px; }
.sm-mob-sheet-group-title {
font-family: var(--font-brand);
font-weight: 600;
font-size: 1.25rem;
color: var(--navy);
margin: 0 0 8px;
}
.sm-mob-sheet-checks { display: flex; flex-direction: column; gap: 8px; }
.sm-mob-sheet-check {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.sm-mob-sheet-check input[type="radio"],
.sm-mob-sheet-check input[type="checkbox"] {
width: 18px; height: 18px;
border: 1px solid #1E3748;
border-radius: 2px;
flex-shrink: 0;
cursor: pointer;
accent-color: var(--navy);
}
.sm-mob-sheet-check span {
font-family: var(--font-brand);
font-size: 1.1875rem;
color: #1E3748;
line-height: 1.3;
}
.sm-mob-sheet-field {
box-sizing: border-box;
width: 100%;
height: 48px;
padding: 12px;
background: #fff;
border: 1px solid #1E3748;
border-radius: 8px;
font-family: var(--font-brand);
font-size: 1.1875rem;
color: #1E3748;
}
.sm-mob-sheet-field::placeholder { color: #797676; }
.sm-mob-sheet-field:focus { border-color: var(--navy); outline: none; }
.sm-mob-sheet-dist-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
border: 1px solid #1E3748;
border-radius: 8px;
height: 48px;
}
.sm-mob-sheet-dist-num { font-family: var(--font-brand); font-size: 1.1875rem; color: #797676; }
.sm-mob-sheet-dist-unit { font-family: var(--font-brand); font-size: 1.1875rem; font-weight: 600; color: #1E3748; }
.sm-mob-sheet-apply-btn {
width: 100%;
height: 48px;
background: var(--crimson);
border-radius: 999px;
border: none;
cursor: pointer;
font-family: var(--font-brand);
font-weight: 600;
font-size: 1.1875rem;
color: #fff;
margin-top: 8px;
transition: background .2s;
}
.sm-mob-sheet-apply-btn:hover { background: #b8254c; }
/* Formulaire contact (fond navy) */
.sm-mob-contact-group { margin-bottom: 24px; }
.sm-mob-contact-label {
display: block;
font-family: var(--font-brand);
font-weight: 400;
font-size: 1.1875rem;
color: #fff;
text-transform: uppercase;
margin-bottom: 4px;
}
.sm-mob-contact-field {
width: 100%;
height: 48px;
padding: 12px;
background: #fff;
border-radius: 8px;
border: none;
font-family: var(--font-brand);
font-size: 1.1875rem;
color: #1E3748;
box-sizing: border-box;
}
.sm-mob-contact-field::placeholder { color: #797676; }
.sm-mob-contact-select { appearance: auto; cursor: pointer; }
.sm-mob-contact-rgpd {
display: flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 24px;
}
.sm-mob-contact-rgpd input {
width: 18px; height: 18px;
flex-shrink: 0;
margin-top: 2px;
border-radius: 2px;
accent-color: var(--crimson);
}
.sm-mob-contact-rgpd span {
font-family: var(--font-brand);
font-size: 1.125rem;
line-height: 1.25;
color: #fff;
}
.sm-mob-contact-btn {
width: 100%;
height: 49px;
background: var(--crimson);
border-radius: 999px;
border: none;
cursor: pointer;
font-family: var(--font-brand);
font-weight: 600;
font-size: 1.25rem;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background .2s;
}
.sm-mob-contact-btn:hover { background: #b8254c; }
/* ── Bannière sidebar — carte immersive ───────────────────────────────── */
/*
Concept : l'image du bannière remplit un format portrait (ratio 3:4).
Un dégradé couvre le bas. Le texte et le CTA sont superposés en overlay.
Au survol : zoom subtil de l'image + le CTA monte légèrement.
Aucune rotation — fonctionne avec toutes les images.
*/
.sm-pw-sidebar {
position: relative;
width: 100%;
margin-bottom: 1.5rem;
}
/* Carte principale */
.sm-pws-card {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
border-radius: 20px;
overflow: hidden;
display: block;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 24px rgba(0,0,0,.13);
transition: box-shadow .3s ease, transform .3s ease;
background: #1a1a2e;
}
.sm-pws-card:hover {
box-shadow: 0 10px 40px rgba(0,0,0,.22);
transform: translateY(-3px);
text-decoration: none;
}
/* Image de fond — couvre tout le format portrait */
.sm-pws-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .5s cubic-bezier(.4,0,.2,1);
display: block;
}
.sm-pws-card:hover .sm-pws-img {
transform: scale(1.06);
}
/* Dégradé double : léger en haut (tag Sponsorisé), fort en bas (CTA) */
.sm-pws-gradient {
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, rgba(0,0,0,.35) 0%, transparent 28%),
linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 55%);
pointer-events: none;
}
/* Badge en haut à gauche */
.sm-pws-tag {
position: absolute;
top: 14px;
left: 14px;
background: rgba(255,255,255,.18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.3);
color: #fff;
font-family: 'Lexend Deca', sans-serif;
font-size: .68rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 20px;
pointer-events: none;
}
/* Bloc texte en bas */
.sm-pws-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0 18px 20px;
display: flex;
flex-direction: column;
gap: 12px;
transform: translateY(6px);
transition: transform .3s ease;
}
.sm-pws-card:hover .sm-pws-body {
transform: translateY(0);
}
.sm-pws-title {
font-family: 'Lexend Deca', sans-serif;
font-size: .95rem;
font-weight: 700;
color: #fff;
line-height: 1.3;
text-shadow: 0 1px 4px rgba(0,0,0,.4);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sm-pws-cta {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
background: var(--coral, #d42e5a);
color: #fff;
border-radius: 24px;
font-family: 'Lexend Deca', sans-serif;
font-size: .82rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
align-self: flex-start;
visibility: hidden;
transform: translateY(8px);
transition: visibility 0s .25s, transform .25s ease, background .18s;
pointer-events: none;
}
.sm-pws-card:hover .sm-pws-cta {
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
pointer-events: auto;
}
.sm-pws-cta:hover { background: #b8254c; color: #fff; text-decoration: none; }
/* Mobile : carte moins haute, ratio paysage */
@media (max-width: 991px) {
.sm-pws-card {
aspect-ratio: 16 / 7;
border-radius: 14px;
}
.sm-pws-cta {
opacity: 1;
transform: none;
}
}
/* ── Bannière listing pleine largeur (intercalée entre rangées) ────────── */
.sm-pw-row {
position: relative;
width: 100%;
height: 140px;
border-radius: 18px;
overflow: hidden;
display: flex;
align-items: stretch;
box-shadow: 0 4px 20px rgba(0,0,0,.12);
transition: box-shadow .25s ease, transform .25s ease;
}
.sm-pw-row:hover {
box-shadow: 0 8px 32px rgba(0,0,0,.18);
transform: translateY(-2px);
}
/* Moitié gauche : image en fond avec gradient de sortie vers la droite */
.sm-pw-row-img {
flex: 0 0 45%;
background-size: cover;
background-position: center;
position: relative;
}
.sm-pw-row-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, transparent 50%, var(--navy, #005288) 100%);
}
/* Moitié droite : fond navy, texte et CTA */
.sm-pw-row-body {
flex: 1;
background: var(--navy, #005288);
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
padding: 0 24px 0 20px;
}
.sm-pw-row-tag {
font-family: 'Lexend Deca', sans-serif;
font-size: .65rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.6);
}
.sm-pw-row-title {
font-family: 'Lexend Deca', sans-serif;
font-size: .95rem;
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sm-pw-row-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
background: var(--coral, #d42e5a);
color: #fff;
border-radius: 20px;
font-family: 'Lexend Deca', sans-serif;
font-size: .78rem;
font-weight: 700;
text-decoration: none;
align-self: flex-start;
transition: background .18s;
white-space: nowrap;
}
.sm-pw-row-btn:hover { background: #b8254c; color: #fff; text-decoration: none; }
/* Étiquette discrète en bas à droite */
.sm-pw-row-disc {
position: absolute;
bottom: 7px;
right: 12px;
font-size: .6rem;
color: rgba(255,255,255,.35);
font-family: 'Lexend Deca', sans-serif;
letter-spacing: .06em;
text-transform: uppercase;
pointer-events: none;
}
/* Mobile : image au-dessus, corps en dessous */
@media (max-width: 575px) {
.sm-pw-row {
flex-direction: column;
height: auto;
}
.sm-pw-row-img {
flex: 0 0 100px;
width: 100%;
}
.sm-pw-row-img::after {
background: linear-gradient(to bottom, transparent 40%, var(--navy, #005288) 100%);
}
.sm-pw-row-body {
padding: 14px 18px 18px;
}
}