/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://billetpaschermaroc.com
 Description:  Thème enfant GeneratePress pour Billet Pas Cher Maroc (pSEO routes de vol, widgets Travelpayouts / Aviasales).
 Author:       Billet Pas Cher Maroc
 Template:     generatepress
 Version:      1.1.0
 Text Domain:  generatepress-child
*/

/* ==========================================================================
   1. Charte : variables
   ========================================================================== */
:root {
	/* Couleurs */
	--bpcm-primary: #0a3d8f;        /* bleu profond : confiance, aérien */
	--bpcm-primary-hover: #082f6e;
	--bpcm-primary-soft: #e8effb;
	--bpcm-accent: #0d9488;         /* turquoise : CTA, badges */
	--bpcm-accent-dark: #0f766e;
	--bpcm-accent-soft: #ccfbf1;
	--bpcm-bg: #f8fafc;             /* fond neutre */
	--bpcm-card: #ffffff;           /* cartes */
	--bpcm-surface: #f1f5f9;        /* panneaux secondaires */
	--bpcm-text: #0f172a;
	--bpcm-muted: #64748b;
	--bpcm-border: #e2e8f0;
	--bpcm-footer-bg: #0f172a;

	/* Formes */
	--bpcm-radius: 12px;
	--bpcm-radius-sm: 8px;
	--bpcm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--bpcm-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
	--bpcm-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.1);

	/* Typographie & mise en page */
	--bpcm-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bpcm-container: 1140px;

	/* Couleurs GeneratePress alignées sur la charte */
	--contrast: var(--bpcm-text);
	--accent: var(--bpcm-primary);
	--base-2: var(--bpcm-bg);
	--base-3: var(--bpcm-card);

	/* Ouverture animée des <details> (navigateurs compatibles) */
	interpolate-size: allow-keywords;
}

/* ==========================================================================
   2. Reset léger & typographie
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
}

body,
button,
input,
select,
textarea {
	font-family: var(--bpcm-font);
}

body {
	color: var(--bpcm-text);
	background: var(--bpcm-bg);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--bpcm-font);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--bpcm-text);
	margin-bottom: 0.6em;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); }
h3 { font-size: 1.15rem; }

a {
	color: var(--bpcm-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover,
a:focus {
	color: var(--bpcm-primary-hover);
}

:focus-visible {
	outline: 2px solid var(--bpcm-accent);
	outline-offset: 2px;
}

.grid-container,
.bpcm-container {
	max-width: var(--bpcm-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

/* ==========================================================================
   3. En-tête & navigation (GeneratePress)
   ========================================================================== */
.site-header {
	background: var(--bpcm-card);
	border-bottom: 1px solid var(--bpcm-border);
}

