/* =============================================================
   Cogestim — Landing « Portes ouvertes »
   CSS scopé .page-portes-ouvertes (mobile-first).
   Breakpoints : 0 (≥375), 768 (tablette), 1024, 1440.
   Header/footer standards du site (pas de header custom, contrairement
   à cogestim-courtage-vaud) — pas de masquage du header ici.
   Angles droits (radius 0) et classes boutons natives .btn/.btn-primary/
   .btn-bordered, conventions identiques à cogestim-courtage-vaud.css.
   ============================================================= */

/* ============ ZÉRO BORDER-RADIUS (convention site Cogestim) ============ */
.page-portes-ouvertes,
.page-portes-ouvertes *,
.page-portes-ouvertes *::before,
.page-portes-ouvertes *::after {
	border-radius: 0 !important;
}
/* Exception : laisser HubSpot gérer ses propres arrondis dans ses forms */
.page-portes-ouvertes .hs-form-frame,
.page-portes-ouvertes .hs-form-frame * {
	border-radius: revert !important;
}

.page-portes-ouvertes {
	--po-red: #a50532; /* accent réel du thème cogestim (.btn-primary background) */
	--po-magenta: #C02286;
	--po-black: #000;
	--po-text: #5a5b5d;
	--po-text-muted: #5a5b5d;
	--po-border: #E0E0E0;
	--po-bg: #ffffff;
	--po-bg-alt: #f5f5f5;
	--po-bg-card: #f5f5f5;
	--po-hero-fallback: #2a2a2a;
	--po-white: #fff;

	--po-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);

	--po-pad-x: 16px;
	--po-section-y: 56px;
	--po-container-max: 1200px;

	color: var(--po-text);
	line-height: 1.55;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.page-portes-ouvertes * { box-sizing: border-box; }
.page-portes-ouvertes h1,
.page-portes-ouvertes h2,
.page-portes-ouvertes h3 {
	font-family: inherit;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 16px;
	color: inherit;
	letter-spacing: -0.01em;
}
.page-portes-ouvertes p { margin: 0 0 12px; }
.page-portes-ouvertes p:last-child { margin-bottom: 0; }
.page-portes-ouvertes img { max-width: 100%; height: auto; display: block; }
.page-portes-ouvertes a { color: inherit; text-decoration: none; }

.po-container {
	width: 100%;
	max-width: var(--po-container-max);
	margin: 0 auto;
	padding-left: var(--po-pad-x);
	padding-right: var(--po-pad-x);
}

.po-section {
	padding-top: var(--po-section-y);
	padding-bottom: var(--po-section-y);
	background: var(--po-bg);
}
.po-section--alt { background: var(--po-bg-alt); }
.po-section__title {
	font-size: clamp(26px, 4vw, 34px);
	text-align: center;
	margin-bottom: 8px;
}
.po-section__lede {
	color: var(--po-text-muted);
	font-size: 16px;
	text-align: center;
	max-width: 640px;
	margin: 0 auto 32px;
}

/* Aucune box-shadow ni radius sur les boutons — convention site Cogestim */
body.page-portes-ouvertes .btn,
body.page-portes-ouvertes .btn:hover,
body.page-portes-ouvertes .btn:focus,
body.page-portes-ouvertes .btn:active {
	box-shadow: none !important;
}
/* Le bouton "S'inscrire" est un <button> (déclencheur de modale), pas un
   <a> comme le reste des .btn du site — il peut donc hériter d'un style de
   focus natif du navigateur (halo doré) que les liens ne déclenchent jamais.
   On neutralise l'outline natif et on force explicitement le même texte
   blanc que .btn-primary:hover pour un rendu identique aux liens du site. */
body.page-portes-ouvertes button.btn-primary:focus,
body.page-portes-ouvertes button.btn-primary:focus-visible {
	outline: none;
}
body.page-portes-ouvertes button.btn-primary:hover,
body.page-portes-ouvertes button.btn-primary:focus {
	color: #a50532;
}

