/* =========================================================================
   SYSTÈME DE STYLE COMMUN AUX PAGES INTÉRIEURES
   -------------------------------------------------------------------------
   Chargé APRÈS styles.css par construction, rénovation, dépannage,
   entretien, équipement, contact, mentions et PVC armé.

   Tout est préfixé « pp- » (Pornic Piscines) pour ne jamais entrer en
   collision avec les classes historiques de styles.css. Une page ne
   chargeant pas ce fichier n'est absolument pas affectée.
   ========================================================================= */

.pp-hero,
.pp-section,
.pp-cta,
.pp-quicknav {
    --pp-navy: #003366;
    --pp-navy-deep: #002347;
    --pp-blue: #668ECB;
    --pp-blue-light: #eef4ff;
    --pp-ink: #1a2b3c;
    --pp-body: #33475b;
    --pp-muted: #5b6b7c;
    --pp-line: rgba(0, 51, 102, 0.09);
    --pp-surface: #ffffff;
    --pp-surface-alt: #f6f8fb;
    --pp-gold: #E3C27E;
    --pp-gold-deep: #C9A44C;
    --pp-radius: 16px;
    --pp-radius-lg: 22px;
    --pp-shadow-sm: 0 6px 20px rgba(0, 32, 64, 0.07);
    --pp-shadow: 0 10px 30px rgba(0, 32, 64, 0.10);
    --pp-shadow-lg: 0 18px 44px rgba(0, 32, 64, 0.18);
}

/* Hauteur réelle du header fixe, mesurée en JS : elle varie selon la
   largeur d'écran (84 px en grand, 69 px en mobile) et selon le zoom.
   La valeur ci-dessous n'est qu'un repli si le script ne tourne pas. */
:root {
    --pp-header-h: 84px;
    --pp-quicknav-h: 0px;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* On réserve la place des barres fixes au-dessus de chaque ancre, sinon le
   titre visé atterrit caché dessous. */
.pp-section[id],
[id].pp-anchor {
    scroll-margin-top: calc(var(--pp-header-h) + var(--pp-quicknav-h) + 14px);
}

/* Lien d'évitement clavier : hors écran tant qu'il n'a pas le focus. */
.pp-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000000000000;
    background: #003366;
    color: #fff;
    padding: 0.85rem 1.4rem;
    border-radius: 0 0 10px 0;
    font-weight: 700;
    text-decoration: none;
}

.pp-skip-link:focus { left: 0; }

/* Le header du site est transparent : lisible sur la photo du bandeau,
   mais blanc sur blanc dès qu'on descend dans la page. On lui donne un
   fond une fois le bandeau dépassé. */
body.pp-scrolled header {
    background: rgba(0, 35, 71, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 18px rgba(0, 20, 40, 0.28);
}

/* ============================== BANDEAU ============================== */

.pp-hero {
    position: relative;
    min-height: clamp(340px, 56vh, 520px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background-color: #002347;
}

/* Le média déborde un peu : de la marge pour la parallaxe, sans jamais
   laisser apparaître de bord. */
.pp-hero-media {
    position: absolute;
    inset: -6% 0;
    z-index: 0;
}

.pp-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
    will-change: transform;
}

/* Voile en deux couches : un dégradé latéral qui protège le texte à
   gauche, et un dégradé vers le bas qui ancre le bandeau. */
.pp-hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(0, 22, 45, 0.92) 0%, rgba(0, 30, 60, 0.74) 38%, rgba(0, 40, 78, 0.3) 68%, rgba(0, 40, 78, 0.14) 100%),
        linear-gradient(to top, rgba(0, 20, 40, 0.85) 0%, rgba(0, 20, 40, 0) 45%);
}

/* Variante sans photo, pour les pages où une image n'apporte rien
   (mentions légales par exemple). */
