/* ============================================
YOUVANNA STARTER v2.6.0 — Design System
Architecture : 1 seul fichier CSS, tout via variables
Changer --color-primary change TOUT le site
============================================ */
/* --- DESIGN TOKENS (override per client) --- */
:root {
/* Couleurs — SFSCMFCO palette */
--color-primary: #1b8cae;
--color-primary-rgb: 27, 140, 174; /* MÊME couleur en RGB — pour les rgba() */
--color-primary-dark: #01496c;
--color-primary-light: rgba(var(--color-primary-rgb), .08);
--color-secondary: #070c19;
--color-secondary-rgb: 7, 12, 25;
--color-accent: #26b0d5;
--color-text: #1e293b;
--color-text-light: #475569;
/* Ton attenue, un cran au-dessus de --color-text-light dans la meme gamme
ardoise (#1e293b / #475569 / #64748b). Etait appele sans valeur de repli a
4 endroits sans jamais avoir ete declare : les textes secondaires sortaient
en couleur de texte plein. Contraste 4,8:1 sur fond blanc (AA). */
--color-text-muted: #64748b;
--color-bg: #f4f4f4;
--color-bg-alt: #f8fafc;
--color-border: #e5e7eb;
--color-border-soft: rgba(15, 23, 42, .06);
/* Couleurs additionnelles SFSCMFCO */
--color-highlight: #99dcea;
--color-red: #e94d33;
--color-green: #1c8c4a;
--color-turquoise: #19BECE;
/* Typo - Gotham (headings) & Apercu Pro (body), self-hosted */
--font-heading: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-heading-condensed: 'Gotham Condensed', 'Gotham', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Apercu Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Layout */
--max-width: 1320px;
--max-width-narrow: 860px;
--max-width-wide: 1440px;
--radius: 12px;
--radius-sm: 8px;
/* Ombres */
--shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
--shadow-md: 0 4px 6px rgba(0,0,0,.04), 0 10px 15px rgba(0,0,0,.06);
--shadow-lg: 0 10px 25px rgba(0,0,0,.06), 0 20px 50px rgba(0,0,0,.08);
/* Animation */
--transition: .3s cubic-bezier(.4,0,.2,1);
/* Header */
--header-height: 72px;
}
/* ============================================
RESET & BASE
============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; scroll-padding-top: var(--header-height); overflow-x: hidden; }
[id] { scroll-margin-top: var(--header-height); }
body {
font-family: var(--font-body);
font-size: 21.333px;
line-height: 1.7;
color: var(--color-text);
background: var(--color-bg);
display: flex;
flex-direction: column;
min-height: 100vh;
/* PAS d'overflow-x ici. La regle maison n°14 demande html ET body, mais sur body
elle cree un conteneur de defilement qui neutralise tout position:sticky a
l'interieur (menu lateral .section-nav des pages a colonne, une quarantaine de
pages, a partir de 1000px). La regle sur html (ligne 58) suffit : verifie a
320/375/768/1024/1440 sur 20 pages, aucun debordement horizontal apres retrait.
Les 3 debordements reels qu'elle masquait ont ete corriges a la source
(contact-grid, qualiopi-indic-table, inscription-bulletin). */
max-width: 100vw;
}
#main-content { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
/* Skip link — accessibility */
.skip-link {
position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
background: var(--color-primary); color: #fff; padding: 8px 24px;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
font-size: 18.667px; font-weight: 600; z-index: 10000;
transition: top var(--transition);
}
.skip-link:focus { top: 0; color: #fff; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
color: var(--color-secondary);
}
h1 { font-size: clamp(2.933rem, 6.667vw, 4.667rem); }
h2 { font-size: clamp(2.133rem, 4.667vw, 3.333rem); }
h3 { font-size: clamp(1.6rem, 3.333vw, 2rem); }
h4 { font-size: 1.467rem; }
h5 { font-size: 1.333rem; }
h6 { font-size: 1.2rem; }
/* ============================================
LAYOUT — Réutilisable partout
============================================ */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--max-width-narrow); }
.section { padding: 96px 0; }
.section:nth-child(even) { background: var(--color-bg-alt); }
.grid { display: grid; gap: 32px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Pas de carte orpheline : une dernière carte seule sur sa rangée est recentrée */
.grid-3 > *:last-child:nth-child(3n + 1) { grid-column: 2 / 3; }
.grid-4 > *:last-child:nth-child(4n + 1) { grid-column: 2 / 4; }
/* ============================================
BUTTONS — Tous basés sur --color-primary
============================================ */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 28px;
font-size: 20px; font-weight: 600;
border-radius: var(--radius);
border: 2px solid transparent;
cursor: pointer;
transition: all var(--transition);
text-decoration: none;
}
.btn-sm { padding: 10px 20px; font-size: 18.667px; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; }
.btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-secondary:hover { background: #fff; color: var(--color-secondary); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }
.btn-secondary-light { background: transparent; color: var(--color-secondary); border-color: var(--color-border); }
.btn-secondary-light:hover { background: var(--color-secondary); color: #fff; transform: translateY(-2px); }
/* ============================================
HEADER / NAV
============================================ */
#site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
background: rgba(255,255,255,.95);
backdrop-filter: blur(12px);
transition: all var(--transition);
}
#site-header.scrolled { box-shadow: var(--shadow); }
.nav-container {
max-width: var(--max-width-wide); margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
padding: 0 32px; height: var(--header-height);
}
.nav-logo img, .nav-logo .custom-logo { height: 48px; width: auto; }
.nav-logo .site-name { font-size: 1.867rem; font-weight: 800; color: var(--color-secondary); }
.nav-menu { display: flex; gap: 4px; list-style: none; }
.nav-menu li a {
display: block; padding: 8px 16px;
font-size: 18.667px; font-weight: 500;
color: var(--color-text); border-radius: var(--radius-sm);
transition: all var(--transition);
}
.nav-menu li a { position: relative; }
.nav-menu li a::after { content: ''; position: absolute; bottom: 2px; left: 16px; right: 16px; height: 2px; background: var(--color-primary); transform: scaleX(0); transition: transform var(--transition); transform-origin: center; }
.nav-menu li a:hover::after, .nav-menu li.current-menu-item a::after { transform: scaleX(1); }
.nav-menu li a:hover,
.nav-menu li.current-menu-item a { color: var(--color-primary); background: var(--color-primary-light); }
/* Dropdown sub-menu */
.nav-menu li { position: relative; }
.nav-menu li .sub-menu { position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; border-radius: var(--radius-md, 8px); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s ease; z-index: 100; }
.nav-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu li .sub-menu li a { padding: 10px 20px; font-size: 17.333px; white-space: nowrap; border-radius: 0; }
.nav-menu li .sub-menu li:not(.menu-item-has-children) a::after { display: none; }
.nav-menu li .sub-menu li a:hover { background: var(--color-primary-light, #f0f9ff); color: var(--color-primary); }
/* Chevron dropdown indicator */
.nav-menu li.menu-item-has-children > a { padding-right: 28px; } .nav-menu li.menu-item-has-children > a::after { content: ''; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); background: none; left: auto; bottom: auto; }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-phone { font-size: 18.667px; font-weight: 600; color: var(--color-text); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; min-width: 44px; min-height: 44px; }
.nav-mobile-cta { display: none; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-secondary); margin: 5px 0; transition: all var(--transition); transform-origin: center; }
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* ============================================
HERO — Composant réutilisable (homepage + pages)
============================================ */
.hero, .page-hero {
position: relative;
display: flex; align-items: center; justify-content: center;
text-align: center;
background-color: var(--color-secondary);
margin-top: var(--header-height);
overflow: hidden;
}
.hero-bg-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
z-index: 0;
transform: translate3d(0, 0, 0) scale(1.1);
will-change: transform;
}
.hero-overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(135deg, rgba(var(--color-secondary-rgb),.85) 0%, rgba(27,140,174,.82) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 800px; padding: 24px; }
.hero-content h1 { color: #fff; margin-bottom: 20px; text-shadow: 0 2px 16px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.5); }
.hero-subtitle { color: rgba(255,255,255,.95); font-size: clamp(1.333rem, 3.333vw, 1.667rem); margin-bottom: 32px; line-height: 1.6; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
/* Fix bug : image .page-hero floutée pour ne pas se superposer aux titres
(pages intérieures uniquement, pas le hero homepage qui a un visuel propre) */
.page-hero .hero-bg-img {
filter: blur(12px) brightness(0.55) saturate(1.2);
transform: scale(1.15) !important;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* ============================================
CARDS — Composant réutilisable
============================================ */
.card {
background: #fff; border-radius: var(--radius);
overflow: hidden;
transition: all var(--transition);
}
a.card-clickable:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-body h3 { margin-bottom: 8px; }
.card-body p { color: var(--color-text-light); font-size: 20px; }
.card-link { display: inline-block; margin-top: 12px; font-size: 18.667px; font-weight: 600; color: var(--color-primary); }
.card-link:hover { color: var(--color-primary-dark); }
.card-link:hover::after { transform: translateX(4px); }
.card-link::after { content: ''; display: inline-block; transition: transform var(--transition); }
.card-date { display: block; font-size: 17.333px; color: var(--color-text-light); margin-bottom: 8px; }
/* ============================================
SECTION TITLES — Réutilisable
============================================ */
/* Section header — Framer-style badge + title with highlight */
.section-badge {
display: inline-block;
padding: 6px 18px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--color-primary);
background: var(--color-primary-light);
border: 1px solid rgba(var(--color-primary-rgb), .15);
border-radius: 100px;
margin-bottom: 16px;
}
.section-badge + .section-title { margin-top: 0; }
.section-header { text-align: center; }
.section-title { text-align: center; margin-bottom: 12px; }
.section-subtitle { text-align: center; color: var(--color-text-light); max-width: 640px; margin: 0 auto 48px; font-size: 22.667px; }
/* ============================================
ABOUT / TEXT+IMAGE — Même layout
============================================ */
.about-section .grid-2 { align-items: start; }
.text-image-section .grid-2 { align-items: center; }
.about-image, .ti-image { overflow: hidden; }
.about-image { display: flex; flex-direction: column; gap: 24px; }
.about-image img, .ti-image img {
display: block;
width: 100%;
border-radius: var(--radius);
}
.about-image .stats-grid { margin-top: 0; }
/* Colonne « chiffres seuls » (photo retirée) : cartes compactes, centrées verticalement
dans la colonne (jolie hauteur autour du chiffre, pas de cases étirées). */
.about-section:has(.about-image--stats-only) .grid-2 { align-items: stretch; }
.about-image--stats-only { justify-content: center; }
.about-image--stats-only .stats-grid { align-content: center; grid-auto-rows: auto; }
.about-image--stats-only .stat { display: flex; flex-direction: column; justify-content: center; }
.about-content h2, .ti-content h2 { margin-bottom: 16px; }
.about-content p, .about-content div, .ti-content p, .ti-content div { color: var(--color-text-light); margin-bottom: 24px; }
.text-image-section.reverse .ti-image { order: -1; }
/* ============================================
INTERNES — Callout accès cours du DES
============================================ */
.internes-section .internes-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
background: var(--color-primary-light);
border: 1px solid rgba(var(--color-primary-rgb), .18);
border-radius: var(--radius);
padding: 48px;
}
.internes-body { flex: 1 1 420px; }
.internes-body h2 { margin: 12px 0 16px; }
.internes-text { color: var(--color-text-light); }
.internes-text p { margin-bottom: 12px; }
.internes-text p:last-child { margin-bottom: 0; }
.internes-action { flex: 0 0 auto; }
@media (max-width: 768px) {
.internes-section .internes-card { padding: 32px 24px; }
.internes-action, .internes-action .btn { width: 100%; text-align: center; }
}
/* ============================================
STATS — Basé sur --color-primary
============================================ */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.stats-grid-wide { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 0; }
.stat { text-align: center; background: var(--color-bg-alt); }
.stat-number { display: block; color: var(--color-primary); }
.stat-label { color: var(--color-text-light); }
.numbers-primary { background: var(--color-primary) !important; }
.numbers-primary .stat { background: rgba(255,255,255,.15); }
.numbers-primary .stat-number { color: #fff; }
.numbers-primary .stat-label { color: rgba(255,255,255,.8); }
.numbers-primary .section-title { color: #fff; }
.numbers-primary .section-subtitle { color: rgba(255,255,255,.8); }
.numbers-primary .section-badge { color: #fff; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.2); }
.numbers-dark { background: var(--color-secondary) !important; }
.numbers-dark .stat { background: rgba(255,255,255,.08); }
.numbers-dark .stat-number { color: var(--color-primary); }
.numbers-dark .stat-label { color: rgba(255,255,255,.7); }
.numbers-dark .section-title { color: #fff; }
.numbers-dark .section-subtitle { color: rgba(255,255,255,.7); }
.numbers-dark .section-badge { color: rgba(255,255,255,.9); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); }
/* ============================================
TESTIMONIALS — Basé sur --color-primary
============================================ */
.testimonial-card {
background: #fff;
box-shadow: var(--shadow);
transition: all var(--transition);
}
.testimonial-card:hover { box-shadow: var(--shadow-lg); }
.testimonial-stars { color: var(--color-accent); font-size: 24px; margin-bottom: 16px; }
.testimonial-card blockquote { font-style: italic; color: var(--color-text-light); margin-bottom: 20px; line-height: 1.7; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial-author strong { display: block; color: var(--color-secondary); }
.testimonial-author span { font-size: 17.333px; color: var(--color-text-light); }
/* ============================================
FAQ ACCORDION
============================================ */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
background: #fff; border-radius: var(--radius);
border: 1px solid var(--color-border);
overflow: hidden;
transition: all var(--transition);
}
.faq-item[open] { box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.faq-item summary {
padding: 20px 24px;
font-weight: 600; font-size: 21.333px;
cursor: pointer;
list-style: none;
display: flex; align-items: center; justify-content: space-between;
transition: color var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 26.667px; color: var(--color-primary); transition: transform var(--transition); }
.faq-item[open] summary::after { content: '−'; }
.faq-item[open] summary { color: var(--color-primary); }
.faq-item summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--radius); }
.faq-answer { padding: 0 24px 20px; color: var(--color-text-light); line-height: 1.7; }
/* ============================================
GALLERY
============================================ */
.gallery-item {
border-radius: var(--radius); overflow: hidden;
transition: all var(--transition);
}
.gallery-item:hover { box-shadow: var(--shadow-lg); }
.gallery-item img { width: 100%; height: 250px; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.gallery-item:hover img { transform: scale(1.05); }
/* ============================================
CTA BANNER — Overlay basé sur --color-primary
============================================ */
.cta-banner {
position: relative; padding: 80px 24px;
text-align: center;
background-color: var(--color-secondary);
overflow: hidden;
}
.cta-overlay {
position: absolute; inset: 0; z-index: 1;
background:
radial-gradient(ellipse 80% 60% at 18% 12%, rgba(255,255,255,.09) 0%, transparent 60%),
linear-gradient(120deg,
rgba(var(--color-primary-rgb), .92) 0%,
rgba(var(--color-primary-rgb), .90) 38%,
rgba(var(--color-secondary-rgb), .90) 72%,
rgba(var(--color-secondary-rgb), .88) 100%);
}
.cta-content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.cta-content h2 { color: #fff; margin-bottom: 16px; }
.cta-content p,
.cta-content .cta-text { color: #fff; margin-bottom: 48px; font-size: 22.667px; line-height: 1.7; }
.cta-content .cta-text p { margin-bottom: 0; color: #fff; }
.cta-banner .btn-primary { background: #fff; color: var(--color-primary); }
.cta-banner .btn-primary:hover { background: var(--color-bg-alt); }
/* ============================================
CONTACT FORM (CF7) — Basé sur --color-primary
============================================ */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
width: 100%; padding: 14px 18px;
font-size: 20px; font-family: var(--font-body);
border: 1px solid var(--color-border);
border-radius: var(--radius);
transition: border-color var(--transition);
background: #fff;
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus {
outline: none; border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-light);
}
.wpcf7 textarea { min-height: 150px; resize: vertical; }
.wpcf7 input[type="submit"] {
background: var(--color-primary); color: #fff;
padding: 14px 32px; border: none;
border-radius: var(--radius); font-size: 20px; font-weight: 600;
cursor: pointer; transition: all var(--transition);
}
.wpcf7 input[type="submit"]:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; }
.contact-info h3 { margin-bottom: 24px; }
.contact-info-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.contact-info-item .icon {
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
/* Font Awesome icons — inherit theme colors */
.card-icon i, .contact-info-item .icon i {
font-size: inherit;
color: inherit;
}
/* ============================================
FOOTER — Basé sur --color-secondary
============================================ */
#site-footer { background: var(--color-secondary); color: rgba(255,255,255,.7); }
.footer-container {
max-width: var(--max-width); margin: 0 auto; padding: 0 24px;
display: grid; grid-template-columns: 2fr 1fr 1fr;
}
.footer-brand .footer-logo img,
.footer-brand .footer-logo .custom-logo { height: 40px; width: auto; filter: brightness(0) invert(1); margin-bottom: 16px; }
.footer-brand .footer-logo span { font-size: 1.733rem; font-weight: 700; color: #fff; }
.footer-description { font-size: 18.667px; line-height: 1.7; }
.footer-social { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.footer-social a { font-size: 17.333px; color: rgba(255,255,255,.5); padding: 4px 8px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-sm); }
.footer-social a:hover { color: #fff; border-color: var(--color-primary); transform: translateY(-2px); }
.footer-social a { transition: all var(--transition); }
#site-footer h3 { color: rgba(255,255,255,.4); font-size: 16px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 20px; }
.footer-menu { list-style: none; }
.footer-menu li a { display: block; padding: 4px 0; color: rgba(255,255,255,.7); font-size: 18.667px; }
.footer-menu li a:hover { color: #fff; }
.footer-contact a, .footer-contact p { display: block; margin-bottom: 8px; color: rgba(255,255,255,.7); font-size: 18.667px; }
.footer-contact a:hover { color: #fff; }
.footer-bottom {
max-width: var(--max-width); margin: 48px auto 0; padding: 24px;
border-top: 1px solid rgba(255,255,255,.08);
display: flex; justify-content: space-between; align-items: center;
font-size: 17.333px;
}
.footer-bottom a { color: var(--color-primary); }
/* ============================================
BLOG — Article single (see enhanced styles below)
============================================ */
.pagination { text-align: center; margin-top: 48px; }
.pagination .nav-links { display: flex; justify-content: center; gap: 8px; }
.pagination a, .pagination span { padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 18.667px; }
.pagination a:hover { background: var(--color-bg-alt); border-color: var(--color-primary); color: var(--color-primary); }
.pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
/* ============================================
PAGE CONTENT (WP editor)
============================================ */
.page-content-section p { margin-bottom: 16px; color: var(--color-text-light); }
.page-content-section h2 { margin: 32px 0 16px; }
.page-content-section ul, .page-content-section ol { margin: 16px 0; padding-left: 24px; }
.page-content-section li { margin-bottom: 8px; color: var(--color-text-light); }
/* ============================================
BLOG CARDS — Listing articles
============================================ */
.blog-card-link { display: block; color: inherit; text-decoration: none; }
.blog-card-link:hover { color: inherit; }
.blog-card-placeholder { height: 240px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-alt, #f8fafc); color: var(--color-text-light); }
/* Defensive: blog-card images use contain on a soft neutral background so small/banner source images are never stretched. Proper 16:10 images still look great since contain fills the ratio when source matches. */
.blog-card img {
object-fit: contain !important;
background: linear-gradient(135deg, #f5f7fa 0%, #eaf0f4 100%);
padding: 8px;
}
.blog-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 17.333px; color: var(--color-text-light); }
.blog-card-meta time { display: inline; }
.blog-card-cat { background: var(--color-primary); color: #fff; padding: 2px 10px; border-radius: 20px; font-size: 14.667px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.blog-card .card-body h3 { font-size: 24px; margin-bottom: 8px; line-height: 1.4; }
.blog-card .card-body p { font-size: 18.667px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Article single — meilleur design */
.article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; font-size: 18.667px; color: var(--color-text-light); }
.article-cat { background: var(--color-primary); color: #fff; padding: 3px 12px; border-radius: 20px; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.article-content { font-size: 22.667px; line-height: 1.8; color: var(--color-text); }
.article-content p { margin-bottom: 20px; }
.article-content h2 { margin: 40px 0 16px; font-size: 37.333px; }
.article-content h3 { margin: 32px 0 12px; font-size: 29.333px; }
.article-content img { border-radius: var(--radius); margin: 24px 0; max-width: 100%; height: auto; }
.article-content blockquote { border-left: 4px solid var(--color-primary); padding: 16px 24px; margin: 24px 0; background: var(--color-bg-alt, #f8fafc); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--color-text-light); }
.article-content ul, .article-content ol { margin: 16px 0; padding-left: 24px; }
.article-content li { margin-bottom: 8px; }
.article-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--color-border); }
/* ============================================
ANIMATIONS — Scroll reveal + stagger + parallax
============================================ */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
/* Stagger children (cards, stats, faq items) */
.reveal .card,
.reveal .faq-item,
.reveal .stat,
.reveal .testimonial-card,
.reveal .team-member {
opacity: 0;
transform: translateY(24px);
transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.reveal.visible .card,
.reveal.visible .faq-item,
.reveal.visible .stat,
.reveal.visible .testimonial-card,
.reveal.visible .team-member {
opacity: 1;
transform: translateY(0);
}
/* Counter animation — numbers start invisible until JS kicks in */
.stat-number {
transition: none;
}
/* Parallax — prevent background clipping */
.hero, .page-hero, .cta-banner {
background-attachment: scroll;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal, .reveal .card, .reveal .faq-item, .reveal .stat, .reveal .testimonial-card, .reveal .team-member {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.marquee-track { animation: none !important; }
.stat-number { transition: none !important; }
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 960px) {
.grid-2 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.nav-menu, .nav-cta { display: none; }
.nav-toggle { display: block; }
.nav-menu.active {
display: flex; flex-direction: column;
position: absolute; top: var(--header-height); left: 0; right: 0;
background: #fff; border-bottom: 1px solid var(--color-border);
padding: 16px; box-shadow: var(--shadow-lg); z-index: 999;
max-height: calc(100vh - var(--header-height)); overflow-y: auto;
}
.nav-cta { display: none !important; }
.nav-mobile-cta {
display: none; flex-direction: column; gap: 12px;
padding: 16px; border-top: 1px solid var(--color-border);
}
.nav-menu.active ~ .nav-mobile-cta {
display: flex;
}
.section { padding: 64px 0; }
.hero { min-height: 70vh; }
.text-image-section .grid-2 { gap: 32px; }
}
@media (max-width: 768px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.footer-container { grid-template-columns: 1fr; gap: 32px; }
.footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
.about-section .grid-2 { gap: 24px; }
.gallery-item img { height: 200px; }
.section { padding: 56px 0; }
.stat-number { font-size: 2.933rem; }
.stat { padding: 20px 16px; }
.cta-banner { padding: 64px 24px; }
.stats-grid-wide { grid-template-columns: 1fr 1fr; }
.testimonial-card { padding: 24px; }
.marquee-track .testimonial-card { min-width: 280px; max-width: 320px; }
.marquee-track { gap: 16px; }
/* La regle mobile de .back-to-top vivait ici : elle etait morte, la declaration
de base (plus bas, meme specificite) la reecrivait. Elle est regroupee avec le
reste du bouton, apres la declaration de base. */
.page-hero {
aspect-ratio: auto !important;
min-height: 208px;
padding: 45px 0 38px;
width: 100%;
max-width: 100vw;
}
.page-hero .hero-content { padding: 16px 20px; max-width: 100%; }
.page-hero .hero-content h1 { font-size: clamp(2rem, 8vw, 2.667rem); line-height: 1.25; word-wrap: break-word; }
.page-hero .hero-subtitle { font-size: 20px; line-height: 1.55; }
.hero { min-height: 60vh; width: 100%; max-width: 100vw; }
.hero-content { padding: 16px 20px; max-width: 100%; }
.hero-bg-img { width: 100%; max-width: 100%; }
}
/* ============================================
DESIGN UPGRADE — Premium touches
============================================ */
/* Smooth gradient accent line under header */
#site-header { border-bottom: none; }
#site-header::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
opacity: .7;
}
/* Hero improvements — bigger impact */
.hero { min-height: 85vh; }
.hero-content h1 { font-size: clamp(3.2rem, 7.333vw, 5.067rem); letter-spacing: -.02em; }
.hero-subtitle { font-size: clamp(1.4rem, 3.333vw, 1.733rem); max-width: 600px; margin-left: auto; margin-right: auto; }
.hero-buttons .btn-primary { font-size: 21.333px; padding: 16px 36px; }
.hero-buttons .btn-secondary { font-size: 21.333px; padding: 16px 36px; }
/* Section spacing improvements */
.section-title { font-size: clamp(2.133rem, 4vw, 2.933rem); letter-spacing: -.01em; margin-bottom: 16px; font-weight: 800; }
.section-subtitle { font-size: 22.667px; line-height: 1.7; }
/* Cards - more polished */
.card { border: 1px solid var(--color-border); box-shadow: none; }
a.card-clickable:hover { box-shadow: var(--shadow-lg); border-color: var(--color-primary); }
.card img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; display: block; }
.card-body { padding: 28px; }
.card-body h3 { font-size: 1.6rem; margin-bottom: 12px; }
.card-body p { font-size: 20px; line-height: 1.7; }
/* Card icon badges — circled colored icons */
.card-icon {
width: 56px; height: 56px;
background: var(--color-primary);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 2.133rem;
margin: 28px 0 0 28px;
color: #fff;
}
.card-icon i { color: #fff; }
.yv-icon-glyph { line-height: 1; font-size: 2rem; font-style: normal; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
/* About / Text+Image — upgraded styling */
.about-image, .ti-image { border-radius: 16px; }
.about-image img, .ti-image img {
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,.12);
width: 100%;
}
.about-content h2, .ti-content h2 { font-size: clamp(2rem, 4vw, 2.667rem); }
.about-content p, .ti-content p { font-size: 21.333px; line-height: 1.8; }
/* Stats — bigger numbers, cleaner look */
.stat { padding: 32px 20px; border-radius: 16px; }
.stat-number { font-size: 4rem; font-weight: 900; letter-spacing: -.02em; }
.stat-label { font-size: 20px; margin-top: 8px; font-weight: 500; }
/* Testimonials — softer cards with left border accent */
.testimonial-card {
border-left: 4px solid var(--color-primary);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 36px;
}
.marquee-track .testimonial-card {
min-width: 340px;
max-width: 420px;
flex-shrink: 0;
}
.testimonial-card blockquote { font-size: 21.333px; line-height: 1.8; }
.testimonial-author img { width: 52px; height: 52px; border: 2px solid var(--color-primary-light); }
/* Testimonials marquee — horizontal infinite scroll */
.testimonials-marquee {
overflow: hidden;
padding: 8px 0 16px;
}
.marquee-track {
display: flex;
gap: 24px;
width: max-content;
animation: marquee-scroll 40s linear infinite;
padding: 8px 0;
will-change: transform;
}
.marquee-track[data-direction="right"] {
animation-name: marquee-scroll-reverse;
}
.testimonials-marquee:hover .marquee-track {
animation-play-state: paused;
}
/* Two rows: add gap between */
.marquee-track + .marquee-track {
margin-top: 24px;
}
@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes marquee-scroll-reverse {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
/* (consolidated into main 768px block) */
/* CTA — more dramatic gradient */
.cta-banner { padding: 96px 24px; }
.cta-content h2 { font-size: clamp(2.4rem, 5.333vw, 3.733rem); }
.cta-content p,
.cta-content .cta-text { font-size: 24px; line-height: 1.7; }
/* FAQ — better interactions */
.faq-item { border-radius: 12px; }
.faq-item summary { font-size: 22.667px; padding: 22px 28px; }
.faq-answer { padding: 0 28px 24px; font-size: 21.333px; overflow: hidden; transition: max-height .3s ease, opacity .3s ease; }
.faq-answer p { margin-bottom: 12px; }
/* Page hero — more dramatic for interior pages (desktop/tablet only) */
@media (min-width: 769px) {
.page-hero { min-height: max(28vh, 25vw); } /* ex aspect-ratio 16/4 : debordait en fenetre haute/portrait */
.page-hero .hero-content h1 { font-size: clamp(2.667rem, 6vw, 4rem); }
}
/* Numbers section — better grid on desktop */
.numbers-primary, .numbers-dark { border-radius: 0; }
.numbers-primary .stats-grid-wide,
.numbers-dark .stats-grid-wide {
max-width: var(--max-width);
margin: 0 auto;
}
/* Text+Image — better spacing */
.text-image-section { padding: 96px 0; }
.text-image-section .grid-2 { gap: 48px; }
.ti-content { padding: 16px 0; }
/* Contact improvements */
.contact-grid {
display: grid !important;
grid-template-columns: 1.2fr 1fr !important;
gap: 2rem;
padding: 0;
align-items: start;
}
.contact-form,
.contact-info {
background: #fff;
border: 1px solid var(--color-border, #e3e8eb);
border-radius: 16px;
padding: 2.25rem 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,.04);
/* Sans min-width:0, la piste 1fr prend la min-content de la carte. Les champs
CF7 portent un attribut size qui leur impose 315px de min-content : la carte
mesurait 332px dans un viewport de 320px, soit 12px de debordement. */
min-width: 0;
overflow-wrap: break-word;
}
.contact-form .wpcf7-form-control:not([type="submit"]) { min-width: 0; }
.contact-form h2,
.contact-info h3 {
margin: 0 0 1.5rem;
font-size: 2rem;
color: var(--color-primary);
line-height: 1.3;
}
.contact-form .wpcf7 { max-width: 100%; }
.contact-form .wpcf7-form-control:not([type="submit"]) {
width: 100%;
padding: .85rem 1rem;
border: 1px solid var(--color-border, #e3e8eb);
border-radius: 8px;
background: #fafbfc;
font-size: 1.267rem;
font-family: inherit;
transition: all .15s ease;
}
.contact-form .wpcf7-form-control:not([type="submit"]):focus {
border-color: var(--color-primary);
background: #fff;
outline: none;
box-shadow: 0 0 0 3px rgba(20, 90, 130, .1);
}
.contact-form .wpcf7 p {
margin: 0 0 1rem;
}
.contact-form .wpcf7 label {
display: block;
font-weight: 600;
font-size: 1.133rem;
color: var(--color-text, #1d2b34);
margin-bottom: .35rem;
}
.contact-form .wpcf7-submit {
margin-top: 1rem;
background: var(--color-primary);
color: #fff;
padding: .85rem 2rem;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all .15s ease;
width: auto;
}
.contact-form .wpcf7-submit:hover {
background: var(--color-primary-dark, #134d6f);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(20, 90, 130, .25);
}
.contact-info-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--color-border, #e3e8eb);
}
.contact-info-item:last-child { border-bottom: none; padding-bottom: 0; }
.contact-info-item .icon {
width: 44px; height: 44px;
flex-shrink: 0;
border-radius: 10px;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent, #2c8aa8));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.333rem;
}
.contact-info-item strong {
display: block;
font-size: 1.067rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--color-text-light, #5d7580);
margin-bottom: .15rem;
font-weight: 600;
}
.contact-info-item a {
color: var(--color-text, #1d2b34);
text-decoration: none;
font-weight: 500;
}
.contact-info-item a:hover { color: var(--color-primary); text-decoration: underline; }
@media (max-width: 768px) {
.contact-grid {
grid-template-columns: 1fr !important;
gap: 1.25rem;
}
.contact-form, .contact-info {
padding: 1.5rem 1.25rem;
border-radius: 12px;
}
.contact-form h2, .contact-info h3 { font-size: 1.6rem; }
}
/* Maps */
.contact-map iframe { border-radius: var(--radius); }
/* Footer refinement */
#site-footer { padding: 80px 0 0; }
.footer-container { gap: 64px; }
.footer-brand .footer-logo span { font-size: 2rem; }
.footer-description { font-size: 20px; margin-top: 12px; }
/* Blog cards enhancement */
.blog-card .card-body { padding: 24px 28px; }
.blog-card .card-body h3 { font-size: 1.533rem; }
/* Print styles */
@media print {
#site-header, #site-footer, .cta-banner, .nav-toggle { display: none !important; }
.hero, .page-hero { min-height: auto; padding: 32px 0; }
.hero-overlay, .cta-overlay { display: none; }
.section { padding: 24px 0; }
}
/* (consolidated into main 960px block above) */
/* (consolidated into main 768px block) */
/* Badge + title centering for all sections */
.cards-section .container, .services-section .container, .testimonials-section .container, .faq-section .container, .numbers-section .container, .team-section .container, .gallery-section .container, .video-section .container { text-align: center; }
.cards-section .grid, .services-section .grid, .faq-section .faq-list, .team-section .grid, .gallery-section .grid { text-align: left; }
/* 404 page */
.error-404-section { min-height: 60vh; display: flex; align-items: center; margin-top: var(--header-height); }
.error-404 { text-align: center; }
.error-404-code { font-size: 8rem; color: var(--color-primary); line-height: 1; margin-bottom: 8px; }
.error-404-text { font-size: 1.6rem; color: var(--color-text-light); margin: 16px 0 32px; }
/* Back to top */
.back-to-top {
position: fixed; bottom: 32px; right: 32px;
width: 44px; height: 44px;
background: var(--color-primary); color: #fff;
border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 21.333px; box-shadow: var(--shadow-md);
opacity: 0; pointer-events: none;
transition: all var(--transition); z-index: 9990;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--color-primary-dark); transform: translateY(-2px); color: #fff; }
.back-to-top:active { transform: scale(.92); }
/* --- Bouton flottant : ne jamais voler un appui a un champ de formulaire ---
Mesure a l'origine : sur /contact/ en 375px, a 1600px de defilement le bouton
recouvrait le champ « Telephone » et a 1900px le champ « Message », et c'est lui
qui recevait l'appui (elementFromPoint renvoyait l'icone du bouton).
Le simple deplacement (40px, 20px du bord) ne reglait rien : le champ occupe
toute la largeur. Le garde de footer.php pose .is-over-form des que le bouton
surplombe un controle de formulaire ; le bouton s'efface alors le temps qu'il
faut, et revient des qu'on a defile au-dela. */
.back-to-top.is-over-form { opacity: 0; pointer-events: none; }
/* Le bandeau de consentement (.yv-cb, z-index 99999) recouvrait entierement le
bouton tant qu'il n'etait pas ferme : le bouton « Accepter » recevait chaque
appui. On se cale au-dessus du bandeau en reprenant sa propre variable de
hauteur, posee sur par le plugin youvanna-cookies. */
html.yv-cb-open .back-to-top { bottom: calc(var(--yv-cb-h, 0px) + 16px); }
@media (max-width: 768px) {
.back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }
html.yv-cb-open .back-to-top { bottom: calc(var(--yv-cb-h, 0px) + 12px); }
}
/* (consolidated into main 768px block) */
/* Video section */
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Team section */
.team-member { text-align: center; transition: all var(--transition); border-radius: var(--radius); overflow: hidden; padding-bottom: 24px; }
.team-member:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.team-member img { width: 100%; height: 280px; object-fit: cover; border-radius: var(--radius); margin-bottom: 16px; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.team-member:hover img { transform: scale(1.05); }
.team-member-info h3 { margin-bottom: 4px; }
.team-role { display: block; color: var(--color-primary); font-size: 18.667px; font-weight: 600; margin-bottom: 8px; }
.team-member-info p { font-size: 18.667px; color: var(--color-text-light); }
/* Text section (WYSIWYG) */
.text-section-content { line-height: 1.8; font-size: 22.667px; }
.text-section-content p { margin-bottom: 16px; }
.text-section-content h2 { margin: 32px 0 16px; }
.text-section-content h3 { margin: 24px 0 12px; }
.text-section-content ul, .text-section-content ol { margin: 16px 0; padding-left: 24px; }
.text-section-content li { margin-bottom: 8px; }
.text-section-content img { border-radius: var(--radius); margin: 24px 0; max-width: 100%; height: auto; }
.text-section-content blockquote { border-left: 4px solid var(--color-primary); padding: 16px 24px; margin: 24px 0; background: var(--color-bg-alt); border-radius: 0 var(--radius) var(--radius) 0; }
/* Footer social icons */
.footer-social a i { font-size: 20px; }
.footer-social .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Search no results */
.search-no-results { text-align: center; padding: 48px 0; }
.search-no-results p { font-size: 1.467rem; color: var(--color-text-light); margin-bottom: 24px; }
/* Body scroll lock (mobile menu) */
body.overflow-hidden { overflow: hidden; }
/* Focus-visible — WCAG 2.1 AA compliance */
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }
.gallery-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.back-to-top:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.card-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.blog-card-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius); }
/* Gallery hover overlay */
.gallery-item { position: relative; }
.gallery-item::after {
content: '\f00e'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(var(--color-secondary-rgb), .4);
color: #fff; font-size: 32px;
opacity: 0; transition: opacity var(--transition);
border-radius: var(--radius);
}
.gallery-item:hover::after { opacity: 1; }
/* Map section (flex content) */
.map-section .container { text-align: center; }
.map-wrapper iframe { border-radius: var(--radius); box-shadow: var(--shadow-md); }
/* CF7 form states */
.wpcf7 .wpcf7-not-valid { border-color: #ef4444 !important; }
.wpcf7 .wpcf7-not-valid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.wpcf7 .wpcf7-response-output { border-radius: var(--radius); padding: 16px 20px; font-size: 18.667px; margin-top: 16px; }
.wpcf7 .wpcf7-mail-sent-ok, .wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok { border-color: #10b981; color: #065f46; background: #ecfdf5; }
.wpcf7 .wpcf7-validation-errors { border-color: #ef4444; color: #991b1b; background: #fef2f2; }
.wpcf7 label { display: block; font-size: 18.667px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
/* Webhook sync test — 2026-04-08T15:31:50Z */
/* Card clickable — toute la carte est un lien */
a.card-clickable {
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
}
a.card-clickable:hover { text-decoration: none; color: inherit; }
a.card-clickable .card-link { color: var(--color-primary); }
a.card-clickable:hover .card-link { color: var(--color-primary-dark); }
/* Nested sub-menus — open to the right */
.nav-menu li .sub-menu .sub-menu {
top: 0;
left: 100%;
transform: translateX(8px);
margin-top: -8px;
}
.nav-menu li .sub-menu li:hover > .sub-menu {
opacity: 1; visibility: visible; transform: translateX(0);
}
/* Chevron right for nested dropdown parent */
.nav-menu .sub-menu li.menu-item-has-children > a::after {
display: block !important;
content: '';
position: absolute;
right: 12px;
top: 50%;
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-50%) rotate(-45deg);
background: none;
left: auto;
bottom: auto;
}
/* Header items vertical alignment */
.nav-menu > li > a {
display: flex;
align-items: center;
text-align: center;
min-height: 60px;
}
/* ============================================
SFSCMFCO DESIGN ENHANCEMENTS
============================================ */
/* Hero — darker overlay for text readability */
.hero-overlay { background: linear-gradient(135deg, rgba(1,73,108,0.85) 0%, rgba(27,140,174,0.7) 100%); }
/* Section badges — SFSCMFCO override (gradient teal) */
.section-badge {
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
color: #fff;
border-color: transparent;
}
/* Cards — refined hover with SFSCMFCO accent */
.card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
a.card-clickable:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(27,140,174,0.15); }
/* About section — gradient accent line */
.about-content h2::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: linear-gradient(to right, var(--color-primary), var(--color-accent));
margin-top: 16px;
border-radius: 2px;
}
/* Stats counter — SFSCMFCO color */
.stat-number {
font-family: var(--font-heading);
font-size: 3.333rem;
font-weight: 900;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* CTA banner - better contrast */
.cta-banner { position: relative; overflow: hidden; }
/* Section text_image — better layout */
.text-image-section .container { gap: 48px; }
/* Team members grid */
.team-member { text-align: center; }
.team-member img { border-radius: 50%; width: 120px; height: 120px; object-fit: cover; border: 3px solid var(--color-primary-light); }
/* FAQ — refined accordion */
.faq-item { border-left: 3px solid var(--color-primary); }
.faq-item[open] { border-left-color: var(--color-accent); }
/* Page hero — gradient overlay */
.page-hero .hero-overlay {
background: linear-gradient(135deg, rgba(1,73,108,0.8) 0%, rgba(27,140,174,0.6) 100%);
}
/* Congress section on homepage */
.congres-section .card img { height: 200px; object-fit: cover; }
.videos-section .card img { height: 180px; object-fit: cover; }
/* ============================================
SFSCMFCO HOME — Sections enrichies (v3)
============================================ */
/* Section CTA row (boutons sous une section) */
.section-cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
/* --- Featured event (61e Congrès) --- */
.featured-event { padding: 96px 0; background: linear-gradient(135deg, #f5f9fb 0%, #eaf5f8 100%); }
.featured-event-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.featured-event-image { display: flex; justify-content: center; }
.featured-event-image img { width: auto; max-width: 100%; max-height: 520px; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(1,73,108,.18); transition: transform var(--transition); }
.featured-event-image a:hover img { transform: translateY(-4px); }
.event-badge { display: inline-block; padding: 6px 16px; border-radius: 100px; background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); color: #fff; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.featured-event-content h2 { font-size: clamp(2.4rem, 4.667vw, 3.467rem); margin-bottom: 12px; color: var(--color-primary-dark); }
.featured-event-content .event-place { font-size: 24px; font-weight: 600; color: var(--color-primary); margin-bottom: 16px; }
.featured-event-content .event-lead { font-size: 21.333px; line-height: 1.7; color: var(--color-text-light); margin-bottom: 28px; }
.featured-event-cta { display: flex; gap: 14px; flex-wrap: wrap; }
/* --- Agenda compact --- */
.agenda-section { background: var(--color-bg-alt); }
.agenda-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.agenda-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: all var(--transition); display: flex; flex-direction: column; text-decoration: none; color: inherit; border-top: 4px solid var(--color-primary); }
.agenda-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.agenda-card-media { aspect-ratio: 4/3; overflow: hidden; background: var(--color-bg); }
.agenda-card-media img { width: 100%; height: 100%; object-fit: cover; }
.agenda-card-body { padding: 20px 22px 24px; }
.agenda-tag { display: inline-block; padding: 4px 10px; background: var(--color-primary-light); color: var(--color-primary); border-radius: 100px; font-size: 14.667px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.agenda-card h3 { font-size: 1.4rem; line-height: 1.35; margin-bottom: 8px; color: var(--color-secondary); }
.agenda-meta { font-size: 18.667px; color: var(--color-text-light); margin-bottom: 12px; }
/* --- Agenda : mini-calendrier (gauche) + 2 affiches (droite) --- */
.agenda-layout { display: grid; grid-template-columns: 1fr 1.35fr; gap: 32px; align-items: start; }
.agenda-activites { display: grid; gap: 20px; }
.activites-group { background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; }
.activites-col-title { font-size: 1.067rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-primary); margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border-soft); }
.activites-list { list-style: none; margin: 0; padding: 0; }
.activites-list li + li { border-top: 1px solid var(--color-border-soft); }
.activite-row { display: flex; align-items: center; gap: 14px; padding: 12px 6px; text-decoration: none; color: var(--color-text); border-radius: var(--radius-sm); transition: background var(--transition), padding var(--transition), color var(--transition); }
.activite-check { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--color-primary-rgb), .1); color: var(--color-primary); transition: background var(--transition), color var(--transition); }
.activite-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.activite-label { font-weight: 600; font-size: 1.267rem; line-height: 1.3; color: var(--color-secondary); }
.activite-meta { font-size: 1.04rem; color: var(--color-text-light); }
.activite-badge { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--color-red); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.5; }
.activite-arrow { margin-left: auto; color: var(--color-primary); opacity: 0; transform: translateX(-6px); transition: opacity var(--transition), transform var(--transition); }
a.activite-row:hover { background: var(--color-bg-alt); padding-left: 12px; }
a.activite-row:hover .activite-check { background: var(--color-primary); color: #fff; }
a.activite-row:hover .activite-label { color: var(--color-primary); }
a.activite-row:hover .activite-arrow { opacity: 1; transform: translateX(0); }
/* Colonne droite : carte verticale format affiche (moins large, moins haute) */
.agenda-events { display: grid; gap: 20px; }
.agenda-events .agenda-card-media { aspect-ratio: 3/4; }
.agenda-events .agenda-card-body { padding: 16px 18px 20px; }
.agenda-events .agenda-card h3 { font-size: 1.333rem; }
/* Mini-calendrier compact */
.agenda-calendar { min-width: 0; background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.minical-row { min-width: 0; }
.agenda-calendar-title { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-primary); margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border-soft); }
.minical-list { list-style: none; margin: 0; padding: 0; }
.minical-list li + li { border-top: 1px solid var(--color-border-soft); }
.minical-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; text-decoration: none; color: var(--color-text); border-radius: var(--radius-sm); transition: background var(--transition), padding var(--transition); }
.minical-ico { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(var(--color-primary-rgb), .1); color: var(--color-primary); }
.minical-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.minical-label { font-weight: 600; font-size: 1rem; line-height: 1.25; color: var(--color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minical-place { font-size: .8rem; color: var(--color-text-light); }
.minical-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; text-align: right; }
.minical-date { font-weight: 700; font-size: .9rem; color: var(--color-secondary); white-space: nowrap; }
.minical-badge { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; line-height: 1.6; white-space: nowrap; color: #fff; }
.minical-badge.is-soon { background: var(--color-green); }
.minical-badge.is-past { background: var(--color-red); }
a.minical-row:hover { background: var(--color-bg-alt); padding-left: 8px; }
/* Colonne droite : 2 affiches contenues dans le cadre, carte max 55vh */
.agenda-posters { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.poster-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition); max-height: 55vh; }
.poster-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.poster-card-media { flex: 0 0 auto; height: 30vh; display: grid; place-items: center; background: var(--color-secondary); padding: 10px; overflow: hidden; }
.poster-card-media img { max-width: 100%; max-height: 28vh; width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.poster-card-body { padding: 14px 16px 18px; flex: 0 0 auto; }
.poster-card h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 6px; color: var(--color-secondary); }
.card-link { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--color-primary); font-size: .92rem; }
/* Carrousel de tous les congrès */
.congres-carousel-wrap { margin-top: 44px; }
.congres-carousel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 16px; }
.congres-carousel-head h3 { margin: 0; font-size: 1.5rem; color: var(--color-secondary); }
.congres-carousel-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.ccar-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border-soft); background: #fff; color: var(--color-primary); font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background var(--transition), color var(--transition); }
.ccar-btn:hover { background: var(--color-primary); color: #fff; }
.congres-carousel { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
/* 3 cartes visibles par vue (gap 18px -> 2 gaps = 36px), moins serré */
.ccar-card { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition); }
.ccar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
/* Hauteur fixe conservée + affiche entière (contain) sur un fond sombre facon cadre */
.ccar-media { position: relative; height: 300px; overflow: hidden; background: var(--color-secondary); display: grid; place-items: center; }
.ccar-media img { width: 100%; height: 100%; object-fit: contain; }
.ccar-badge { position: absolute; top: 10px; left: 10px; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; color: #fff; }
.ccar-badge.is-soon { background: var(--color-green); }
.ccar-badge.is-past { background: var(--color-red); }
.ccar-body { padding: 12px 14px 16px; }
.ccar-body h4 { margin: 0; font-size: .96rem; line-height: 1.3; color: var(--color-secondary); }
/* Ressources (À revoir) descendu en section propre */
.ressources-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ressource-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: var(--color-text); transition: transform var(--transition), box-shadow var(--transition); }
.ressource-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ressource-ico { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--color-primary-rgb), .1); color: var(--color-primary); }
.ressource-label { font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: var(--color-secondary); flex: 1; }
a.ressource-card:hover .activite-arrow { opacity: 1; transform: translateX(0); }
@media (max-width: 900px) {
.agenda-layout { grid-template-columns: 1fr; gap: 24px; }
.agenda-events { max-width: 420px; margin: 0 auto; }
.agenda-events .agenda-card-media { aspect-ratio: 4/3; }
.poster-card { max-height: none; }
.poster-card-media { height: auto; }
.poster-card-media img { max-height: 60vh; }
}
@media (max-width: 560px) {
.agenda-posters { grid-template-columns: 1fr; }
.ccar-card { flex-basis: 158px; }
.poster-card-media img { max-height: 70vh; }
}
/* --- Humanitarian feature card --- */
.humanitarian-section { padding: 96px 0; }
.humanitarian-card { background: linear-gradient(135deg, #f5f9fb 0%, #eaf5f8 100%); border-radius: 16px; padding: 56px; box-shadow: 0 4px 24px rgba(1,73,108,.08); }
.humanitarian-header { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 40px; }
.humanitarian-bar { flex-shrink: 0; width: 6px; align-self: stretch; background: linear-gradient(180deg, var(--color-primary-dark), var(--color-turquoise)); border-radius: 3px; }
.humanitarian-header h2 { color: var(--color-primary-dark); font-size: clamp(2rem, 4vw, 2.933rem); margin-top: 4px; }
.humanitarian-meta { color: var(--color-primary); font-weight: 600; font-size: 20px; margin-top: 8px; }
.humanitarian-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; margin-bottom: 32px; }
.humanitarian-text p { font-size: 21.333px; line-height: 1.8; color: var(--color-text); margin-bottom: 16px; }
.humanitarian-text ul { list-style: none; padding: 0; }
.humanitarian-text li { position: relative; padding-left: 28px; margin-bottom: 14px; line-height: 1.6; color: var(--color-text); }
.humanitarian-text li::before { content: ''; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-turquoise)); }
.humanitarian-figure { margin: 0; }
.humanitarian-figure img { width: 100%; border-radius: var(--radius); box-shadow: 0 12px 40px rgba(1,73,108,.15); }
.humanitarian-figure figcaption { font-size: 17.333px; color: var(--color-text-light); padding: 12px 4px 0; line-height: 1.5; font-style: italic; }
.humanitarian-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
/* --- Features cards (Atlas, Aventuriers, Qualiopi) --- */
.features-grid { gap: 32px; }
.feature-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: all var(--transition); text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(1,73,108,.18); color: inherit; }
.feature-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.feature-card-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.feature-tag { display: inline-block; padding: 4px 12px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; border-radius: 100px; font-size: 14.667px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; align-self: flex-start; margin-bottom: 14px; }
.feature-card h3 { color: var(--color-primary-dark); margin-bottom: 12px; line-height: 1.3; }
.feature-card p { color: var(--color-text-light); font-size: 20px; line-height: 1.7; flex: 1; margin-bottom: 16px; }
/* --- Quick access / grad strip --- */
.quick-access-section { background: var(--color-bg-alt); }
.grad-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary)); border-radius: 16px; overflow: hidden; padding: 12px; }
.grad-strip-item { display: flex; flex-direction: column; padding: 24px 32px; background: rgba(255,255,255,0); border-radius: 12px; text-decoration: none; color: #fff; transition: all var(--transition); }
.grad-strip-item:hover { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-2px); }
.grad-strip-title { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; margin-bottom: 6px; color: #fff; }
.grad-strip-sub { font-size: 17.333px; color: rgba(255,255,255,.85); }
/* --- Access cards (membres / internes / annuaire) --- */
.access-section { padding: 96px 0; background: linear-gradient(135deg, #01496c 0%, #1b8cae 100%); position: relative; overflow: hidden; }
.access-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(25,190,206,0.18), transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 45%); pointer-events: none; }
.access-section > .container { position: relative; z-index: 1; }
.access-header { text-align: center; max-width: 680px; margin: 0 auto 56px; color: #fff; }
.access-header h2 { color: #fff; font-size: clamp(2.4rem, 5.067vw, 3.2rem); margin: 16px 0 12px; letter-spacing: -.01em; }
.access-header p { color: rgba(255,255,255,.85); font-size: 22.667px; line-height: 1.7; margin: 0; }
.section-badge-light { display: inline-block; padding: 6px 16px; background: rgba(255,255,255,.15); color: #fff; border-radius: 100px; font-size: 14.667px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; border: 1px solid rgba(255,255,255,.25); }
.access-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.access-grid.access-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 960px; margin: 0 auto; }
.access-card { position: relative; background: rgba(255,255,255,.09); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); padding: 40px 32px 32px; color: #fff; text-decoration: none; transition: all var(--transition); display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.access-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-turquoise), #fff, var(--color-turquoise)); opacity: 0; transition: opacity var(--transition); }
.access-card:hover { background: rgba(255,255,255,.16); transform: translateY(-6px); color: #fff; box-shadow: 0 28px 70px rgba(0,0,0,.3); border-color: rgba(255,255,255,.35); }
.access-card:hover::after { opacity: 1; }
.access-icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 4px; transition: all var(--transition); }
.access-card:hover .access-icon { background: var(--color-turquoise); transform: scale(1.05); }
.access-tag { display: inline-block; padding: 4px 12px; background: rgba(255,255,255,.18); color: #fff; border-radius: 100px; font-size: 14.667px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; align-self: flex-start; }
.access-card h3 { color: #fff; font-size: 1.867rem; margin: 0; }
.access-card p { color: rgba(255,255,255,.85); font-size: 20px; line-height: 1.6; flex: 1; margin: 0; }
.access-card .btn { align-self: flex-start; background: #fff; color: var(--color-primary-dark); border-color: #fff; }
.access-card .btn:hover { background: var(--color-turquoise); color: #fff; border-color: var(--color-turquoise); }
.access-link { font-size: 17.333px; color: rgba(255,255,255,.8); }
.access-link strong { color: #fff; }
/* --- Fiches patient grid --- */
.fiches-section { background: var(--color-bg-alt); }
.fiches-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fiche-link { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: #fff; border-radius: var(--radius-sm); border-left: 3px solid var(--color-primary); text-decoration: none; color: var(--color-text); transition: all var(--transition); box-shadow: var(--shadow); font-size: 20px; }
.fiche-link:hover { background: var(--color-primary-light); border-left-color: var(--color-primary-dark); transform: translateX(4px); color: var(--color-primary-dark); }
.fiche-arrow { color: var(--color-primary); font-weight: 700; font-size: 24px; flex-shrink: 0; }
.fiche-title { font-weight: 600; line-height: 1.4; }
/* --- Journals (JSOMS + LS) --- */
.journals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.journal-card { display: grid; grid-template-columns: 200px 1fr; gap: 28px; background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: all var(--transition); }
.journal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.journal-thumb img { width: 100%; height: auto; border-radius: var(--radius-sm); aspect-ratio: 3/4; object-fit: cover; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.journal-thumb-ls { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); border-radius: var(--radius-sm); aspect-ratio: 3/4; }
.journal-thumb-ls span { font-family: var(--font-heading); font-size: 5.333rem; font-weight: 900; color: #fff; }
.journal-body { display: flex; flex-direction: column; }
.journal-tag { display: inline-block; padding: 4px 12px; background: var(--color-primary-light); color: var(--color-primary); border-radius: 100px; font-size: 14.667px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; align-self: flex-start; margin-bottom: 12px; }
.journal-body h3 { color: var(--color-primary-dark); font-size: 1.533rem; margin-bottom: 12px; line-height: 1.3; }
.journal-body p { color: var(--color-text-light); font-size: 18.667px; line-height: 1.6; flex: 1; margin-bottom: 12px; }
/* --- News list / timeline --- */
.news-section { background: var(--color-bg-alt); }
.news-list { display: flex; flex-direction: column; gap: 14px; }
.news-item { display: grid; grid-template-columns: 110px 1fr 32px; gap: 24px; align-items: center; padding: 22px 28px; background: #fff; border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: all var(--transition); border-left: 3px solid var(--color-turquoise); box-shadow: var(--shadow); }
.news-item:hover { transform: translateX(4px); box-shadow: var(--shadow-lg); border-left-color: var(--color-primary); color: inherit; }
.news-date { font-family: var(--font-heading); font-size: 18.667px; font-weight: 700; color: var(--color-primary-dark); white-space: nowrap; }
.news-body h3 { font-size: 1.333rem; line-height: 1.4; margin-bottom: 4px; color: var(--color-secondary); }
.news-body p { font-size: 18.667px; color: var(--color-text-light); line-height: 1.5; margin: 0; }
.news-arrow { font-size: 29.333px; color: var(--color-primary); justify-self: end; }
/* --- Sponsors marquee — défilement continu seamless --- */
.sponsors-section { background: linear-gradient(180deg, #fff 0%, var(--color-bg-alt) 100%); padding: 96px 0 80px; }
.sponsors-section .section-header, .sponsors-section .section-title { margin-bottom: 12px; }
.sponsors-marquee { overflow: hidden; padding: 40px 0; margin: 32px 0; position: relative; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sponsors-track { display: flex; gap: 28px; width: max-content; animation: sponsors-scroll 90s linear infinite; }
.sponsors-marquee:hover .sponsors-track { animation-play-state: paused; }
@keyframes sponsors-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.sponsors-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
.sponsors-marquee { mask-image: none; -webkit-mask-image: none; padding: 20px 24px; }
}
.sponsor-logo { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 16px 28px; background: #fff; border-radius: var(--radius-sm); box-shadow: 0 6px 20px rgba(1,73,108,.08); transition: all var(--transition); min-height: 110px; width: 180px; }
.sponsor-logo:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(1,73,108,.15); }
.sponsor-logo img { max-height: 70px; width: auto; max-width: 150px; object-fit: contain; opacity: .92; transition: all var(--transition); }
.sponsor-logo:hover img { opacity: 1; }
/* Legacy band (fallback) */
.sponsors-band { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; align-items: center; padding: 24px 0; }
/* --- Partners grid (flex layout "partners_grid") — source unique CPT partenaire --- */
.partners-grid-section { background: var(--color-bg-alt); padding: 80px 0; }
.partners-grid { display: grid; gap: 20px; margin-top: 40px; }
.partners-grid.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.partners-grid.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.partners-grid.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.partners-grid.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.partner-card {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 24px 16px; background: #fff;
border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(1,73,108,.06);
transition: transform var(--transition), box-shadow var(--transition);
text-decoration: none; color: var(--color-text);
min-height: 160px;
}
.partner-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(1,73,108,.14); }
.partner-card-logo { max-width: 100%; max-height: 80px; width: auto; object-fit: contain; filter: grayscale(30%); transition: filter var(--transition); }
.partner-card:hover .partner-card-logo { filter: grayscale(0%); }
.partner-card-name { font-size: 1.133rem; font-weight: 600; text-align: center; color: var(--color-text-muted); line-height: 1.3; }
@media (max-width: 960px) {
.partners-grid.grid-cols-5, .partners-grid.grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
.partners-grid.grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.partners-grid.grid-cols-3, .partners-grid.grid-cols-4,
.partners-grid.grid-cols-5, .partners-grid.grid-cols-6 { grid-template-columns: repeat(2, 1fr); }
.partner-card { padding: 16px 10px; min-height: 120px; }
.partner-card-logo { max-height: 56px; }
}
/* --- Responsive home v3 --- */
@media (max-width: 960px) {
.featured-event-grid { grid-template-columns: 1fr; gap: 32px; }
.humanitarian-grid { grid-template-columns: 1fr; gap: 28px; }
.humanitarian-grid-two { grid-template-columns: 1fr; }
.humanitarian-card { padding: 36px 28px; }
.humanitarian-header { flex-direction: column; gap: 16px; }
.humanitarian-bar { width: 60px; height: 6px; align-self: flex-start; }
.features-grid, .journals-grid { grid-template-columns: 1fr; }
.access-grid { grid-template-columns: 1fr; gap: 20px; }
.access-card { padding: 32px 28px 28px; }
.fiches-grid { grid-template-columns: 1fr 1fr; }
.grad-strip { grid-template-columns: 1fr; }
.news-item { grid-template-columns: 90px 1fr; }
.news-arrow { display: none; }
.journal-card { grid-template-columns: 140px 1fr; gap: 20px; padding: 20px; }
}
@media (max-width: 640px) {
.humanitarian-card { padding: 28px 20px; }
.agenda-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.fiches-grid { grid-template-columns: 1fr; }
.featured-event { padding: 64px 0; }
.humanitarian-section, .access-section { padding: 64px 0; }
.featured-event-cta { flex-direction: column; }
.featured-event-cta .btn { width: 100%; justify-content: center; }
.journal-card { grid-template-columns: 1fr; }
.journal-thumb { max-width: 160px; margin: 0 auto; }
.news-item { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
.sponsors-section { padding: 64px 0 48px; }
.sponsor-logo { width: 150px; min-height: 90px; padding: 12px 20px; }
.sponsor-logo img { max-height: 56px; max-width: 120px; }
.access-header { margin-bottom: 36px; }
}
/* ============================================
ATLAS LAMBEAUX — CPT lambeau
============================================ */
.lambeaux-grid-section {
background: #fff;
padding: 80px 0;
}
.lambeaux-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 40px;
}
.lambeau-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 10px;
overflow: hidden;
transition: transform var(--transition, .2s ease), box-shadow var(--transition, .2s ease);
text-decoration: none;
color: var(--color-text);
}
.lambeau-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg, 0 16px 40px rgba(0,0,0,.12));
border-color: var(--color-primary);
}
.lambeau-card img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
.lambeau-card .card-body {
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.lambeau-card h3 {
font-size: 26.667px;
margin: 0 0 10px;
color: var(--color-secondary);
}
.lambeau-card p {
font-size: 18.667px;
color: var(--color-text-light);
line-height: 1.55;
margin: 0 0 14px;
flex: 1;
}
.lambeau-card-meta {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.lambeau-card-meta span {
background: var(--color-primary-light);
color: var(--color-primary-dark);
padding: 4px 12px;
border-radius: 999px;
font-size: 16px;
font-weight: 600;
}
.lambeau-card .card-link {
color: var(--color-primary);
font-weight: 700;
font-size: 18.667px;
}
@media (max-width: 980px) {
.lambeaux-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.lambeaux-grid { grid-template-columns: 1fr; }
.lambeau-card img { height: 200px; }
}
.lambeau-breadcrumb {
background: var(--color-bg-alt);
padding: 16px 0;
font-size: 18.667px;
color: var(--color-text-light);
border-bottom: 1px solid var(--color-border);
}
.lambeau-breadcrumb a {
color: var(--color-primary);
font-weight: 600;
}
.lambeau-breadcrumb span[aria-hidden] {
margin: 0 8px;
color: var(--color-text-light);
}
.lambeau-description {
background: #fff;
padding: 64px 0;
}
.lambeau-content {
font-size: 22.667px;
line-height: 1.75;
color: var(--color-text);
}
.lambeau-content p { margin-bottom: 18px; }
.lambeau-cases {
background: var(--color-bg-alt);
padding: 64px 0;
}
.lambeau-case {
margin-bottom: 64px;
}
.lambeau-case:last-child {
margin-bottom: 0;
}
.lambeau-case-title {
font-family: var(--font-heading);
font-size: 32px;
font-weight: 700;
color: var(--color-secondary);
margin: 0 0 28px;
padding-bottom: 12px;
border-bottom: 2px solid var(--color-primary);
}
.lambeau-case-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.lambeau-case-step {
margin: 0;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 8px;
overflow: hidden;
transition: transform var(--transition, .2s ease), box-shadow var(--transition, .2s ease);
}
.lambeau-case-step:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md, 0 8px 20px rgba(0,0,0,.08));
}
.lambeau-step-image-link {
display: block;
background: #000;
}
.lambeau-step-image {
display: block;
width: 100%;
height: 240px;
object-fit: cover;
}
.lambeau-case-step figcaption {
padding: 16px 18px;
font-size: 18.667px;
line-height: 1.5;
color: var(--color-text);
}
.lambeau-step-num {
display: inline-block;
background: var(--color-primary);
color: #fff;
padding: 2px 10px;
border-radius: 999px;
font-size: 16px;
font-weight: 700;
margin-right: 8px;
vertical-align: middle;
}
.lambeau-step-caption {
color: var(--color-text);
}
.lambeau-nav {
background: #fff;
padding: 48px 0;
}
.lambeau-nav .container {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 16px;
align-items: center;
}
.lambeau-nav .container > a:first-child { justify-self: start; }
.lambeau-nav .container > a:last-child { justify-self: end; }
@media (max-width: 900px) {
.lambeau-case-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.lambeau-case-grid { grid-template-columns: 1fr; }
.lambeau-step-image { height: 220px; }
.lambeau-nav .container { grid-template-columns: 1fr; }
.lambeau-nav .container > a { width: 100%; justify-self: stretch !important; text-align: center; }
}
/* ============================================
ARCHITECTURE INTERNE — Breadcrumbs + Sidebar
============================================ */
/* Breadcrumbs (fil d'Ariane) */
.breadcrumbs {
background: var(--color-bg-alt, #f5f9fb);
border-bottom: 1px solid var(--color-border, #e5eef2);
padding: 14px 0;
font-size: 17.333px;
}
.breadcrumbs .bc-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.breadcrumbs .bc-list li {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--color-text-light, #6b7c84);
}
.breadcrumbs .bc-list a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition, .2s ease);
}
.breadcrumbs .bc-list a:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
.breadcrumbs .bc-list [aria-current="page"] {
color: var(--color-secondary, var(--color-text));
font-weight: 600;
}
.breadcrumbs .bc-sep {
color: var(--color-border, #c4d4dc);
margin: 0 4px;
}
/* Layout page avec sidebar */
.page-with-sidebar {
padding: 56px 0 80px;
background: #fff;
}
.page-with-sidebar > .container {
max-width: var(--max-width-wide);
}
.page-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 48px;
align-items: flex-start;
}
.page-main {
min-width: 0;
}
.page-content {
font-size: 22.667px;
line-height: 1.75;
color: var(--color-text);
}
.page-content h2 {
font-family: var(--font-heading);
font-size: 37.333px;
color: var(--color-secondary);
margin: 40px 0 16px;
}
.page-content h3 {
font-family: var(--font-heading);
font-size: 29.333px;
color: var(--color-secondary);
margin: 32px 0 12px;
}
.page-content p { margin-bottom: 18px; }
.page-content ul, .page-content ol { margin: 0 0 18px 24px; }
.page-content ul li, .page-content ol li { margin-bottom: 8px; }
.page-content a:not(.btn) { color: var(--color-primary); text-decoration: underline; }
.page-content a:not(.btn):hover { color: var(--color-primary-dark); }
/* Section sidebar nav */
.section-nav {
position: sticky;
top: 100px;
background: var(--color-bg-alt, #f5f9fb);
border-radius: 12px;
padding: 24px 20px;
border: 1px solid var(--color-border, #e5eef2);
}
.section-nav-title {
font-family: var(--font-heading);
font-size: 21.333px;
font-weight: 700;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--color-primary);
color: var(--color-secondary);
line-height: 1.3;
}
.section-nav-title a {
color: inherit;
text-decoration: none;
}
.section-nav-title a:hover {
color: var(--color-primary);
}
.section-nav-list,
.section-nav-sub {
list-style: none;
margin: 0;
padding: 0;
}
.section-nav-list > li {
margin-bottom: 2px;
}
.section-nav-list > li > a {
display: block;
padding: 9px 12px;
border-radius: 6px;
color: var(--color-text);
text-decoration: none;
font-size: 18.667px;
line-height: 1.4;
transition: all var(--transition, .2s ease);
border-left: 3px solid transparent;
}
.section-nav-list > li > a:hover {
background: #fff;
color: var(--color-primary);
border-left-color: var(--color-accent);
}
.section-nav-list > li.is-current > a {
background: #fff;
color: var(--color-primary);
font-weight: 600;
border-left-color: var(--color-primary);
box-shadow: 0 2px 8px rgba(1,73,108,0.06);
}
.section-nav-sub {
padding: 4px 0 8px 16px;
margin-top: 4px;
border-left: 1px solid var(--color-border, #c4d4dc);
}
.section-nav-sub li a {
display: block;
padding: 6px 10px;
color: var(--color-text-light);
text-decoration: none;
font-size: 17.333px;
border-radius: 4px;
transition: all var(--transition, .2s ease);
}
.section-nav-sub li a:hover {
background: rgba(255,255,255,0.6);
color: var(--color-primary);
}
.section-nav-sub li.is-current a {
color: var(--color-primary);
font-weight: 600;
}
/* Children grid (top-level category pages sans contenu) */
.children-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
.children-grid .card {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.children-grid a.card-clickable:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.children-grid .card-media {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: linear-gradient(135deg, var(--color-primary-light), #fff);
}
.children-grid .card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.children-grid .card-media-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(var(--color-primary-rgb), .12), rgba(var(--color-primary-rgb), .04));
color: var(--color-primary);
font-size: 3.733rem;
position: relative;
}
.children-grid .card-media-placeholder::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 20% 20%, rgba(var(--color-primary-rgb), .1) 0%, transparent 45%),
radial-gradient(circle at 80% 70%, rgba(var(--color-primary-rgb), .08) 0%, transparent 45%);
pointer-events: none;
}
.children-grid .card-media-placeholder i {
position: relative;
z-index: 1;
}
.children-grid .card-body {
flex: 1;
display: flex;
flex-direction: column;
}
.children-grid .card-body .card-link {
margin-top: auto;
padding-top: 16px;
}
@media (max-width: 960px) {
.page-layout {
grid-template-columns: 1fr;
gap: 32px;
}
.section-nav {
position: static;
padding: 20px 16px;
}
}
@media (max-width: 640px) {
.page-with-sidebar { padding: 32px 0 48px; }
.breadcrumbs { font-size: 16px; padding: 10px 0; }
.breadcrumbs .bc-list li:not(:last-child):not(:nth-last-child(2)) { display: none; }
}
/* ============================================
COURS INTERNES — single + index
============================================ */
.cours-interne-content { font-size: 22.667px; line-height: 1.75; color: var(--color-text); }
.cours-interne-content h2 {
font-family: var(--font-heading, inherit);
font-size: clamp(1.867rem, 3.2vw, 2.533rem);
color: var(--color-primary-dark);
margin: 48px 0 12px;
line-height: 1.25;
}
.cours-interne-content h2:first-child { margin-top: 0; }
.cours-interne-content p { margin: 0 0 16px; }
.cours-interne-content a:not(.btn) { color: var(--color-primary); text-decoration: underline; }
.cours-interne-content a:not(.btn):hover { color: var(--color-primary-dark); }
.cours-interne-content b, .cours-interne-content strong { color: var(--color-primary-dark); font-weight: 600; }
.cours-interne-content img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.cours-interne-content .uline {
width: 60px; height: 3px; background: var(--color-primary);
margin: 0 0 20px; border-radius: 2px;
}
/* panel-one : section pleine largeur, fond clair */
.cours-interne-content .panel-one {
background: var(--color-primary-light);
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-sm);
padding: 28px 32px;
margin: 28px 0;
}
.cours-interne-content .panel-one h2 { margin-top: 0; color: var(--color-primary-dark); }
.cours-interne-content .panel-one p:last-child { margin-bottom: 0; }
/* panel-two : 2 colonnes (texte / image) */
.cours-interne-content .panel-two {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: start;
margin: 32px 0;
}
.cours-interne-content .panel-two .panel-two-one { min-width: 0; }
.cours-interne-content .panel-two .panel-two-two img {
width: 100%; height: auto;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.08));
}
.cours-interne-content .panel-two .panel-two-one h2 {
margin-top: 0;
font-size: 1.867rem;
}
/* panel-three : 3 colonnes (texte + 2 images) */
.cours-interne-content .panel-three {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 24px;
align-items: start;
margin: 32px 0;
}
.cours-interne-content .panel-three .panel-three-one { min-width: 0; }
.cours-interne-content .panel-three .panel-three-two {
display: contents;
}
.cours-interne-content .panel-three .panel-three-two > div img {
width: 100%; height: auto;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.08));
}
.cours-interne-content .panel-three .panel-three-one h2 {
margin-top: 0;
font-size: 1.733rem;
}
/* wide-image : pleine largeur */
.cours-interne-content .wide-image,
.cours-interne-content #wide-image {
margin: 32px 0;
}
.cours-interne-content .wide-image img,
.cours-interne-content #wide-image img {
width: 100%; height: auto;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.08));
}
@media (max-width: 860px) {
.cours-interne-content .panel-two,
.cours-interne-content .panel-three { grid-template-columns: 1fr; }
.cours-interne-content .panel-three .panel-three-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cours-interne-content .panel-one { padding: 20px 22px; }
}
/* Index des cours internes : grille de cards */
.internes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 24px;
margin-top: 40px;
}
.internes-grid .card-cours {
display: flex;
flex-direction: column;
background: #fff;
border-radius: var(--radius);
border: 1px solid rgba(0,0,0,.06);
padding: 24px 26px;
text-decoration: none;
color: inherit;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
height: 100%;
}
.internes-grid .card-cours:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,.08);
border-color: var(--color-primary);
}
.internes-grid .card-cours .card-cours-icon {
width: 44px; height: 44px;
border-radius: 10px;
background: var(--color-primary-light);
color: var(--color-primary);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.internes-grid .card-cours h3 {
font-size: 1.4rem;
line-height: 1.4;
margin: 0 0 12px;
color: var(--color-primary-dark);
}
.internes-grid .card-cours p {
font-size: 18.667px;
line-height: 1.55;
color: var(--color-text-muted, #555);
margin: 0 0 16px;
flex: 1;
}
.internes-grid .card-cours .card-link {
font-size: 17.333px;
font-weight: 600;
color: var(--color-primary);
margin-top: auto;
}
/* ============================================
PAGE FLEX SECTIONS inside sidebar layout
============================================ */
/* Quand une page avec sidebar a des sections Flexible Content,
elles doivent s'afficher DANS .page-main (pas en dessous) */
.page-flex-sections {
margin-top: 24px;
}
.page-flex-sections .section {
padding: 48px 0;
background: transparent !important;
}
.page-flex-sections .section:first-child {
padding-top: 0;
}
.page-flex-sections .section + .section {
border-top: 1px solid var(--color-border, #e5eef2);
}
.page-flex-sections .section .container,
.page-flex-sections .section .container-narrow {
padding: 0;
max-width: 100%;
}
.page-flex-sections .section-title {
font-size: clamp(2rem, 4vw, 2.667rem);
text-align: left;
margin-bottom: 12px;
}
.page-flex-sections .section-subtitle {
text-align: left;
margin: 0 0 32px;
}
.page-flex-sections .section-header {
text-align: left;
}
.page-flex-sections .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.page-flex-sections .grid-4 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.page-flex-sections .text-image-section .grid-2 {
gap: 32px;
}
@media (max-width: 1100px) {
.page-flex-sections .grid-3,
.page-flex-sections .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.page-flex-sections .grid-3,
.page-flex-sections .grid-4 { grid-template-columns: 1fr; }
.page-flex-sections .text-image-section .grid-2 { grid-template-columns: 1fr; }
}
/* ============================================
ANNUAIRE PROFESSIONNEL (page 5518)
============================================ */
.annuaire-pro-wrap {
margin: 1.5rem 0 3rem;
}
.annuaire-pro-wrap .annuaire-intro {
max-width: 760px;
margin: 0 auto 2rem;
text-align: center;
color: var(--color-text);
}
.annuaire-pro-wrap .annuaire-intro p {
margin: 0 0 .75rem;
font-size: 1.4rem;
line-height: 1.65;
}
.annuaire-pro-wrap .annuaire-count {
display: inline-block;
margin-top: .5rem;
padding: .4rem 1rem;
background: var(--color-primary-light, #e8f2f7);
color: var(--color-primary-dark);
border-radius: 999px;
font-size: 1.2rem;
font-weight: 700;
}
.annuaire-pro-wrap .annuaire-search {
max-width: 520px;
margin: 0 auto 2rem;
position: relative;
}
.annuaire-pro-wrap .annuaire-search input {
width: 100%;
padding: 14px 20px 14px 48px;
border: 2px solid var(--color-border, #d5e2e9);
border-radius: 999px;
font-size: 21.333px;
background: #fff;
transition: border-color .2s, box-shadow .2s;
font-family: inherit;
}
.annuaire-pro-wrap .annuaire-search input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(27,140,174,0.12);
}
.annuaire-pro-wrap .annuaire-search::before {
content: "";
position: absolute;
left: 18px;
top: 50%;
width: 18px;
height: 18px;
transform: translateY(-50%);
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
pointer-events: none;
}
.annuaire-pro-wrap .annuaire-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
margin: 0 0 2.5rem;
padding: 1rem;
background: var(--color-bg-alt, #f5f9fb);
border-radius: 12px;
border: 1px solid var(--color-border, #e5eef2);
}
.annuaire-pro-wrap .annuaire-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 .5rem;
background: #fff;
border: 1px solid var(--color-border, #d5e2e9);
border-radius: 8px;
color: var(--color-primary-dark);
font-weight: 700;
font-size: 18.667px;
text-decoration: none;
transition: all .15s;
}
.annuaire-pro-wrap .annuaire-nav a:hover {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
transform: translateY(-1px);
}
.annuaire-pro-wrap .annuaire-letter {
margin: 0 0 2rem;
scroll-margin-top: 100px;
}
.annuaire-pro-wrap .annuaire-letter h2 {
font-family: var(--font-heading);
font-size: 2.333rem;
color: var(--color-primary);
margin: 0 0 1rem;
padding: 0 0 .5rem;
border-bottom: 3px solid var(--color-primary);
display: inline-block;
}
.annuaire-pro-wrap .annuaire-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: .75rem 1.5rem;
}
.annuaire-pro-wrap .annuaire-list li {
padding: .75rem 1rem;
background: #fff;
border: 1px solid var(--color-border, #e5eef2);
border-radius: 8px;
font-size: 1.267rem;
line-height: 1.5;
transition: border-color .15s, box-shadow .15s;
}
.annuaire-pro-wrap .annuaire-list li:hover {
border-color: var(--color-primary);
box-shadow: 0 2px 8px rgba(1,73,108,.08);
}
.annuaire-pro-wrap .annuaire-list .name {
display: block;
font-weight: 700;
color: var(--color-primary-dark);
}
.annuaire-pro-wrap .annuaire-list .meta {
display: block;
color: var(--color-text-light, #5d7580);
font-size: 1.133rem;
margin-top: .15rem;
}
.annuaire-pro-wrap .annuaire-empty {
text-align: center;
color: var(--color-text-light, #5d7580);
padding: 2rem;
font-style: italic;
}
@media (max-width: 640px) {
.annuaire-pro-wrap .annuaire-nav { padding: .75rem; gap: .35rem; }
.annuaire-pro-wrap .annuaire-letter h2 { font-size: 1.867rem; }
.annuaire-pro-wrap .annuaire-list { grid-template-columns: 1fr; }
}
/* ============================================
ANNUAIRE HOSPITALIER (page 5517)
============================================ */
.annuaire-hospitalier-wrap {
margin: 1.5rem 0 3rem;
}
.annuaire-hospitalier-wrap .annuaire-intro {
max-width: 760px;
margin: 0 auto 2rem;
text-align: center;
color: var(--color-text);
}
.annuaire-hospitalier-wrap .annuaire-intro p {
margin: 0 0 .75rem;
font-size: 1.4rem;
line-height: 1.6;
}
.annuaire-hospitalier-wrap .annuaire-count {
display: inline-block;
margin-top: .5rem;
padding: .35rem .9rem;
background: var(--color-primary-light, #e8f2f7);
color: var(--color-primary-dark);
border-radius: 999px;
font-size: 1.2rem;
font-weight: 700;
}
.annuaire-hospitalier-wrap .annuaire-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
margin: 0 0 2.5rem;
padding: 1rem;
background: var(--color-bg-alt, #f5f9fb);
border-radius: 12px;
border: 1px solid var(--color-border, #e5eef2);
}
.annuaire-hospitalier-wrap .annuaire-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .5rem 1rem;
background: #fff;
border: 1px solid var(--color-border, #d5e2e9);
border-radius: 8px;
color: var(--color-primary-dark);
font-weight: 600;
font-size: 18.667px;
text-decoration: none;
transition: all .15s;
}
.annuaire-hospitalier-wrap .annuaire-nav a:hover {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
transform: translateY(-1px);
}
.annuaire-hospitalier-wrap .annuaire-region {
margin: 0 0 2rem;
scroll-margin-top: 100px;
}
.annuaire-hospitalier-wrap .annuaire-region h2 {
font-family: var(--font-heading);
font-size: 2.133rem;
color: var(--color-primary);
margin: 0 0 1rem;
padding: 0 0 .5rem;
border-bottom: 2px solid var(--color-primary);
}
.annuaire-hospitalier-wrap .annuaire-letter-block {
margin: 0 0 2.5rem;
scroll-margin-top: 100px;
}
.annuaire-hospitalier-wrap .annuaire-letter-title {
display: flex;
align-items: center;
gap: 1rem;
margin: 0 0 1.25rem;
padding-bottom: .75rem;
border-bottom: 2px solid var(--color-primary-light, #e8f2f7);
}
.annuaire-hospitalier-wrap .annuaire-letter-title .letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-turquoise, #19BECE));
color: #fff;
font-weight: 900;
font-size: 1.533rem;
flex-shrink: 0;
}
.annuaire-hospitalier-wrap .annuaire-letter-title .label {
font-family: var(--font-heading);
font-size: 1.6rem;
color: var(--color-primary-dark);
font-weight: 600;
}
.annuaire-hospitalier-wrap .annuaire-back {
display: inline-block;
margin-top: .5rem;
font-size: 1.067rem;
color: var(--color-primary);
text-decoration: none;
opacity: .7;
transition: opacity .15s;
}
.annuaire-hospitalier-wrap .annuaire-back:hover {
opacity: 1;
text-decoration: underline;
}
.annuaire-hospitalier-wrap .annuaire-update {
margin-top: 2.5rem;
padding: 1rem 1.25rem;
background: var(--color-bg-alt, #f5f9fb);
border-left: 3px solid var(--color-accent, #19BECE);
border-radius: 6px;
font-size: 1.173rem;
color: var(--color-text-light, #5d7580);
font-style: italic;
}
.annuaire-hospitalier-wrap .annuaire-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1rem;
}
.annuaire-hospitalier-wrap .annuaire-card {
padding: 1.1rem 1.3rem;
background: #fff;
border: 1px solid var(--color-border, #e5eef2);
border-left: 4px solid var(--color-primary);
border-radius: 8px;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.annuaire-hospitalier-wrap .annuaire-card:hover {
border-left-color: var(--color-accent, #19BECE);
box-shadow: 0 4px 12px rgba(1,73,108,.08);
transform: translateY(-1px);
}
.annuaire-hospitalier-wrap .annuaire-card .ville {
display: flex;
align-items: baseline;
gap: .5rem;
font-family: var(--font-heading);
font-size: 1.333rem;
font-weight: 700;
color: var(--color-primary-dark);
text-transform: uppercase;
letter-spacing: .02em;
margin-bottom: .35rem;
}
.annuaire-hospitalier-wrap .annuaire-card .cp {
font-size: 1.067rem;
font-weight: 600;
color: var(--color-text-light, #5d7580);
letter-spacing: 0;
}
.annuaire-hospitalier-wrap .annuaire-card .praticien {
font-size: 1.227rem;
line-height: 1.5;
color: var(--color-text);
margin: 0 0 .35rem;
}
.annuaire-hospitalier-wrap .annuaire-card .etablissement {
font-size: 1.173rem;
font-weight: 600;
color: var(--color-primary);
margin: 0 0 .35rem;
}
.annuaire-hospitalier-wrap .annuaire-card .adresse {
font-size: 1.093rem;
color: var(--color-text-light, #5d7580);
line-height: 1.45;
}
.annuaire-hospitalier-wrap .annuaire-card .adresse span {
display: block;
}
@media (max-width: 640px) {
.annuaire-hospitalier-wrap .annuaire-nav { padding: .75rem; gap: .35rem; }
.annuaire-hospitalier-wrap .annuaire-letter > h2 { font-size: 1.867rem; }
.annuaire-hospitalier-wrap .annuaire-grid { grid-template-columns: 1fr; }
}
/* ============ Liste de fichiers (sfscmfco_legacy_files / sfscmfco_doc_ca_list) ============ */
.sfscmfco-file-list {
list-style: none;
padding: 0;
margin: 1.5rem auto;
max-width: var(--max-width, 1320px);
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 1024px) {
.sfscmfco-file-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 24px; }
}
@media (max-width: 600px) {
.sfscmfco-file-list { grid-template-columns: 1fr; padding: 0 16px; }
}
/* Si le file-list est posé directement dans (template espace-membres) on lui donne du padding pour rester aligné avec le reste */
main > .sfscmfco-file-list,
main > h3 + .sfscmfco-file-list { padding: 0 24px; }
main > h3 { max-width: var(--max-width, 1320px); margin: 32px auto 16px; padding: 0 24px; }
.sfscmfco-file-list .sfscmfco-file-item { margin: 0; }
.sfscmfco-file-list a {
display: flex;
align-items: center;
gap: 1rem;
padding: .9rem 1rem;
background: #fff;
border: 1px solid var(--color-border, #e3e8eb);
border-radius: 8px;
text-decoration: none;
color: var(--color-text, #1d2b34);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sfscmfco-file-list a:hover {
transform: translateY(-2px);
border-color: var(--color-primary);
box-shadow: 0 4px 12px rgba(0,0,0,.07);
}
.sfscmfco-file-list .file-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sfscmfco-file-list .file-ext-tag {
display: inline-block;
font-size: 0.933rem;
font-weight: 700;
letter-spacing: .03em;
color: #fff;
background: var(--color-primary);
padding: .35rem .55rem;
border-radius: 4px;
min-width: 44px;
text-align: center;
}
.sfscmfco-file-list .file-ext-pdf { background: #c0392b; }
.sfscmfco-file-list .file-ext-doc,
.sfscmfco-file-list .file-ext-docx { background: #2c5cad; }
.sfscmfco-file-list .file-ext-xls,
.sfscmfco-file-list .file-ext-xlsx { background: #2e8b57; }
.sfscmfco-file-list .file-ext-png,
.sfscmfco-file-list .file-ext-jpg,
.sfscmfco-file-list .file-ext-jpeg,
.sfscmfco-file-list .file-ext-webp { background: #8e44ad; }
.sfscmfco-file-list .file-meta {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.sfscmfco-file-list .file-name {
font-weight: 600;
font-size: 1.267rem;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sfscmfco-file-list .file-info {
font-size: 1.04rem;
color: var(--color-text-light, #5d7580);
margin-top: .15rem;
}
.sfscmfco-restricted {
text-align: center;
padding: 3rem 2rem;
background: var(--color-surface-alt, #f7f9fb);
border-radius: 12px;
margin: 2rem 0;
}
.sfscmfco-restricted p {
margin-bottom: 1rem;
color: var(--color-text-light, #5d7580);
}
/* ============================================================
Single Congrès — design riche
============================================================ */
/* Hero affiche + titre */
.congres-hero {
position: relative;
color: #fff;
margin-top: var(--header-height);
padding: 3.5rem 0 5rem;
overflow: hidden;
isolation: isolate;
}
.congres-hero-bg {
position: absolute; inset: 0;
z-index: -1;
overflow: hidden;
}
.congres-hero-bg-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: blur(20px) brightness(.4) saturate(1.2);
transform: scale(1.1);
}
.congres-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(0, 60, 90, .85) 0%, rgba(20, 90, 130, .75) 100%);
}
.congres-hero-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: center;
}
.congres-hero-content h1 {
color: #fff;
font-size: clamp(2.133rem, 4.667vw, 3.467rem);
line-height: 1.2;
margin: .5rem 0 1.25rem;
}
.congres-hero-badge {
display: inline-block;
padding: .35rem .85rem;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.3);
color: #fff;
border-radius: 999px;
font-size: 1.04rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
backdrop-filter: blur(4px);
}
.congres-hero-meta {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: 1rem;
}
.meta-pill {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .55rem 1rem;
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.25);
border-radius: 999px;
font-size: 1.227rem;
color: #fff;
backdrop-filter: blur(4px);
}
.meta-pill i { opacity: .9; }
.congres-hero-affiche {
width: 240px;
flex-shrink: 0;
}
.congres-hero-affiche .congres-affiche-img {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1);
transform: rotate(-2deg);
transition: transform .3s ease;
}
.congres-hero-affiche .congres-affiche-img:hover {
transform: rotate(0deg) scale(1.02);
}
/* Body : layout 2 colonnes */
.congres-body { padding: 3rem 0; }
.congres-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 3rem;
align-items: start;
}
.congres-sidebar {
position: sticky;
top: 100px;
align-self: start;
display: flex;
flex-direction: column;
gap: 1rem;
}
.congres-sidebar-card {
background: #fff;
border: 1px solid var(--color-border, #e3e8eb);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.congres-sidebar-card h3 {
margin: 0 0 1rem;
font-size: 1.333rem;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: .05em;
}
.congres-info-list {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
display: flex;
flex-direction: column;
gap: .85rem;
}
.congres-info-list li {
display: flex;
align-items: flex-start;
gap: .75rem;
}
.congres-info-list i {
width: 32px; height: 32px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-primary-light, #e8f1f5);
color: var(--color-primary);
border-radius: 8px;
font-size: 1.2rem;
}
.congres-info-list strong {
display: block;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--color-text-light, #5d7580);
margin-bottom: .15rem;
font-weight: 600;
}
.congres-info-list span {
display: block;
font-size: 1.227rem;
color: var(--color-text, #1d2b34);
line-height: 1.4;
}
.congres-cta {
width: 100%;
text-align: center;
justify-content: center;
}
.congres-cta i { margin-right: .5rem; }
/* Table of contents (sections) */
.congres-toc {
background: #fff;
border: 1px solid var(--color-border, #e3e8eb);
border-radius: 12px;
padding: 1.25rem;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.congres-toc h4 {
margin: 0 0 .75rem;
font-size: 1.133rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--color-text-light, #5d7580);
}
.congres-toc ul { list-style: none; padding: 0; margin: 0; }
.congres-toc li { margin: 0; }
.congres-toc a {
display: flex;
align-items: center;
gap: .65rem;
padding: .55rem .65rem;
border-radius: 6px;
text-decoration: none;
color: var(--color-text, #1d2b34);
font-size: 1.2rem;
transition: all .15s ease;
}
.congres-toc a:hover {
background: var(--color-primary-light, #e8f1f5);
color: var(--color-primary);
}
.congres-toc a.active {
background: var(--color-primary);
color: #fff;
}
.congres-toc i { width: 18px; text-align: center; opacity: .8; }
/* Main content : sections */
.congres-main {
display: flex;
flex-direction: column;
gap: 2rem;
min-width: 0;
}
/* Accordéon de sections */
.congres-accordion {
display: flex;
flex-direction: column;
gap: 1rem;
}
.congres-section {
background: #fff;
border: 1px solid var(--color-border, #e3e8eb);
border-radius: 14px;
box-shadow: 0 2px 12px rgba(0,0,0,.03);
scroll-margin-top: 100px;
overflow: hidden;
transition: box-shadow .15s ease, border-color .15s ease;
}
.congres-section.is-open {
box-shadow: 0 6px 22px rgba(20, 90, 130, .1);
border-color: var(--color-primary-light, #cfe3ec);
}
/* En-tête cliquable (bouton accordéon) */
.congres-section-header {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
padding: 1.15rem 1.5rem;
margin: 0;
background: none;
border: 0;
border-radius: 14px;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
transition: background .15s ease;
}
.congres-section-header:hover { background: var(--color-primary-light, #eef6fa); }
.congres-section.is-open .congres-section-header { background: var(--color-primary-light, #eef6fa); }
.congres-section-icon {
flex-shrink: 0;
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, #134d6f) 100%);
color: #fff;
border-radius: 11px;
font-size: 1.533rem;
box-shadow: 0 4px 12px rgba(20, 90, 130, .25);
}
.congres-section-header h2 {
margin: 0;
flex: 1;
font-size: 1.6rem;
color: var(--color-primary);
line-height: 1.3;
}
.congres-section-toggle {
flex-shrink: 0;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
transition: transform .2s ease;
}
.congres-section.is-open .congres-section-toggle { transform: rotate(180deg); }
/* Corps : replié par défaut, déplié si is-open */
.congres-section-body { display: none; font-size: 1.333rem; line-height: 1.7; }
.congres-section.is-open .congres-section-body { display: block; }
.congres-section-body-inner { padding: 1.35rem 1.5rem 1.9rem; }
.congres-section-body-inner > *:first-child { margin-top: 0; }
.congres-section-body h3,
.congres-section-body h4 {
margin: 2.2rem 0 .85rem;
font-size: 1.467rem;
line-height: 1.35;
color: var(--color-text, #1d2b34);
}
.congres-section-body h4 { font-size: 1.333rem; }
.congres-section-body h3:first-child,
.congres-section-body h4:first-child { margin-top: 0; }
/* Un titre qui suit directement un autre titre ne doit pas creuser un trou */
.congres-section-body h3 + h4 { margin-top: 1rem; }
.congres-section-body p { margin: 0 0 1.15rem; }
.congres-section-body p:last-child { margin-bottom: 0; }
.congres-section-body ul, .congres-section-body ol { margin: 0 0 1.15rem 1.25rem; }
.congres-section-body li { margin-bottom: .45rem; }
.congres-section-body a:not(.btn) { color: var(--color-primary); text-decoration: underline; }
.congres-section-body a:not(.btn):hover { color: var(--color-primary-dark); }
/* Boutons dans le contenu : texte blanc lisible, jamais souligné */
.congres-section-body .btn { text-decoration: none; margin-top: .35rem; }
/* Programme embelli (planning horaire + intitulé) */
.congres-program { margin: 0 0 1rem; }
.congres-program-lead {
font-weight: 700;
color: var(--color-text, #1d2b34);
margin: 0 0 .85rem !important;
font-size: 1.4rem;
}
.congres-program-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column;
gap: .5rem;
}
.congres-program-list li {
display: grid;
grid-template-columns: minmax(92px, max-content) 1fr;
gap: .25rem 1rem;
align-items: baseline;
padding: .6rem .85rem;
margin: 0 !important;
background: var(--color-surface-alt, #f7f9fb);
border-left: 3px solid var(--color-primary);
border-radius: 6px;
}
.congres-program-list .prog-time {
font-weight: 700;
color: var(--color-primary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
font-size: 1.227rem;
text-transform: uppercase;
letter-spacing: .01em;
}
.congres-program-list .prog-label { color: var(--color-text, #1d2b34); }
/* Une ligne sans horaire (Pause, Discussion...) occupe toute la largeur */
.congres-program-list li:has(> .prog-label:only-child) {
grid-template-columns: 1fr;
background: transparent;
border-left-color: var(--color-border-soft, #e3e9ee);
font-style: italic;
color: var(--color-text-soft, #5a6b76);
}
@media (max-width: 560px) {
.congres-program-list li { grid-template-columns: 1fr; gap: .15rem; }
}
/* Section "Autres congrès" */
.congres-others { background: var(--color-surface-alt, #f7f9fb); }
.congres-card { display: flex; flex-direction: column; height: 100%; }
.congres-card-media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, #134d6f) 100%);
}
.congres-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.congres-card-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.85);
font-size: 3.467rem;
}
.congres-card .card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.congres-card .card-body h3 { margin: .35rem 0 .75rem; }
.congres-card .card-link { margin-top: auto; }
/* Responsive */
@media (max-width: 960px) {
.congres-hero {
padding: 2.5rem 0 3rem;
}
.congres-hero-grid {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.congres-hero-content { order: 1; }
.congres-hero-affiche {
order: 0;
width: 180px;
margin: 0 auto;
}
.congres-hero-meta { justify-content: center; }
.congres-layout {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.congres-sidebar {
position: static;
flex-direction: row;
flex-wrap: wrap;
}
.congres-sidebar-card,
.congres-toc {
flex: 1 1 280px;
}
.congres-section-header { padding: 1rem 1.25rem; }
.congres-section-body-inner { padding: 1.15rem 1.25rem 1.6rem; }
.congres-section-header h2 { font-size: 1.667rem; }
.congres-section-icon { width: 44px; height: 44px; font-size: 1.467rem; }
}
@media (max-width: 540px) {
.congres-hero-affiche { width: 140px; transform: rotate(0); }
.congres-hero-affiche .congres-affiche-img { transform: rotate(0); }
.congres-hero-content h1 { font-size: 2rem; }
.meta-pill { font-size: 1.093rem; padding: .45rem .75rem; }
.congres-sidebar { flex-direction: column; }
.congres-section { border-radius: 12px; }
/* Icône | titre | chevron restent sur une ligne, le titre passe à la ligne si besoin */
.congres-section-header { padding: .9rem 1rem; gap: .75rem; }
.congres-section-header h2 { font-size: 1.4rem; }
.congres-section-icon { width: 38px; height: 38px; font-size: 1.2rem; border-radius: 9px; }
.congres-section-body-inner { padding: 1rem 1rem 1.4rem; }
}
/* Fiches patients : bandeau bleu « Framer » avec titre blanc à la place de l'image */
.fiches-patients-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 22px;
}
.fiche-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--color-border-soft, #e6ecf0);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(16,32,45,.05);
text-decoration: none;
transition: transform .28s ease, box-shadow .28s ease;
}
.fiche-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 44px rgba(16,32,45,.14);
}
/* Bandeau bleu (remplace l'image) : titre centré en blanc */
.fiche-card-head {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 180px;
padding: 28px 26px;
background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-secondary) 100%);
overflow: hidden;
}
.fiche-card-head::after {
content: "";
position: absolute;
right: -40px;
bottom: -60px;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(255,255,255,.08);
}
.fiche-card-title {
position: relative;
z-index: 1;
margin: 0;
font-size: 1.6rem;
line-height: 1.22;
font-weight: 700;
color: #fff;
letter-spacing: -.01em;
text-decoration: none;
text-wrap: balance;
}
.fiche-card-body {
padding: 20px 24px 22px;
}
.fiche-card-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-primary);
font-weight: 600;
font-size: 1.05rem;
}
.fiche-card-link i { transition: transform .28s ease; }
.fiche-card:hover .fiche-card-link i { transform: translateX(4px); }
/* Le contexte .page-content force couleur/soulignement : on prend le dessus pour ces cartes */
.page-content a.fiche-card, .page-content a.fiche-card:hover { text-decoration: none; }
.page-content h3.fiche-card-title { color: #fff; }
.page-content a.fiche-card .fiche-card-link { color: var(--color-primary); }
@media (max-width: 520px) {
.fiches-patients-grid { grid-template-columns: 1fr; }
}
/* Coordonnateurs locaux et régionaux : grille de cards */
.coordonnateurs-grid {
margin-top: 2rem;
}
.coord-card {
border: 1px solid var(--color-border, #e3e8eb);
box-shadow: 0 2px 8px rgba(0,0,0,.04);
background: #fff;
}
.coord-card .card-body {
padding: 1.25rem 1.5rem;
}
.coord-card h3 {
margin: 0 0 .75rem;
font-size: 1.333rem;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: .03em;
border-bottom: 2px solid var(--color-primary-light, #e8f1f5);
padding-bottom: .5rem;
}
.coord-list {
list-style: none;
padding: 0;
margin: 0;
}
.coord-list li {
padding: .35rem 0;
font-size: 1.227rem;
color: var(--color-text);
line-height: 1.4;
}
.coord-list li::before {
content: "•";
color: var(--color-primary);
margin-right: .5rem;
font-weight: 700;
}
/* Annuaire pro : améliorations search + responsive */
.annuaire-pro-wrap .annuaire-search {
position: relative;
margin: 1.5rem 0;
}
.annuaire-pro-wrap .annuaire-search input {
width: 100%;
padding: .85rem 1rem .85rem 2.75rem;
border: 1px solid var(--color-border);
border-radius: 10px;
font-size: 1.333rem;
background: #fff;
transition: all .15s ease;
}
.annuaire-pro-wrap .annuaire-search input:focus {
border-color: var(--color-primary);
outline: none;
box-shadow: 0 0 0 3px rgba(20, 90, 130, .1);
}
.annuaire-pro-wrap .annuaire-search > i {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-light);
}
.annuaire-search-count {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.133rem;
color: var(--color-primary);
font-weight: 600;
}
.annuaire-letter-link.disabled {
opacity: .35;
pointer-events: none;
}
.badge-ca {
display: inline-block;
padding: .1rem .35rem;
background: var(--color-primary);
color: #fff;
border-radius: 4px;
font-size: 0.867rem;
font-weight: 700;
margin-left: .35rem;
vertical-align: middle;
letter-spacing: .03em;
}
/* Embed vidéo cours interne (Vimeo responsive 16:9) */
.cours-video-embed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
margin: 0 auto 32px;
border-radius: var(--radius, 10px);
overflow: hidden;
background: #000;
box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.cours-video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ===== Replays CMF 2026 ===== */
.replay-day {
margin: 48px 0 8px;
padding-bottom: 10px;
border-bottom: 2px solid var(--color-primary, #1b8cae);
font-size: 2.133rem;
}
.replay-day:first-of-type { margin-top: 0; }
.replay-session { margin: 28px 0 8px; }
.replay-session-title {
font-size: 1.6rem;
margin: 0 0 16px;
color: var(--color-primary, #1b8cae);
}
/* auto-FILL cree des pistes vides : une session a une seule captation occupait
la premiere piste sur trois et laissait 864px de blanc a sa droite. En flex
avec retour a la ligne centre, la carte garde partout la meme largeur et tout
reste de rangee est centre au lieu d'etre echoue a gauche (regle maison :
jamais de rangee orpheline). 3 cartes de 408px + 2 gouttieres de 24px
remplissent exactement le conteneur de 1272px : le rendu a 3 par rangee ne
bouge pas. */
.replay-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
margin-bottom: 24px;
}
.replay-card {
flex: 1 1 330px;
/* La borne suit la largeur d'une rangee de deux : sans le calc(), une carte
seule en fin de liste grossissait jusqu'a 408px alors que les cartes de la
rangee du dessus n'en faisaient que 348 (mesure a 768px). Toutes les cartes
gardent ainsi exactement la meme largeur d'une rangee a l'autre. */
max-width: min(408px, calc(50% - 12px));
display: flex;
flex-direction: column;
background: var(--color-surface, #fff);
border: 1px solid var(--color-border, #e6e6e6);
border-radius: var(--radius, 10px);
overflow: hidden;
}
.replay-card .cours-video-embed {
margin: 0;
border-radius: 0;
box-shadow: none;
}
.replay-card-body {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.replay-speaker { font-weight: 600; margin: 0; }
.replay-title { font-weight: 700; margin: 0; color: var(--color-primary); line-height: 1.35; }
.replay-title + .replay-speaker { font-weight: 500; font-size: 0.92em; color: var(--color-text-muted, #555); }
.replay-count { text-align: center; font-weight: 600; color: var(--color-text-muted, #555); margin: 0 0 28px; }
.replay-pdf {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid var(--color-primary, #1b8cae);
color: var(--color-primary, #1b8cae);
font-size: 18.667px;
font-weight: 600;
text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.replay-pdf:hover {
background: var(--color-primary, #1b8cae);
color: #fff;
}
.replay-extra { margin-top: 40px; }
.replay-extra-intro { margin: -6px 0 18px; color: var(--color-text-muted); font-size: 1.033rem; max-width: 66ch; }
.replay-extra-session { margin: 18px 0 8px; font-size: 1.36rem; }
.replay-pdf-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 600px) {
.replay-card { flex-basis: 100%; max-width: 100%; }
}
/* ===== Cours internes : index par chapitres + modale vidéo ===== */
.cours-index-title {
font-size: 1.4rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-text-muted);
text-align: center;
margin: 0 0 36px;
font-weight: 600;
}
.cours-chapitre { margin: 0 0 38px; }
.cours-chap-title {
display: flex;
align-items: center;
gap: 14px;
font-size: 1.867rem;
color: var(--color-primary);
margin: 0 0 6px;
padding-bottom: 12px;
border-bottom: 2px solid var(--color-secondary);
/* « RECONSTRUCTION ORBITOPALPEBRALE » (chapitre 6) ne peut pas etre coupe :
en conteneur flex, sa min-content poussait la page a 357px de large dans un
ecran de 320. `anywhere` autorise la coupure du mot ET rentre dans le calcul
de la min-content, ce que `break-word` ne fait pas. */
min-width: 0;
overflow-wrap: anywhere;
}
.cours-chap-num {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--color-secondary);
color: #fff;
font-size: 1.333rem;
font-weight: 700;
}
.cours-interv-list {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 14px;
}
.cours-interv {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 16px 4px;
border-bottom: 1px solid var(--color-border-soft, var(--color-border));
}
.cours-interv:last-child { border-bottom: 0; }
.cours-interv-body { flex: 1; min-width: 0; }
.cours-interv-topic {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 4px;
line-height: 1.35;
}
.cours-interv-speaker {
font-size: 1.227rem;
color: var(--color-text-light);
margin: 0;
line-height: 1.45;
}
.cours-interv-actions {
flex: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.cours-voir {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-secondary);
color: #fff;
border: 0;
border-radius: 6px;
padding: 9px 18px;
font-size: 1.2rem;
font-weight: 600;
font-family: var(--font-body);
cursor: pointer;
transition: filter .2s, transform .2s;
white-space: nowrap;
}
.cours-voir:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cours-voir i { font-size: 1.067rem; }
.cours-interv.is-coming .cours-interv-topic,
.cours-interv-soon { color: var(--color-text-muted); }
.cours-interv-soon {
flex: none;
font-style: italic;
font-size: 1.2rem;
}
/* Modale vidéo */
.cours-modal {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(10, 37, 64, .82);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: coursModalFade .2s ease;
}
.cours-modal[hidden] { display: none !important; }
@keyframes coursModalFade { from { opacity: 0; } to { opacity: 1; } }
.cours-modal-inner {
position: relative;
width: 100%;
max-width: 960px;
}
.cours-modal-video {
position: relative;
width: 100%;
padding-top: 56.25%;
background: #000;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.cours-modal-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.cours-modal-close {
position: absolute;
top: -46px;
right: 0;
background: transparent;
border: 0;
color: #fff;
font-size: 34.667px;
cursor: pointer;
line-height: 1;
padding: 4px 8px;
}
.cours-modal-close:hover { opacity: .75; }
body.cours-modal-open { overflow: hidden; }
@media (max-width: 640px) {
.cours-interv { flex-direction: column; align-items: flex-start; gap: 10px; }
.cours-interv-actions { justify-content: flex-start; }
.cours-chap-title { font-size: 1.6rem; }
.cours-modal-close { top: -40px; }
}
/* ===== Recherche globale (loupe header) ===== */
.nav-search-toggle {
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-primary);
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18.667px;
cursor: pointer;
transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.nav-search-toggle:hover {
background: var(--color-secondary);
border-color: var(--color-secondary);
color: #fff;
transform: translateY(-1px);
}
.nav-search-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(10, 37, 64, .68);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: flex-start;
padding: 0 24px;
padding-top: calc(var(--header-height, 80px) + 24px);
animation: navSearchFadeIn .2s ease;
}
.nav-search-overlay[hidden] { display: none !important; }
@keyframes navSearchFadeIn { from { opacity: 0; } to { opacity: 1; } }
.nav-search-overlay-inner {
background: #fff;
width: 100%;
max-width: 760px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
animation: navSearchSlide .25s ease;
}
@keyframes navSearchSlide { from { transform: translateY(-12px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
.nav-search-box {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
border-bottom: 1px solid var(--color-border);
}
.nav-search-icon { color: var(--color-secondary); font-size: 24px; }
.nav-search-box input {
flex: 1;
border: none;
outline: none;
font-size: 24px;
font-family: var(--font-body);
color: var(--color-primary);
background: transparent;
padding: 6px 0;
}
.nav-search-box input::placeholder { color: var(--color-text-muted); }
.nav-search-close {
background: transparent;
border: 0;
width: 32px; height: 32px;
border-radius: 50%;
cursor: pointer;
color: var(--color-text-light);
transition: background .2s, color .2s;
}
.nav-search-close:hover { background: var(--color-bg-alt); color: var(--color-primary); }
.nav-search-results { max-height: 62vh; overflow-y: auto; padding: 8px 0 12px; }
.nav-search-hint, .nav-search-empty, .nav-search-error {
color: var(--color-text-light);
padding: 28px 24px;
text-align: center;
font-size: 18.667px;
margin: 0;
}
.nav-search-hint--top {
color: var(--color-secondary);
font-weight: 600;
text-align: left;
padding: 14px 24px 4px;
font-size: 16px;
letter-spacing: .04em;
text-transform: uppercase;
}
.nav-search-empty { text-align: left; padding: 18px 24px; font-style: italic; }
.nav-search-list { display: flex; flex-direction: column; }
.nav-search-item {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 24px;
text-decoration: none;
border-bottom: 1px solid var(--color-bg-alt);
transition: background .2s;
color: var(--color-primary);
}
.nav-search-item:last-child { border-bottom: 0; }
.nav-search-item:hover { background: var(--color-bg-alt); }
.nav-search-item img,
.nav-search-item-fallback {
width: 52px; height: 52px;
border-radius: 6px;
object-fit: cover;
flex: none;
background: var(--color-bg-alt);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-secondary);
}
.nav-search-item-body { flex: 1; min-width: 0; }
.nav-search-item-type {
display: inline-block;
font-size: 13.333px;
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 700;
color: var(--color-secondary);
margin-bottom: 2px;
}
.nav-search-item-body h4 {
font-family: var(--font-heading);
font-size: 1.333rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 3px;
line-height: 1.3;
}
.nav-search-item-body p {
font-size: 16.667px;
color: var(--color-text-light);
margin: 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nav-search-item-arrow { color: var(--color-secondary); transition: transform .2s; flex: none; }
.nav-search-item:hover .nav-search-item-arrow { transform: translateX(3px); }
body.nav-search-open { overflow: hidden; }
@media (max-width: 768px) {
.nav-search-overlay { padding-top: calc(var(--header-height, 70px) + 8px); padding-left: 12px; padding-right: 12px; }
.nav-search-toggle { width: 36px; height: 36px; font-size: 17.333px; }
.nav-search-box input { font-size: 21.333px; }
.nav-search-item img,
.nav-search-item-fallback { width: 44px; height: 44px; }
}
/* Encart "télécharger le bulletin d'adhésion" (page inscription en ligne) */
.inscription-bulletin {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 24px 28px;
margin: 0 0 28px;
background: var(--color-surface-alt, #f4fafc);
border: 1px solid var(--color-border-soft, #dbe6ec);
border-left: 4px solid var(--color-primary);
border-radius: 10px;
}
.inscription-bulletin__text { flex: 1 1 320px; }
.inscription-bulletin__text h2 {
margin: 0 0 6px;
font-size: 1.533rem;
color: var(--color-text, #1d2b34);
}
.inscription-bulletin__text p { margin: 0; font-size: 1.267rem; line-height: 1.55; }
.inscription-bulletin .btn { flex: 0 0 auto; white-space: nowrap; }
/* Le libelle « Telecharger le bulletin (PDF) » en white-space:nowrap mesure 284px :
dans l'encart de 272px a 320px de viewport il debordait a droite (bord a 340px).
Sous 480px on empile et on autorise le retour a la ligne. */
@media (max-width: 480px) {
.inscription-bulletin { flex-direction: column; align-items: stretch; padding: 20px 18px; }
.inscription-bulletin__text { flex: 1 1 auto; }
.inscription-bulletin .btn {
white-space: normal;
width: 100%;
justify-content: center;
text-align: center;
}
}
.inscription-or {
text-align: center;
margin: 0 0 26px;
font-size: 1.267rem;
color: var(--color-text-soft, #5a6b76);
}
/* ============================================
FORMATION VIDÉO — Lecteur + menu latéral (réservé membres)
============================================ */
.video-single { padding-top: 40px; }
.video-single-layout {
display: grid;
grid-template-columns: 320px 1fr;
gap: 40px;
align-items: start;
}
/* --- Menu latéral --- */
.video-sidebar {
position: sticky;
top: 100px;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
max-height: calc(100vh - 130px);
display: flex;
flex-direction: column;
}
.video-sidebar-head {
padding: 24px 20px 16px;
border-bottom: 1px solid var(--color-border);
background: #fff;
}
.video-sidebar-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-primary);
background: var(--color-primary-light);
padding: 4px 10px;
border-radius: 999px;
}
.video-sidebar-title { font-size: 1.25rem; margin: 12px 0 14px; }
.video-search { position: relative; }
.video-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-light);
font-size: 14px;
pointer-events: none;
}
.video-search-input {
width: 100%;
padding: 11px 14px 11px 38px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 15px;
background: #fff;
color: var(--color-text);
}
.video-search-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-light);
}
.video-count { margin: 12px 0 0; font-size: 13px; color: var(--color-text-light); }
.video-list {
list-style: none;
margin: 0;
padding: 8px;
overflow-y: auto;
flex: 1 1 auto;
}
.video-list-item { margin: 0; }
.video-list-item > a {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 12px;
border-radius: var(--radius-sm);
color: var(--color-text);
text-decoration: none;
transition: background .15s ease, color .15s ease;
line-height: 1.35;
}
.video-list-item > a:hover { background: var(--color-primary-light); }
.video-list-item.is-current > a {
background: var(--color-primary);
color: #fff;
}
.video-list-lock { font-size: 11px; margin-top: 3px; opacity: .55; flex: 0 0 auto; }
.video-list-item.is-current .video-list-lock { opacity: .85; }
.video-list-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.video-list-title { font-size: 14px; font-weight: 600; }
.video-list-year { font-size: 12px; color: var(--color-text-light); }
.video-list-item.is-current .video-list-year { color: rgba(255,255,255,.75); }
.video-list-empty { padding: 20px; text-align: center; color: var(--color-text-light); font-size: 14px; }
/* --- Colonne principale --- */
.video-main-head { margin-bottom: 20px; }
.video-tag {
display: inline-block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-primary);
background: var(--color-primary-light);
padding: 4px 12px;
border-radius: 999px;
margin-bottom: 12px;
}
.video-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 8px; }
.video-year-meta { color: var(--color-text-light); margin: 0; font-size: 15px; }
.video-embed {
position: relative;
width: 100%;
padding-top: 56.25%;
background: #000;
border-radius: var(--radius);
overflow: hidden;
}
.video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.video-file {
width: 100%;
display: block;
background: #000;
border-radius: var(--radius);
aspect-ratio: 16 / 9;
}
.video-unavailable {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
text-align: center;
aspect-ratio: 16 / 9;
background: var(--color-bg-alt);
border: 1px dashed var(--color-border);
border-radius: var(--radius);
color: var(--color-text-light);
}
.video-unavailable i { font-size: 32px; color: var(--color-primary); }
.video-desc { margin-top: 28px; }
@media (max-width: 900px) {
.video-single-layout { grid-template-columns: 1fr; gap: 28px; }
.video-sidebar {
position: static;
max-height: none;
order: 2;
}
.video-list { max-height: 420px; }
.video-main { order: 1; }
}
/* ============================================
VIDÉOS INSTITUTIONNELLES (SFSCMFCO depuis 1888) + lightbox plein écran
============================================ */
.videos-institut-intro { text-align: center; max-width: 860px; margin: 0 auto 44px; }
.videos-institut-lead { color: var(--color-text-light); margin-top: 12px; line-height: 1.7; }
.videos-institut-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.video-institut-card {
position: relative; display: block; width: 100%; padding: 0; border: 0;
background: var(--color-secondary); border-radius: 16px; overflow: hidden;
cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.10);
transition: transform .3s ease, box-shadow .3s ease;
}
a.video-institut-card:hover, .video-institut-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.18); }
.video-institut-media { display: block; }
.video-institut-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform .5s ease; }
.video-institut-card:hover .video-institut-media img { transform: scale(1.06); }
.video-institut-play {
position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
width: 72px; height: 72px; border-radius: 50%;
background: var(--color-primary); color: #fff;
display: grid; place-items: center; font-size: 26px;
box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .3s ease, background .3s ease;
}
.video-institut-card:hover .video-institut-play { transform: translate(-50%, -50%) scale(1.08); }
.video-institut-play i { margin-left: 3px; }
.video-institut-title {
position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px 18px;
color: #fff; text-align: left; font-family: var(--font-heading); font-weight: 700;
font-size: 1.35rem; line-height: 1.25;
background: linear-gradient(to top, rgba(10,20,30,.88) 0%, rgba(10,20,30,.35) 60%, transparent 100%);
}
.videos-institut-credits { text-align: center; margin-top: 30px; color: var(--color-text-light); font-size: 1rem; }
.videos-institut-credits a { color: var(--color-primary); text-decoration: underline; }
@media (max-width: 900px) { .videos-institut-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
/* Lightbox vidéo */
.video-lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.video-lightbox[hidden] { display: none; }
.video-lightbox-overlay { position: absolute; inset: 0; background: rgba(4,10,16,.92); backdrop-filter: blur(3px); }
.video-lightbox-inner { position: relative; width: min(94vw, 1500px); z-index: 1; }
.video-lightbox-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.video-lightbox-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-lightbox-close {
position: absolute; top: -54px; right: 0; width: 44px; height: 44px; border: 0; border-radius: 50%;
background: rgba(255,255,255,.15); color: #fff; font-size: 22px; cursor: pointer;
display: grid; place-items: center; transition: background .2s ease;
}
.video-lightbox-close:hover { background: rgba(255,255,255,.3); }
@media (max-width: 600px) { .video-lightbox-close { top: -48px; } }
/* Logos partenaires « en avant » (cartes) : afficher le logo entier, jamais rogné */
.partners-featured-section .card img {
aspect-ratio: 16 / 10;
object-fit: contain;
background: #fff;
padding: 22px;
}
/* Sponsors — ligne Diamant fixe (mise en avant) au-dessus du marquee */
.sponsors-tier-label {
text-align: center;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--color-primary);
margin: 8px 0 22px;
}
.sponsors-diamond {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 28px;
margin-bottom: 8px;
}
.sponsor-logo--diamond { width: 230px; min-height: 132px; }
.sponsor-logo--diamond img { max-height: 88px; max-width: 190px; }
@media (max-width: 768px) {
.sponsors-diamond { gap: 16px; }
.sponsor-logo--diamond { width: 150px; min-height: 96px; }
.sponsor-logo--diamond img { max-height: 60px; max-width: 120px; }
}
/* Annuaire hospitalier — barre de recherche (ville / établissement / chirurgien) */
.annuaire-hospitalier-wrap .annuaire-search { margin: 8px 0 24px; }
.annuaire-hospitalier-wrap .annuaire-search-field {
position: relative;
max-width: 560px;
margin: 0 auto;
}
.annuaire-hospitalier-wrap .annuaire-search-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--color-primary);
font-size: 16px;
pointer-events: none;
}
.annuaire-hospitalier-wrap .annuaire-search-input {
width: 100%;
padding: 15px 18px 15px 48px;
border: 1px solid var(--color-border);
border-radius: 999px;
font-size: 16px;
background: #fff;
color: var(--color-text);
box-shadow: var(--shadow);
transition: border-color .15s ease, box-shadow .15s ease;
}
.annuaire-hospitalier-wrap .annuaire-search-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-light);
}
.annuaire-hospitalier-wrap .annuaire-search-status {
text-align: center;
margin: 12px 0 0;
font-size: 14px;
color: var(--color-text-light);
min-height: 20px;
}
.annuaire-hospitalier-wrap .annuaire-card[hidden],
.annuaire-hospitalier-wrap .annuaire-letter-block[hidden] { display: none !important; }
/* Boutons dans le contenu : la règle .page-content a (couleur + soulignement) les
rendait illisibles (texte couleur primaire sur fond primaire). On restaure le rendu bouton. */
.page-content a.btn,
.text-section-content a.btn { text-decoration: none; }
.page-content a.btn-primary,
.text-section-content a.btn-primary { color: #fff; }
.page-content a.btn-primary:hover,
.text-section-content a.btn-primary:hover { color: #fff; }
/* Pendant une recherche, on masque les compteurs par lettre (devenus faux) */
.annuaire-hospitalier-wrap.is-searching .annuaire-letter-title .label { display: none; }
/* Page en cours de construction */
.under-construction { max-width: 620px; margin: 40px auto; text-align: center; padding: 48px 32px; background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius); box-shadow: var(--shadow); }
.under-construction-icon { display: inline-grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 50%; background: rgba(var(--color-primary-rgb), .1); color: var(--color-primary); font-size: 2.2rem; }
.under-construction h2 { color: var(--color-secondary); margin: 0 0 12px; }
.under-construction p { color: var(--color-text-light); font-size: 1.1rem; line-height: 1.6; margin: 0 auto 8px; max-width: 460px; }
.under-construction-cta { margin-top: 24px; }
/* Ouvrages recommandes */
.ouvrages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 26px; }
.ouvrage-card { display: flex; flex-direction: column; text-align: left; background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; padding: 0; font: inherit; color: inherit; transition: transform var(--transition), box-shadow var(--transition); }
.ouvrage-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ouvrage-cover { position: relative; display: block; aspect-ratio: 3/4; background: var(--color-bg); overflow: hidden; }
.ouvrage-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition); }
.ouvrage-card:hover .ouvrage-cover img { transform: scale(1.04); }
.ouvrage-zoom { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: 1rem; opacity: 0; transition: opacity var(--transition); }
.ouvrage-card:hover .ouvrage-zoom { opacity: 1; }
.ouvrage-card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ouvrage-title { font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--color-secondary); }
.ouvrage-author { font-size: .85rem; color: var(--color-text-light); }
.ouvrage-cta { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: .85rem; color: var(--color-primary); }
.ouvrage-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px; }
.ouvrage-modal[hidden] { display: none; }
.ouvrage-modal-overlay { position: absolute; inset: 0; background: rgba(10,20,30,.6); }
.ouvrage-modal-dialog { position: relative; background: #fff; border-radius: var(--radius); max-width: 860px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.ouvrage-modal-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--color-bg); color: var(--color-secondary); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.ouvrage-modal-close:hover { background: var(--color-primary); color: #fff; }
.ouvrage-modal-grid { display: grid; grid-template-columns: 240px 1fr; gap: 28px; padding: 32px; }
.ouvrage-modal-cover img { width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.ouvrage-modal-text h2 { font-size: 1.5rem; line-height: 1.25; color: var(--color-secondary); margin: 0 0 10px; }
.ouvrage-modal-author { font-weight: 600; color: var(--color-primary); margin: 0 0 16px; }
.ouvrage-modal-desc p { margin: 0 0 12px; line-height: 1.65; color: var(--color-text); }
@media (max-width: 640px) { .ouvrage-modal-grid { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; } .ouvrage-modal-cover { max-width: 180px; margin: 0 auto; } }
/* Espace membre refonte */
.member-space .cotisation-card { display: flex; align-items: center; gap: 20px; padding: 24px 28px; border-radius: var(--radius); margin-bottom: 36px; border: 1px solid var(--color-border-soft); background: #fff; box-shadow: var(--shadow); }
.cotisation-card__icon { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; color: #fff; }
.cotisation-card--ok .cotisation-card__icon { background: var(--color-green); }
.cotisation-card--due .cotisation-card__icon { background: var(--color-red); }
.cotisation-card--ok { border-left: 5px solid var(--color-green); }
.cotisation-card--due { border-left: 5px solid var(--color-red); }
.cotisation-card__body { flex: 1; min-width: 0; }
.cotisation-card__label { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; font-weight: 700; color: var(--color-text-light); }
.cotisation-card__body h2 { margin: 2px 0 6px; font-size: 1.6rem; color: var(--color-secondary); }
.cotisation-card--ok .cotisation-card__body h2 { color: var(--color-green); }
.cotisation-card--due .cotisation-card__body h2 { color: var(--color-red); }
.cotisation-card__body p { margin: 0; color: var(--color-text); }
.cotisation-card__action { flex: 0 0 auto; }
.member-tabs__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.member-tabs__nav { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 2px solid var(--color-border-soft); margin-bottom: 28px; }
.member-tabs__nav label { padding: 12px 22px; cursor: pointer; font-weight: 700; color: var(--color-text-light); border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color var(--transition), border-color var(--transition); }
.member-tabs__nav label:hover { color: var(--color-primary); }
#member-tab-raccourcis:checked ~ .member-tabs__nav label[for="member-tab-raccourcis"], #member-tab-profil:checked ~ .member-tabs__nav label[for="member-tab-profil"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.member-tab-panel { display: none; }
#member-tab-raccourcis:checked ~ .member-tabs__panels .member-tab-panel--raccourcis, #member-tab-profil:checked ~ .member-tabs__panels .member-tab-panel--profil { display: block; }
.member-block-title { font-size: 1.35rem; color: var(--color-secondary); margin: 8px 0 4px; }
.member-block-sub { color: var(--color-text-light); margin: 0 0 20px; }
.member-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.member-video-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition); }
a.member-video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.member-video-card--soon { opacity: .6; }
.member-video-card__icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--color-primary-rgb), .1); color: var(--color-primary); font-size: 1.2rem; }
.member-video-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.member-video-card__title { font-weight: 700; color: var(--color-secondary); }
.member-video-card__count { font-size: .88rem; color: var(--color-text-light); }
.member-video-card__arrow { color: var(--color-primary); font-weight: 700; }
.member-allvideos { margin: 0 0 40px; }
.member-allvideos a { font-weight: 700; color: var(--color-primary); text-decoration: none; }
/* auto-FIT et non auto-FILL : avec 3 raccourcis, auto-fill gardait une 4e piste
vide de 304px a droite. auto-fit effondre les pistes inoccupees et les 3 cartes
se partagent toute la largeur (regle maison : jamais de rangee orpheline). */
.member-shortcut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.member-shortcut { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition); }
.member-shortcut:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.member-shortcut__icon { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--color-primary-rgb), .1); color: var(--color-primary); font-size: 1.4rem; margin-bottom: 4px; }
.member-shortcut__title { font-weight: 700; font-size: 1.15rem; color: var(--color-secondary); }
.member-shortcut__desc { color: var(--color-text-light); font-size: .95rem; line-height: 1.5; flex: 1; }
@media (max-width: 640px) { .member-space .cotisation-card { flex-direction: column; text-align: center; } .cotisation-card__action { width: 100%; } .cotisation-card__action .btn { width: 100%; } }
/* Vidéos de nos cours (éditorial) */
.videos-cours-lead { font-size: 1.25rem; line-height: 1.6; color: var(--color-text); }
.videos-cours-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.videos-cours-section.is-alt { background: var(--color-bg-alt); }
.videos-cours-section.is-alt .videos-cours-media { order: 2; }
.videos-cours-media .cours-video-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: #000; }
.videos-cours-media .cours-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.videos-cours-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 700; color: var(--color-primary); margin-bottom: 8px; }
.videos-cours-text h2 { font-size: 2rem; color: var(--color-secondary); margin: 0 0 14px; }
.videos-cours-text p { font-size: 1.1rem; line-height: 1.7; color: var(--color-text); }
@media (max-width: 820px) { .videos-cours-row { grid-template-columns: 1fr; gap: 24px; } .videos-cours-section.is-alt .videos-cours-media { order: 0; } }
/* Tableau indicateurs Qualiopi (satisfaction / réussite IDE-Kinés) */
.qualiopi-indic-table { border-collapse: collapse; margin: 12px 0 20px; font-size: 1.05rem; }
.qualiopi-indic-table th, .qualiopi-indic-table td { border: 1px solid var(--color-border-soft, #dbe6ec); padding: 10px 22px; }
.qualiopi-indic-table thead th, .qualiopi-indic-table tr:first-child th { background: var(--color-surface-alt, #eef5f8); color: var(--color-primary); }
.qualiopi-indic-table td:first-child, .qualiopi-indic-table th:first-child { text-align: left; font-weight: 600; }
.qualiopi-indic-table td:not(:first-child) { text-align: center; font-weight: 700; }
/* Sous 400px, les 22px de rembourrage lateral par cellule (132px sur 3 colonnes)
portaient le tableau a 301px dans un conteneur de 272px. On resserre le
rembourrage plutot que d'ajouter une barre de defilement : le tableau ne compte
que 3 colonnes courtes et reste entierement lisible. */
@media (max-width: 400px) {
.qualiopi-indic-table { font-size: .95rem; width: 100%; }
.qualiopi-indic-table th, .qualiopi-indic-table td { padding: 8px 6px; }
}
/* Maquettes : arrêtés officiels */
.arretes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.arrete-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius); box-shadow: var(--shadow); }
.arrete-body { display: flex; flex-direction: column; gap: 4px; }
.arrete-body strong { color: var(--color-secondary); font-size: 1.05rem; }
.arrete-body span { color: var(--color-text-light); font-size: .95rem; line-height: 1.5; }
.arrete-dl { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) { .arrete-item { flex-direction: column; align-items: flex-start; } }
/* DU et DIU par ville */
.diu-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 22px; align-items: start; }
.diu-city { background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 26px; }
.diu-city-name { color: var(--color-primary); font-size: 1.4rem; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border-soft); }
.diu-service { color: var(--color-text-light); font-size: .95rem; font-style: italic; margin: 0 0 6px; }
.diu-resp { font-weight: 700; color: var(--color-secondary); margin: 0 0 10px; }
.diu-dip { margin: 8px 0 2px; color: var(--color-text); }
.diu-dip span { font-weight: 600; color: var(--color-secondary); }
.diu-info { margin: 0 0 12px; font-size: .92rem; color: var(--color-text-light); }
.diu-info a { color: var(--color-primary); }
@media (max-width: 560px) { .diu-list { grid-template-columns: 1fr; } }
/* Diaporamas techniques */
.diaporamas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.diaporama-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition); }
.diaporama-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.diaporama-media { position: relative; aspect-ratio: 16/9; background: var(--color-secondary); overflow: hidden; }
.diaporama-media img { width: 100%; height: 100%; object-fit: cover; }
.diaporama-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: 1.1rem; transition: background var(--transition); }
.diaporama-card:hover .diaporama-play { background: var(--color-primary); }
.diaporama-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.diaporama-body h3 { font-size: 1.05rem; line-height: 1.35; margin: 0; color: var(--color-secondary); }
.diaporama-body .card-link { margin-top: auto; }
/* ============================================
PARTENAIRES SCIENTIFIQUES & AUTRES — annuaire
============================================ */
.sci-partners { margin-top: 8px; }
.sci-intro { font-size: 1.15rem; color: var(--color-text-light); max-width: 820px; margin: 0 0 44px; line-height: 1.7; }
.sci-group { margin-bottom: 52px; }
.sci-group-title { font-size: 1.6rem; color: var(--color-secondary); margin: 0 0 22px; padding-bottom: 12px; border-bottom: 2px solid var(--color-primary-light); }
.sci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.sci-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px; }
.sci-card--link { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.sci-card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(var(--color-primary-rgb), .35); }
.sci-card--nolink { background: var(--color-bg-alt); }
.sci-card-name { font-size: 1.15rem; font-weight: 700; color: var(--color-secondary); line-height: 1.3; }
.sci-card-desc { font-size: .95rem; color: var(--color-text-light); line-height: 1.45; flex: 1 1 auto; }
.sci-card-cta { margin-top: 12px; font-size: .9rem; font-weight: 600; color: var(--color-primary); }
.sci-card-note { margin-top: 10px; font-size: .8rem; font-weight: 600; color: var(--color-text-light); font-style: italic; }
.sci-tag { align-self: flex-start; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary); background: var(--color-primary-light); padding: 3px 10px; border-radius: 999px; margin-bottom: 4px; }
/* La règle .page-content a (couleur + soulignement) ne doit pas s'appliquer aux cartes */
.page-content a.sci-card, .page-content a.sci-card:hover { text-decoration: none; color: inherit; }
@media (max-width: 640px) { .sci-grid { grid-template-columns: 1fr; } }
/* Bandeau « Adhérer en ligne » en tête de la page Adhésion */
.adhesion-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
flex-wrap: wrap;
background: var(--color-primary-light);
border: 1px solid rgba(var(--color-primary-rgb), .18);
border-radius: var(--radius);
padding: 32px 36px;
margin-bottom: 18px;
}
.adhesion-cta-body { flex: 1 1 380px; }
.adhesion-cta h2 { margin: 0 0 10px; font-size: 1.45rem; }
.adhesion-cta p { margin: 0; color: var(--color-text-light); }
.adhesion-cta .btn { flex: 0 0 auto; }
.page-content .adhesion-cta a.btn-primary { color: #fff; text-decoration: none; }
.adhesion-cta-note { color: var(--color-text-light); font-style: italic; margin-bottom: 8px; }
@media (max-width: 640px) { .adhesion-cta { padding: 24px 20px; } .adhesion-cta .btn { width: 100%; text-align: center; justify-content: center; } }