.main-title a,
.main-title a:hover {
	color: var(--bpcm-primary);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.main-navigation,
.main-navigation ul ul {
	background: var(--bpcm-card);
}

.main-navigation .main-nav ul li a {
	color: var(--bpcm-text);
	font-weight: 500;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a {
	color: var(--bpcm-primary);
	background: transparent;
}

.main-navigation ul ul {
	border: 1px solid var(--bpcm-border);
	border-radius: var(--bpcm-radius-sm);
	box-shadow: var(--bpcm-shadow);
	overflow: hidden;
}

.main-navigation .main-nav ul ul li a {
	font-size: 0.95rem;
}

/* ==========================================================================
   4. Conteneurs de page
   ========================================================================== */
/* Pages éditoriales (À propos, Contact, Aéroports…) : carte blanche. */
.separate-containers .inside-article {
	border: 1px solid var(--bpcm-border);
	border-radius: var(--bpcm-radius);
	box-shadow: var(--bpcm-shadow-sm);
}

/* Accueil, routes, hubs, archive : sections libres sur le fond neutre. */
.home.separate-containers .inside-article,
.single-vols.separate-containers .inside-article,
.tax-departs.separate-containers .inside-article,
.post-type-archive-vols.separate-containers .inside-article {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.bpcm-route__spacer {
	height: 30px;
}

@media (min-width: 768px) {
	.bpcm-route__spacer {
		height: 40px;
	}
}

/* ==========================================================================
   5. Hero (accueil, hubs, archive, routes) & moteur de recherche
   ========================================================================== */
.bpcm-hero {
	position: relative;
	margin: 0 0 72px; /* place pour le widget qui déborde de 30px sous le hero */
	padding: 0;
	border-radius: var(--bpcm-radius);
	color: #fff;
	background: linear-gradient(135deg, #0b192c 0%, #1e3e62 100%);
	box-shadow: var(--bpcm-shadow);
}

/* Contenu du hero centré : bloc Gutenberg (accueil) ou gabarits PHP (.bpcm-hero__inner). */
.bpcm-hero__inner,
.bpcm-hero > .wp-block-group__inner-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px 0; /* pas de padding bas : le widget vient « à cheval » sur le bord du hero */
	display: flow-root;    /* garde la marge négative du widget à l'intérieur (sinon elle « traverse » et le hero rétrécit) */
}

.bpcm-hero .bpcm-route__title,
.bpcm-hero h1 {
	color: #ffffff;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 0.35em;
}

.bpcm-hero .bpcm-route__intro,
.bpcm-hero .bpcm-lead {
	max-width: 72ch;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.05rem;
}

.bpcm-hero .bpcm-route__intro p:last-child,
.bpcm-hero .bpcm-lead:last-child {
	margin-bottom: 0;
}

.bpcm-hero a {
	color: #fff;
}

/* Axe de la route : PAR ✈ RAK */
.bpcm-axis {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 460px;
	margin: 0 0 14px;
}

.bpcm-axis__end {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.bpcm-axis__end:last-child {
	text-align: right;
}

.bpcm-axis__code {
	font-size: clamp(1.6rem, 5vw, 2.2rem);
	font-weight: 800;
	letter-spacing: 0.02em;
}

.bpcm-axis__city {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
}

.bpcm-axis__line {
	position: relative;
	flex: 1;
	display: flex;
	justify-content: center;
	color: #5eead4;
}

.bpcm-axis__line::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	border-top: 2px dashed rgba(255, 255, 255, 0.35);
}

.bpcm-axis__line svg {
	position: relative;
	padding: 0 6px;
	background: #16304f; /* teinte médiane du dégradé : masque les tirets derrière l'avion */
	border-radius: 50%;
	box-sizing: content-box;
}

/*
 * Moteur Aviasales : la hauteur du widget dépend de la largeur de son conteneur (pas du viewport),
 * d'où une container query. min-height = hauteur mesurée du bloc chargé + 10px, pour éviter le CLS.
 * Paliers mesurés (largeur du wrapper → hauteur du bloc) : < 424 → 520 ; ≥ 424 → 445 ; ≥ 606 → 370 ; ≥ 786 → 294 (balayage au pas de 2px).
 * ⚠️ Mesures valables pour padding 16px + bordure 1px sur .bpcm-search : les re-mesurer si on les change.
 */
.bpcm-search-wrap {
	container-type: inline-size;
	margin: 24px 0 40px;
}

.bpcm-hero .bpcm-search-wrap {
	position: relative;
	z-index: 2;
	margin: 24px 0 -30px; /* effet « à cheval » : relie le hero à la suite de la page */
}

.bpcm-search {
	position: relative;
	width: 100%;
	min-height: 530px;
	padding: 16px;
	background: var(--bpcm-card);
	border: 1px solid var(--bpcm-border);
	border-radius: 16px;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
	color: var(--bpcm-text);
}

@container (min-width: 424px) {
	.bpcm-search { min-height: 455px; }
}

@container (min-width: 606px) {
	.bpcm-search { min-height: 380px; }
}

@container (min-width: 786px) {
	.bpcm-search { min-height: 305px; }
}

.bpcm-search__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	color: var(--bpcm-muted);
	font-size: 0.95rem;
}

/* Widget masqué pendant sa construction, révélé une fois stable (classe posée par le chargeur JS). */
.bpcm-search > :not(.bpcm-search__loading) {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.bpcm-search.is-ready > :not(.bpcm-search__loading) {
	visibility: visible;
	opacity: 1;
}

.bpcm-search.is-ready .bpcm-search__loading {
	display: none;
}

/* ==========================================================================
   6. Cartes de routes (hubs, archive /vols/) & badges
   ========================================================================== */
.bpcm-hub__routes {
	margin-top: 40px;
}

.bpcm-route-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpcm-route-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 18px 20px;
	background: var(--bpcm-card);
	border: 1px solid var(--bpcm-border);
	border-radius: var(--bpcm-radius);
	box-shadow: var(--bpcm-shadow-sm);
	color: var(--bpcm-text);
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.bpcm-route-card:hover,
.bpcm-route-card:focus-visible {
	color: var(--bpcm-text);
	border-color: #cbd5e1;
	box-shadow: var(--bpcm-shadow-hover);
	transform: translateY(-2px);
}

.bpcm-route-card__title {
	margin: 0;
	font-size: 1.05rem;
	color: var(--bpcm-primary);
}

.bpcm-route-card__path {
	margin: 0;
	font-weight: 600;
	font-size: 0.95rem;
}

.bpcm-route-card__duration {
	margin: 0;
	font-size: 0.9rem;
	color: var(--bpcm-muted);
}

.bpcm-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: auto 0 0;
	padding: 6px 0 0;
	list-style: none;
}

.bpcm-badge {
	padding: 3px 10px;
	background: var(--bpcm-accent-soft);
	color: var(--bpcm-accent-dark);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.5;
}

/* Archive /vols/ : silos par pays */
.bpcm-silo + .bpcm-silo {
	margin-top: 48px;
}

.bpcm-silo__title a {
	color: inherit;
	text-decoration: none;
}

.bpcm-silo__title a::after {
	content: " ›";
	color: var(--bpcm-accent);
}

.bpcm-silo__title a:hover,
.bpcm-silo__title a:focus-visible {
	color: var(--bpcm-primary);
}

/* ==========================================================================
   7. Accueil : cartes pays & réassurance
   ========================================================================== */
.bpcm-cards {
	gap: 16px;
}

.bpcm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 22px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: var(--bpcm-shadow-sm);
	transition: all 0.25s ease;
}

.bpcm-card h3 {
	margin-top: 0;
}

.bpcm-card h3 a {
	color: var(--bpcm-primary);
	text-decoration: none;
}

/* Toute la carte est cliquable (lien du titre étendu). */
.bpcm-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--bpcm-radius);
}