.pp-hero-plain {
    background: linear-gradient(120deg, #002347 0%, #003366 55%, #004b91 100%);
    min-height: clamp(260px, 38vh, 360px);
}

.pp-hero-inner {
    position: relative;
    z-index: 2;
    width: min(100% - 2rem, 1320px);
    margin: 0 auto;
    padding: clamp(104px, 15vh, 158px) 0 clamp(32px, 5vh, 54px);
    color: #fff;
    max-width: 100%;
}

.pp-hero-kicker {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: clamp(0.7rem, 1.1vw, 0.82rem);
    font-weight: 700;
    color: #a8c8f5;
    margin: 0 0 0.6rem;
}

.pp-hero-title {
    font-size: clamp(2.4rem, 6vw, 4.1rem);
    line-height: 1.04;
    margin: 0 0 0.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 24px rgba(0, 15, 30, 0.5);
}

.pp-hero-lead {
    font-size: clamp(0.96rem, 1.5vw, 1.16rem);
    line-height: 1.5;
    max-width: 46ch;
    margin: 0 0 1.4rem;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 12px rgba(0, 15, 30, 0.55);
}

.pp-hero-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.6rem);
}

/* Chiffres clés : volontairement sans fond ni contour, pour ne pas être
   confondus avec des boutons. Seules les actions ont une forme de bouton. */
.pp-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.9rem, 2.2vw, 1.9rem);
    padding: 0;
    margin: 0;
}

.pp-stats li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: clamp(0.9rem, 2.2vw, 1.9rem);
    border-left: 1px solid rgba(255, 255, 255, 0.24);
}

.pp-stats li:first-child {
    padding-left: 0;
    border-left: none;
}

.pp-stat-num {
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--pp-gold, #E3C27E);
    text-shadow: 0 2px 10px rgba(0, 15, 30, 0.4);
    font-variant-numeric: tabular-nums;
}

.pp-stat-plus {
    font-size: 0.62em;
    vertical-align: 0.42em;
    margin-right: 0.06em;
    color: var(--pp-gold-deep, #C9A44C);
}

.pp-stat-slash {
    color: rgba(227, 194, 126, 0.55);
    margin: 0 0.04em;
}

.pp-stat-label {
    margin-top: 0.34rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.pp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

/* ============================== BOUTONS ============================== */

.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.8rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: clamp(0.88rem, 1.2vw, 0.98rem);
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    line-height: 1.25;
    text-align: center;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
                background-color 0.22s ease, color 0.22s ease,
                border-color 0.22s ease;
}

.pp-btn-primary {
    background: #fff;
    color: #003366;
    box-shadow: 0 10px 24px rgba(0, 15, 35, 0.28);
}

.pp-btn-primary:hover {
    background: #eef4ff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 15, 35, 0.34);
}

.pp-btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}

.pp-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
    transform: translateY(-2px);
}

.pp-btn-solid {
    background: #003366;
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 40, 80, 0.24);
}

.pp-btn-solid:hover {
    background: #668ECB;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 40, 80, 0.3);
}

.pp-btn-outline {
    background: #fff;
    color: #003366;
    border-color: rgba(0, 51, 102, 0.22);
    box-shadow: var(--pp-shadow-sm, 0 6px 20px rgba(0, 32, 64, 0.07));
}

.pp-btn-outline:hover {
    border-color: #668ECB;
    color: #003366;
    transform: translateY(-2px);
    box-shadow: var(--pp-shadow, 0 10px 30px rgba(0, 32, 64, 0.1));
}

/* Groupe de liens sortants / secondaires, très utilisé sur équipement. */
.pp-linkrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.3rem;
}

/* ========================= SOMMAIRE COLLANT ========================= */

.pp-quicknav {
    position: sticky;
    top: var(--pp-header-h);
    z-index: 900;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 51, 102, 0.1);
    box-shadow: 0 6px 20px rgba(0, 30, 60, 0.07);
}