/* ============ 1. HERO ============ */
.po-hero {
	background: var(--po-bg-alt);
	padding: 56px 0;
}
.po-hero__inner {
	max-width: var(--po-container-max);
	margin: 0 auto;
	padding: 0 var(--po-pad-x);
	display: flex;
	flex-direction: column-reverse;
	gap: 40px;
	align-items: center;
}
.po-hero__text { text-align: center; max-width: 560px; }
.po-hero__eyebrow {
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--po-red);
	margin: 0 0 12px;
}
.po-hero__title {
	font-size: clamp(28px, 5vw, 42px);
	margin: 0 0 16px;
}
.po-hero__lede {
	font-size: 16px;
	color: var(--po-text-muted);
	margin: 0 0 24px;
}
.po-hero__media {
	position: relative;
	width: 100%;
	max-width: 480px;
}
.po-hero__media img {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.po-hero__accent {
	position: absolute;
	z-index: 0;
	top: -16px;
	right: -16px;
	width: 60%;
	height: 60%;
	background: var(--po-red);
}

@media (min-width: 1024px) {
	.po-hero { padding: 88px 0; }
	.po-hero__inner {
		flex-direction: row;
		text-align: left;
		align-items: center;
	}
	.po-hero__text { text-align: left; }
	.po-hero__media { flex: 1; max-width: none; }
	.po-hero__media img { max-width: none; aspect-ratio: 3 / 2; }
	.po-hero__accent { top: -24px; right: -24px; width: 50%; height: 50%; }
}

/* ============ 2. BARRE DE FILTRES ============ */
/* Fond blanc explicite (pas d'héritage ambiant) : garantit la continuité
   exacte avec la 1ʳᵉ section mois juste en dessous, elle aussi en
   var(--po-bg) explicite — sans ça, les deux zones dépendent chacune du
   fond réellement peint par un ancêtre différent et peuvent différer d'une
   nuance de blanc à l'autre, lisible comme une couture. */
.po-filtres {
	position: relative;
	display: flex;
	gap: 8px;
	padding: 20px var(--po-pad-x);
	max-width: var(--po-container-max);
	margin: 0 auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	background: var(--po-bg);
}
.po-filtres::-webkit-scrollbar { display: none; }
.po-filtres__btn {
	flex: 0 0 auto;
	border: 1px solid var(--po-border);
	background: var(--po-white);
	color: var(--po-text);
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.po-filtres__btn.is-active {
	background: var(--po-red);
	border-color: var(--po-red);
	color: var(--po-white);
}
@media (hover: hover) {
	.po-filtres__btn:not(.is-active):hover {
		border-color: var(--po-red);
	}
}
@media (min-width: 768px) {
	.po-filtres { flex-wrap: wrap; overflow-x: visible; }
}

/* ============ 3. SECTIONS MOIS ============ */
/* Fond blanc par défaut, alternance posée par une CLASSE (.po-mois--bg-alt)
   plutôt que nth-of-type : nth-of-type compte les sections dans le DOM
   quel que soit leur état [hidden] côté JS — filtrer sur un mois qui tombe
   en position paire aurait affiché une section grise juste sous la barre
   de filtres blanche. La classe est (re)calculée par portes-ouvertes.js à
   chaque changement de filtre, uniquement sur les sections VISIBLES à cet
   instant (recomputeMonthBackgrounds()) : la 1ʳᵉ section visible est
   toujours blanche (continuité avec la barre de filtres, également
   blanche — cf. règle .po-filtres ci-dessus), et la DERNIÈRE section
   visible est toujours forcée blanche également (contraste constant avec
   le CTA final, lui-même gris — cf. section 6), quel que soit le nombre de
   mois affichés ou lequel est filtré. Sans JS, toutes les sections restent
   blanches (fond par défaut) plutôt que dans un état incohérent. */
.po-mois { padding: 40px 0; background: var(--po-bg); }
.po-mois--bg-alt { background: var(--po-bg-alt); }
.po-mois__title {
	font-size: clamp(20px, 3vw, 26px);
	margin-bottom: 24px;
}

/* ============ 4. CARTES PROMOTION ============ */
/* Mobile (<768px) : empilement vertical (image / infos / actions).
   Desktop (>=768px) : carte horizontale pleine largeur — image à gauche,
   infos au centre, dates + actions dans une colonne à droite (cf. wireframe). */
.po-mois__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.po-card {
	background: var(--po-white);
	box-shadow: var(--po-shadow-card);
	display: flex;
	flex-direction: column;
}
.po-card__media { aspect-ratio: 4 / 3; overflow: hidden; flex-shrink: 0; }
.po-card__media img { width: 100%; height: 100%; object-fit: cover; }
.po-card__media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--po-border);
	color: var(--po-text-muted);
	font-size: 13px;
}
.po-card__main { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.po-card__title { font-size: 20px; margin: 0; }
.po-card__localite {
	font-size: 13px;
	color: var(--po-text-muted);
	margin: 0 0 4px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.po-card__localite .fa-location-dot { color: var(--po-red); font-size: 12px; }
.po-card__text { font-size: 15px; line-height: 1.6; color: var(--po-text); margin: 4px 0 0; }
.po-card__meta {
	display: flex;
	gap: 24px;
	font-size: 13px;
	font-weight: 600;
	margin: 8px 0 0;
}
.po-card__incomplete-note {
	font-size: 13px;
	color: var(--po-red);
	margin: 0;
}
.po-card--incomplete { border: 1px dashed var(--po-red); box-shadow: none; }

.po-card__actions {
	padding: 0 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}
.po-card__actions-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--po-red);
	margin: 0;
}
.po-card__date {
	font-size: 13px;
	color: var(--po-text-muted);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}