.bpcm-card:hover,
.bpcm-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.08);
}

.bpcm-card p {
	color: var(--bpcm-muted);
	font-size: 0.95rem;
}

/* Puce pays (code ISO) */
.bpcm-card .bpcm-country-chip {
	align-self: flex-start;
	margin: 0 0 12px;
	padding: 4px 10px;
	background: var(--bpcm-primary-soft);
	color: var(--bpcm-primary);
	border-radius: 6px;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

/* Appel à l'action en pied de carte (la carte entière est déjà cliquable). */
.bpcm-card .bpcm-card__cta {
	margin: auto 0 0;
	padding-top: 12px;
	color: var(--bpcm-accent-dark);
	font-size: 0.95rem;
	font-weight: 600;
	transition: color 0.25s ease;
}

.bpcm-card:hover .bpcm-card__cta {
	color: var(--bpcm-primary);
}

.bpcm-trust {
	margin-top: 40px;
	padding: 24px;
	background: var(--bpcm-card);
	border: 1px solid var(--bpcm-border);
	border-radius: var(--bpcm-radius);
	box-shadow: var(--bpcm-shadow-sm);
}

.bpcm-trust ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 12px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpcm-trust li {
	position: relative;
	padding-left: 30px;
}

.bpcm-trust li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bpcm-accent-soft);
	color: var(--bpcm-accent-dark);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.bpcm-note {
	color: var(--bpcm-muted);
	font-size: 0.9rem;
}

/* ==========================================================================
   8. Route : fil d'Ariane, infos pratiques, FAQ, disclaimer
   ========================================================================== */
.bpcm-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--bpcm-muted);
}

.bpcm-breadcrumb li:not(:last-child)::after {
	content: "›";
	margin-left: 4px;
}

.bpcm-breadcrumb a {
	color: var(--bpcm-muted);
	text-decoration: none;
}

.bpcm-breadcrumb a:hover,
.bpcm-breadcrumb a:focus {
	color: var(--bpcm-primary);
	text-decoration: underline;
}

.bpcm-route__facts,
.bpcm-faq-list {
	margin-top: 40px;
}

.bpcm-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
}

@media (min-width: 768px) {
	.bpcm-facts {
		grid-template-columns: 1fr 1fr;
	}

	.bpcm-facts__item--wide {
		grid-column: 1 / -1;
	}
}

.bpcm-facts__item {
	padding: 16px 20px;
	background: var(--bpcm-card);
	border: 1px solid var(--bpcm-border);
	border-radius: var(--bpcm-radius);
	box-shadow: var(--bpcm-shadow-sm);
}

.bpcm-facts dt {
	color: var(--bpcm-muted);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.bpcm-facts dd {
	margin: 4px 0 0;
	font-weight: 600;
}

.bpcm-facts__arrow {
	margin: 0 6px;
	color: var(--bpcm-accent);
}

/* FAQ : accordéon <details> avec chevron */
.bpcm-faq {
	margin-bottom: 10px;
	background: var(--bpcm-card);
	border: 1px solid var(--bpcm-border);
	border-radius: var(--bpcm-radius);
	box-shadow: var(--bpcm-shadow-sm);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.bpcm-faq[open] {
	border-color: #cbd5e1;
	box-shadow: var(--bpcm-shadow);
}

.bpcm-faq summary {
	position: relative;
	padding: 16px 52px 16px 20px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	border-radius: var(--bpcm-radius);
}

.bpcm-faq summary::-webkit-details-marker {
	display: none;
}

.bpcm-faq summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 22px;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border-right: 2px solid var(--bpcm-primary);
	border-bottom: 2px solid var(--bpcm-primary);
	transform: rotate(45deg);
	transition: transform 0.2s ease, margin-top 0.2s ease;
}

.bpcm-faq[open] summary::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

.bpcm-faq summary:hover {
	color: var(--bpcm-primary);
}

.bpcm-faq::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
}