/* Sur mobile, les liens du sommaire dépassent la largeur de l'écran et se
   consultent en défilant horizontalement. Sans indice visuel, la coupure
   nette du dernier lien donne l'impression que la barre est mal affichée
   (« ça ne s'affiche pas en entier ») : on ajoute donc un dégradé aux bords,
   visible seulement quand il reste effectivement du contenu à faire défiler
   de ce côté (classes posées par pages.js). La barre est déjà `position: sticky`
   ci-dessus, ce qui suffit à servir de repère de positionnement pour les
   dégradés ci-dessous. */
.pp-quicknav::before,
.pp-quicknav::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.pp-quicknav::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
}

.pp-quicknav::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
}

.pp-quicknav.has-scroll-left::before { opacity: 1; }
.pp-quicknav.has-scroll-right::after { opacity: 1; }

.pp-quicknav-inner {
    width: min(100% - 2rem, 1320px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    /* min-width:0 est indispensable pour que la barre défile au lieu de
       déborder de la page sur les petits écrans. */
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.45rem 0;
    min-height: 56px;
}

.pp-quicknav-inner::-webkit-scrollbar { display: none; }

.pp-quicknav-link {
    white-space: nowrap;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.88rem;
    color: #3d566e;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.pp-quicknav-link:hover {
    color: #003366;
    background: rgba(102, 142, 203, 0.13);
}

.pp-quicknav-link.is-current {
    color: #fff;
    background: #003366;
}

/* ============================== SECTIONS ============================== */

.pp-section {
    padding: clamp(2.6rem, 6vw, 5rem) 1rem;
    background: #fff;
    color: var(--pp-ink, #1a2b3c);
}

.pp-section-alt { background: #f6f8fb; }

.pp-section-tight { padding-top: clamp(1.4rem, 3vw, 2.4rem); }

.pp-wrap {
    width: min(100%, 1320px);
    margin: 0 auto;
}

.pp-wrap-narrow {
    width: min(100%, 880px);
    margin: 0 auto;
}

.pp-section-head {
    max-width: 780px;
    margin: 0 auto clamp(1.8rem, 4vw, 2.8rem);
    text-align: center;
}

.pp-section-head-left {
    margin-left: 0;
    text-align: left;
}

.pp-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.76rem;
    font-weight: 700;
    color: #668ECB;
    margin: 0 0 0.6rem;
}

.pp-h2 {
    font-size: clamp(1.75rem, 3.6vw, 2.7rem);
    line-height: 1.16;
    color: #003366;
    margin: 0 0 0.9rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.pp-section-head .pp-h2::after {
    content: "";
    display: block;
    width: 68px;
    height: 4px;
    border-radius: 2px;
    background: #668ECB;
    margin: 0.85rem auto 0;
}

.pp-section-head-left .pp-h2::after { margin-left: 0; }

.pp-section-sub {
    font-size: clamp(0.98rem, 1.4vw, 1.08rem);
    line-height: 1.65;
    color: var(--pp-muted, #5b6b7c);
    margin: 0;
}

.pp-h3 {
    font-size: clamp(1.15rem, 2.1vw, 1.45rem);
    color: #003366;
    margin: 0 0 0.8rem;
    font-weight: 700;
    line-height: 1.3;
}

.pp-lede {
    font-size: clamp(1.02rem, 1.6vw, 1.2rem);
    line-height: 1.7;
    color: #33475b;
    margin: 0 0 1.1rem;
}

.pp-text p {
    font-size: clamp(0.96rem, 1.25vw, 1.05rem);
    line-height: 1.75;
    color: var(--pp-body, #33475b);
    margin: 0 0 1.05rem;
}

.pp-text p:last-child { margin-bottom: 0; }

.pp-text strong { color: #003366; }

/* Listes à puce personnalisée : une petite coche bleue plutôt qu'un rond. */
.pp-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
    display: grid;
    gap: 0.65rem;
}

.pp-list li {
    position: relative;
    padding-left: 1.9rem;
    font-size: clamp(0.94rem, 1.2vw, 1.02rem);
    line-height: 1.65;
    color: var(--pp-body, #33475b);
}

.pp-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 12px;
    height: 7px;
    border-left: 2.5px solid #668ECB;
    border-bottom: 2.5px solid #668ECB;
    transform: rotate(-45deg);
}

.pp-list strong { color: #003366; }

/* Paragraphe mis en exergue entre deux blocs. */
.pp-pullquote {
    max-width: 900px;
    margin: clamp(1.6rem, 4vw, 2.6rem) auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    text-align: center;
    font-size: clamp(1.1rem, 2.1vw, 1.45rem);
    line-height: 1.5;
    font-weight: 700;
    color: #003366;
    position: relative;
}

.pp-pullquote::before,
.pp-pullquote::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    border-radius: 2px;
    background: var(--pp-gold, #E3C27E);
    margin: 0 auto 1rem;
}

.pp-pullquote::after { margin: 1rem auto 0; }

/* ============================== CARTES ============================== */

.pp-card {
    background: #fff;
    border: 1px solid var(--pp-line, rgba(0, 51, 102, 0.09));
    border-radius: var(--pp-radius, 16px);
    padding: clamp(1.2rem, 2.2vw, 1.9rem);
    box-shadow: var(--pp-shadow-sm, 0 6px 20px rgba(0, 32, 64, 0.07));
}

.pp-section-alt .pp-card { background: #fff; }

/* ================= DISPOSITION ALTERNÉE TEXTE / PHOTO ================= */

/* Le bloc de base des pages : un pavé de texte et un visuel côte à côte,
   qui s'inversent d'un bloc à l'autre pour rythmer la lecture, et se
   superposent proprement en dessous de 900 px. */
.pp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.6rem, 4vw, 3.4rem);
    align-items: center;
    margin-bottom: clamp(2.4rem, 5vw, 4.5rem);
}

.pp-split:last-child { margin-bottom: 0; }

.pp-split-wide-text { grid-template-columns: 1.15fr 0.85fr; }

/* Inverse l'ordre visuel sans toucher à l'ordre du HTML (donc sans
   perturber la lecture au clavier ni les lecteurs d'écran). */
.pp-split-reverse .pp-split-media { order: -1; }

.pp-split-media {
    position: relative;
    border-radius: var(--pp-radius-lg, 22px);
    overflow: hidden;
    box-shadow: var(--pp-shadow, 0 10px 30px rgba(0, 32, 64, 0.1));
}

.pp-split-media img {
    display: block;
    width: 100%;
    height: auto;
    /* height:auto est obligatoire : sans elle, les attributs width/height
       du HTML s'appliquent comme hauteur CSS et écrasent l'aspect-ratio. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pp-split-media:hover img { transform: scale(1.04); }

/* Deux visuels empilés côté média. */
.pp-split-media-duo {
    display: grid;
    gap: 12px;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.pp-split-media-duo img {
    border-radius: var(--pp-radius, 16px);
    box-shadow: var(--pp-shadow, 0 10px 30px rgba(0, 32, 64, 0.1));
    aspect-ratio: 16 / 10;
}

/* ====================== BANDE DE PHOTOS EN HAUT ====================== */

/* Les quatre photos d'ouverture des pages construction et rénovation :
   même principe qu'avant (une bande en haut de page), mais avec des
   angles arrondis, une ombre douce et un zoom au survol. */
.pp-photostrip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.5rem, 1.2vw, 1rem);
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: clamp(1rem, 2.5vw, 2rem) 1rem 0;
}

.pp-photostrip figure {
    position: relative;
    margin: 0;
    border-radius: var(--pp-radius, 16px);
    overflow: hidden;
    box-shadow: var(--pp-shadow-sm, 0 6px 20px rgba(0, 32, 64, 0.07));
}

.pp-photostrip img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pp-photostrip figure:hover img { transform: scale(1.05); }

.pp-photostrip figcaption {
    position: absolute;
    left: 12px;
    top: 12px;
    background: rgba(0, 20, 40, 0.78);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.34rem 0.75rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ========================== CARTES À ICÔNE ========================== */

.pp-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(0.9rem, 1.8vw, 1.4rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

.pp-feature {
    background: #fff;
    border: 1px solid var(--pp-line, rgba(0, 51, 102, 0.09));
    border-radius: var(--pp-radius, 16px);
    padding: 1.5rem 1.3rem;
    box-shadow: 0 4px 14px rgba(0, 32, 64, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pp-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--pp-shadow, 0 10px 30px rgba(0, 32, 64, 0.1));
}

.pp-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: linear-gradient(140deg, #003366, #668ECB);
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 0.9rem;
}

.pp-feature h3 {
    font-size: 1.02rem;
    color: #003366;
    margin: 0 0 0.45rem;
    font-weight: 700;
    line-height: 1.3;
}

.pp-feature p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--pp-muted, #5b6b7c);
    margin: 0;
}

/* ===================== ÉTAPES (fil vertical) ===================== */

/* Les étapes d'un chantier, en fil conducteur : un trait vertical relie
   des pastilles numérotées. Les étapes illustrées montrent leur photo,
   les autres restent compactes. */
.pp-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.pp-steps::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(to bottom, #668ECB, rgba(102, 142, 203, 0.15));
}

.pp-step {
    position: relative;
    padding-left: 74px;
    margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.pp-step:last-child { margin-bottom: 0; }

.pp-step-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 2px solid #668ECB;
    color: #003366;
    font-weight: 700;
    font-size: 1.05rem;
    box-shadow: 0 4px 14px rgba(0, 32, 64, 0.1);
    font-variant-numeric: tabular-nums;
}

.pp-step-body {
    background: #fff;
    border: 1px solid var(--pp-line, rgba(0, 51, 102, 0.09));
    border-radius: var(--pp-radius, 16px);
    box-shadow: var(--pp-shadow-sm, 0 6px 20px rgba(0, 32, 64, 0.07));
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pp-step-body:hover {
    transform: translateY(-3px);
    box-shadow: var(--pp-shadow, 0 10px 30px rgba(0, 32, 64, 0.1));
}

.pp-step-body h3 {
    font-size: clamp(1rem, 1.7vw, 1.18rem);
    color: #003366;
    margin: 0;
    padding: 1.05rem 1.3rem;
    font-weight: 700;
    line-height: 1.35;
}

.pp-step-body img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-top: 1px solid var(--pp-line, rgba(0, 51, 102, 0.09));
}

/* Étapes illustrées : deux par ligne sur grand écran, pour ne pas
   étirer la page sur des kilomètres. */
@media screen and (min-width: 1024px) {
    .pp-steps-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(1.4rem, 3vw, 2.4rem);
    }

    /* Sur deux colonnes, un trait vertical unique à gauche ne relierait
       qu'une colonne sur deux : il embrouille au lieu de guider. Les
       pastilles numérotées suffisent. */
    .pp-steps-grid::before { display: none; }

    .pp-steps-grid .pp-step-full { grid-column: 1 / -1; }
}

/* ============================== GALERIE ============================== */

.pp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: clamp(0.8rem, 1.6vw, 1.3rem);
    /* Chaque vignette prend sa hauteur naturelle : sans ça, celles qui
       n'ont pas de légende sont étirées à la hauteur de la plus haute de
       la ligne et se retrouvent avec un bandeau blanc vide en dessous. */
    align-items: start;
}

.pp-gallery figure {
    margin: 0;
    background: #fff;
    border: 1px solid var(--pp-line, rgba(0, 51, 102, 0.09));
    border-radius: var(--pp-radius, 16px);
    overflow: hidden;
    box-shadow: var(--pp-shadow-sm, 0 6px 20px rgba(0, 32, 64, 0.07));
    display: flex;
    flex-direction: column;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.pp-gallery figure:hover {
    transform: translateY(-4px);
    box-shadow: var(--pp-shadow, 0 10px 30px rgba(0, 32, 64, 0.1));
}

.pp-gallery img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.pp-gallery figcaption {
    padding: 0.85rem 1rem 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--pp-body, #33475b);
    flex: 1;
}

.pp-gallery-step figcaption::before {
    counter-increment: ppgal;
    content: counter(ppgal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: #eef4ff;
    color: #003366;
    font-size: 0.74rem;
    font-weight: 700;
    vertical-align: 1px;
}

.pp-gallery-counted { counter-reset: ppgal; }

/* ============================== VIDÉOS ============================== */

.pp-videos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(0.9rem, 1.8vw, 1.4rem);
    margin: 1.4rem 0;
}

.pp-video {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--pp-radius, 16px);
    overflow: hidden;
    cursor: pointer;
    background: #001b33;
    border: none;
    padding: 0;
    box-shadow: var(--pp-shadow, 0 10px 30px rgba(0, 32, 64, 0.1));
}

.pp-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter 0.3s ease;
}

.pp-video:hover img {
    transform: scale(1.04);
    filter: brightness(0.86);
}

.pp-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.pp-video-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #003366;
}

.pp-video:hover .pp-video-play {
    transform: translate(-50%, -50%) scale(1.09);
    background: #fff;
}

.pp-video-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.4rem 1.1rem 0.95rem;
    background: linear-gradient(to top, rgba(0, 15, 30, 0.88), rgba(0, 15, 30, 0));
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    text-align: left;
    line-height: 1.4;
}

.pp-videos iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--pp-radius, 16px);
    display: block;
    box-shadow: var(--pp-shadow, 0 10px 30px rgba(0, 32, 64, 0.1));
}

