/* =============================================================================
   PACIFIC HOTEL BROKER — A-PROPOS.CSS
   Feuille de style dédiée à la page /a-propos/ (page ID 531).
   Enqueue conditionné à is_page(531) depuis functions.php.

   Tous les sélecteurs sont scopés à `.phb-aprops` pour ne PAS affecter
   d'autres pages. Les tokens (--color-*, --space-*, --font-*) et les classes
   utilitaires (.phb-eyebrow, .phb-btn, .phb-cta-final) viennent de home.css
   (chargé globalement).

   Sommaire :
     1. Hero éditorial (fil d'Ariane + H1 + lead)
     2. Notre histoire (prose)
     3. Chiffres clés (fond charbon, 3 stats)
     4. Notre approche (3 piliers, séparateurs fins)
     5. Partenariat stratégique (centré)
   ============================================================================= */


/* Conteneur commun ---------------------------------------------------------- */
.phb-aprops {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}
.phb-aprops__hero-inner,
.phb-aprops__story-inner,
.phb-aprops__stats-inner,
.phb-aprops__approach-inner,
.phb-aprops__partner-inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-5);
}
@media (min-width: 768px) {
    .phb-aprops__hero-inner,
    .phb-aprops__story-inner,
    .phb-aprops__stats-inner,
    .phb-aprops__approach-inner,
    .phb-aprops__partner-inner {
        padding-inline: var(--space-7);
    }
}
@media (min-width: 1024px) {
    .phb-aprops__hero-inner,
    .phb-aprops__story-inner,
    .phb-aprops__stats-inner,
    .phb-aprops__approach-inner,
    .phb-aprops__partner-inner {
        padding-inline: var(--space-8);
    }
}

.phb-aprops__h2 {
    font-family: var(--font-display);
    font-size: var(--font-display-lg);
    font-weight: 400;
    line-height: var(--line-height-display);
    letter-spacing: var(--letter-spacing-display);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-5);
}


/* -----------------------------------------------------------------------------
   1. HERO ÉDITORIAL
   ----------------------------------------------------------------------------- */
.phb-aprops__hero {
    background: var(--color-bg-primary);
    padding-block: var(--space-9);
    border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
    .phb-aprops__hero {
        padding-block: var(--space-10);
    }
}

.phb-aprops__title {
    font-family: var(--font-display);
    font-size: var(--font-display-lg);
    font-weight: 400;
    line-height: var(--line-height-display);
    letter-spacing: var(--letter-spacing-display);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-5);
    max-width: 18ch;
}
.phb-aprops__lead {
    font-family: var(--font-body);
    font-size: var(--font-size-body-lg);
    font-weight: 300;
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 60ch;
}

/* Hero 2 colonnes (texte 55% / carte minimaliste 45%) dès 1024px ; stack avant. */
.phb-aprops__hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
}
@media (min-width: 1024px) {
    .phb-aprops__hero-grid {
        grid-template-columns: 55% 45%;
        gap: var(--space-8);
        align-items: center;
    }
}
/* Carte Pacifique-centrée (image SVG, couleurs intégrées au fichier). */
.phb-aprops__hero-map img {
    display: block;
    width: 100%;
    height: auto;
}
/* Tablet/mobile : carte sous le texte (pleine largeur de colonne, comme la home). */
@media (max-width: 1023px) {
    .phb-aprops__hero-map {
        margin-top: var(--space-4);
    }
}


/* -----------------------------------------------------------------------------
   2. NOTRE HISTOIRE
   ----------------------------------------------------------------------------- */
.phb-aprops__story {
    padding-block: var(--space-9);
}
@media (min-width: 768px) {
    .phb-aprops__story {
        padding-block: var(--space-10);
    }
}
.phb-aprops__prose {
    max-width: 70ch;
}
.phb-aprops__prose p {
    font-family: var(--font-body);
    font-size: var(--font-size-body-lg);
    font-weight: 300;
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}
.phb-aprops__prose p:last-child {
    margin-bottom: 0;
}

/* Layout 2 colonnes (texte 55% / image 45%) à partir de 1024px ; stack mobile.
   L'image passe sous le texte en mobile. */
.phb-aprops__story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
}
@media (min-width: 1024px) {
    .phb-aprops__story-grid {
        grid-template-columns: 55% 45%;
        gap: var(--space-8);
        align-items: center;
    }
}
.phb-aprops__story-media {
    margin: 0;
}
.phb-aprops__story-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
/* Sur mobile, on évite une image trop haute (ratio plus paysage). */
@media (max-width: 1023px) {
    .phb-aprops__story-media img {
        aspect-ratio: 3 / 2;
    }
}


/* -----------------------------------------------------------------------------
   2-bis. BANDEAU PLEINE LARGEUR (image cinématique)
   ----------------------------------------------------------------------------- */
.phb-aprops__banner {
    width: 100%;
    line-height: 0; /* supprime l'espace inline sous l'image */
}
.phb-aprops__banner-img {
    display: block;
    width: 100%;
    height: clamp(200px, 28vw, 340px);
    object-fit: cover;
}


/* -----------------------------------------------------------------------------
   3. CHIFFRES CLÉS (fond charbon)
   ----------------------------------------------------------------------------- */
