/* =========================================================
ISAR — International Search & Rescue
style.css — variables, base, layout, composants
========================================================= */
/* ---------- Fonts ----------
Chargées par dans le de chaque page,
précédé de deux . Un @import ici les
sérialiserait derrière ce fichier : le navigateur ne découvrirait
la requête Google Fonts qu'après avoir téléchargé et analysé
style.css, ce qui retarde d'autant le premier rendu du texte. */
/* ---------- Design tokens ---------- */
:root {
--radius: 0.75rem;
--radius-sm: 0.4375rem;
--radius-md: 0.5625rem;
--radius-lg: 0.75rem;
--radius-xl: 1.1875rem;
/* Couleurs de marque — extraites de images/logo.svg
Bleu #1F478E = oklch(0.41 0.126 261)
Orange #F47A35 = oklch(0.71 0.17 47)
Gris #6D6E71 = oklch(0.54 0.006 271) */
--brand-blue: oklch(0.41 0.126 261);
--brand-orange: oklch(0.71 0.17 47);
--brand-gray: oklch(0.54 0.006 271);
--background: oklch(0.99 0.004 261);
--foreground: oklch(0.2 0.04 261);
--navy-deep: oklch(0.24 0.085 261);
--navy: var(--brand-blue);
/* --cyan : teinte claire du bleu logo (lisible sur fond navy) */
--cyan: oklch(0.68 0.12 250);
--rescue: var(--brand-orange);
--sand: oklch(0.96 0.018 70);
--card: oklch(1 0 0);
--card-foreground: oklch(0.2 0.04 261);
--primary: var(--brand-blue);
--primary-foreground: oklch(0.99 0.004 261);
--secondary: oklch(0.95 0.022 261);
--secondary-foreground: var(--brand-blue);
--muted: oklch(0.96 0.012 261);
--muted-foreground: oklch(0.5 0.012 265);
--accent: oklch(0.68 0.12 250);
--border: oklch(0.9 0.022 261);
--input: oklch(0.9 0.022 261);
--ring: oklch(0.68 0.12 250);
--gradient-hero: linear-gradient(135deg, oklch(0.22 0.075 261) 0%, oklch(0.34 0.11 261) 50%, oklch(0.47 0.135 255) 100%);
--shadow-soft: 0 10px 40px -12px oklch(0.41 0.126 261 / 0.25);
--shadow-glow: 0 20px 60px -20px oklch(0.68 0.12 250 / 0.5);
--font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}
/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); }
html { scroll-behavior: smooth; }
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
line-height: 1.5;
/* Filet de sécurité hérité par toute la page : un mot plus long que
la place disponible est coupé au lieu de déborder. Inerte partout
ailleurs — la règle ne s'applique qu'au mot qui ne rentre pas. */
overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; }
svg.icon { width: 1em; height: 1em; stroke: currentColor; flex-shrink: 0; }
h1, h2, h3, h4 {
font-family: var(--font-display);
letter-spacing: -0.02em;
font-weight: 700;
color: var(--navy-deep);
}
/* ---------- Layout helpers ---------- */
.container-x {
width: 100%;
max-width: 80rem;
margin-inline: auto;
padding-inline: 1.25rem;
}
@media (min-width: 768px) {
.container-x { padding-inline: 2rem; }
}
.section { padding-block: 5rem; }
@media (min-width: 768px) {
.section { padding-block: 7rem; }
}
.section.pt-0 { padding-top: 0; }
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
/* min-width:0 lève le plancher min-content que les items flex portent
par défaut : sans lui, un enfant plus large que sa colonne (texte
long, bouton en nowrap) empêche l'item de rétrécir et fait déborder
toute la page. Aux largeurs où le contenu tient déjà, la déclaration
ne change rien. */
.flex-1 { flex: 1; min-width: 0; }
.grid { display: grid; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
/* ---------- Typography colors ---------- */
.text-navy-deep { color: var(--navy-deep); }
.text-cyan { color: var(--cyan); }
.text-muted { color: var(--muted-foreground); }
.text-white { color: #fff; }
.text-white-70 { color: rgb(255 255 255 / 0.7); }
.text-white-80 { color: rgb(255 255 255 / 0.8); }
.text-gradient-cyan {
background: linear-gradient(90deg, var(--cyan), oklch(0.83 0.085 250));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------- Eyebrow badge ---------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.85rem;
border-radius: 999px;
background: oklch(0.68 0.12 250 / 0.12);
color: var(--navy-deep);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.eyebrow.on-dark {
background: rgb(255 255 255 / 0.1);
color: var(--cyan);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15);
backdrop-filter: blur(8px);
}
/* ---------- Buttons ---------- */
.btn-primary, .btn-outline, .btn-solid {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 0.6rem;
font-weight: 600;
font-size: 0.9375rem;
transition: all 0.2s;
white-space: nowrap;
}
.btn-primary { background: var(--rescue); color: #fff; box-shadow: var(--shadow-soft); }
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-outline { border: 1px solid rgb(255 255 255 / 0.3); color: #fff; }
.btn-outline:hover { background: rgb(255 255 255 / 0.1); }
.btn-solid { background: var(--navy); color: #fff; }
.btn-solid:hover { background: var(--navy-deep); }
.btn-primary svg, .btn-outline svg, .btn-solid svg { width: 1rem; height: 1rem; }
/* ---------- Cards ---------- */
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 1rem;
}
.card-lift { transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: var(--cyan); }
.card-lift img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.card-lift:hover img { transform: scale(1.04); }
.hover-lift { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.link-underline { position: relative; }
.link-underline::after {
content: "";
position: absolute;
left: 0; bottom: -2px;
height: 1px; width: 100%;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }
/* ---------- Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgb(255 255 255 / 0.6);
backdrop-filter: blur(12px);
border-bottom: 1px solid transparent;
transition: all 0.3s;
}
.site-header.scrolled {
background: rgb(255 255 255 / 0.85);
backdrop-filter: blur(20px);
border-bottom-color: var(--border);
box-shadow: 0 4px 20px -8px oklch(0.41 0.126 261 / 0.15);
}
.header-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
height: 4rem;
transition: height 0.3s;
}
.site-header.scrolled .header-inner { height: 3.5rem; }
.logo {
display: flex;
align-items: center;
gap: 0.625rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.125rem;
color: var(--navy-deep);
min-width: 0;
transition: opacity 0.2s;
}
.logo:hover { opacity: 0.85; }
.logo-img {
/* La barre reste à 4rem : 3rem de logo laisse 0.5rem de respiration
au-dessus et en dessous. */
height: 3rem;
width: auto;
display: block;
transition: transform 0.3s, height 0.3s;
}
.site-header.scrolled .logo-img { height: 2.5rem; }
.logo:hover .logo-img { transform: scale(1.03); }
.header-right { display: flex; align-items: center; gap: 0.5rem; }
.primary-nav { display: none; align-items: center; gap: 0.125rem; }
@media (min-width: 1280px) { .primary-nav { display: flex; } }
.primary-nav a {
position: relative;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--muted-foreground);
border-radius: 0.375rem;
transition: color 0.2s;
}
.primary-nav a:hover { color: var(--navy-deep); }
.primary-nav a.active { color: var(--navy-deep); font-weight: 600; }
.primary-nav a.active::after {
content: "";
position: absolute;
left: 0.75rem; right: 0.75rem; bottom: 0.25rem;
height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--cyan), var(--rescue));
}
.nav-more { position: relative; }
.nav-more-btn {
display: flex; align-items: center; gap: 0.25rem;
padding: 0.5rem 0.75rem;
font-size: 0.875rem; font-weight: 500;
color: var(--muted-foreground);
border-radius: 0.375rem;
}
.nav-more-btn:hover { color: var(--navy-deep); }
.nav-more-btn svg { width: 1rem; height: 1rem; transition: transform 0.2s; }
.nav-more.open .nav-more-btn svg { transform: rotate(180deg); }
.nav-more-menu {
position: absolute; right: 0; top: 100%; margin-top: 0.5rem;
width: 14rem;
border: 1px solid var(--border);
border-radius: 0.75rem;
background: rgb(255 255 255 / 0.97);
backdrop-filter: blur(20px);
box-shadow: var(--shadow-soft);
padding: 0.5rem;
display: none;
flex-direction: column;
}
.nav-more.open .nav-more-menu { display: flex; }
.nav-more-menu a {
display: block;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--foreground);
}
.nav-more-menu a:hover { background: var(--secondary); color: var(--navy-deep); }
.header-cta { display: none; }
@media (min-width: 768px) { .header-cta.btn-primary { display: inline-flex; padding: 0.5rem 1rem; font-size: 0.875rem; } }
.menu-toggle { display: block; padding: 0.5rem; margin-right: -0.5rem; }
@media (min-width: 1280px) { .menu-toggle { display: none; } }
.menu-toggle svg { width: 1.5rem; height: 1.5rem; }
.menu-toggle .icon-close { display: none; }
.menu-toggle.open .icon-open { display: none; }
.menu-toggle.open .icon-close { display: block; }
.mobile-nav {
display: none;
border-top: 1px solid var(--border);
background: rgb(255 255 255 / 0.97);
backdrop-filter: blur(20px);
}
.mobile-nav.open { display: block; }
.mobile-nav-inner { padding: 1rem 0 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-nav a {
padding: 0.625rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.9375rem;
font-weight: 500;
color: var(--foreground);
}
.mobile-nav a:hover, .mobile-nav a.active { background: var(--secondary); color: var(--navy-deep); font-weight: 600; }
.mobile-nav .btn-primary { margin-top: 0.5rem; justify-content: center; }
@media (min-width: 1280px) { .xl\:hidden-container { display: none; } }
/* ---------- Hero (page interne) ---------- */
.page-hero {
position: relative;
overflow: hidden;
background: var(--navy-deep);
color: #fff;
}
.page-hero .hero-bg-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transform: scale(1.03);
}
.page-hero .hero-overlay {
position: absolute; inset: 0;
}
.page-hero.no-image .hero-overlay { background: var(--gradient-hero); }
.page-hero.has-image .hero-overlay {
background: linear-gradient(120deg, oklch(0.16 0.055 261 / 0.92), oklch(0.26 0.085 261 / 0.7) 60%, oklch(0.34 0.11 261 / 0.55));
}
.page-hero-content { position: relative; padding-block: 5rem; max-width: 56rem; }
@media (min-width: 768px) { .page-hero-content { padding-block: 7rem; } }
.page-hero-content h1 { font-size: 2.5rem; line-height: 1.05; margin-top: 1rem; color: #fff; max-width: 48rem; }
@media (min-width: 768px) { .page-hero-content h1 { font-size: 3.75rem; } }
.page-hero-content p { margin-top: 1.5rem; font-size: 1.125rem; color: rgb(255 255 255 / 0.75); max-width: 42rem; }
/* Le SVG n'a pas de hauteur déclarée : elle découle du ratio du viewBox
(1440/60), donc de la largeur du viewport, et tombe presque toujours
sur une valeur fractionnaire — 52.6875px à 1280px de large. Le bord
inférieur de la vague et celui du hero atterrissent alors au milieu
d'un pixel physique, et le fond sombre du hero transparaît sur la
dernière rangée : c'est le trait horizontal.
translateY(1px) fait déborder ce bord fractionnaire hors du cadre,
où l'overflow: hidden du hero le coupe net. Le rognage et le fond du
hero s'arrêtant exactement au même endroit, il ne reste plus de jour.
La courbe n'est ni redimensionnée ni redessinée : elle descend d'un
pixel, dont la totalité est masquée par le rognage. */
.hero-wave {
display: block;
width: 100%;
color: var(--background);
position: relative;
transform: translateY(1px);
}
/* ---------- Homepage hero ---------- */
.home-hero { position: relative; overflow: hidden; color: #fff; }
.home-hero .hero-bg-img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05);
}
.home-hero .hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(135deg, oklch(0.16 0.055 261 / 0.95), oklch(0.26 0.085 261 / 0.75) 55%, oklch(0.34 0.11 261 / 0.4));
}
.home-hero .hero-dots {
position: absolute; inset: 0; opacity: 0.06;
background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0);
background-size: 32px 32px;
}
.blob { position: absolute; border-radius: 999px; filter: blur(64px); pointer-events: none; }
.blob-cyan-top { top: 5rem; right: 2.5rem; width: 24rem; height: 24rem; background: oklch(0.68 0.12 250 / 0.2); }
.blob-rescue-bottom { bottom: 2.5rem; left: 25%; width: 18rem; height: 18rem; background: oklch(0.71 0.17 47 / 0.15); }
.home-hero-content { position: relative; padding-block: 6rem; }
@media (min-width: 768px) { .home-hero-content { padding-block: 9rem; } }
.home-hero-content h1 { color: #fff; font-size: 2.75rem; line-height: 1.02; margin-top: 1.5rem; max-width: 56rem; }
@media (min-width: 768px) { .home-hero-content h1 { font-size: 4.5rem; } }
.home-hero-content .lead { margin-top: 1.5rem; font-size: 1.125rem; color: rgb(255 255 255 / 0.8); max-width: 40rem; }
@media (min-width: 768px) { .home-hero-content .lead { font-size: 1.25rem; } }
.hero-cta-group { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.stats-grid {
margin-top: 4rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
max-width: 48rem;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-num { font-family: var(--font-display); font-weight: 700; font-size: 2rem; }
@media (min-width: 768px) { .stat-num { font-size: 3rem; } }
.stat-label { margin-top: 0.25rem; font-size: 0.875rem; color: rgb(255 255 255 / 0.6); }
/* ---------- Marquee (partenaires) ---------- */
.marquee-section { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: oklch(0.95 0.022 261 / 0.4); padding-block: 1.5rem; overflow: hidden; }
.marquee-inner { display: flex; align-items: center; gap: 2rem; }
.marquee-label { flex-shrink: 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
.marquee-viewport { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 30s linear infinite; }
.marquee-track span { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: oklch(0.41 0.126 261 / 0.6); white-space: nowrap; transition: color 0.2s; }
@media (min-width: 768px) { .marquee-track span { font-size: 1.75rem; } }
.marquee-track span:hover { color: var(--navy-deep); }
/* ---------- Grids génériques ---------- */
.grid-3 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.grid-4 { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.grid-2-uneven { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 768px) { .grid-2-uneven { grid-template-columns: 1fr 1fr; gap: 4rem; } }
/* Les items de grille portent min-width:auto, donc une piste en 1fr
ne descend jamais sous le min-content de sa carte : un seul titre
contenant un mot long (« Radiocommunications », 228px à 20px de
corps) élargissait la colonne au-delà du conteneur et poussait
toute la page hors de l'écran. min-width:0 rend la piste maîtresse
de sa largeur ; le mot trop long est alors coupé par la règle
overflow-wrap posée sur body. Sans effet aux largeurs où les
cartes tiennent déjà. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-2-uneven > * { min-width: 0; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-xl { max-width: 36rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
/* ---------- Icon pill / box ---------- */
.icon-box {
display: grid; place-items: center;
border-radius: 0.75rem;
color: #fff;
}
.icon-box svg { width: 1.5rem; height: 1.5rem; }
.icon-box.sz-lg { width: 3rem; height: 3rem; }
.icon-box.sz-md { width: 2.75rem; height: 2.75rem; }
.icon-box.sz-sm { width: 2.5rem; height: 2.5rem; }
.icon-box.grad-cyan-navy { background: linear-gradient(135deg, var(--cyan), var(--navy)); box-shadow: var(--shadow-soft); }
.icon-box.grad-navy { background: linear-gradient(135deg, var(--navy), var(--navy-deep)); box-shadow: var(--shadow-soft); }
.icon-box.grad-rescue-navy { background: linear-gradient(135deg, var(--rescue), var(--navy)); box-shadow: var(--shadow-soft); }
.icon-box.on-cyan-soft { background: oklch(0.68 0.12 250 / 0.1); color: var(--cyan); }
.icon-box.on-cyan-soft2 { background: oklch(0.68 0.12 250 / 0.15); color: var(--cyan); }
.icon-box.on-secondary { background: var(--secondary); color: var(--navy-deep); }
.icon-box.on-rescue-soft { background: oklch(0.71 0.17 47 / 0.1); color: var(--rescue); }
.icon-box.solid-rescue { background: var(--rescue); color: #fff; }
.icon-box.solid-navy { background: var(--navy); color: #fff; }
.icon-box.solid-navy-deep { background: var(--navy-deep); color: var(--cyan); }
.icon-box.on-dark-soft { background: rgb(255 255 255 / 0.1); color: #fff; backdrop-filter: blur(8px); }
/* ---------- Pillar / feature cards ---------- */
.pillar-card { position: relative; overflow: hidden; padding: 2rem; border-radius: 1rem; background: var(--card); border: 1px solid var(--border); display: block; }
.pillar-top-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.pillar-top-bar.grad-a { background: linear-gradient(90deg, var(--cyan), var(--navy)); }
.pillar-top-bar.grad-b { background: linear-gradient(90deg, var(--navy), var(--navy-deep)); }
.pillar-top-bar.grad-c { background: linear-gradient(90deg, var(--rescue), var(--navy)); }
.pillar-card h3 { margin-top: 1.5rem; font-size: 1.25rem; }
.pillar-card p { margin-top: 0.75rem; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.6; }
.pillar-link { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--cyan); transition: gap 0.2s; }
.pillar-link svg { width: 1rem; height: 1rem; }
.pillar-card:hover .pillar-link { gap: 0.5rem; }
/* ---------- Values (dark) section ---------- */
.section-dark { padding-block: 5rem; background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
@media (min-width: 768px) { .section-dark { padding-block: 7rem; } }
.section-dark .bg-gradient-layer { position: absolute; inset: 0; opacity: 0.3; background: var(--gradient-hero); }
.section-dark .bg-blob { position: absolute; top: 0; right: 0; width: 40rem; height: 40rem; border-radius: 999px; background: oklch(0.68 0.12 250 / 0.1); filter: blur(64px); transform: translate(33%, -50%); }
.values-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.values-list li { display: flex; align-items: flex-start; gap: 0.75rem; color: rgb(255 255 255 / 0.85); }
.check-dot { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: oklch(0.68 0.12 250 / 0.2); box-shadow: inset 0 0 0 1px oklch(0.68 0.12 250 / 0.3); flex-shrink: 0; margin-top: 0.125rem; }
.check-dot svg { width: 0.875rem; height: 0.875rem; color: var(--cyan); }
/* ---------- Feature list w/ icon ---------- */
.feature-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.feature-list li { display: flex; gap: 1rem; }
.feature-list .icon-box { flex-shrink: 0; }
.feature-list .ft-title { font-weight: 600; color: var(--navy-deep); }
.feature-list .ft-desc { font-size: 0.875rem; color: var(--muted-foreground); }
/* ---------- Process steps ---------- */
.step-card { position: relative; padding: 1.75rem; border-radius: 1rem; background: var(--card); border: 1px solid var(--border); }
.step-num { position: absolute; top: 1rem; right: 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; color: oklch(0.68 0.12 250 / 0.1); }
.step-card h3 { position: relative; margin-top: 1.25rem; font-size: 1.125rem; }
.step-card p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; }
/* ---------- Sector cards ---------- */
.sector-card { padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--border); background: var(--card); }
.sector-card .sector-title { margin-top: 1.25rem; font-weight: 700; color: var(--navy-deep); }
.sector-card .sector-desc { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
/* ---------- Project/article cards ---------- */
.article-card { border-radius: 1rem; overflow: hidden; background: var(--card); border: 1px solid var(--border); }
.article-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.article-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.article-card:hover .article-media img { transform: scale(1.05); }
.article-media-overlay { position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.2 0.07 261 / 0.8), oklch(0.2 0.07 261 / 0.1), transparent); }
.article-tag { position: absolute; top: 1rem; left: 1rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: oklch(0.68 0.12 250 / 0.9); padding: 0.25rem 0.6rem; border-radius: 0.25rem; }
.article-tag.on-white { color: var(--navy-deep); background: rgb(255 255 255 / 0.9); }
.article-icon-badge { position: absolute; bottom: 1rem; left: 1rem; }
.article-body { padding: 1.5rem; }
.article-body h3 { font-size: 1.125rem; }
.article-body p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.article-link { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--cyan); }
.article-link svg { width: 1rem; height: 1rem; }
/* ---------- Quote ---------- */
.quote-block { max-width: 56rem; margin-inline: auto; text-align: center; }
.quote-block svg { width: 2rem; height: 2rem; color: oklch(0.68 0.12 250 / 0.7); margin-inline: auto; }
.quote-block blockquote { margin-top: 1.5rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.35; color: var(--navy-deep); }
@media (min-width: 768px) { .quote-block blockquote { font-size: 2rem; } }
.quote-block figcaption { margin-top: 2rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-size: 0.875rem; flex-wrap: wrap; }
.quote-line { height: 1px; width: 2.5rem; background: var(--border); }
/* ---------- Quick nav ---------- */
.quick-nav-card { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--card); transition: all 0.2s; }
.quick-nav-card:hover { border-color: var(--cyan); box-shadow: var(--shadow-soft); }
.quick-nav-card .icon-box { flex-shrink: 0; transition: all 0.2s; }
.quick-nav-card:hover .icon-box { background: var(--cyan); color: #fff; }
.quick-nav-card .qn-title { font-weight: 600; color: var(--navy-deep); }
/* Pas de white-space:nowrap ici : il fixait la largeur minimale de la
carte à celle du libellé entier (362px), si bien que l'ellipsis ne
se déclenchait jamais et que la carte débordait de sa colonne dès
que celle-ci passait sous 362px — soit toute la plage 768-1198px et
tout écran sous 402px. Aux largeurs où le texte tenait déjà sur une
ligne, il continue de le faire. */
.quick-nav-card .qn-desc { font-size: 0.875rem; color: var(--muted-foreground); }
.quick-nav-card .qn-arrow { width: 1.25rem; height: 1.25rem; color: var(--muted-foreground); transition: all 0.2s; flex-shrink: 0; }
.quick-nav-card:hover .qn-arrow { color: var(--cyan); transform: translateX(4px); }
/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--gradient-hero); margin-top: 2rem; }
.cta-band .hero-dots { opacity: 0.07; background-size: 26px 26px; }
.cta-band .blob { top: -7rem; right: 25%; width: 20rem; height: 20rem; background: oklch(0.68 0.12 250 / 0.15); }
.cta-band-inner { position: relative; padding-block: 4rem 5rem; display: grid; gap: 2rem; color: #fff; }
@media (min-width: 768px) { .cta-band-inner { grid-template-columns: 1fr auto; align-items: end; padding-block: 5rem; } }
.cta-band-inner .eyebrow-line { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--cyan); }
.cta-band-inner h2 { color: #fff; margin-top: 1rem; font-size: 2rem; }
@media (min-width: 768px) { .cta-band-inner h2 { font-size: 3rem; } }
.cta-band-inner p { margin-top: 1rem; color: rgb(255 255 255 / 0.75); }
/* ---------- Footer ----------
Pas de margin-top ici. La section qui précède le footer porte déjà son
propre espacement bas (.section : padding-block 5rem, 7rem ≥768px ;
.cta-band-inner : 5rem). Le margin-top: 6rem qui s'y ajoutait produisait
une bande de fond de page vide entre les deux — spectaculaire sur
index.html où le bleu du .cta-band s'arrête net, mais présent sur toutes
les pages (11 à 13rem de vide cumulé).
Le filet de 5px marque la séparation entre le bloc CTA bleu dégradé et
le navy du footer, qui sinon se touchent sans transition lisible. */
.site-footer { border-top: 5px solid var(--cyan); background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
.site-footer .bg-gradient-layer { position: absolute; inset: 0; opacity: 0.3; background: var(--gradient-hero); }
.site-footer .bg-blob { position: absolute; top: -8rem; right: -8rem; width: 24rem; height: 24rem; border-radius: 999px; background: oklch(0.68 0.12 250 / 0.1); filter: blur(64px); }
.footer-grid { position: relative; padding-block: 4rem; display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-brand { grid-column: span 1; }
@media (min-width: 768px) { .footer-brand { grid-column: span 2; } }
.footer-logo-plate {
display: inline-flex;
align-items: center;
background: #fff;
border-radius: 0.625rem;
padding: 0.75rem 1.25rem;
box-shadow: var(--shadow-soft);
}
.footer-logo-img { height: 2.75rem; width: auto; display: block; }
.footer-brand p { margin-top: 1rem; font-size: 0.875rem; color: rgb(255 255 255 / 0.7); max-width: 28rem; line-height: 1.6; }
.footer-heading { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cyan); }
.footer-links { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: rgb(255 255 255 / 0.7); }
.footer-links a:hover { color: #fff; }
.footer-contact { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; color: rgb(255 255 255 / 0.7); }
.footer-contact li { display: flex; align-items: flex-start; gap: 0.5rem; }
.footer-contact svg { width: 1rem; height: 1rem; margin-top: 0.125rem; flex-shrink: 0; }
.footer-contact a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgb(255 255 255 / 0.1); position: relative; }
.footer-bottom-inner { padding-block: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.75rem; color: rgb(255 255 255 / 0.5); }
@media (min-width: 768px) { .footer-bottom-inner { flex-direction: row; } }
.footer-bottom-right { display: flex; align-items: center; gap: 1rem; }
.footer-bottom-right a:hover { color: rgb(255 255 255 / 0.8); }
.tracking-widest { letter-spacing: 0.15em; }
/* ---------- Forms ---------- */
.form-field label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--navy-deep); margin-bottom: 0.5rem; }
.form-field .req { color: var(--rescue); }
.form-field input, .form-field textarea, .form-field select {
width: 100%;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
border: 1px solid var(--input);
background: var(--background);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--cyan); }
.form-field textarea { resize: none; }
.form-grid-2 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
.form-success { text-align: center; padding-block: 4rem; }
.form-success svg { width: 3.5rem; height: 3.5rem; color: var(--cyan); margin-inline: auto; }
.form-success h3 { margin-top: 1rem; font-size: 1.5rem; }
.form-success p { margin-top: 0.5rem; color: var(--muted-foreground); }
.contact-item { display: flex; align-items: flex-start; gap: 1rem; }
.contact-item .icon-box { flex-shrink: 0; }
.contact-item .ci-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); }
.contact-item .ci-value { margin-top: 0.125rem; }
.contact-item .ci-value a:hover { color: var(--cyan); }
.callout { margin-top: 2.5rem; border-left: 2px solid var(--cyan); padding-left: 1.25rem; }
.callout h4 { font-size: 1.0625rem; }
.callout p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
/* ---------- Misc ---------- */
.divider-top { border-top: 1px solid var(--border); padding-top: 2.5rem; }
.tag-pill { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--border); font-size: 0.875rem; font-weight: 600; color: var(--navy-deep); }
.tag-pill-list { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.badge-pill { padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--secondary); color: var(--navy-deep); font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem; }
.badge-pill svg { width: 0.75rem; height: 0.75rem; }
.timeline-item { display: flex; gap: 1rem; }
.timeline-num { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; }
.timeline-item p { padding-top: 0.375rem; line-height: 1.6; }
.big-stat { font-family: var(--font-display); font-weight: 700; font-size: 3.75rem; }
@media (min-width: 768px) { .big-stat { font-size: 4.5rem; } }
/* position:relative sert d'ancrage à la surface cliquable de
.event-link, qui couvre la carte entière. */
.event-card { position: relative; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--border); background: var(--card); transition: border-color 0.2s, box-shadow 0.2s; }
.event-card:hover { border-color: var(--cyan); box-shadow: var(--shadow-soft); }
@media (min-width: 768px) { .event-card { flex-direction: row; align-items: center; padding: 2rem; } }
.event-date-block { flex-shrink: 0; }
@media (min-width: 768px) { .event-date-block { width: 10rem; } }
.event-type { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cyan); }
.event-date { margin-top: 0.25rem; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--navy-deep); }
.event-title { font-size: 1.25rem; }
.event-place { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 0.375rem; }
.event-cal-icon { display: none; color: var(--muted-foreground); }
/* z-index au-dessus de la surface cliquable : un clic sur l'icône
calendrier ne part donc PAS vers la page de détail. L'icône reste
affichée et réagit au survol de la carte comme avant. */
@media (min-width: 768px) { .event-cal-icon { position: relative; z-index: 1; display: block; width: 1.5rem; height: 1.5rem; } }
.event-card:hover .event-cal-icon { color: var(--cyan); }
/* ---------- Miniature des événements ----------
Dimensions fixes et object-fit:cover : la colonne de cartes reste
alignée quelles que soient les proportions des photos téléversées.
flex-shrink:0 empêche la miniature d'être comprimée par un titre
long ; en dessous de 768px la carte passe en colonne et la
miniature occupe toute la largeur sans rien écraser du texte. */
.event-media { flex-shrink: 0; width: 100%; height: 9rem; border-radius: 0.75rem; overflow: hidden; }
@media (min-width: 768px) { .event-media { width: 10rem; height: 7rem; } }
.event-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Repli des fiches sans photo : même dégradé que les modules de
formation, avec la bouée du site en filigrane. */
.event-media-empty { display: grid; place-items: center; background: linear-gradient(135deg, var(--navy-deep), var(--cyan)); }
.event-media-empty svg { width: 2rem; height: 2rem; color: rgb(255 255 255 / 0.45); }
/* ---------- Carte cliquable ----------
Le lien n'entoure que le titre — le HTML reste valide et les
lecteurs d'écran annoncent un lien portant un intitulé utile — mais
son ::after s'étend sur toute la carte, qui devient cliquable et
prend le curseur de lien. Le contour de focus suit la même surface,
la navigation au clavier reste donc lisible. */
.event-link { color: inherit; transition: color 0.2s; }
.event-link::after { content: ""; position: absolute; inset: 0; border-radius: 1rem; }
.event-link:hover { color: var(--cyan); }
.event-link:focus-visible { outline: none; }
.event-link:focus-visible::after { outline: 2px solid var(--ring); outline-offset: 3px; }
/* ---------- Modale de détail d'un événement ----------
Rayon, ombre et fond du voile repris des boîtes de la console
d'administration (.admin-dialog), pour que les deux surfaces
modales du projet se ressemblent.
display:flex est posé sur dialog[open] et non sur dialog : la
feuille du navigateur masque une boîte fermée par display:none, et
une déclaration d'auteur sur le sélecteur nu la rendrait visible en
permanence. */
.event-dialog {
border: none;
padding: 0;
/* Indispensable ici : le reset universel en tête de fichier
(« * { margin: 0 } ») écrase le margin:auto que le navigateur
applique aux boîtes modales, et sans lui la modale se colle en
haut à gauche de l'écran au lieu d'être centrée. La console
d'administration charge elle aussi style.css (admin.html) et
subissait donc le même décalage : .admin-dialog porte désormais
le même correctif, dans admin.css. */
margin: auto;
width: min(42rem, calc(100vw - 2rem));
max-height: 90dvh;
overflow: hidden;
border-radius: var(--radius-xl);
background: var(--card);
color: var(--foreground);
box-shadow: 0 30px 80px -20px oklch(0.2 0.04 261 / 0.45);
}
.event-dialog[open] { display: flex; flex-direction: column; }
.event-dialog::backdrop { background: oklch(0.2 0.04 261 / 0.55); }
/* Ouverture : mêmes valeurs que reveal-up (animations.css), en plus
court — le mouvement d'entrée d'une modale doit rester en deçà de
celui d'un contenu qui se révèle au défilement. */
@keyframes event-dialog-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes event-dialog-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
.event-dialog[open] { animation: event-dialog-in 0.22s ease-out; }
.event-dialog[open]::backdrop { animation: event-dialog-backdrop-in 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) {
.event-dialog[open],
.event-dialog[open]::backdrop { animation: none; }
}
/* La photo garde un ratio fixe et ne se comprime pas : c'est le corps
qui défile quand la place manque. Le plafond en dvh est ce qui
empêche, sur un écran bas ou un mobile en paysage, que le 16/9
n'occupe presque toute la modale et ne réduise le texte à deux
lignes ; l'image est alors recadrée par object-fit. */
.event-dialog-media { position: relative; flex-shrink: 0; aspect-ratio: 16 / 9; max-height: 40dvh; overflow: hidden; background: var(--muted); }
.event-dialog-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-dialog-media.is-vide { display: grid; place-items: center; background: linear-gradient(135deg, var(--navy-deep), var(--cyan)); }
.event-dialog-media-vide svg { width: 3rem; height: 3rem; color: rgb(255 255 255 / 0.45); }
/* Posée sur la photo : fond clair translucide pour rester lisible
quelle que soit l'image dessous. */
.event-dialog-close {
position: absolute; top: 0.875rem; right: 0.875rem; z-index: 2;
display: grid; place-items: center;
width: 2.25rem; height: 2.25rem;
border: none; border-radius: 999px; cursor: pointer;
background: rgb(255 255 255 / 0.88);
backdrop-filter: blur(8px);
color: var(--navy-deep);
transition: background 0.2s, transform 0.2s;
}
.event-dialog-close:hover { background: #fff; transform: scale(1.06); }
.event-dialog-close:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.event-dialog-close svg { width: 1.125rem; height: 1.125rem; }
.event-dialog-corps { padding: 2rem; overflow-y: auto; }
.event-dialog-type { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cyan); }
.event-dialog-titre { margin-top: 0.5rem; font-size: 1.5rem; line-height: 1.2; }
.event-dialog-meta { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.event-dialog-meta[hidden] { display: none; }
.event-dialog-meta-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; color: var(--navy-deep); }
.event-dialog-meta-item svg { width: 1.125rem; height: 1.125rem; color: var(--cyan); }
.event-dialog-contenu { margin-top: 1.5rem; }
.event-dialog-contenu[hidden] { display: none; }
.event-dialog-contenu p { margin-top: 1rem; line-height: 1.75; }
.event-dialog-contenu p:first-child { margin-top: 0; }
.event-dialog-liste { margin-top: 1rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.event-dialog-liste li { line-height: 1.6; list-style: disc; }
/* Sur petit écran, la modale occupe presque tout l'espace et le corps
reprend les marges intérieures des cartes. */
@media (max-width: 639px) {
.event-dialog { width: calc(100vw - 1.5rem); max-height: 92dvh; }
.event-dialog-media { aspect-ratio: 3 / 2; }
.event-dialog-corps { padding: 1.5rem; }
.event-dialog-titre { font-size: 1.25rem; }
}
.download-row { padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--border); background: var(--card); display: flex; align-items: flex-start; gap: 1.25rem; }
.download-row .dl-title { font-weight: 700; color: var(--navy-deep); }
.download-row .dl-desc { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.download-row .dl-link { color: var(--cyan); flex-shrink: 0; }
.download-row .dl-link:hover { color: var(--navy-deep); }
.download-row .dl-link svg { width: 1.25rem; height: 1.25rem; }
.resource-link { display: block; padding-block: 1.25rem; border-top: 1px solid var(--border); transition: border-color 0.2s; }
.resource-link:hover { border-top-color: var(--cyan); }
.resource-link .rl-top { display: flex; align-items: center; justify-content: space-between; }
.resource-link h3 { font-size: 1.0625rem; transition: color 0.2s; }
.resource-link:hover h3 { color: var(--cyan); }
.resource-link svg { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.resource-link:hover svg { color: var(--cyan); }
.resource-link p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.newsletter-form { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; max-width: 32rem; }
@media (min-width: 640px) { .newsletter-form { flex-direction: row; } }
.newsletter-form input { flex: 1; padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid var(--input); background: var(--background); }
.newsletter-form input:focus { outline: none; border-color: var(--cyan); }
.deliverable-box { margin-top: 2.5rem; padding: 2.5rem; border-radius: 1rem; background: var(--secondary); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.deliverable-box h3 { font-size: 1.5rem; }
.deliverable-box p { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.founder-card { margin-top: 2.5rem; padding: 2.5rem; border-radius: 1rem; border: 1px solid var(--border); background: var(--card); display: grid; gap: 2rem; align-items: flex-start; }
@media (min-width: 768px) { .founder-card { grid-template-columns: auto 1fr; } }
.founder-avatar { width: 6rem; height: 6rem; border-radius: 999px; background: var(--navy); display: grid; place-items: center; color: #fff; }
.founder-avatar svg { width: 3rem; height: 3rem; }
.founder-card h3 { font-size: 1.5rem; }
.founder-card .role { color: var(--cyan); font-weight: 600; }
.founder-card p.bio { margin-top: 1rem; color: var(--muted-foreground); line-height: 1.6; }
.mission-vision-card { border-top: 2px solid var(--cyan); padding-top: 1.5rem; }
.mission-vision-card.navy { border-top-color: var(--navy); }
.mission-vision-card svg { width: 2rem; height: 2rem; color: var(--cyan); }
.mission-vision-card.navy svg { color: var(--navy); }
.mission-vision-card h3 { margin-top: 1rem; font-size: 1.5rem; }
.mission-vision-card p { margin-top: 0.75rem; color: var(--muted-foreground); line-height: 1.6; }
.image-round { border-radius: 1rem; box-shadow: var(--shadow-soft); width: 100%; height: auto; }
.image-ring { box-shadow: var(--shadow-soft); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.floating-badge { position: absolute; bottom: -1.5rem; right: -1.5rem; display: none; padding: 1.5rem; border-radius: 1rem; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-soft); max-width: 220px; }
@media (min-width: 768px) { .floating-badge { display: block; } }
.floating-badge .fb-num { font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; }
.floating-badge .fb-label { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
.sticky-media { position: relative; }
@media (min-width: 1024px) { .sticky-media { position: sticky; top: 6rem; } }
.contact-cols { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .contact-cols { grid-template-columns: 1.2fr 1fr; } }
/* ---------- Vignette des modules de formation ----------
Ratio fixe : les cartes de la grille restent alignées quelles que
soient les dimensions des photos téléversées. Le rayon ne porte que
sur le haut, la carte se chargeant du bas. */
.formation-media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 1rem 1rem 0 0;
}
.formation-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Aplat de repli des modules sans photo : dégradé de la palette, avec
l'icône du module en filigrane. */
.formation-media-empty {
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--navy-deep), var(--cyan));
}
.formation-media-empty svg {
width: 2.5rem;
height: 2.5rem;
color: rgb(255 255 255 / 0.45);
}
/* ---------- Carte de module cliquable ----------
Exactement le procédé de .event-card / .event-link : le lien ne
porte que sur le titre, mais son ::after couvre la carte entière.
La carte est donc cliquable sans qu'aucun élément interactif ne
soit imbriqué dans une ancre, et Ctrl+clic ouvre bien un onglet. */
.formation-card { position: relative; }
.formation-link { color: inherit; transition: color 0.2s; }
.formation-link::after { content: ""; position: absolute; inset: 0; border-radius: 1rem; }
.formation-link:hover { color: var(--cyan); }
.formation-link:focus-visible { outline: none; }
.formation-link:focus-visible::after { outline: 2px solid var(--ring); outline-offset: 3px; }
/* Affordance seulement : un , jamais un bouton — la surface
cliquable appartient déjà au lien du titre, et un second élément
interactif la recouvrirait. */
.formation-cta {
margin-top: 1.5rem;
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--rescue);
}
.formation-cta svg { width: 1rem; height: 1rem; transition: transform 0.25s; }
.formation-card:hover .formation-cta svg { transform: translateX(3px); }
/* =========================================================
Modale de détail d'un module
=========================================================
Hérite de .event-dialog (rayon, ombre, voile, animation,
défilement du corps) : les deux surfaces modales du site public
doivent se ressembler, et un seul jeu de règles les décrit. Ne
figurent ici que les écarts. */
/* Plus large que celle des actualités : elle porte un formulaire à
deux colonnes, qui serait à l'étroit dans 42rem. */
.formation-dialog { width: min(48rem, calc(100vw - 2rem)); }
.formation-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.formation-section-titre {
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--navy-deep);
}
.formation-section .event-dialog-liste,
.formation-section .event-dialog-contenu { margin-top: 0.875rem; }
/* ---------- Bloc de demande ----------
Aplat sable détaché du reste du corps : il ne fait pas partie de
la description du module, c'est l'action qu'elle appelle. */
.demande-bloc {
margin-top: 2rem;
padding: 1.5rem;
border-radius: var(--radius-lg);
background: var(--secondary);
}
/* display:flex ne vaut que pour l'état visible : sans cette seconde
règle, l'attribut `hidden` posé par le script serait écrasé par la
déclaration d'auteur et les boutons resteraient affichés
par-dessus le formulaire. Même précaution sur .demande-form et
.demande-succes plus bas. */
.demande-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.demande-actions[hidden] { display: none; }
/* .btn-ghost n'existait que dans admin.css, que le site public ne
charge pas. Les mêmes valeurs sont reprises ici pour que le
bouton secondaire soit le même des deux côtés ; admin.css étant
chargé après style.css, la console garde sa propre déclaration. */
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
border-radius: 0.6rem;
border: 1px solid var(--border);
background: var(--card);
font-weight: 600;
font-size: 0.9375rem;
color: var(--muted-foreground);
cursor: pointer;
transition: all 0.2s;
}
.btn-ghost:hover { background: var(--muted); color: var(--navy-deep); }
.btn-ghost svg { width: 1rem; height: 1rem; }
.demande-form { display: grid; gap: 1.25rem; }
.demande-form[hidden] { display: none; }
.demande-module { font-size: 0.875rem; color: var(--muted-foreground); margin-top: -0.75rem; }
.demande-module strong { color: var(--navy-deep); }
.demande-type { border: none; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.demande-type legend {
font-size: 0.875rem;
font-weight: 600;
color: var(--navy-deep);
margin-bottom: 0.5rem;
}
.demande-type-choix {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.875rem;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--card);
font-size: 0.875rem;
font-weight: 600;
color: var(--navy-deep);
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}
.demande-type-choix:has(input:checked) {
border-color: var(--rescue);
box-shadow: inset 0 0 0 1px var(--rescue);
}
.demande-type-choix:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
.demande-type-choix input { accent-color: var(--rescue); }
/* ---------- Leurre anti-spam ----------
Sorti de l'écran plutôt que masqué par display:none : beaucoup de
robots savent reconnaître display:none et s'abstiennent alors de
remplir le champ, ce qui annulerait le piège. Personne ne le voit
ni ne l'atteint au clavier (tabindex="-1") ni au lecteur d'écran
(aria-hidden). */
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.demande-erreur {
padding: 0.75rem 1rem;
border-radius: var(--radius-md);
background: oklch(0.95 0.05 25);
color: oklch(0.45 0.16 25);
font-size: 0.875rem;
font-weight: 600;
}
.demande-erreur[hidden] { display: none; }
.demande-rgpd { font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.5; margin-top: -0.5rem; }
.demande-succes { text-align: center; padding-block: 1.5rem; }
.demande-succes[hidden] { display: none; }
.demande-succes svg { width: 2.75rem; height: 2.75rem; color: var(--cyan); margin-inline: auto; }
.demande-succes h3 { margin-top: 0.75rem; font-size: 1.25rem; color: var(--navy-deep); }
.demande-succes p { margin-top: 0.375rem; font-size: 0.9375rem; color: var(--muted-foreground); }
/* Sur petit écran, les deux boutons d'appel passent en colonne et
occupent toute la largeur : côte à côte, leurs libellés se
couperaient sur deux lignes chacun. */
@media (max-width: 639px) {
.demande-bloc { padding: 1.25rem; }
.demande-actions { flex-direction: column; }
.demande-actions .btn-primary,
.demande-actions .btn-ghost { justify-content: center; }
}