.po-card__date .fa-calendar-days { color: var(--po-red); font-size: 12px; }
.po-card__actions .btn { width: 100%; text-align: center; margin-top: 4px; }

@media (min-width: 768px) {
	.po-mois__grid { gap: 24px; }
	.po-card {
		flex-direction: row;
		align-items: stretch;
	}
	.po-card__media {
		aspect-ratio: auto;
		flex: 0 0 300px;
	}
	.po-card__main {
		flex: 1;
		justify-content: center;
		padding: 32px;
	}
	.po-card__actions {
		flex: 0 0 260px;
		padding: 32px;
		justify-content: center;
		border-left: 1px solid var(--po-border);
	}
}

/* ============ 5. MODALE D'INSCRIPTION ============ */
body.po-modal-open { overflow: hidden; }

/* Le modal ET les conteneurs de formulaire par agence restent en display
   flex/block (jamais display:none) même à l'état [hidden] : le script
   d'embed HubSpot mesure la largeur de son conteneur au premier rendu.
   S'il tombe sur un display:none (largeur 0), le formulaire se rend cassé
   de façon permanente — un simple show/hide CSS après coup ne le répare
   pas. On masque donc via visibility/position, jamais display:none. */
.po-modal[hidden] {
	display: flex !important;
	visibility: hidden;
	pointer-events: none;
}
/* Base = centré desktop (pas de dépendance à une media query pour la
   taille par défaut, moins fragile) ; override mobile ci-dessous pour le
   plein écran. */
.po-modal {
	position: fixed;
	inset: 0;
	/* Volontairement bien au-dessus de tout header/admin-bar plausible (admin
	   bar WP = 99999, sticky header du thème potentiellement > 100000 sur
	   cette page qui garde le header standard, contrairement à
	   cogestim-courtage-vaud qui masque le sien). La modale est de toute
	   façon hoistée en enfant direct de <body> par le JS, donc ce chiffre
	   n'a besoin de battre que des éléments réels de la page, jamais un
	   ancêtre à contexte d'empilement propre. */
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	visibility: visible;
}
.po-modal__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(0, 0, 0, 0.55);
	cursor: pointer;
}
.po-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 640px;
	max-height: 85vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--po-white);
	/* Padding haut réduit (v1.2.3) pour compresser l'en-tête et limiter le
	   scroll nécessaire — la hauteur du form HubSpot (dans l'iframe) reste
	   hors de portée et n'est volontairement pas touchée. */
	padding: 20px 32px 32px;
	margin: auto; /* filet de sécurité de centrage si le flex du parent est perturbé */
	box-sizing: border-box;
}
.po-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--po-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
@media (hover: hover) {
	.po-modal__close:hover { color: var(--po-red); }
}
.po-modal__header { margin-bottom: 10px; padding-right: 40px; }
.po-modal__title { font-size: 22px; margin: 0; }
.po-modal__body { position: relative; min-height: 80px; }
/* Neutralise toute marge/padding résiduelle du premier élément rendu par
   HubSpot (placeholder de chargement, wrapper interne) qui créerait un
   espace vide entre le titre et le premier champ. */