/* ========================= CARTES DE CONTACT ========================= */

.pp-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(0.9rem, 1.8vw, 1.4rem);
}

.pp-contact-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    background: #fff;
    border: 1px solid var(--pp-line, rgba(0, 51, 102, 0.09));
    border-radius: var(--pp-radius, 16px);
    padding: 1.6rem 1.4rem;
    box-shadow: var(--pp-shadow-sm, 0 6px 20px rgba(0, 32, 64, 0.07));
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

a.pp-contact-card:hover {
    transform: translateY(-4px);
    border-color: #668ECB;
    box-shadow: var(--pp-shadow, 0 10px 30px rgba(0, 32, 64, 0.1));
}

.pp-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: linear-gradient(140deg, #003366, #668ECB);
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.pp-contact-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pp-muted, #5b6b7c);
}

.pp-contact-value {
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    font-weight: 700;
    color: #003366;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.pp-contact-note {
    font-size: 0.9rem;
    color: var(--pp-muted, #5b6b7c);
    line-height: 1.5;
    margin: 0;
}

/* ======================= APPEL À L'ACTION ======================= */

.pp-cta {
    background: linear-gradient(120deg, #003366 0%, #00509e 100%);
    color: #fff;
    padding: clamp(2.4rem, 5vw, 3.8rem) 1rem;
}

.pp-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
}

.pp-cta .pp-h2 {
    color: #fff;
    margin-bottom: 0.5rem;
}

.pp-cta .pp-h2::after { display: none; }

.pp-cta p {
    margin: 0;
    font-size: clamp(0.98rem, 1.4vw, 1.08rem);
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.6;
    max-width: 54ch;
}

.pp-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

/* ====================== PAGES DE TEXTE (légales) ====================== */

.pp-legal { display: grid; gap: clamp(1.2rem, 2.5vw, 1.8rem); }

.pp-legal section {
    background: #fff;
    border: 1px solid var(--pp-line, rgba(0, 51, 102, 0.09));
    border-left: 4px solid #668ECB;
    border-radius: var(--pp-radius, 16px);
    padding: clamp(1.2rem, 2.4vw, 1.9rem);
    box-shadow: var(--pp-shadow-sm, 0 6px 20px rgba(0, 32, 64, 0.07));
}

.pp-legal h2 {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: #003366;
    margin: 0 0 0.8rem;
    font-weight: 700;
}

.pp-legal p {
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--pp-body, #33475b);
    margin: 0 0 0.9rem;
}

.pp-legal p:last-child { margin-bottom: 0; }

.pp-legal strong { color: #003366; }

.pp-legal a { color: #003366; font-weight: 700; overflow-wrap: anywhere; }

/* ==================== CORRECTIF FOOTER (≤ 370 px) ====================
   La colonne de la grille du footer prend pour largeur minimale celle de
   son contenu le plus large, ce qui pousse la page au-delà de l'écran et
   fait apparaître une barre de défilement horizontale sur les petits
   téléphones. minmax(0, 1fr) l'autorise à se réduire.
   Le défaut existe aussi sur l'accueil, qui ne charge pas ce fichier. */
footer .footer-top {
    grid-template-columns: minmax(0, 1fr) 0.8fr 0.8fr 1.1fr;
}

footer .footer-brand,
footer .footer-col { min-width: 0; }

footer .footer-tagline,
footer .footer-address,
footer .footer-contact-link { overflow-wrap: anywhere; }

@media screen and (max-width: 1024px) {
    footer .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media screen and (max-width: 768px) {
    footer .footer-top { grid-template-columns: minmax(0, 1fr); }
}

/* ============================== FOCUS ============================== */

.pp-btn:focus-visible,
.pp-quicknav-link:focus-visible,
.pp-contact-card:focus-visible,
.pp-video:focus-visible,
.pp-skip-link:focus-visible {
    outline: 3px solid #8dbcff;
    outline-offset: 3px;
}

/* ============================ RESPONSIVE ============================ */

@media screen and (max-width: 1024px) {
    .pp-photostrip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 900px) {
    .pp-split,
    .pp-split-wide-text {
        grid-template-columns: 1fr;
    }

    /* En une seule colonne, le visuel repasse toujours après le texte :
       on lit d'abord, on regarde ensuite. */
    .pp-split-reverse .pp-split-media { order: 0; }

    .pp-split-media-duo { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 768px) {
    .pp-hero {
        min-height: 0;
    }

    .pp-hero-inner {
        padding-top: clamp(88px, 12vh, 122px);
        padding-bottom: clamp(24px, 4vh, 34px);
    }

    .pp-hero-lead { max-width: 100%; }

    .pp-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .pp-steps::before { left: 19px; }

    .pp-step { padding-left: 60px; }

    .pp-step-num {
        width: 40px;
        height: 40px;
        font-size: 0.95rem;
    }
}

@media screen and (max-width: 560px) {
    .pp-photostrip {
        gap: 0.5rem;
        padding-inline: 0.75rem;
    }

    .pp-split-media-duo { grid-template-columns: 1fr; }

    .pp-gallery { grid-template-columns: 1fr; }

    .pp-pullquote { font-size: 1.05rem; }
}

@media screen and (max-width: 400px) {
    .pp-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pp-hero-actions .pp-btn {
        width: 100%;
        /* En colonne l'axe principal devient la verticale : sans ça, une
           base flexible pensée pour la largeur deviendrait une hauteur. */
        flex: 0 0 auto;
    }

    .pp-linkrow .pp-btn { width: 100%; }
}

/* ========================= MOUVEMENT RÉDUIT ========================= */

@media (prefers-reduced-motion: reduce) {
    .pp-btn,
    .pp-card,
    .pp-feature,
    .pp-step-body,
    .pp-gallery figure,
    .pp-contact-card,
    .pp-split-media img,
    .pp-photostrip img,
    .pp-video img {
        transition: none;
    }
}