/* ============ MDN — Page d'accueil publique (front-page.php) ============
   Self-contained stylesheet: this page intentionally bypasses the BuddyBoss
   theme chrome (header/buddypanel) for its own editorial masthead + hero,
   so it does not rely on the rest of theme.css cascading correctly. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
	--navy: #0B1F3A;
	--navy-light: #12335C;
	--green: #006B3F;
	--green-light: #0E8A55;
	--gold: #C8A45D;
	--gold-light: #E6CA89;
	--red: #C1272D;
	--ivory: #F7F9FC;
	--light: #EEF1F6;
	--text: #1a1a1a;
	--muted: #666;
	--border: #D8DEE8;
	--white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body.mdn-front-page {
	font-family: 'Inter', sans-serif;
	background: var(--ivory);
	color: var(--text);
	font-size: 15px;
	line-height: 1.7;
}
.mdn-front-page h1, .mdn-front-page h2, .mdn-front-page h3, .mdn-front-page h4 {
	font-family: 'Playfair Display', serif;
	color: var(--navy);
	font-weight: 700;
}
.mdn-front-page a { text-decoration: none; }
.mdn-front-page ul { list-style: none; }

/* ---- Logo ---- */
.mdn-logo { font-family: 'Playfair Display', serif; font-weight: 700; display: flex; flex-direction: column; line-height: 1; }
.mdn-logo .logo-mark {
	display: inline-block; width: 4.6em; height: 1.85em; font-size: 22px;
	background-image: url('../img/logo.jpeg'); background-size: contain; background-repeat: no-repeat; background-position: center center;
	text-indent: -9999px; overflow: hidden; vertical-align: middle;
}
.mdn-logo.on-dark .logo-mark { background-color: #FAF6F3; border-radius: 5px; padding: 3px 6px; box-sizing: border-box; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 8px; border: 1px solid transparent; font-size: 13.5px; font-weight: 600; transition: all 0.15s; white-space: nowrap; cursor: pointer; }
.btn-primary { background: var(--navy); color: white; }
.btn-primary:hover { background: var(--navy-light); }
.btn-gold { background: var(--gold); color: white; }
.btn-gold:hover { background: var(--gold-light); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }

/* ---- Utility bar + masthead ---- */
.home-utility-bar { background: var(--ivory); color: rgba(11,31,58,0.75); font-size: 11.5px; padding: 7px 24px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); text-align: center; }
.home-utility-bar .sep { margin: 0 8px; opacity: 0.5; }

.home-masthead { background: var(--ivory); border-bottom: 1px solid var(--border); padding: 14px 24px; position: sticky; top: 0; z-index: 100; }
.home-masthead-row { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 30px; justify-content: space-between; }
.home-masthead .links { display: flex; gap: 26px; margin-right: auto; }
.home-masthead .links a { font-size: 13px; font-weight: 600; color: var(--text); padding-bottom: 3px; border-bottom: 2px solid transparent; }
.home-masthead .links a:hover, .home-masthead .links a.active { border-color: var(--gold); color: var(--navy); }
.home-masthead .cta { display: flex; gap: 10px; }