.phb-aprops__stats {
    background: var(--color-text-primary);
    color: var(--color-text-inverse);
    padding-block: var(--space-9);
}
@media (min-width: 768px) {
    .phb-aprops__stats {
        padding-block: var(--space-10);
    }
}
.phb-aprops__stats-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
}
@media (min-width: 768px) {
    .phb-aprops__stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }
}
.phb-aprops__stat {
    text-align: center;
    padding-inline: var(--space-5);
}
/* Séparateurs verticaux fins entre les 3 chiffres (desktop) */
@media (min-width: 768px) {
    .phb-aprops__stat + .phb-aprops__stat {
        border-left: 1px solid rgba(250, 248, 244, 0.16);
    }
}
.phb-aprops__stat-number {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.5rem, 4.5vw, 3.75rem);
    line-height: 1;
    /* Doré légèrement éclairci (vs --color-accent #B08D57) pour mieux ressortir
       sur le fond charbon de la section chiffres. */
    color: #C4A06C;
    margin-bottom: var(--space-3);
}
.phb-aprops__stat-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--font-size-caption);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-eyebrow);
    color: var(--color-text-inverse);
    opacity: 0.75;
}


/* -----------------------------------------------------------------------------
   4. NOTRE APPROCHE (3 piliers, sans icônes)
   ----------------------------------------------------------------------------- */
.phb-aprops__approach {
    padding-block: var(--space-9);
}
@media (min-width: 768px) {
    .phb-aprops__approach {
        padding-block: var(--space-10);
    }
}
.phb-aprops__approach-header {
    margin-bottom: var(--space-8);
    max-width: 60ch;
}
.phb-aprops__approach-header .phb-aprops__h2 {
    margin-bottom: 0;
}
.phb-aprops__pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
}
@media (min-width: 768px) {
    .phb-aprops__pillars {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
}
/* Séparateurs verticaux fins entre les colonnes (desktop) */
@media (min-width: 768px) {
    .phb-aprops__pillar + .phb-aprops__pillar {
        border-left: 1px solid var(--color-border);
        padding-left: var(--space-8);
    }
}
.phb-aprops__pillar-title {
    font-family: var(--font-display);
    font-size: var(--font-display-sm);
    font-weight: 400;
    line-height: var(--line-height-display);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
}
.phb-aprops__pillar-body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
    margin: 0;
}


/* -----------------------------------------------------------------------------
   5. PARTENARIAT STRATÉGIQUE (centré)
   ----------------------------------------------------------------------------- */
.phb-aprops__partner {
    background: var(--color-bg-secondary);
    padding-block: var(--space-9);
    border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) {
    .phb-aprops__partner {
        padding-block: var(--space-10);
    }
}
.phb-aprops__partner-inner {
    text-align: center;
    max-width: var(--container-prose);
}
.phb-aprops__partner .phb-aprops__h2 {
    max-width: 24ch;
    margin-inline: auto;
}
.phb-aprops__partner-body {
    font-family: var(--font-body);
    font-size: var(--font-size-body-lg);
    font-weight: 300;
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
    margin: 0 auto var(--space-7);
    max-width: 60ch;
}
.phb-aprops__partner-actions {
    display: flex;
    justify-content: center;
}


/* =============================================================================
   CHIFFRES CLÉS — UPGRADE PREMIUM (2026-06-16)
   -----------------------------------------------------------------------------
   Même traitement que la bande chiffres de la home (.phb-stats) : NOIR CHAUD en
   dégradé + HALO DORÉ diffus + GRAIN de film. Scopé .phb-aprops.
   (Le comptage animé des nombres est géré par home.js, charge site-wide.)
   ============================================================================= */
.phb-aprops__stats {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Noir chaud : charbon tiède → noir profond (vs l'aplat #0A0A0A precedent). */
	background: linear-gradient(180deg, #17120D 0%, #100C08 52%, #080605 100%);
}

/* Halo doré diffus, centré derrière les chiffres (section sans en-tête). */
.phb-aprops__stats::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(960px, 92%);
	height: 460px;
	background: radial-gradient(
		ellipse at center,
		rgba(196, 160, 108, 0.18) 0%,
		rgba(176, 141, 87, 0.07) 40%,
		rgba(176, 141, 87, 0) 72%
	);
	pointer-events: none;
	z-index: 0;
}

/* Grain de film — SVG fractalNoise inline, très discret (overlay 5 %). */
.phb-aprops__stats::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.05;
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index: 0;
}

/* Contenu (grille des chiffres) au-dessus du halo et du grain. */
.phb-aprops__stats-inner {
	position: relative;
	z-index: 1;
}

/* Séparateurs verticaux dorés en dégradé (≥768px) au lieu du trait blanc. */
.phb-aprops__stat {
	position: relative;
}
@media (min-width: 768px) {
	.phb-aprops__stat + .phb-aprops__stat {
		border-left: none;
	}
	.phb-aprops__stat + .phb-aprops__stat::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 72px;
		background: linear-gradient(
			to bottom,
			transparent,
			rgba(196, 160, 108, 0.55),
			transparent
		);
	}
}