.bpcm-faq[open]::details-content {
	block-size: auto;
}

.bpcm-faq__answer {
	padding: 0 20px 6px;
	color: #334155;
}

.bpcm-route__disclaimer {
	margin-top: 40px;
	padding: 16px 20px;
	border-left: 4px solid var(--bpcm-accent);
	background: var(--bpcm-card);
	border-radius: 0 var(--bpcm-radius) var(--bpcm-radius) 0;
	box-shadow: var(--bpcm-shadow-sm);
	color: var(--bpcm-muted);
	font-size: 0.92rem;
}

.bpcm-route__disclaimer p {
	margin: 0;
}

/* ==========================================================================
   9. Pied de page
   ========================================================================== */
.site-footer {
	margin-top: 56px;
	background: var(--bpcm-footer-bg);
	color: #cbd5e1;
}

.bpcm-footer {
	padding: 48px 0 32px;
}

.bpcm-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 768px) {
	.bpcm-footer__inner {
		grid-template-columns: 2fr 1fr 1fr;
		gap: 48px;
	}
}

.bpcm-footer__logo {
	margin: 0 0 12px;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.bpcm-footer__disclaimer {
	max-width: 52ch;
	margin: 0;
	color: #94a3b8;
	font-size: 0.88rem;
	line-height: 1.6;
}

.bpcm-footer__title {
	margin: 0 0 12px;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.bpcm-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpcm-footer li + li {
	margin-top: 8px;
}

.bpcm-footer a {
	color: #e2e8f0;
	font-size: 0.95rem;
	text-decoration: none;
}

.bpcm-footer a:hover,
.bpcm-footer a:focus-visible {
	color: #5eead4;
	text-decoration: underline;
}

.site-footer .site-info {
	background: transparent;
	color: #94a3b8;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.85rem;
}

.site-footer .site-info a {
	color: #e2e8f0;
}

.site-footer .site-info a:hover {
	color: #5eead4;
}

/* ==========================================================================
   10. Contenu éditorial : tableaux
   ========================================================================== */
.wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	border: 1px solid var(--bpcm-border);
	border-radius: var(--bpcm-radius-sm);
	overflow: hidden;
	font-size: 0.95rem;
}

.wp-block-table th,
.wp-block-table td {
	padding: 10px 14px;
	border: 0;
	border-bottom: 1px solid var(--bpcm-border);
	text-align: left;
}

.wp-block-table thead th {
	background: var(--bpcm-surface);
	border-bottom: 1px solid var(--bpcm-border);
	color: var(--bpcm-muted);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

.wp-block-table tbody tr:hover td {
	background: var(--bpcm-bg);
}

/* ==========================================================================
   11. Pleine largeur (classe GP full-width-content : accueil, hubs, /vols/, aéroports)
   ========================================================================== */
/* Conteneur de page GP sans marge latérale : le hero va vraiment d'un bord à l'autre. */
.full-width-content .container.grid-container {
	padding-left: 0;
	padding-right: 0;
}

/* Le hero occupe 100 % de la largeur ; son contenu est centré (§ 5), le moteur limité à 900px. */
.full-width-content .bpcm-hero .bpcm-search-wrap {
	max-width: 900px;
	margin: 24px auto -30px;
}

.full-width-content .bpcm-hero {
	border-radius: 0;
	box-shadow: none;
	text-align: center;
}

.full-width-content .bpcm-hero .bpcm-route__intro,
.full-width-content .bpcm-hero .bpcm-lead {
	margin-left: auto;
	margin-right: auto;
}

.full-width-content .bpcm-route__spacer {
	display: none;
}

/* Les autres sections se recentrent à 1200px.
   :where() garde cette règle générique peu spécifique : les règles ciblées (colonne 1000px des routes…) l'emportent. */
.full-width-content .inside-article > :where(:not(.bpcm-hero):not(.bpcm-route__spacer):not(.entry-content):not(.bpcm-route__disclaimer)),
.full-width-content .entry-content > :not(.bpcm-hero) {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* Page éditoriale en pleine largeur (aéroports) : bande blanche, contenu centré. */
.full-width-content.page:not(.home):not(.bpcm-airport) .inside-article {
	padding-top: 40px;
	padding-bottom: 40px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Accueil : cartes pays en 3 colonnes franches. */
.full-width-content .entry-content > .bpcm-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 40px auto;
}

@media (min-width: 768px) {
	.full-width-content .entry-content > .bpcm-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.full-width-content .entry-content > .bpcm-cards > .wp-block-column {
	margin: 0;
}

/* Blocs encadrés (fond + bordure visibles) : alignés sur le contenu des sections, avec 20px de gouttière sur mobile. */
.full-width-content .inside-article > .bpcm-route__disclaimer {
	width: calc(100% - 40px);
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
	padding: 16px 20px;
}

/* Accueil : bloc de réassurance. */
.full-width-content .entry-content > .bpcm-trust {
	width: calc(100% - 40px);
	max-width: 900px;
	margin: 40px auto;
	padding: 30px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Pied de page : fond sombre sur 100 %, contenu centré à 1200px. */
.site-footer {
	width: 100%;
}

.inside-header.grid-container,
.bpcm-footer__inner,
.site-footer .inside-site-info {
	max-width: 1200px;
	padding-left: 20px;
	padding-right: 20px;
}

/* ==========================================================================
   12. Accueil : dernière minute, compagnies comparées, FAQ
   ========================================================================== */
/* Encart « Dernière minute » (bloc encadré : bord aligné sur le contenu des sections, comme le disclaimer). */
.full-width-content .entry-content > .bpcm-alert-box {
	width: calc(100% - 40px);
	max-width: 1160px;
	margin: 25px auto;
	padding: 20px 24px;
	background: #ffffff;
	border: 1px solid var(--bpcm-border);
	border-left: 4px solid #f59e0b;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.bpcm-alert-box .bpcm-deal-badge {
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 10px;
	background: #fef3c7;
	color: #92400e;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Le conteneur interne du bloc Groupe ajoute 40px de padding : l'encart gère seul son espacement. */
.bpcm-alert-box > .wp-block-group__inner-container {
	padding: 0;
}

.bpcm-alert-box h2 {
	margin: 0 0 8px;
	font-size: clamp(1.15rem, 2.5vw, 1.35rem);
}

.bpcm-alert-box p:not(.bpcm-deal-badge) {
	margin: 0;
	color: #475569;
}

/* Bandeau des compagnies comparées. */
.full-width-content .entry-content > .bpcm-airlines-strip {
	margin-top: 8px;
	margin-bottom: 40px;
	text-align: center;
}

.bpcm-airlines-strip .bpcm-airlines-label {
	margin: 0 0 14px;
	color: #64748b;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.bpcm-airlines {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpcm-airlines li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	color: var(--bpcm-text);
	font-size: 13px;
	font-weight: 500;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bpcm-airlines li:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.bpcm-airlines li::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bpcm-accent);
}

/* FAQ de l'accueil (accordéons partagés avec les routes et hubs). */
.full-width-content .entry-content > .bpcm-home-faq {
	margin-top: 48px;
	margin-bottom: 40px;
}

.bpcm-home-faq .bpcm-faq-list {
	max-width: 900px;
	margin: 0 auto;
}

/* ==========================================================================
   13. Ambiance : fond neutre partout, cartes blanches « flottantes »
   ========================================================================== */
body,
.site,
.site-content {
	background-color: #f8fafc;
}

/* En-tête : sur les largeurs intermédiaires, logo + 6 entrées de menu tiennent sur une ligne
   (sinon le menu passe sur 2 lignes pendant le chargement → décalage de mise en page). */
.main-title {
	white-space: nowrap;
}

@media (min-width: 769px) and (max-width: 1100px) {
	.main-navigation .main-nav ul li a {
		padding-left: 12px;
		padding-right: 12px;
	}

	.main-title {
		font-size: 1.35rem;
	}
}

@media (min-width: 769px) and (max-width: 880px) {
	.main-navigation .main-nav ul li a {
		padding-left: 8px;
		padding-right: 8px;
		font-size: 0.9rem;
	}

	.main-title {
		font-size: 1.2rem;
	}
}

/* ==========================================================================
   14. Refonte « TravelTech » (header, hero, encart, cartes pays, compagnies, FAQ accueil)
   ========================================================================== */
/* --- Header 70px + logo bicolore --- */
.site-header {
	border-bottom: 1px solid #e2e8f0;
}

.site-header .inside-header {
	min-height: 70px;
	padding-top: 0;
	padding-bottom: 0;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	line-height: 70px;
}

.main-navigation .main-nav ul ul li a {
	line-height: 1.4;
	padding-top: 10px;
	padding-bottom: 10px;
}

.bpcm-logo {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1;
}

.bpcm-logo a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.bpcm-logo__icon {
	flex: none;
	color: #0d9488;
	transform: rotate(45deg);
}

.bpcm-logo__main {
	color: #0b192c;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.bpcm-logo__accent {
	color: #0d9488;
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* --- Hero : dégradé radial profond, titre aéré --- */
.bpcm-hero {
	background: radial-gradient(circle at 50% 20%, #1e3e62 0%, #0b192c 100%);
}

.bpcm-hero .bpcm-route__title,
.bpcm-hero h1 {
	font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.25rem); /* 28px mobile → 36px desktop */
	letter-spacing: -0.5px;
	line-height: 1.2;
	margin-bottom: 14px;
}

.bpcm-hero .bpcm-route__intro,
.bpcm-hero .bpcm-lead {
	line-height: 1.7;
}

.bpcm-hero__inner,
.bpcm-hero > .wp-block-group__inner-container {
	padding-top: 56px;
}

/* --- Encart « Dernière minute » : carte premium --- */
.full-width-content .entry-content > .bpcm-alert-box {
	padding: 24px;
	background: #ffffff;
	border: 1px solid #fef3c7;
	border-left: 5px solid #f59e0b;
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(245, 158, 11, 0.08);
}

.bpcm-alert-box .bpcm-deal-badge {
	padding: 4px 10px;
	background: #fef3c7;
	color: #b45309;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* --- Cartes pays : carte applicative --- */
.bpcm-card {
	padding: 24px;
	border-radius: 14px;
	border: 1px solid #e2e8f0;
	background: #ffffff;
}

.bpcm-card .bpcm-flag {
	display: inline-flex;
	width: 28px;
	height: 28px;
	margin-bottom: 14px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 1px #e2e8f0, 0 1px 3px rgba(15, 23, 42, 0.12);
}

.bpcm-card .bpcm-flag svg {
	width: 100%;
	height: 100%;
}

.bpcm-card .bpcm-card__cta {
	align-self: flex-start;
	margin: auto 0 0;
	padding: 8px 16px;
	background: #f1f5f9;
	color: #0b192c;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.bpcm-card:hover .bpcm-card__cta,
.bpcm-card:focus-within .bpcm-card__cta {
	background: #e2e8f0;
	color: #0b192c;
}

/* --- Compagnies : cartes partenaires --- */
.bpcm-airlines {
	gap: 12px;
}

.bpcm-airlines li {
	padding: 10px 18px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
	color: #334155;
	font-size: 13px;
	font-weight: 600;
	transition: border-color 0.2s ease;
}

.bpcm-airlines li::before {
	content: none;
}

.bpcm-airlines li:hover {
	transform: none;
	border-color: #cbd5e1;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

/* --- FAQ accueil : questions dans des conteneurs indépendants --- */
.bpcm-home-faq .bpcm-faq {
	margin-bottom: 12px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: none;
}

.bpcm-home-faq .bpcm-faq[open] {
	border-color: #cbd5e1;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.bpcm-home-faq .bpcm-faq summary {
	border-radius: 10px;
}

/* Largeurs intermédiaires : logo + menu sur une seule ligne. */
@media (min-width: 769px) and (max-width: 880px) {
	.bpcm-logo {
		font-size: 1.1rem;
	}

	.bpcm-logo a {
		gap: 6px;
	}

	.bpcm-logo__icon {
		width: 18px;
		height: 18px;
	}
}

/* ==========================================================================
   15. Fiches route (single-vols) en pleine largeur
   ========================================================================== */
.single-vols .bpcm-hero--route {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 84px; /* widget à cheval (-40px) + respiration */
	border-radius: 0;
	background: radial-gradient(circle at 50% 20%, #1e3e62 0%, #0b192c 100%);
}

/* Pas de padding bas : il annulerait l'effet « à cheval » du widget. */
.single-vols .bpcm-hero--route .bpcm-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px 0 20px;
}

.single-vols.full-width-content .bpcm-hero--route .bpcm-search-wrap {
	margin-bottom: -40px;
}

/* Axe PAR ✈ RAK centré comme le reste du hero. */
.full-width-content .bpcm-axis {
	margin-left: auto;
	margin-right: auto;
}

/* Contenu sous le hero : colonne de lecture 1000px. */
.single-vols.full-width-content .inside-article > .bpcm-breadcrumb,
.single-vols.full-width-content .inside-article > .bpcm-route__facts,
.single-vols.full-width-content .inside-article > .bpcm-faq-list {
	max-width: 1000px;
}

.single-vols.full-width-content .inside-article > .bpcm-breadcrumb ol {
	margin: 16px 0;
}

/* Disclaimer (bloc encadré) : bord aligné sur la colonne de 1000px (contenu 960px). */
.single-vols.full-width-content .inside-article > .bpcm-route__disclaimer {
	max-width: 960px;
}

/* ==========================================================================
   16. Articles (guides) en pleine largeur : hero sombre + colonne de lecture 800px
   ========================================================================== */
.single-post.separate-containers .inside-article {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.bpcm-hero--guide {
	margin-bottom: 0;
}

.bpcm-hero--guide .bpcm-hero__inner {
	max-width: 900px;
	padding: 36px 20px 48px;
}

.bpcm-hero .bpcm-breadcrumb ol {
	justify-content: center;
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.6);
}

.bpcm-hero .bpcm-breadcrumb a {
	color: rgba(255, 255, 255, 0.8);
}

.bpcm-hero .bpcm-breadcrumb a:hover,
.bpcm-hero .bpcm-breadcrumb a:focus {
	color: #ffffff;
}

.bpcm-guide-chip {
	display: inline-block;
	margin-bottom: 14px;
	padding: 4px 12px;
	background: rgba(94, 234, 212, 0.14);
	color: #5eead4;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.bpcm-hero a.bpcm-guide-chip:hover,
.bpcm-hero a.bpcm-guide-chip:focus {
	color: #ffffff;
	background: rgba(94, 234, 212, 0.25);
}

.bpcm-guide-meta {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9rem;
}

/* Colonne de lecture centrée. */
.single-post.full-width-content .inside-article > .entry-content {
	max-width: 800px;
	margin: 40px auto;
	padding: 0 20px;
}

/* Les blocs de l'article suivent la colonne (pas de recentrage 1200px + gouttière en double). */
.single-post.full-width-content .entry-content > * {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.single-post.full-width-content .inside-article > .entry-meta {
	max-width: 800px;
}

.single-post .entry-content h2 {
	margin-top: 1.6em;
}

.single-post .entry-content figcaption {
	margin-top: 8px;
	color: var(--bpcm-muted);
	font-size: 0.85rem;
}

/* Tableaux des articles : colonnes à largeur fixe (table-layout: fixed) dès le premier rendu.
   En mode « auto », le navigateur recalculait les largeurs après affichage (décalage mesuré ≈ 0,015 à 768px).
   Largeur minimale : le tableau défile dans son cadre sur mobile plutôt que d'écraser les colonnes. */
.single-post .entry-content .wp-block-table table {
	table-layout: fixed;
	min-width: 620px;
}

.single-post .entry-content .wp-block-table th,
.single-post .entry-content .wp-block-table td {
	overflow-wrap: break-word; /* pas de hyphens:auto : Chrome charge le dictionnaire après coup → recalcul = CLS */
}

/* Largeurs par nombre de colonnes : classe posée sur le <figure> par guide_generator.py.
   Pas de sélecteur « has » : pendant le chargement progressif du HTML, il ne s'applique qu'une fois la dernière cellule reçue → décalage. */

/* Tableau à 3 colonnes (formalités) : situation / documents / visa. */
.single-post .entry-content .bpcm-table--cols-3 table th:nth-child(1) { width: 32%; }
.single-post .entry-content .bpcm-table--cols-3 table th:nth-child(2) { width: 46%; }
.single-post .entry-content .bpcm-table--cols-3 table th:nth-child(3) { width: 22%; }

/* Tableau à 5 colonnes (bagages) : compagnie / gratuit / cabine / poids / conditions. */
.single-post .entry-content .bpcm-table--cols-5 table th:nth-child(1) { width: 18%; }
.single-post .entry-content .bpcm-table--cols-5 table th:nth-child(2),
.single-post .entry-content .bpcm-table--cols-5 table th:nth-child(3) { width: 19%; }
.single-post .entry-content .bpcm-table--cols-5 table th:nth-child(4) { width: 14%; }
.single-post .entry-content .bpcm-table--cols-5 table th:nth-child(5) { width: 30%; }

/* Tableau à 4 colonnes (saisonnalité) : période / météo / affluence / prix. */
.single-post .entry-content .bpcm-table--cols-4 table th:nth-child(1) { width: 26%; }
.single-post .entry-content .bpcm-table--cols-4 table th:nth-child(2) { width: 34%; }
.single-post .entry-content .bpcm-table--cols-4 table th:nth-child(3) { width: 22%; }
.single-post .entry-content .bpcm-table--cols-4 table th:nth-child(4) { width: 18%; }

/* ==========================================================================
   17. Accueil : « Guides pratiques » ([bpcm_latest_guides])
   ========================================================================== */
.full-width-content .entry-content > .bpcm-latest-guides {
	margin-top: 56px;
	margin-bottom: 40px;
}

.bpcm-guide-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.bpcm-guide-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bpcm-guide-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	box-shadow: var(--bpcm-shadow-sm);
	transition: all 0.25s ease;
}

.bpcm-guide-card:hover,
.bpcm-guide-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.08);
}

.bpcm-guide-card__chip {
	align-self: flex-start;
	margin-bottom: 12px;
	padding: 3px 10px;
	background: var(--bpcm-accent-soft);
	color: var(--bpcm-accent-dark);
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bpcm-guide-card__title {
	margin: 0 0 10px;
	font-size: 1.05rem;
	line-height: 1.35;
}

.bpcm-guide-card__title a {
	color: #0b192c;
	text-decoration: none;
}

/* Toute la carte est cliquable (lien du titre étendu). */
.bpcm-guide-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
}

.bpcm-guide-card:hover .bpcm-guide-card__title a {
	color: var(--bpcm-primary);
}

.bpcm-guide-card__excerpt {
	margin: 0 0 16px;
	color: var(--bpcm-muted);
	font-size: 0.95rem;
}

.bpcm-guide-card__cta {
	margin-top: auto;
	color: var(--bpcm-accent-dark);
	font-size: 0.9rem;
	font-weight: 600;
}

.bpcm-latest-guides__all {
	margin: 24px 0 0;
	text-align: center;
}

.bpcm-btn-secondary {
	display: inline-block;
	padding: 10px 20px;
	background: #f1f5f9;
	color: #0b192c;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.bpcm-btn-secondary:hover,
.bpcm-btn-secondary:focus {
	background: #e2e8f0;
	color: #0b192c;
}

/* ==========================================================================
   18. Accueil : « Principaux aéroports » ([bpcm_airports_grid])
   ========================================================================== */
.full-width-content .entry-content > .bpcm-airports-hub {
	margin-top: 8px;
	margin-bottom: 48px;
}

.bpcm-airport-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); /* 3 colonnes dès la tablette : 9 cartes = 3 × 3 */
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.bpcm-airport-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bpcm-airport-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: var(--bpcm-shadow-sm);
	transition: all 0.25s ease;
}

.bpcm-airport-card:hover,
.bpcm-airport-card:focus-within {
	transform: translateY(-2px);
	border-color: #cbd5e1;
	box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.08);
}

.bpcm-airport-card__iata {
	flex: none;
	min-width: 56px;
	padding: 8px 10px;
	background: #0b192c;
	color: #ffffff;
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-align: center;
}

.bpcm-airport-card__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bpcm-airport-card__city {
	color: #0b192c;
	font-weight: 700;
	text-decoration: none;
}

/* Toute la carte est cliquable. */
.bpcm-airport-card__city::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

.bpcm-airport-card:hover .bpcm-airport-card__city {
	color: var(--bpcm-primary);
}

.bpcm-airport-card__name {
	color: var(--bpcm-muted);
	font-size: 0.85rem;
}

/* ==========================================================================
   19. Pages aéroport (page-aeroport.php) : hero bord à bord + colonne 1000px
   ========================================================================== */
.bpcm-airport .bpcm-hero--airport {
	margin-bottom: 84px; /* widget à cheval (-40px) + respiration */
	border-radius: 0;
}

.bpcm-airport .bpcm-hero--airport .bpcm-hero__inner {
	padding: 36px 20px 0; /* pas de padding bas : il annulerait l'effet « à cheval » */
}

.bpcm-airport.full-width-content .bpcm-hero--airport .bpcm-search-wrap {
	margin-bottom: -40px;
}

.bpcm-airport.full-width-content .inside-article > .bpcm-route__facts,
.bpcm-airport.full-width-content .inside-article > .bpcm-airport-section {
	max-width: 1000px;
}

.bpcm-airport.full-width-content .inside-article > .bpcm-route__disclaimer {
	max-width: 960px;
}

.bpcm-airport-section {
	margin-top: 40px;
}

.bpcm-airport-list {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.bpcm-airport-list li {
	position: relative;
	margin-bottom: 10px;
	padding: 14px 18px 14px 44px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
}

.bpcm-airport-list li::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 20px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bpcm-accent);
}

.bpcm-airport-section .bpcm-badges {
	margin-bottom: 12px;
}

/* Pages aéroport : pas de carte blanche autour de l'article (hero bord à bord, sections sur le fond neutre). */
.bpcm-airport.separate-containers .inside-article {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}