.po-modal__body > *:first-child,
.po-modal__form > *:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Les 3 conteneurs de formulaire par agence sont pré-rendus au chargement,
   tous initialement [hidden]. Même raisonnement que .po-modal[hidden]
   ci-dessus : ne jamais display:none un conteneur HubSpot avant son rendu
   initial, sous peine de largeur mesurée à 0 et d'un formulaire cassé de
   façon définitive. Le conteneur actif reste dans le flux (position
   relative) ; les autres sont superposés en position absolute (largeur
   identique au conteneur, donc mesurable) mais invisibles et hors flux. */
.po-modal__form {
	position: relative;
	width: 100%;
}
.po-modal__form[hidden] {
	display: block !important;
	visibility: hidden;
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Le formulaire HubSpot embarqué doit occuper toute la largeur disponible
   de la modale (moins le padding). LARGEUR UNIQUEMENT : on ne touche plus à
   height/max-height/overflow ici. Diagnostic DevTools (v1.2.2) : le script
   HubSpot pose un style inline height:725px (sans !important) sur
   .hs-form-frame et son iframe interne a scrolling="no" — une règle
   descendante `height:auto !important` (v1.2.1) écrasait ce 725px inline,
   ce qui effondrait l'iframe et, combiné à scrolling="no", masquait le
   reste du form sans aucune scrollbar. HubSpot doit garder la main sur sa
   propre hauteur ; le scroll se joue uniquement sur .po-modal__dialog
   (max-height: 85vh + overflow-y: auto ci-dessus), qui doit rester assez
   grand pour laisser le form (725px+) scroller normalement. */
.po-modal__body .hs-form-frame,
.po-modal__body .hs-form-frame iframe,
.po-modal__body .hs-form-frame form {
	width: 100% !important;
	max-width: none !important;
}

/* Mobile : modale quasi plein écran (contrainte explicite du brief) —
   override du centré desktop qui est la base ci-dessus. */
@media (max-width: 767px) {
	.po-modal { padding: 0; }
	.po-modal__dialog {
		max-width: none;
		max-height: none;
		width: 100%;
		height: 100%;
		margin: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.po-modal__dialog { animation: po-modal-in 0.2s ease; }
	@keyframes po-modal-in {
		from { opacity: 0; transform: translateY(12px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

/* ============ 6. CTA FINAL — VOLONTAIREMENT DISCRET ============ */
/* Séparation visuelle nette d'avec les cartes qui précèdent : bordure fine
   + fond distinct, pour que le bloc ne "flotte" pas sans délimitation. */
.po-cta-secondaire {
	background: var(--po-bg-alt);
	border-top: 1px solid var(--po-border);
	padding: var(--po-section-y) 0;
	text-align: center;
}
.po-cta-secondaire__inner {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.po-cta-secondaire__title {
	font-size: clamp(20px, 3vw, 26px);
	margin: 0 0 12px;
}
.po-cta-secondaire__text {
	color: var(--po-text-muted);
	margin: 0 0 24px;
	font-size: 15px;
}
.po-cta-secondaire__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
/* .btn-bordered n'est plus utilisé sur cette page depuis le retrait du CTA
   « visite personnalisée » — override supprimé avec lui (plus de bouton ici,
   seulement .po-link-accent, cf. section 4). */

/* ============ 7. LIEN TEXTE ACCENT (partagé) ============ */
/* Classe unique pour tous les liens texte de la page — « Découvrir le
   projet » (cartes) et « Voir les projets » (CTA final) — auparavant deux
   classes séparées qui rendaient différemment : .po-card__link n'avait pas
   les overrides !important body-scopés, donc le thème/Procab (qui impose
   un gris et retire le soulignement sur les liens texte de cette page)
   gagnait sur elle, alors que .po-cta-secondaire__link les avait déjà. Un
   seul traitement désormais : souligné en permanence (comme l'ancien lien
   qui fonctionnait), accent rouge, hover magenta. */
.po-link-accent,
body.page-portes-ouvertes .po-link-accent,
body.page-portes-ouvertes .po-link-accent:visited {
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline !important;
	color: var(--po-red) !important;
}
@media (hover: hover) {
	body.page-portes-ouvertes .po-link-accent:hover {
		color: var(--po-magenta) !important;
		text-decoration: underline !important;
	}
}