/* ---- Hero ---- */
.home-hero { position: relative; background: linear-gradient(135deg, #ffffff 0%, var(--ivory) 60%, #EAF3EF 100%); overflow: hidden; padding: 64px 24px 0; }
.home-hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* object-fit: cover remplit toujours entièrement son conteneur en rognant le
   surplus (jamais de bandes noires haut/bas ou gauche/droite, contrairement
   à "contain") — la vidéo 16:9 est donc recadrée pour couvrir toute la
   hauteur de la section, quelle que soit sa hauteur réelle. */
.home-hero-video video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; }
/* Voile clair par-dessus la vidéo. Dégradé vertical (pas une opacité
   uniforme) : plus opaque en haut et en bas pour fondre les bords bruts de
   la vidéo (recadrée en hauteur par "cover") dans le fond clair de la page,
   plus transparent au centre pour que la vidéo reste bien visible. */
.home-hero-video-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(8,14,26,.75) 0%,
		rgba(8,14,26,.55) 18%,
		rgba(8,14,26,.55) 72%,
		rgba(8,14,26,.8) 100%
	);
}
.home-hero-inner { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; text-align: center; padding-bottom: 0; }
.home-hero .eyebrow-rule { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.home-hero .eyebrow-rule .line { width: 30px; height: 1.5px; background: var(--red); }
.home-hero .eyebrow-rule .star { color: var(--gold); font-size: 13px; }
.home-hero .eyebrow-text { color: var(--gold); font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.home-hero h1 { color: #ffffff; font-size: 42px; line-height: 1.18; max-width: 820px; margin: 0 auto; }
.typing-cursor { display: inline-block; color: #ffffff; animation: mdn-typing-blink 0.9s steps(1) infinite; }
@keyframes mdn-typing-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.home-hero .sub { color: rgba(255,255,255,.92); font-size: 15px; max-width: 600px; margin: 20px auto 0; line-height: 1.7; }
.home-hero .cta-row { display: flex; gap: 14px; justify-content: center; margin-top: 30px; }
.home-hero .cta-row .btn-outline { border-color: rgba(255,255,255,.55); color: #ffffff; }

.home-data-strip { position: relative; z-index: 2; max-width: 880px; margin: 46px auto 0; display: flex; }
.home-data-strip .cell { flex: 1; text-align: center; padding: 22px 10px; border-left: 1px solid rgba(255,255,255,.25); }
.home-data-strip .cell:first-child { border-left: none; }
.home-data-strip .num { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 700; color: #ffffff; }
.home-data-strip .lbl { font-size: 11.5px; color: rgba(255,255,255,.75); margin-top: 4px; }

/* ---- Statement ---- */
.home-statement { padding: 76px 24px 30px; max-width: 880px; margin: 0 auto; text-align: center; }
.home-statement .kicker { color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 11.5px; }
.home-statement p.lead { font-family: 'Playfair Display', serif; font-size: 27px; line-height: 1.45; color: var(--navy); margin-top: 16px; }
.home-statement p.lead em { font-style: normal; color: var(--gold); }

.home-value-strip { max-width: 1000px; margin: 44px auto 0; padding: 0 24px; display: flex; flex-wrap: wrap; }
.home-value-item { flex: 1 1 220px; padding: 22px 22px; border-left: 1px solid var(--border); }
.home-value-item:first-child { border-left: none; }
.home-value-item .n { font-family: 'Playfair Display', serif; font-size: 13px; font-weight: 700; }
.home-value-item:nth-child(1) .n { color: var(--green); }
.home-value-item:nth-child(2) .n { color: var(--navy); }
.home-value-item:nth-child(3) .n { color: var(--red); }
.home-value-item:nth-child(4) .n { color: var(--gold); }
.home-value-item h3 { font-size: 15.5px; margin-top: 6px; }
.home-value-item p { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.6; }

/* ---- Services (numbered dossier) ---- */
.home-section { padding: 70px 24px; max-width: 1000px; margin: 0 auto; }
.home-section-head { max-width: 640px; }
.home-section .kicker { color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 11.5px; }
.home-section h2 { font-size: 28px; margin-top: 10px; }
.home-section .lede { font-size: 14px; color: var(--muted); margin-top: 10px; line-height: 1.7; }

.home-dossier { margin-top: 38px; border-top: 1px solid var(--border); }
.home-dossier-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--border); }
.home-dossier-row .num { font-family: 'Playfair Display', serif; font-size: 28px; }
.home-dossier-row:nth-child(1) .num { color: var(--green); }
.home-dossier-row:nth-child(2) .num { color: var(--navy); }
.home-dossier-row:nth-child(3) .num { color: var(--red); }
.home-dossier-row h3 { font-size: 17px; }
/* Playfair Display's default "&" est un glyphe très décoratif, peu lisible
   comme esperluette — on l'affiche ici avec une police neutre (Inter) pour
   qu'il reste un "&" clairement reconnaissable, sans changer la police du
   reste du titre. */
.home-dossier-row h3 .amp { font-family: 'Inter', sans-serif; font-weight: 600; }
.home-dossier-row p { font-size: 13px; color: var(--muted); margin-top: 6px; max-width: 480px; line-height: 1.6; }
.home-dossier-row .go { font-size: 12px; font-weight: 700; color: var(--navy); white-space: nowrap; }

/* ---- Dernières actualités / Prochains événements (données réelles) ---- */
.home-latest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 38px; }
.home-latest-card { display: block; border: 1px solid var(--border); border-radius: 14px; padding: 20px; background: white; transition: border-color .15s, box-shadow .15s; }
.home-latest-card:hover { border-color: var(--navy); box-shadow: 0 8px 20px rgba(11,31,58,0.07); }
.home-latest-card .head { display: flex; align-items: center; gap: 12px; }
.home-latest-card .head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.home-latest-card .date-badge {
	width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; background: var(--ivory);
	display: flex; align-items: center; justify-content: center; text-align: center;
	font-size: 11px; font-weight: 700; color: var(--navy); text-transform: uppercase; line-height: 1.2;
}
.home-latest-card .name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.home-latest-card .date { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.home-latest-card p { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.6; }
@media (max-width: 880px) {
	.home-latest-grid { grid-template-columns: 1fr; }
}

/* ---- Réussites ---- */
.home-success-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; margin-top: 36px; align-items: start; }
.home-stat-list { display: flex; flex-direction: column; gap: 22px; }
.home-stat-list .row { display: flex; align-items: baseline; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--light); }
.home-stat-list .num { font-family: 'Playfair Display', serif; font-size: 34px; font-weight: 700; min-width: 110px; }
.home-stat-list .row:nth-child(1) .num { color: var(--navy); }
.home-stat-list .row:nth-child(2) .num { color: var(--green); }
.home-stat-list .row:nth-child(3) .num { color: var(--red); }
.home-stat-list .row:nth-child(4) .num { color: var(--gold); }
.home-stat-list .lbl { font-size: 13px; color: var(--muted); }

.home-feature-card { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: white; }
.home-feature-card .thumb { height: 200px; background: linear-gradient(135deg, var(--navy), var(--green)); }
.home-feature-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.home-feature-card .body { padding: 22px; }
.home-feature-card h3 { font-size: 18px; }
.home-feature-card p { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.65; }

.home-mentions { margin-top: 18px; display: flex; flex-direction: column; gap: 0; }
.home-mention { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--light); }
.home-mention .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.home-mention h4 { font-size: 13.5px; }
.home-mention p { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.55; }

/* ---- Fonctionnement (timeline) ---- */
.home-timeline { margin-top: 40px; position: relative; padding-left: 50px; }
.home-timeline::before { content: ""; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 1px; background: var(--border); }
.home-timeline-item { position: relative; padding-bottom: 38px; }
.home-timeline-item:last-child { padding-bottom: 0; }
.home-timeline-item .node { position: absolute; left: -50px; top: 0; width: 36px; height: 36px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13.5px; font-family: 'Playfair Display', serif; }
.home-timeline-item:nth-child(1) .node { background: var(--green); }
.home-timeline-item:nth-child(2) .node { background: var(--navy); }
.home-timeline-item:nth-child(3) .node { background: var(--red); }
.home-timeline-item h3 { font-size: 16px; }
.home-timeline-item p { font-size: 13px; color: var(--muted); margin-top: 6px; max-width: 520px; line-height: 1.65; }
.home-timeline-item .tag { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--gold); background: rgba(200,164,93,0.12); padding: 4px 10px; border-radius: 5px; }

/* ---- CTA ---- */
.home-cta-band { background: var(--ivory); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 64px 24px; text-align: center; }
.home-cta-band .star { font-size: 26px; color: var(--gold); }
.home-cta-band h2 { font-size: 26px; margin-top: 14px; max-width: 640px; margin-left: auto; margin-right: auto; }
.home-cta-band .cta-row { display: flex; gap: 14px; justify-content: center; margin-top: 24px; }

/* ---- Footer ---- */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.6); padding: 40px 28px 24px; }
.site-footer .cols { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.site-footer h5 { color: white; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; font-family: 'Inter'; }
.site-footer a { display: block; font-size: 13px; padding: 4px 0; color: rgba(255,255,255,0.65); }
.site-footer a:hover { color: var(--gold-light); }
.site-footer .bottom { max-width: 1100px; margin: 28px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 11.5px; text-align: center; }

@media (max-width: 880px) {
	.home-masthead .links { display: none; }
	.home-hero h1 { font-size: 30px; }
	.home-data-strip { flex-wrap: wrap; }
	.home-data-strip .cell { flex: 1 1 33%; }
	.home-success-grid { grid-template-columns: 1fr; }
	.home-dossier-row { grid-template-columns: 50px 1fr; }
	.home-dossier-row .go { grid-column: 2; }
	.home-value-item { flex: 1 1 45%; }
	.home-utility-bar { flex-direction: column; gap: 2px; }
	.site-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.home-value-item { flex: 1 1 100%; border-left: none; border-top: 1px solid var(--border); padding-left: 0; }
	.home-value-item:first-child { border-top: none; }
	.site-footer .cols { grid-template-columns: 1fr; }
	/* Les 2 boutons du hero ("Créer mon espace membre" / "Découvrir le
	   fonctionnement") débordaient à droite sur mobile — .cta-row était en
	   flex sans wrap ni rétrécissement, donc les deux boutons pleine largeur
	   poussaient hors de l'écran au lieu de s'empiler. */
	.home-hero .cta-row { flex-direction: column; }
	.home-hero .cta-row .btn { width: 100%; }
	.home-data-strip .cell { flex: 1 1 50%; }
	/* Même souci que .cta-row : le bandeau logo + "Se connecter" +
	   "Rejoindre le réseau" débordait sur téléphone. "Rejoindre" est déjà
	   proposé plus bas via le bouton doré du hero — on ne garde donc que
	   "Se connecter" ici plutôt que de tenter un empilement à 3 éléments. */
	.home-masthead .cta .btn-primary { display: none; }
}