/*

Theme Name: PC IDF

Theme URI: https://local.dev

Author: Projet PC IDF

Description: Thème léger pour site d'affiliation dating adulte en Île-de-France.

Version: 1.0.0

Text Domain: pcidf

*/



:root {

    --pcidf-bg: #070b10;

    --pcidf-bg-2: #0b1118;

    --pcidf-card: #101720;

    --pcidf-card-2: #0d131b;

    --pcidf-border: #26313d;

    --pcidf-border-soft: rgba(255, 255, 255, 0.08);



    --pcidf-text: #ffffff;

    --pcidf-muted: #aeb7c2;

    --pcidf-muted-2: #7e8895;



    --pcidf-pink: #e72f73;

    --pcidf-pink-dark: #c91f5d;

    --pcidf-pink-soft: rgba(231, 47, 115, 0.13);



    --pcidf-footer-bg: #ffffff;

    --pcidf-footer-text: #111820;

    --pcidf-footer-muted: #4a5563;



    --pcidf-radius: 12px;

    --pcidf-radius-lg: 18px;

    --pcidf-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);

}



* {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    background:

        radial-gradient(circle at top left, rgba(231, 47, 115, 0.12), transparent 28%),

        linear-gradient(180deg, #05080c 0%, #080d13 42%, #06090e 100%);

    color: var(--pcidf-text);

    line-height: 1.55;

}



a {

    color: inherit;

    text-decoration: none;

}



img {

    max-width: 100%;

    height: auto;

}



.pcidf-container {

    width: min(1180px, calc(100% - 32px));

    margin: 0 auto;

}



/* HEADER */



.pcidf-header {

    background: linear-gradient(180deg, #090d13 0%, #05080c 100%);

    border-bottom: 1px solid var(--pcidf-border-soft);

    position: sticky;

    top: 0;

    z-index: 50;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

}



.pcidf-header-inner {

    min-height: 68px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 28px;

}



.pcidf-logo {

    display: flex;

    flex-direction: column;

    line-height: 1;

}



.pcidf-logo-main {

    font-weight: 950;

    font-size: 24px;

    letter-spacing: -0.6px;

    color: #ffffff;

    text-transform: uppercase;

}



.pcidf-logo-main span {

    color: var(--pcidf-pink);

}



.pcidf-logo-sub {

    font-size: 11px;

    color: var(--pcidf-muted);

    margin-top: 6px;

}



.pcidf-nav {

    display: flex;

    align-items: center;

    gap: 24px;

    font-size: 13px;

    font-weight: 800;

    text-transform: uppercase;

}



.pcidf-nav a {

    color: #ffffff;

    opacity: 0.92;

}



.pcidf-nav a:hover {

    color: var(--pcidf-pink);

    opacity: 1;

}



.pcidf-nav-cta {

    background: linear-gradient(180deg, #f04483 0%, var(--pcidf-pink) 100%);

    color: #fff !important;

    padding: 12px 18px;

    border-radius: 4px;

    box-shadow: 0 8px 24px rgba(231, 47, 115, 0.35);

}



.pcidf-nav-cta:hover {

    background: var(--pcidf-pink-dark);

}



/* GLOBAL */



.pcidf-site {

    min-height: 70vh;

}



.pcidf-main {

    background:

        radial-gradient(circle at 80% 10%, rgba(231, 47, 115, 0.08), transparent 30%),

        transparent;

}



/* HERO */



.pcidf-hero {

    padding: 42px 0 34px;

}



.pcidf-hero-grid {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 24px;

    align-items: stretch;

}



.pcidf-hero-content,

.pcidf-hero-card,

.pcidf-text-block,

.pcidf-section-card {

    background:

        linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),

        var(--pcidf-card-2);

    border: 1px solid var(--pcidf-border);

    border-radius: var(--pcidf-radius);

    box-shadow: var(--pcidf-shadow);

}



.pcidf-hero-content {

    padding: 34px;

    position: relative;

    overflow: hidden;

}



.pcidf-hero-content::after {

    content: "";

    position: absolute;

    right: -90px;

    top: -90px;

    width: 260px;

    height: 260px;

    background: radial-gradient(circle, rgba(231, 47, 115, 0.20), transparent 64%);

    pointer-events: none;

}



.pcidf-kicker {

    display: inline-flex;

    margin: 0 0 14px;

    padding: 5px 9px;

    border-radius: 4px;

    background: var(--pcidf-pink-soft);

    color: var(--pcidf-pink);

    font-weight: 900;

    font-size: 12px;

    text-transform: uppercase;

}



.pcidf-hero h1 {

    margin: 0;

    max-width: 650px;

    font-size: clamp(34px, 5vw, 58px);

    line-height: 1.05;

    letter-spacing: -1.7px;

    color: #ffffff;

}



.pcidf-hero h1 strong,

.pcidf-section-head h2 strong {

    color: var(--pcidf-pink);

}



.pcidf-hero-text {

    max-width: 640px;

    margin: 18px 0 0;

    font-size: 17px;

    color: var(--pcidf-muted);

}



.pcidf-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 24px;

}



.pcidf-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding: 12px 20px;

    border-radius: 4px;

    font-weight: 900;

    font-size: 13px;

    text-transform: uppercase;

    border: 1px solid transparent;

    cursor: pointer;

}



.pcidf-btn-primary {

    background: linear-gradient(180deg, #f04483 0%, var(--pcidf-pink) 100%);

    color: #fff;

    box-shadow: 0 10px 25px rgba(231, 47, 115, 0.32);

}



.pcidf-btn-primary:hover {

    background: var(--pcidf-pink-dark);

}



.pcidf-btn-primary::before,

.pcidf-nav-cta::before {

    content: "🔥";

    margin-right: 8px;

    font-size: 13px;

}



.pcidf-btn-secondary {

    background: rgba(255, 255, 255, 0.03);

    border-color: var(--pcidf-border);

    color: #ffffff;

}



.pcidf-btn-secondary:hover {

    border-color: var(--pcidf-pink);

    color: var(--pcidf-pink);

}



.pcidf-note {

    margin-top: 17px;

    color: var(--pcidf-muted-2);

    font-size: 13px;

}



.pcidf-hero-card {

    padding: 28px;

    min-height: 100%;

    position: relative;

    overflow: hidden;

}



.pcidf-hero-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg, rgba(8, 12, 18, 0.95), rgba(8, 12, 18, 0.58)),

        radial-gradient(circle at 80% 20%, rgba(231, 47, 115, 0.22), transparent 36%);

    pointer-events: none;

}



.pcidf-hero-card > * {

    position: relative;

    z-index: 2;

}



.pcidf-card-title {

    margin: 0 0 10px;

    font-size: 23px;

    font-weight: 950;

    color: #ffffff;

}



.pcidf-hero-card p {

    color: var(--pcidf-muted);

}



.pcidf-mini-stats {

    display: grid;

    grid-template-columns: 1fr;

    gap: 10px;

    margin-top: 20px;

}



.pcidf-mini-stats span {

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid var(--pcidf-border);

    border-radius: 8px;

    padding: 12px;

    font-weight: 800;

    color: #ffffff;

}



/* SECTIONS */



.pcidf-section {

    padding: 22px 0;

}



.pcidf-section-light {

    background: transparent;

}



.pcidf-section-head {

    max-width: 760px;

    margin-bottom: 18px;

}



.pcidf-section-head h2,

.pcidf-text-block h2,

.pcidf-final-cta h2 {

    margin: 0 0 8px;

    font-size: clamp(25px, 3.5vw, 39px);

    line-height: 1.12;

    letter-spacing: -0.9px;

    color: #ffffff;

}



.pcidf-section-head p,

.pcidf-text-block p,

.pcidf-final-cta p {

    color: var(--pcidf-muted);

    font-size: 15px;

}



/* SEARCH */



.pcidf-search-box {

    display: flex;

    gap: 0;

    background: var(--pcidf-card);

    border: 1px solid var(--pcidf-border);

    border-radius: var(--pcidf-radius);

    padding: 0;

    overflow: hidden;

    box-shadow: var(--pcidf-shadow);

}



.pcidf-search-box input {

    flex: 1;

    border: 0;

    outline: 0;

    font-size: 15px;

    padding: 15px 16px;

    background: #ffffff;

    color: #111820;

}



.pcidf-search-box input::placeholder {

    color: #7b8490;

}



.pcidf-search-box button {

    border: 0;

    background: var(--pcidf-pink);

    color: #fff;

    padding: 0 22px;

    font-weight: 950;

    cursor: pointer;

    text-transform: uppercase;

    font-size: 12px;

}



.pcidf-search-box button:hover {

    background: var(--pcidf-pink-dark);

}



/* CITY CARDS */



.pcidf-city-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

}



.pcidf-city-card {

    background:

        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),

        var(--pcidf-card);

    border: 1px solid var(--pcidf-border);

    border-radius: 9px;

    padding: 17px;

    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);

    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;

}



.pcidf-city-card:hover {

    transform: translateY(-2px);

    border-color: rgba(231, 47, 115, 0.65);

    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);

}



.pcidf-city-card span {

    display: block;

    font-size: 16px;

    font-weight: 950;

    color: #ffffff;

}



.pcidf-city-card small {

    display: block;

    margin-top: 5px;

    color: var(--pcidf-muted);

}



/* TEXT BLOCK */



.pcidf-text-block {

    max-width: 100%;

    padding: 28px;

}



.pcidf-text-block p {

    max-width: 850px;

}



/* FINAL CTA */



.pcidf-final-cta {

    margin: 28px 0 0;

    padding: 42px 0;

    background:

        radial-gradient(circle at top, rgba(231, 47, 115, 0.18), transparent 34%),

        linear-gradient(180deg, #101720 0%, #080c12 100%);

    border-top: 1px solid var(--pcidf-border);

    color: #fff;

    text-align: center;

}



.pcidf-final-cta p {

    color: var(--pcidf-muted);

}



.pcidf-final-cta .pcidf-btn-primary {

    margin-top: 10px;

}



/* FOOTER CLAIR COMME MAQUETTE */



.pcidf-footer {

    background: var(--pcidf-footer-bg);

    color: var(--pcidf-footer-text);

    border: 1px solid #d5d9df;

    margin: 28px 10px 10px;

    border-radius: 6px;

}



.pcidf-footer-grid {

    display: grid;

    grid-template-columns: 1.35fr 0.85fr 1.45fr 1.1fr;

    gap: 28px;

    padding: 28px 0;

}



.pcidf-footer-title {

    margin: 0 0 10px;

    color: var(--pcidf-footer-text);

    font-weight: 950;

    font-size: 15px;

    text-transform: uppercase;

}



.pcidf-footer p {

    color: var(--pcidf-footer-muted);

    font-size: 13px;

    margin: 0 0 10px;

}



.pcidf-footer a {

    display: block;

    margin: 6px 0;

    color: var(--pcidf-footer-text);

    font-size: 13px;

}



.pcidf-footer a:hover {

    color: var(--pcidf-pink);

}



.pcidf-footer-bottom {

    border-top: 1px solid #e1e5ea;

    padding: 12px 0;

    font-size: 13px;

    text-align: center;

}



.pcidf-footer-bottom p {

    margin: 0;

    color: var(--pcidf-footer-muted);

}



/* RESPONSIVE */



@media (max-width: 920px) {

    .pcidf-header-inner {

        flex-direction: column;

        align-items: flex-start;

        padding: 14px 0;

    }



    .pcidf-nav {

        width: 100%;

        overflow-x: auto;

        gap: 16px;

        padding-bottom: 5px;

    }



    .pcidf-hero-grid {

        grid-template-columns: 1fr;

    }



    .pcidf-city-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .pcidf-footer-grid {

        grid-template-columns: 1fr 1fr;

    }

}



@media (max-width: 580px) {

    .pcidf-container {

        width: min(100% - 24px, 1180px);

    }



    .pcidf-hero {

        padding: 24px 0;

    }



    .pcidf-hero-content,

    .pcidf-hero-card,

    .pcidf-text-block {

        padding: 22px;

    }



    .pcidf-search-box {

        flex-direction: column;

    }



    .pcidf-search-box button {

        min-height: 46px;

    }



    .pcidf-city-grid,

    .pcidf-footer-grid {

        grid-template-columns: 1fr;

    }



    .pcidf-nav {

        font-size: 12px;

    }

}















/* PAGE VILLES */



.pcidf-page-hero {

    padding: 34px 0 18px;

}



.pcidf-page-hero-inner {

    background:

        linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),

        var(--pcidf-card-2);

    border: 1px solid var(--pcidf-border);

    border-radius: var(--pcidf-radius);

    box-shadow: var(--pcidf-shadow);

    padding: 32px;

}



.pcidf-breadcrumb {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 0 0 18px;

    color: var(--pcidf-muted);

    font-size: 13px;

}



.pcidf-breadcrumb a {

    color: var(--pcidf-pink);

}



.pcidf-page-hero h1 {

    margin: 0;

    max-width: 760px;

    font-size: clamp(34px, 5vw, 54px);

    line-height: 1.05;

    letter-spacing: -1.6px;

    color: #ffffff;

}



.pcidf-page-hero h1 strong {

    color: var(--pcidf-pink);

}



.pcidf-page-hero p:not(.pcidf-breadcrumb) {

    max-width: 720px;

    color: var(--pcidf-muted);

    font-size: 16px;

}



.pcidf-search-box-page {

    max-width: 620px;

    margin-top: 22px;

}



.pcidf-alpha {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 18px;

}



.pcidf-alpha a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 28px;

    height: 28px;

    border-radius: 999px;

    border: 1px solid var(--pcidf-border);

    background: rgba(255, 255, 255, 0.03);

    color: var(--pcidf-muted);

    font-size: 12px;

    font-weight: 900;

}



.pcidf-alpha a:hover {

    border-color: var(--pcidf-pink);

    color: var(--pcidf-pink);

}



.pcidf-page-grid {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 340px;

    gap: 22px;

    align-items: start;

}



.pcidf-city-directory {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

}



.pcidf-city-letter-group {

    background:

        linear-gradient(145deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)),

        var(--pcidf-card);

    border: 1px solid var(--pcidf-border);

    border-radius: var(--pcidf-radius);

    padding: 18px;

}



.pcidf-city-letter-group h2 {

    margin: 0 0 12px;

    color: var(--pcidf-pink);

    font-size: 22px;

    line-height: 1;

}



.pcidf-directory-list {

    display: grid;

    gap: 8px;

}



.pcidf-directory-list a {

    display: flex;

    justify-content: space-between;

    gap: 14px;

    padding: 7px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.pcidf-directory-list a:last-child {

    border-bottom: 0;

}



.pcidf-directory-list span {

    color: #ffffff;

    font-weight: 800;

    font-size: 14px;

}



.pcidf-directory-list small {

    color: var(--pcidf-muted);

    white-space: nowrap;

    font-size: 13px;

}



.pcidf-directory-list a:hover span {

    color: var(--pcidf-pink);

}



.pcidf-side-card {

    position: sticky;

    top: 92px;

    background:

        linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),

        var(--pcidf-card-2);

    border: 1px solid var(--pcidf-border);

    border-radius: var(--pcidf-radius);

    box-shadow: var(--pcidf-shadow);

    padding: 22px;

}



.pcidf-side-card h2 {

    margin: 0 0 10px;

    font-size: 24px;

    line-height: 1.12;

    color: #ffffff;

}



.pcidf-side-card p {

    color: var(--pcidf-muted);

    font-size: 14px;

}



.pcidf-side-stat {

    display: grid;

    gap: 3px;

    padding: 14px;

    margin: 12px 0;

    border: 1px solid var(--pcidf-border);

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.025);

}



.pcidf-side-stat strong {

    color: var(--pcidf-pink);

    font-size: 26px;

    line-height: 1;

}



.pcidf-side-stat span {

    color: var(--pcidf-muted);

    font-size: 13px;

}



.pcidf-full-btn {

    width: 100%;

    margin-top: 12px;

}



.pcidf-small-link {

    display: block;

    margin-top: 14px;

    text-align: center;

    color: var(--pcidf-pink);

    font-size: 13px;

    font-weight: 900;

}



@media (max-width: 920px) {

    .pcidf-page-grid {

        grid-template-columns: 1fr;

    }



    .pcidf-side-card {

        position: static;

    }



    .pcidf-city-directory {

        grid-template-columns: 1fr;

    }

}



















/* PAGE DEPARTEMENTS - NUMEROS + MINI TEXTE */



.pcidf-dep-hero {

    max-width: 920px;

    margin: 0 auto;

}



.pcidf-dep-grid-simple {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

    margin-top: 28px;

}



.pcidf-dep-simple-card {

    min-height: 168px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    gap: 5px;

    text-align: center;

    background:

        linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),

        var(--pcidf-card);

    border: 1px solid var(--pcidf-border);

    border-radius: 9px;

    padding: 18px 14px;

    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);

    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;

}



.pcidf-dep-simple-card:hover {

    transform: translateY(-2px);

    border-color: rgba(231, 47, 115, 0.7);

    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);

}



.pcidf-dep-code {

    display: block;

    color: var(--pcidf-pink);

    font-size: 31px;

    font-weight: 950;

    line-height: 1;

}



.pcidf-dep-name {

    display: block;

    color: #ffffff;

    font-size: 15px;

    font-weight: 900;

    line-height: 1.15;

}



.pcidf-dep-simple-card small {

    color: var(--pcidf-muted);

    font-size: 12px;

}



.pcidf-dep-simple-card em {

    display: block;

    margin-top: 8px;

    color: var(--pcidf-muted);

    font-style: normal;

    font-size: 12.5px;

    line-height: 1.35;

}



.pcidf-dep-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    margin-top: 28px;

    padding: 18px;

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid var(--pcidf-border);

    border-radius: 9px;

}



.pcidf-dep-bottom p {

    margin: 0;

    color: var(--pcidf-muted);

    font-size: 14px;

}



@media (max-width: 760px) {

    .pcidf-dep-grid-simple {

        grid-template-columns: repeat(2, 1fr);

    }



    .pcidf-dep-bottom {

        flex-direction: column;

        align-items: flex-start;

    }

}



@media (max-width: 460px) {

    .pcidf-dep-grid-simple {

        grid-template-columns: 1fr;

    }

}





















/* PAGE VILLE PARIS */



.pcidf-city-hero {

    padding: 34px 0 18px;

}



.pcidf-city-hero-grid {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 360px;

    gap: 22px;

    align-items: stretch;

}



.pcidf-city-hero-text,

.pcidf-city-visual {

    background:

        linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),

        var(--pcidf-card-2);

    border: 1px solid var(--pcidf-border);

    border-radius: var(--pcidf-radius);

    box-shadow: var(--pcidf-shadow);

}



.pcidf-city-hero-text {

    padding: 32px;

}



.pcidf-city-hero-text h1 {

    margin: 0;

    font-size: clamp(34px, 5vw, 54px);

    line-height: 1.05;

    letter-spacing: -1.5px;

    color: #ffffff;

}



.pcidf-city-hero-text h1 strong {

    color: var(--pcidf-pink);

}



.pcidf-city-subtitle {

    margin: 12px 0 12px;

    color: #ffffff !important;

    font-size: 20px !important;

    font-weight: 900;

}



.pcidf-city-hero-text p {

    color: var(--pcidf-muted);

    font-size: 15px;

}



.pcidf-city-visual {

    aspect-ratio: 16 / 10;

    min-height: 0;

    overflow: hidden;

    position: relative;

    background:

        radial-gradient(circle at 70% 35%, rgba(231, 47, 115, 0.25), transparent 34%),

        linear-gradient(145deg, #111923, #06090e);

}



.pcidf-city-visual img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.pcidf-city-visual-fallback::after {

    content: "PARIS";

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: rgba(255, 255, 255, 0.08);

    font-size: 72px;

    font-weight: 950;

    letter-spacing: -4px;

}



.pcidf-city-stats {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

    margin-top: 18px;

}



.pcidf-city-stats div {

    background:

        linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),

        var(--pcidf-card);

    border: 1px solid var(--pcidf-border);

    border-radius: 9px;

    padding: 16px;

    text-align: center;

}



.pcidf-city-stats strong {

    display: block;

    color: #ffffff;

    font-size: 21px;

    line-height: 1;

}



.pcidf-city-stats span {

    display: block;

    margin-top: 6px;

    color: var(--pcidf-muted);

    font-size: 12px;

}



.pcidf-city-layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 330px;

    gap: 22px;

    align-items: start;

}



.pcidf-city-main {

    display: grid;

    gap: 18px;

}



.pcidf-city-card-block {

    padding: 24px;

}



.pcidf-city-card-block h2 {

    margin: 0 0 14px;

    color: #ffffff;

    font-size: 25px;

    line-height: 1.15;

}



.pcidf-city-card-block p {

    color: var(--pcidf-muted);

    font-size: 15px;

}



.pcidf-tags,

.pcidf-side-tags,

.pcidf-nearby-links {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.pcidf-tags span,

.pcidf-side-tags a,

.pcidf-nearby-links a {

    display: inline-flex;

    align-items: center;

    min-height: 34px;

    padding: 8px 13px;

    border-radius: 999px;

    border: 1px solid rgba(231, 47, 115, 0.45);

    background: rgba(231, 47, 115, 0.10);

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

}



.pcidf-side-tags a:hover,

.pcidf-nearby-links a:hover {

    background: var(--pcidf-pink);

    border-color: var(--pcidf-pink);

}



.pcidf-city-sidebar {

    display: grid;

    gap: 18px;

}



.pcidf-faq {

    display: grid;

    gap: 10px;

}



.pcidf-faq details {

    border: 1px solid var(--pcidf-border);

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.025);

    padding: 14px;

}



.pcidf-faq summary {

    cursor: pointer;

    color: #ffffff;

    font-weight: 900;

}



.pcidf-faq p {

    margin: 10px 0 0;

    font-size: 14px;

}



@media (max-width: 920px) {

    .pcidf-city-hero-grid,

    .pcidf-city-layout {

        grid-template-columns: 1fr;

    }



    .pcidf-city-stats {

        grid-template-columns: 1fr;

    }

}





















/* PAGE VILLE NORMALE */



.pcidf-intent-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

}



.pcidf-intent-card {

    background:

        linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),

        var(--pcidf-card);

    border: 1px solid var(--pcidf-border);

    border-radius: var(--pcidf-radius);

    padding: 20px;

    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);

}



.pcidf-intent-card span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 34px;

    height: 28px;

    margin-bottom: 12px;

    border-radius: 999px;

    background: rgba(231, 47, 115, 0.12);

    color: var(--pcidf-pink);

    font-size: 12px;

    font-weight: 950;

}



.pcidf-intent-card h2 {

    margin: 0 0 8px;

    color: #ffffff;

    font-size: 18px;

    line-height: 1.18;

}



.pcidf-intent-card p {

    margin: 0;

    color: var(--pcidf-muted);

    font-size: 13px;

}



@media (max-width: 860px) {

    .pcidf-intent-grid {

        grid-template-columns: 1fr;

    }

}

















/* VILLE DYNAMIQUE - FALLBACK IMAGE */



.pcidf-visual-city-name {

    position: relative;

    z-index: 2;

    display: flex;

    min-height: 100%;

    align-items: center;

    justify-content: center;

    padding: 30px;

    color: rgba(255, 255, 255, 0.22);

    font-size: clamp(32px, 5vw, 58px);

    font-weight: 950;

    text-align: center;

    letter-spacing: -2px;

    text-transform: uppercase;

}











/* ==========================================================

   ARTICLES / GUIDES — MODELE SINGLE

   À conserver en bas de style.css

   ========================================================== */



body.admin-bar .pcidf-header {

    top: 32px;

}



.pcidf-guide-single {

    padding-bottom: 8px;

}



.pcidf-guide-width {

    width: min(1080px, calc(100% - 32px));

}



.pcidf-guide-hero {

    padding: 34px 0 18px;

}



.pcidf-guide-breadcrumb {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin: 0 0 14px;

    color: var(--pcidf-muted-2);

    font-size: 13px;

}



.pcidf-guide-breadcrumb a {

    color: var(--pcidf-pink);

    font-weight: 800;

}



.pcidf-guide-breadcrumb a:hover {

    color: #ffffff;

}



.pcidf-guide-breadcrumb span[aria-current="page"] {

    max-width: 520px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.pcidf-guide-heading-card {

    overflow: hidden;

    background:

        radial-gradient(

            circle at 90% 0,

            rgba(231, 47, 115, 0.17),

            transparent 28%

        ),

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.04),

            rgba(255, 255, 255, 0.012)

        ),

        var(--pcidf-card-2);

    border: 1px solid var(--pcidf-border);

    border-radius: var(--pcidf-radius-lg);

    box-shadow: var(--pcidf-shadow);

}



.pcidf-guide-labels {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    padding: 30px 34px 0;

}



.pcidf-guide-label,

.pcidf-guide-category,

.pcidf-guide-draft {

    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 950;

    letter-spacing: 0.35px;

    text-transform: uppercase;

}



.pcidf-guide-label {

    background: var(--pcidf-pink);

    color: #ffffff;

}



.pcidf-guide-category {

    border: 1px solid rgba(231, 47, 115, 0.42);

    background: rgba(231, 47, 115, 0.09);

    color: #ffffff;

}



.pcidf-guide-category:hover {

    border-color: var(--pcidf-pink);

    color: var(--pcidf-pink);

}



.pcidf-guide-draft {

    border: 1px solid rgba(255, 193, 7, 0.55);

    background: rgba(255, 193, 7, 0.11);

    color: #ffd564;

}



.pcidf-guide-heading-card h1 {

    max-width: 920px;

    margin: 18px 34px 0;

    color: #ffffff;

    font-size: clamp(34px, 5vw, 57px);

    line-height: 1.06;

    letter-spacing: -1.7px;

}



.pcidf-guide-lead {

    max-width: 780px;

    margin: 20px 34px 0;

    color: #d0d6de;

    font-size: clamp(17px, 2vw, 20px);

    line-height: 1.65;

}



.pcidf-guide-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin: 18px 34px 30px;

    color: var(--pcidf-muted-2);

    font-size: 13px;

}



.pcidf-guide-featured {

    width: 100%;

    aspect-ratio: 16 / 9;

    margin: 0;

    overflow: hidden;

    border-top: 1px solid var(--pcidf-border);

    background: #080c12;

}



.pcidf-guide-featured img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.pcidf-guide-body-section {

    padding: 16px 0 28px;

}



.pcidf-guide-layout {

    display: grid;

    grid-template-columns: minmax(0, 760px) 280px;

    gap: 24px;

    align-items: start;

    justify-content: center;

}



.pcidf-guide-content-card {

    min-width: 0;

    padding: clamp(25px, 4vw, 48px);

    background:

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.03),

            rgba(255, 255, 255, 0.008)

        ),

        var(--pcidf-card-2);

    border: 1px solid var(--pcidf-border);

    border-radius: var(--pcidf-radius);

    box-shadow: var(--pcidf-shadow);

}



.pcidf-guide-content {

    color: #c3cad3;

    font-size: 17px;

    line-height: 1.82;

}



.pcidf-guide-content > :first-child {

    margin-top: 0;

}



.pcidf-guide-content > :last-child {

    margin-bottom: 0;

}



.pcidf-guide-content p {

    margin: 0 0 22px;

}



.pcidf-guide-content h2 {

    margin: 48px 0 17px;

    color: #ffffff;

    font-size: clamp(27px, 3.2vw, 35px);

    line-height: 1.16;

    letter-spacing: -0.8px;

}



.pcidf-guide-content h3 {

    margin: 34px 0 14px;

    color: #ffffff;

    font-size: clamp(21px, 2.5vw, 27px);

    line-height: 1.22;

}



.pcidf-guide-content h2:first-child,

.pcidf-guide-content h3:first-child {

    margin-top: 0;

}



.pcidf-guide-content a {

    color: var(--pcidf-pink);

    font-weight: 800;

    text-decoration: underline;

    text-decoration-color: rgba(231, 47, 115, 0.45);

    text-underline-offset: 3px;

}



.pcidf-guide-content a:hover {

    color: #ffffff;

    text-decoration-color: var(--pcidf-pink);

}



.pcidf-guide-content strong {

    color: #ffffff;

}



.pcidf-guide-content ul,

.pcidf-guide-content ol {

    margin: 28px 0;

    padding: 22px 24px 22px 48px;

    border: 1px solid var(--pcidf-border);

    border-left: 4px solid var(--pcidf-pink);

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.025);

}



.pcidf-guide-content li {

    margin: 9px 0;

    padding-left: 4px;

}



.pcidf-guide-content li::marker {

    color: var(--pcidf-pink);

    font-weight: 950;

}



.pcidf-guide-content blockquote {

    margin: 30px 0;

    padding: 22px 24px;

    border-left: 4px solid var(--pcidf-pink);

    background: var(--pcidf-pink-soft);

    color: #ffffff;

    font-size: 18px;

}



.pcidf-guide-content figure {

    margin: 34px 0;

}



.pcidf-guide-content figure img {

    display: block;

    width: 100%;

    border-radius: 10px;

}



.pcidf-guide-content figcaption {

    margin-top: 8px;

    color: var(--pcidf-muted-2);

    font-size: 12px;

    text-align: center;

}



.pcidf-guide-content p > a[href*="/go/"] {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    margin-top: 8px;

    padding: 12px 20px;

    border-radius: 4px;

    background: linear-gradient(

        180deg,

        #f04483 0%,

        var(--pcidf-pink) 100%

    );

    box-shadow: 0 10px 25px rgba(231, 47, 115, 0.28);

    color: #ffffff;

    font-size: 13px;

    font-weight: 950;

    text-decoration: none;

    text-transform: uppercase;

}



.pcidf-guide-content p > a[href*="/go/"]::before {

    content: "🔥";

    margin-right: 8px;

}



.pcidf-guide-content p > a[href*="/go/"]:hover {

    background: var(--pcidf-pink-dark);

    color: #ffffff;

}



.pcidf-guide-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 22px;

    margin-top: 44px;

    padding-top: 24px;

    border-top: 1px solid var(--pcidf-border);

}



.pcidf-guide-footer p {

    max-width: 520px;

    margin: 0;

    color: var(--pcidf-muted);

    font-size: 14px;

}



.pcidf-guide-footer strong {

    color: #ffffff;

}



.pcidf-guide-footer a {

    flex: 0 0 auto;

    color: var(--pcidf-pink);

    font-size: 13px;

    font-weight: 900;

}



.pcidf-guide-aside {

    position: sticky;

    top: 92px;

}



body.admin-bar .pcidf-guide-aside {

    top: 124px;

}



.pcidf-guide-aside-card {

    padding: 22px;

    background:

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.035),

            rgba(255, 255, 255, 0.012)

        ),

        var(--pcidf-card-2);

    border: 1px solid var(--pcidf-border);

    border-radius: var(--pcidf-radius);

    box-shadow: var(--pcidf-shadow);

}



.pcidf-guide-aside-title {

    margin: 0 0 10px;

    color: #ffffff;

    font-size: 20px;

    font-weight: 950;

}



.pcidf-guide-aside-card > p:not(.pcidf-guide-aside-title) {

    color: var(--pcidf-muted);

    font-size: 14px;

}



.pcidf-guide-aside-link {

    display: block;

    margin-top: 14px;

    color: var(--pcidf-pink);

    font-size: 13px;

    font-weight: 900;

    text-align: center;

}



.pcidf-guide-related {

    padding: 14px 0 32px;

}



.pcidf-guide-related-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

}



.pcidf-guide-related-card {

    overflow: hidden;

    background:

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.035),

            rgba(255, 255, 255, 0.012)

        ),

        var(--pcidf-card);

    border: 1px solid var(--pcidf-border);

    border-radius: 10px;

    transition:

        transform .15s ease,

        border-color .15s ease;

}



.pcidf-guide-related-card:hover {

    transform: translateY(-3px);

    border-color: var(--pcidf-pink);

}



.pcidf-guide-related-image {

    display: block;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #080c12;

}



.pcidf-guide-related-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.pcidf-guide-related-copy {

    display: block;

    padding: 17px;

}



.pcidf-guide-related-copy strong {

    display: block;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.3;

}



.pcidf-guide-related-copy small {

    display: block;

    margin-top: 8px;

    color: var(--pcidf-muted);

    line-height: 1.5;

}



.pcidf-guide-pages {

    margin-top: 24px;

}



.pcidf-guide-pages span {

    display: inline-flex;

    min-width: 34px;

    min-height: 34px;

    align-items: center;

    justify-content: center;

    margin-right: 6px;

    border: 1px solid var(--pcidf-border);

    border-radius: 6px;

}



@media (max-width: 920px) {

    .pcidf-guide-layout {

        grid-template-columns: 1fr;

    }



    .pcidf-guide-aside,

    body.admin-bar .pcidf-guide-aside {

        position: static;

    }



    .pcidf-guide-related-grid {

        grid-template-columns: 1fr 1fr;

    }

}



@media (max-width: 782px) {

    body.admin-bar .pcidf-header {

        top: 46px;

    }

}



@media (max-width: 580px) {

    .pcidf-guide-width {

        width: min(100% - 24px, 1080px);

    }



    .pcidf-guide-hero {

        padding-top: 22px;

    }



    .pcidf-guide-labels {

        padding: 22px 22px 0;

    }



    .pcidf-guide-heading-card h1 {

        margin: 16px 22px 0;

        font-size: 35px;

        letter-spacing: -1px;

    }



    .pcidf-guide-lead {

        margin: 17px 22px 0;

        font-size: 17px;

    }



    .pcidf-guide-meta {

        margin: 15px 22px 22px;

    }



    .pcidf-guide-content-card {

        padding: 24px 21px;

    }



    .pcidf-guide-content {

        font-size: 16px;

        line-height: 1.75;

    }



    .pcidf-guide-content h2 {

        margin-top: 38px;

        font-size: 27px;

    }



    .pcidf-guide-footer {

        align-items: flex-start;

        flex-direction: column;

    }



    .pcidf-guide-related-grid {

        grid-template-columns: 1fr;

    }

}









/* ==========================================================

   CARTES AVEC IMAGES — PAGE /GUIDES/

   À ajouter en bas de style.css

   ========================================================== */



.pcidf-guides-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;

}



.pcidf-guide-index-card {

    min-width: 0;

    overflow: hidden;

    background:

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.035),

            rgba(255, 255, 255, 0.012)

        ),

        var(--pcidf-card);

    border: 1px solid var(--pcidf-border);

    border-radius: 12px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);

    transition:

        transform .18s ease,

        border-color .18s ease,

        box-shadow .18s ease;

}



.pcidf-guide-index-card:hover {

    transform: translateY(-4px);

    border-color: rgba(231, 47, 115, 0.72);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.36);

}



.pcidf-guide-index-link {

    display: flex;

    height: 100%;

    flex-direction: column;

}



.pcidf-guide-index-image {

    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background:

        radial-gradient(

            circle at 75% 20%,

            rgba(231, 47, 115, 0.30),

            transparent 36%

        ),

        linear-gradient(145deg, #151e29, #080c12);

}



.pcidf-guide-index-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .28s ease;

}



.pcidf-guide-index-card:hover .pcidf-guide-index-image img {

    transform: scale(1.035);

}



.pcidf-guide-index-fallback {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: rgba(255, 255, 255, 0.15);

    font-size: 38px;

    font-weight: 950;

    letter-spacing: -1.5px;

    text-transform: uppercase;

}



.pcidf-guide-index-copy {

    display: flex;

    min-height: 230px;

    flex: 1;

    flex-direction: column;

    padding: 20px;

}



.pcidf-guide-index-status {

    align-self: flex-start;

    margin-bottom: 10px;

    padding: 4px 8px;

    border: 1px solid rgba(255, 193, 7, 0.48);

    border-radius: 999px;

    background: rgba(255, 193, 7, 0.10);

    color: #ffd564;

    font-size: 10px;

    font-weight: 950;

    text-transform: uppercase;

}



.pcidf-guide-index-copy strong {

    display: block;

    color: #ffffff;

    font-size: 20px;

    line-height: 1.28;

    letter-spacing: -0.25px;

}



.pcidf-guide-index-copy small {

    display: -webkit-box;

    margin-top: 11px;

    overflow: hidden;

    color: var(--pcidf-muted);

    font-size: 14px;

    line-height: 1.55;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 4;

}



.pcidf-guide-index-read {

    margin-top: auto;

    padding-top: 18px;

    color: var(--pcidf-pink);

    font-size: 13px;

    font-weight: 950;

}



.pcidf-guide-index-read::after {

    content: " →";

}



@media (max-width: 980px) {

    .pcidf-guides-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 680px) {

    .pcidf-guides-grid {

        grid-template-columns: 1fr;

    }



    .pcidf-guide-index-copy {

        min-height: 0;

    }

}













/* ==========================================================

   SOMMAIRE + LIENS CONNEXES — COLONNE DES ARTICLES

   À ajouter en bas de style.css

   ========================================================== */



.pcidf-guide-aside {

    display: grid;

    gap: 18px;

    align-self: start;

}



.pcidf-guide-content h2[id] {

    scroll-margin-top: 105px;

}



body.admin-bar .pcidf-guide-content h2[id] {

    scroll-margin-top: 137px;

}



.pcidf-guide-toc {

    overflow: hidden;

    background:

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.035),

            rgba(255, 255, 255, 0.012)

        ),

        var(--pcidf-card-2);

    border: 1px solid var(--pcidf-border);

    border-radius: var(--pcidf-radius);

    box-shadow: var(--pcidf-shadow);

}



.pcidf-guide-toc summary {

    position: relative;

    padding: 18px 44px 18px 20px;

    color: #ffffff;

    cursor: pointer;

    font-size: 19px;

    font-weight: 950;

    list-style: none;

}



.pcidf-guide-toc summary::-webkit-details-marker {

    display: none;

}



.pcidf-guide-toc summary::after {

    content: "−";

    position: absolute;

    top: 50%;

    right: 20px;

    color: var(--pcidf-pink);

    font-size: 22px;

    line-height: 1;

    transform: translateY(-50%);

}



.pcidf-guide-toc:not([open]) summary::after {

    content: "+";

}



.pcidf-guide-toc nav {

    padding: 0 20px 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

}



.pcidf-guide-toc ol {

    margin: 14px 0 0;

    padding: 0;

    list-style: none;

    counter-reset: guide-toc;

}



.pcidf-guide-toc li {

    counter-increment: guide-toc;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.pcidf-guide-toc li:last-child {

    border-bottom: 0;

}



.pcidf-guide-toc a {

    position: relative;

    display: block;

    padding: 10px 0 10px 27px;

    color: var(--pcidf-muted);

    font-size: 13px;

    font-weight: 750;

    line-height: 1.4;

}



.pcidf-guide-toc a::before {

    content: counter(guide-toc, decimal-leading-zero);

    position: absolute;

    top: 10px;

    left: 0;

    color: var(--pcidf-pink);

    font-size: 10px;

    font-weight: 950;

}



.pcidf-guide-toc a:hover {

    color: #ffffff;

}



.pcidf-guide-aside-related-list {

    display: grid;

    gap: 12px;

    margin-top: 15px;

}



.pcidf-guide-aside-related-link {

    display: grid;

    grid-template-columns: 64px minmax(0, 1fr);

    gap: 11px;

    align-items: center;

    padding-bottom: 12px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

}



.pcidf-guide-aside-related-link:last-child {

    padding-bottom: 0;

    border-bottom: 0;

}



.pcidf-guide-aside-related-link > span:last-child {

    color: #ffffff;

    font-size: 13px;

    font-weight: 850;

    line-height: 1.35;

}



.pcidf-guide-aside-related-link:hover > span:last-child {

    color: var(--pcidf-pink);

}



.pcidf-guide-aside-related-image {

    display: block;

    width: 64px;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 7px;

    background: #080c12;

}



.pcidf-guide-aside-related-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



@media (max-width: 920px) {

    .pcidf-guide-layout {

        display: flex;

        flex-direction: column;

    }



    .pcidf-guide-aside {

        width: 100%;

        order: 1;

        position: static;

    }



    .pcidf-guide-content-card {

        width: 100%;

        order: 2;

    }



    .pcidf-guide-toc summary {

        font-size: 18px;

    }

}



@media (max-width: 580px) {

    .pcidf-guide-aside-related-link {

        grid-template-columns: 56px minmax(0, 1fr);

    }



    .pcidf-guide-aside-related-image {

        width: 56px;

    }



    .pcidf-guide-content h2[id],

    body.admin-bar .pcidf-guide-content h2[id] {

        scroll-margin-top: 90px;

    }

}











/* ==========================================================

   COLONNE LATERALE DES GUIDES — SCROLL INDEPENDANT SUR PC

   À ajouter tout en bas de style.css

   ========================================================== */



@media (min-width: 921px) {

    .pcidf-guide-aside {

        position: sticky;

        top: 92px;



        /*

         * La colonne reste dans la hauteur visible de l’écran.

         * Si son contenu est plus long, elle possède son propre défilement.

         */

        max-height: calc(100vh - 112px);

        overflow-x: hidden;

        overflow-y: auto;

        padding-right: 7px;



        scrollbar-width: thin;

        scrollbar-color:

            var(--pcidf-pink)

            rgba(255, 255, 255, 0.08);

    }



    body.admin-bar .pcidf-guide-aside {

        top: 124px;

        max-height: calc(100vh - 144px);

    }



    .pcidf-guide-aside::-webkit-scrollbar {

        width: 7px;

    }



    .pcidf-guide-aside::-webkit-scrollbar-track {

        background: rgba(255, 255, 255, 0.05);

        border-radius: 999px;

    }



    .pcidf-guide-aside::-webkit-scrollbar-thumb {

        background: var(--pcidf-pink);

        border-radius: 999px;

    }



    .pcidf-guide-aside::-webkit-scrollbar-thumb:hover {

        background: var(--pcidf-pink-dark);

    }

}



/*

 * Sur tablette et mobile, la colonne reprend sa hauteur naturelle

 * et suit le défilement normal de la page.

 */

@media (max-width: 920px) {

    .pcidf-guide-aside,

    body.admin-bar .pcidf-guide-aside {

        max-height: none;

        overflow: visible;

        padding-right: 0;

    }

}







/* ==========================================================

   MOBILE / TABLETTE — ARTICLE AVANT LA COLONNE LATERALE

   À ajouter tout en bas de style.css

   ========================================================== */



@media (max-width: 920px) {

    .pcidf-guide-content-card {

        order: 1;

    }



    .pcidf-guide-aside {

        order: 2;

    }

}











/* ==========================================================

   PAGES LÉGALES — CGU, CONFIDENTIALITÉ, MENTIONS LÉGALES

   Remplace entièrement l'ancien bloc CSS des pages légales.

   À conserver tout en bas de style.css

   ========================================================== */



/* Le contenu légal utilise toute la largeur disponible du conteneur du site. */

.pcidf-legal-content {

    width: 100%;

    max-width: none;

    min-width: 0;

    color: var(--pcidf-muted);

    font-size: 16px;

    line-height: 1.78;

}



/*

 * Annule les limites de largeur éventuellement héritées des blocs génériques

 * du thème, notamment sur les paragraphes.

 */

.pcidf-text-block .pcidf-legal-content,

.pcidf-section-card .pcidf-legal-content,

.pcidf-legal-content p,

.pcidf-legal-content ul,

.pcidf-legal-content ol,

.pcidf-legal-content table,

.pcidf-legal-content blockquote {

    width: 100%;

    max-width: none;

}



.pcidf-legal-content > :first-child {

    margin-top: 0;

}



.pcidf-legal-content > :last-child {

    margin-bottom: 0;

}



/* TEXTES */



.pcidf-legal-content p {

    margin: 0 0 20px;

    color: var(--pcidf-muted);

}



.pcidf-legal-content strong {

    color: #ffffff;

    font-weight: 850;

}



.pcidf-legal-content em {

    color: #d5dbe3;

}



.pcidf-legal-content a {

    color: var(--pcidf-pink);

    font-weight: 800;

    text-decoration: underline;

    text-decoration-color: rgba(231, 47, 115, 0.45);

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;

    transition:

        color 0.18s ease,

        text-decoration-color 0.18s ease;

}



.pcidf-legal-content a:hover,

.pcidf-legal-content a:focus-visible {

    color: #ffffff;

    text-decoration-color: var(--pcidf-pink);

}



/* TITRES */



.pcidf-legal-content h2 {

    width: 100%;

    margin: 46px 0 17px;

    color: #ffffff;

    font-size: clamp(26px, 3vw, 36px);

    line-height: 1.16;

    letter-spacing: -0.75px;

}



.pcidf-legal-content h3 {

    width: 100%;

    margin: 31px 0 14px;

    color: #ffffff;

    font-size: clamp(20px, 2.2vw, 24px);

    line-height: 1.25;

    letter-spacing: -0.25px;

}



.pcidf-legal-content h4 {

    width: 100%;

    margin: 26px 0 12px;

    color: #ffffff;

    font-size: 18px;

    line-height: 1.3;

}



/* DATE DE MISE À JOUR */



.pcidf-legal-updated {

    margin-bottom: 22px !important;

    color: var(--pcidf-muted-2) !important;

    font-size: 14px;

}



.pcidf-legal-updated strong {

    color: #ffffff;

}



/* ENCADRÉ D'INTRODUCTION */



.pcidf-legal-notice {

    width: 100%;

    margin: 24px 0 36px;

    padding: 22px 24px;

    border: 1px solid rgba(231, 47, 115, 0.48);

    border-left: 4px solid var(--pcidf-pink);

    border-radius: 10px;

    background:

        linear-gradient(

            135deg,

            rgba(231, 47, 115, 0.10),

            rgba(231, 47, 115, 0.045)

        );

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);

}



.pcidf-legal-notice p {

    margin: 0;

    color: #d7dde5;

}



/* LISTES */



.pcidf-legal-content ul,

.pcidf-legal-content ol {

    margin: 22px 0 30px;

    padding: 20px 24px 20px 48px;

    border: 1px solid var(--pcidf-border);

    border-radius: 10px;

    background:

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.028),

            rgba(255, 255, 255, 0.012)

        ),

        var(--pcidf-card-2);

}



.pcidf-legal-content li {

    margin: 9px 0;

    padding-left: 4px;

    color: var(--pcidf-muted);

}



.pcidf-legal-content li::marker {

    color: var(--pcidf-pink);

    font-weight: 900;

}



/* CARTES PARTENAIRES */



.pcidf-legal-partners {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    list-style: none;

}



.pcidf-legal-partners li {

    min-width: 0;

    margin: 0;

    padding: 20px;

    border: 1px solid var(--pcidf-border);

    border-radius: 10px;

    background:

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.04),

            rgba(255, 255, 255, 0.012)

        ),

        var(--pcidf-card);

    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);

}



.pcidf-legal-partners li strong {

    display: inline-block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 18px;

}



/* TABLEAUX — utiles pour la confidentialité et les cookies */



.pcidf-legal-table-wrap {

    width: 100%;

    margin: 24px 0 30px;

    overflow-x: auto;

    border: 1px solid var(--pcidf-border);

    border-radius: 10px;

}



.pcidf-legal-content table {

    border-collapse: collapse;

    min-width: 680px;

    margin: 0;

    background: var(--pcidf-card-2);

}



.pcidf-legal-content th,

.pcidf-legal-content td {

    padding: 14px 16px;

    border-right: 1px solid var(--pcidf-border);

    border-bottom: 1px solid var(--pcidf-border);

    color: var(--pcidf-muted);

    text-align: left;

    vertical-align: top;

}



.pcidf-legal-content th {

    background: rgba(231, 47, 115, 0.10);

    color: #ffffff;

    font-size: 14px;

}



.pcidf-legal-content tr:last-child td {

    border-bottom: 0;

}



.pcidf-legal-content th:last-child,

.pcidf-legal-content td:last-child {

    border-right: 0;

}



/* CITATION / INFORMATION IMPORTANTE */



.pcidf-legal-content blockquote {

    margin: 26px 0;

    padding: 18px 22px;

    border-left: 4px solid var(--pcidf-pink);

    border-radius: 0 9px 9px 0;

    background: rgba(255, 255, 255, 0.025);

    color: #d8dee7;

}



.pcidf-legal-content blockquote p:last-child {

    margin-bottom: 0;

}



/* SÉPARATEUR */



.pcidf-legal-content hr {

    width: 100%;

    height: 1px;

    margin: 38px 0;

    border: 0;

    background: var(--pcidf-border);

}



/* FOCUS CLAVIER */



.pcidf-legal-content a:focus-visible {

    outline: 2px solid var(--pcidf-pink);

    outline-offset: 3px;

    border-radius: 2px;

}



/* TABLETTE */



@media (max-width: 920px) {

    .pcidf-legal-partners {

        grid-template-columns: 1fr;

    }



    .pcidf-legal-content h2 {

        margin-top: 40px;

    }

}



/* MOBILE */



@media (max-width: 580px) {

    .pcidf-legal-content {

        font-size: 15px;

        line-height: 1.72;

    }



    .pcidf-legal-content h2 {

        margin-top: 36px;

        font-size: 27px;

    }



    .pcidf-legal-content h3 {

        margin-top: 27px;

        font-size: 21px;

    }



    .pcidf-legal-notice {

        margin-bottom: 30px;

        padding: 18px;

    }



    .pcidf-legal-content ul,

    .pcidf-legal-content ol {

        padding: 17px 17px 17px 38px;

    }



    .pcidf-legal-partners li {

        padding: 18px;

    }



    .pcidf-legal-content th,

    .pcidf-legal-content td {

        padding: 12px 13px;

    }

}





/* ==========================================================

   PAGE CONTACT

   À ajouter tout en bas de style.css

   ========================================================== */



.pcidf-contact-page {

    min-height: 70vh;

}



.pcidf-contact-hero-points {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 24px;

}



.pcidf-contact-hero-points span {

    padding: 8px 11px;

    border: 1px solid var(--pcidf-border);

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.025);

    color: #d9dfe7;

    font-size: 13px;

    font-weight: 750;

}



.pcidf-contact-info-card ul {

    margin: 18px 0 0;

    padding: 0;

    list-style: none;

}



.pcidf-contact-info-card li {

    position: relative;

    margin: 10px 0;

    padding-left: 20px;

    color: var(--pcidf-muted);

}



.pcidf-contact-info-card li::before {

    content: "";

    position: absolute;

    top: 0.65em;

    left: 0;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--pcidf-pink);

    transform: translateY(-50%);

}



.pcidf-contact-domain {

    margin: 22px 0 0;

    padding-top: 18px;

    border-top: 1px solid var(--pcidf-border);

    color: var(--pcidf-muted-2);

    font-size: 13px;

}



.pcidf-contact-domain strong {

    color: #ffffff;

}



.pcidf-contact-layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 310px;

    gap: 24px;

    align-items: start;

}



.pcidf-contact-form-card {

    min-width: 0;

}



.pcidf-contact-section-head {

    margin-bottom: 26px;

}



.pcidf-contact-section-head .pcidf-kicker {

    margin-bottom: 8px;

}



.pcidf-contact-section-head h2 {

    margin: 0 0 10px;

    color: #ffffff;

    font-size: clamp(28px, 4vw, 42px);

    line-height: 1.12;

    letter-spacing: -0.7px;

}



.pcidf-contact-section-head > p:last-child {

    margin: 0;

    color: var(--pcidf-muted);

}



.pcidf-contact-alert {

    margin: 0 0 24px;

    padding: 17px 19px;

    border-radius: 9px;

}



.pcidf-contact-alert strong {

    display: block;

    margin-bottom: 5px;

    color: #ffffff;

}



.pcidf-contact-alert span {

    display: block;

}



.pcidf-contact-alert ul {

    margin: 10px 0 0;

    padding-left: 20px;

}



.pcidf-contact-alert li {

    margin: 6px 0;

}



.pcidf-contact-success {

    border: 1px solid rgba(82, 196, 126, 0.45);

    background: rgba(82, 196, 126, 0.09);

    color: #d7f3e1;

}



.pcidf-contact-error {

    border: 1px solid rgba(231, 47, 115, 0.55);

    background: rgba(231, 47, 115, 0.09);

    color: #f3d4df;

}



.pcidf-contact-form {

    display: grid;

    gap: 20px;

}



.pcidf-contact-fields-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

}



.pcidf-contact-field {

    min-width: 0;

}



.pcidf-contact-field label {

    display: flex;

    align-items: baseline;

    gap: 6px;

    margin-bottom: 8px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 850;

}



.pcidf-contact-field label > span {

    color: var(--pcidf-pink);

}



.pcidf-contact-field label small {

    color: var(--pcidf-muted-2);

    font-size: 12px;

    font-weight: 600;

}



.pcidf-contact-field input,

.pcidf-contact-field select,

.pcidf-contact-field textarea {

    width: 100%;

    min-width: 0;

    border: 1px solid var(--pcidf-border);

    border-radius: 7px;

    background: #0c1219;

    color: #ffffff;

    font: inherit;

    outline: none;

    transition:

        border-color 0.18s ease,

        box-shadow 0.18s ease,

        background 0.18s ease;

}



.pcidf-contact-field input,

.pcidf-contact-field select {

    min-height: 48px;

    padding: 0 14px;

}



.pcidf-contact-field textarea {

    min-height: 190px;

    padding: 13px 14px;

    line-height: 1.55;

    resize: vertical;

}



.pcidf-contact-field select {

    cursor: pointer;

}



.pcidf-contact-field input::placeholder,

.pcidf-contact-field textarea::placeholder {

    color: #7f8997;

}



.pcidf-contact-field input:focus,

.pcidf-contact-field select:focus,

.pcidf-contact-field textarea:focus {

    border-color: var(--pcidf-pink);

    background: #0f1620;

    box-shadow: 0 0 0 3px rgba(231, 47, 115, 0.13);

}



.pcidf-contact-help {

    display: block;

    margin-top: 7px;

    color: var(--pcidf-muted-2);

    font-size: 12px;

}



.pcidf-contact-consent {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    padding: 14px 15px;

    border: 1px solid var(--pcidf-border);

    border-radius: 7px;

    background: rgba(255, 255, 255, 0.018);

    color: var(--pcidf-muted);

    cursor: pointer;

}



.pcidf-contact-consent input {

    flex: 0 0 auto;

    width: 17px;

    height: 17px;

    margin: 3px 0 0;

    accent-color: var(--pcidf-pink);

}



.pcidf-contact-consent > span {

    line-height: 1.55;

}



.pcidf-contact-consent > span > span {

    color: var(--pcidf-pink);

}



.pcidf-contact-submit-row {

    display: flex;

    align-items: center;

    gap: 18px;

    padding-top: 2px;

}



.pcidf-contact-submit-row .pcidf-btn {

    border: 0;

    cursor: pointer;

    font: inherit;

    font-weight: 900;

}



.pcidf-contact-submit-row p {

    margin: 0;

    color: var(--pcidf-muted-2);

    font-size: 12px;

}



.pcidf-contact-sidebar {

    display: grid;

    gap: 16px;

    position: sticky;

    top: 92px;

}



body.admin-bar .pcidf-contact-sidebar {

    top: 124px;

}



.pcidf-contact-sidebar .pcidf-side-card h2 {

    margin-bottom: 9px;

    font-size: 20px;

}



.pcidf-contact-sidebar .pcidf-side-card p {

    margin-bottom: 0;

}



.pcidf-contact-honeypot {

    position: absolute !important;

    width: 1px !important;

    height: 1px !important;

    overflow: hidden !important;

    clip: rect(1px, 1px, 1px, 1px) !important;

    white-space: nowrap !important;

}



@media (max-width: 920px) {

    .pcidf-contact-layout {

        grid-template-columns: 1fr;

    }



    .pcidf-contact-sidebar,

    body.admin-bar .pcidf-contact-sidebar {

        position: static;

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}



@media (max-width: 720px) {

    .pcidf-contact-fields-grid {

        grid-template-columns: 1fr;

    }



    .pcidf-contact-sidebar,

    body.admin-bar .pcidf-contact-sidebar {

        grid-template-columns: 1fr;

    }



    .pcidf-contact-submit-row {

        align-items: stretch;

        flex-direction: column;

    }



    .pcidf-contact-submit-row .pcidf-btn {

        width: 100%;

        text-align: center;

    }

}



@media (max-width: 580px) {

    .pcidf-contact-hero-points {

        align-items: stretch;

        flex-direction: column;

    }



    .pcidf-contact-hero-points span {

        border-radius: 7px;

    }



    .pcidf-contact-form {

        gap: 18px;

    }



    .pcidf-contact-consent {

        padding: 13px;

    }

}









/* ==========================================================

   CONTACT — CLOUDFLARE TURNSTILE

   À ajouter tout en bas de style.css

   ========================================================== */



.pcidf-contact-turnstile {

    display: grid;

    gap: 13px;

    padding: 16px;

    border: 1px solid var(--pcidf-border);

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.018);

}



.pcidf-contact-turnstile-head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

}



.pcidf-contact-turnstile-head strong {

    color: #ffffff;

    font-size: 14px;

}



.pcidf-contact-turnstile-head strong span {

    margin-left: 3px;

    color: var(--pcidf-pink);

}



.pcidf-contact-turnstile-head > span {

    color: var(--pcidf-muted-2);

    font-size: 12px;

}



.pcidf-contact-turnstile .cf-turnstile {

    width: 100%;

    min-height: 65px;

}



.pcidf-contact-turnstile .cf-turnstile iframe {

    max-width: 100%;

}



.pcidf-contact-turnstile-warning {

    margin: 0;

    padding: 12px 14px;

    border: 1px solid rgba(231, 47, 115, 0.48);

    border-radius: 7px;

    background: rgba(231, 47, 115, 0.08);

    color: #f1d4de;

    font-size: 13px;

}



.pcidf-contact-submit-row .pcidf-btn:disabled {

    cursor: not-allowed;

    opacity: 0.55;

    box-shadow: none;

}



@media (max-width: 580px) {

    .pcidf-contact-turnstile-head {

        align-items: flex-start;

        flex-direction: column;

        gap: 3px;

    }

}











/* ==========================================================

   PAGE 404

   À ajouter tout en bas de style.css

   ========================================================== */



.pcidf-404-page {

    min-height: 70vh;

}



.pcidf-404-section {

    padding-top: 48px;

    padding-bottom: 52px;

}



.pcidf-404-card {

    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);

    gap: 24px;

    padding: 28px;

    border: 1px solid var(--pcidf-border);

    border-radius: 12px;

    background:

        radial-gradient(

            circle at 15% 10%,

            rgba(231, 47, 115, 0.12),

            transparent 34%

        ),

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.035),

            rgba(255, 255, 255, 0.012)

        ),

        var(--pcidf-card);

    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);

}



.pcidf-404-content {

    min-width: 0;

    padding: 12px 10px 12px 4px;

}



.pcidf-404-code {

    margin: 10px 0 -4px;

    color: var(--pcidf-pink);

    font-size: clamp(72px, 13vw, 150px);

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -7px;

    opacity: 0.95;

}



.pcidf-404-content h1 {

    margin: 18px 0 14px;

    color: #ffffff;

    font-size: clamp(34px, 5vw, 58px);

    line-height: 1.04;

    letter-spacing: -1.4px;

}



.pcidf-404-intro {

    max-width: 730px;

    margin: 0;

    color: var(--pcidf-muted);

    font-size: 17px;

    line-height: 1.7;

}



.pcidf-404-search {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    gap: 10px;

    margin-top: 26px;

}



.pcidf-404-search input {

    width: 100%;

    min-width: 0;

    min-height: 48px;

    padding: 0 15px;

    border: 1px solid var(--pcidf-border);

    border-radius: 6px;

    background: #0b1118;

    color: #ffffff;

    font: inherit;

    outline: none;

}



.pcidf-404-search input::placeholder {

    color: #788391;

}



.pcidf-404-search input:focus {

    border-color: var(--pcidf-pink);

    box-shadow: 0 0 0 3px rgba(231, 47, 115, 0.13);

}



.pcidf-404-help {

    min-width: 0;

    padding: 24px;

    border: 1px solid var(--pcidf-border);

    border-radius: 10px;

    background: rgba(6, 10, 15, 0.68);

}



.pcidf-404-help .pcidf-card-title {

    margin-bottom: 16px;

}



.pcidf-404-links {

    display: grid;

    gap: 11px;

}



.pcidf-404-links a {

    display: block;

    padding: 15px 16px;

    border: 1px solid var(--pcidf-border);

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.024);

    transition:

        border-color 0.18s ease,

        background 0.18s ease,

        transform 0.18s ease;

}



.pcidf-404-links a:hover,

.pcidf-404-links a:focus-visible {

    border-color: var(--pcidf-pink);

    background: rgba(231, 47, 115, 0.07);

    transform: translateY(-1px);

}



.pcidf-404-links strong {

    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-size: 15px;

}



.pcidf-404-links span {

    display: block;

    color: var(--pcidf-muted);

    font-size: 13px;

    line-height: 1.55;

}



.pcidf-screen-reader-text {

    position: absolute !important;

    width: 1px !important;

    height: 1px !important;

    padding: 0 !important;

    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;

}



@media (max-width: 920px) {

    .pcidf-404-card {

        grid-template-columns: 1fr;

    }



    .pcidf-404-content {

        padding-right: 4px;

    }

}



@media (max-width: 640px) {

    .pcidf-404-section {

        padding-top: 28px;

        padding-bottom: 34px;

    }



    .pcidf-404-card {

        gap: 18px;

        padding: 19px;

    }



    .pcidf-404-code {

        letter-spacing: -4px;

    }



    .pcidf-404-content h1 {

        font-size: 36px;

    }



    .pcidf-404-intro {

        font-size: 15px;

    }



    .pcidf-404-search {

        grid-template-columns: 1fr;

    }



    .pcidf-404-search .pcidf-btn {

        width: 100%;

    }



    .pcidf-404-help {

        padding: 18px;

    }

}









/* ==========================================================

   VISUELS DES VILLES — PHOTO + FALLBACKS

   À ajouter tout en bas de style.css

   ========================================================== */



/*

 * L'ancien CSS écrivait "PARIS" dans le pseudo-élément de toutes

 * les villes sans photo. On le neutralise définitivement.

 */

.pcidf-city-visual-fallback::after {

    content: none !important;

}



.pcidf-city-visual {

    isolation: isolate;

}



.pcidf-city-visual::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:

        linear-gradient(

            180deg,

            rgba(4, 8, 13, 0.02) 34%,

            rgba(4, 8, 13, 0.88) 100%

        );

}



.pcidf-city-visual img {

    position: relative;

    z-index: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.pcidf-city-visual-caption {

    position: absolute;

    right: 18px;

    bottom: 16px;

    left: 18px;

    z-index: 3;

    display: grid;

    gap: 3px;

}



.pcidf-city-visual-caption strong {

    overflow: hidden;

    color: #ffffff;

    font-size: clamp(22px, 3vw, 31px);

    font-weight: 950;

    line-height: 1.05;

    letter-spacing: -0.7px;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);

}



.pcidf-city-visual-caption span {

    color: rgba(255, 255, 255, 0.8);

    font-size: 12px;

    font-weight: 800;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);

}



.pcidf-city-visual-badge {

    position: absolute;

    top: 13px;

    right: 13px;

    z-index: 4;

    max-width: calc(100% - 26px);

    padding: 7px 10px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 999px;

    background: rgba(5, 9, 14, 0.72);

    color: rgba(255, 255, 255, 0.84);

    font-size: 11px;

    font-weight: 850;

    line-height: 1;

    text-overflow: ellipsis;

    white-space: nowrap;

    backdrop-filter: blur(7px);

}



.pcidf-city-placeholder {

    position: absolute;

    inset: 0;

    z-index: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 7px;

    padding: 28px 28px 72px;

    text-align: center;

}



.pcidf-city-placeholder-code {

    color: rgba(255, 255, 255, 0.12);

    font-size: clamp(64px, 10vw, 112px);

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -6px;

}



.pcidf-city-placeholder-department {

    display: block;

    max-width: 92%;

    overflow: hidden;

    color: rgba(255, 255, 255, 0.90);

    font-size: clamp(17px, 2.2vw, 24px);

    font-weight: 900;

    line-height: 1.1;

    text-align: center;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);

}



.pcidf-city-placeholder small {

    color: rgba(255, 255, 255, 0.62);

    font-size: 12px;

    font-weight: 750;

    letter-spacing: 0.2px;

}



/*

 * Une ambiance différente par département lorsque la ville ne possède

 * encore aucune photo dédiée.

 */

.pcidf-city-visual-fallback.pcidf-city-visual-dept-75 {

    background:

        radial-gradient(circle at 74% 24%, rgba(231, 47, 115, 0.34), transparent 34%),

        linear-gradient(145deg, #24111b, #080a0e);

}



.pcidf-city-visual-fallback.pcidf-city-visual-dept-77 {

    background:

        radial-gradient(circle at 72% 25%, rgba(126, 92, 230, 0.30), transparent 36%),

        linear-gradient(145deg, #171329, #080a0f);

}



.pcidf-city-visual-fallback.pcidf-city-visual-dept-78 {

    background:

        radial-gradient(circle at 70% 28%, rgba(195, 82, 151, 0.29), transparent 35%),

        linear-gradient(145deg, #241423, #080a0e);

}



.pcidf-city-visual-fallback.pcidf-city-visual-dept-91 {

    background:

        radial-gradient(circle at 72% 25%, rgba(93, 119, 224, 0.30), transparent 36%),

        linear-gradient(145deg, #121a2b, #080a0f);

}



.pcidf-city-visual-fallback.pcidf-city-visual-dept-92 {

    background:

        radial-gradient(circle at 74% 24%, rgba(231, 47, 115, 0.31), transparent 35%),

        linear-gradient(145deg, #22121c, #080a0e);

}



.pcidf-city-visual-fallback.pcidf-city-visual-dept-93 {

    background:

        radial-gradient(circle at 72% 25%, rgba(213, 70, 115, 0.31), transparent 35%),

        linear-gradient(145deg, #25131a, #080a0e);

}



.pcidf-city-visual-fallback.pcidf-city-visual-dept-94 {

    background:

        radial-gradient(circle at 72% 24%, rgba(166, 72, 184, 0.29), transparent 36%),

        linear-gradient(145deg, #211427, #080a0f);

}



.pcidf-city-visual-fallback.pcidf-city-visual-dept-95 {

    background:

        radial-gradient(circle at 72% 24%, rgba(198, 69, 131, 0.31), transparent 36%),

        linear-gradient(145deg, #25131e, #080a0e);

}



@media (max-width: 580px) {

    .pcidf-city-visual-caption {

        right: 14px;

        bottom: 13px;

        left: 14px;

    }



    .pcidf-city-visual-caption strong {

        font-size: 23px;

    }



    .pcidf-city-visual-badge {

        top: 10px;

        right: 10px;

        padding: 6px 8px;

        font-size: 10px;

    }



    .pcidf-city-placeholder {

        padding: 20px 20px 68px;

    }



    .pcidf-city-placeholder-code {

        letter-spacing: -4px;

    }

}













/* ==========================================================

   TABLEAU RESPONSIVE — ARTICLES / GUIDES

   ========================================================== */



.pcidf-guide-table-wrap {

    width: 100%;

    margin: 28px 0 34px;

    overflow-x: auto;

    border: 1px solid var(--pcidf-border);

    border-radius: 10px;

    background: var(--pcidf-card-2);

}



.pcidf-guide-table {

    width: 100%;

    min-width: 760px;

    margin: 0;

    border-collapse: collapse;

}



.pcidf-guide-table th,

.pcidf-guide-table td {

    padding: 15px 16px;

    border-right: 1px solid var(--pcidf-border);

    border-bottom: 1px solid var(--pcidf-border);

    text-align: left;

    vertical-align: top;

}



.pcidf-guide-table th {

    background: rgba(231, 47, 115, 0.12);

    color: #ffffff;

    font-size: 14px;

    line-height: 1.35;

}



.pcidf-guide-table td {

    color: var(--pcidf-muted);

    font-size: 14px;

    line-height: 1.55;

}



.pcidf-guide-table th:last-child,

.pcidf-guide-table td:last-child {

    border-right: 0;

}



.pcidf-guide-table tr:last-child td {

    border-bottom: 0;

}



.pcidf-guide-table tbody tr:hover {

    background: rgba(255, 255, 255, 0.025);

}



@media (max-width: 680px) {

    .pcidf-guide-table-wrap {

        overflow: visible;

        border: 0;

        border-radius: 0;

        background: transparent;

    }



    .pcidf-guide-table {

        min-width: 0;

        background: transparent;

    }



    .pcidf-guide-table thead {

        position: absolute;

        width: 1px;

        height: 1px;

        overflow: hidden;

        clip: rect(0 0 0 0);

        white-space: nowrap;

    }



    .pcidf-guide-table,

    .pcidf-guide-table tbody,

    .pcidf-guide-table tr,

    .pcidf-guide-table td {

        display: block;

        width: 100%;

    }



    .pcidf-guide-table tr {

        margin-bottom: 15px;

        overflow: hidden;

        border: 1px solid var(--pcidf-border);

        border-radius: 10px;

        background: var(--pcidf-card-2);

    }



    .pcidf-guide-table td {

        display: grid;

        grid-template-columns: 92px minmax(0, 1fr);

        gap: 13px;

        padding: 13px 15px;

        border-right: 0;

        border-bottom: 1px solid var(--pcidf-border);

    }



    .pcidf-guide-table td::before {

        content: attr(data-label);

        color: var(--pcidf-pink);

        font-size: 11px;

        font-weight: 950;

        line-height: 1.4;

        text-transform: uppercase;

    }



    .pcidf-guide-table tr:last-child td,

    .pcidf-guide-table td:last-child {

        border-bottom: 0;

    }

}







/* Liens autres villes — pages ville */



.pcidf-city-sidebar .pcidf-side-card:last-child ul {

    margin: 4px 0 16px;

    padding: 0;

    list-style: none;

}



.pcidf-city-sidebar .pcidf-side-card:last-child ul li {

    margin: 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.09);

}



.pcidf-city-sidebar .pcidf-side-card:last-child ul li:last-child {

    border-bottom: 0;

}



.pcidf-city-sidebar .pcidf-side-card:last-child ul .pcidf-small-link {

    display: block;

    padding: 10px 3px;

    color: #f2f4f7;

    font-weight: 600;

    line-height: 1.35;

    text-align: left;

    text-decoration: none;

}



.pcidf-city-sidebar .pcidf-side-card:last-child ul .pcidf-small-link::before {

    content: "›";

    margin-right: 8px;

    color: #ed2f79;

    font-size: 18px;

}



.pcidf-city-sidebar .pcidf-side-card:last-child ul .pcidf-small-link:hover {

    color: #ed2f79;

}



/* Lien Voir toutes les villes */



.pcidf-city-sidebar .pcidf-side-card:last-child > .pcidf-small-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 4px;

    padding: 9px 13px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.05);

    color: #f2f4f7;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

}



.pcidf-city-sidebar .pcidf-side-card:last-child > .pcidf-small-link::after {

    content: "→";

    margin-left: 6px;

}



.pcidf-city-sidebar .pcidf-side-card:last-child > .pcidf-small-link:hover {

    border-color: #ed2f79;

    background: rgba(237, 47, 121, 0.09);

    color: #ffffff;

}

/* ==========================================================
   HEADER MOBILE — NAVIGATION SANS DÉBORDEMENT
   Correction du bouton d'annonces et suppression du scroll horizontal.
   ========================================================== */

@media (max-width: 580px) {

    .pcidf-header-inner {
        position: relative;
        min-height: 0;
        align-items: stretch;
        gap: 12px;
        padding: 12px 0 10px;
    }

    .pcidf-logo {
        min-width: 0;
        padding-right: 104px;
    }

    .pcidf-logo-main {
        font-size: 20px;
        line-height: 1;
        letter-spacing: -0.45px;
        white-space: nowrap;
    }

    .pcidf-logo-sub {
        margin-top: 5px;
        font-size: 10px;
    }

    .pcidf-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        gap: 0;
        padding: 0;
        overflow: visible;
        font-size: 11px;
    }

    .pcidf-nav > a:not(.pcidf-nav-cta) {
        min-width: 0;
        padding: 6px 2px;
        line-height: 1.1;
        text-align: center;
        white-space: nowrap;
    }

    .pcidf-nav-cta {
        position: absolute;
        top: 12px;
        right: 0;
        display: inline-flex;
        width: auto;
        min-width: 0;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        border-radius: 6px;
        box-shadow: 0 6px 16px rgba(231, 47, 115, 0.28);
        font-size: 0;
        line-height: 1;
        white-space: nowrap;
    }

    .pcidf-nav-cta::before {
        margin-right: 5px;
        font-size: 11px;
    }

    .pcidf-nav-cta::after {
        content: "ANNONCES";
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.15px;
    }
}

@media (max-width: 380px) {

    .pcidf-logo {
        padding-right: 94px;
    }

    .pcidf-logo-main {
        font-size: 18px;
    }

    .pcidf-logo-sub {
        font-size: 9px;
    }

    .pcidf-nav {
        font-size: 10px;
    }

    .pcidf-nav-cta {
        padding: 7px 8px;
    }

    .pcidf-nav-cta::after {
        font-size: 9px;
    }
}

/* ==========================================================
   ACCUEIL — PHOTO D'AMBIANCE DANS "RECHERCHE LOCALE"
   Ciblage volontairement limité à la carte de l'accueil.
   ========================================================== */

.pcidf-home-local-card {
    background-color: var(--pcidf-card-2);
    background-image: url("assets/images/plan-cul-paris-ile-de-france-75.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    isolation: isolate;
}

/*
 * Voile sombre : la photo reste visible sans sacrifier la lisibilité.
 * Le dégradé protège surtout le titre, le texte et les compteurs.
 */
.pcidf-home-local-card::before {
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgba(5, 9, 14, 0.76) 0%,
            rgba(5, 9, 14, 0.64) 42%,
            rgba(5, 9, 14, 0.80) 100%
        ),
        linear-gradient(
            90deg,
            rgba(5, 9, 14, 0.70) 0%,
            rgba(5, 9, 14, 0.46) 54%,
            rgba(5, 9, 14, 0.30) 100%
        );
}

.pcidf-home-local-card .pcidf-card-title {
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85);
}

.pcidf-home-local-card > p:not(.pcidf-card-title) {
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.88);
}

.pcidf-home-local-card .pcidf-mini-stats span {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(5, 9, 14, 0.68);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(3px);
}

@media (max-width: 920px) {
    .pcidf-home-local-card {
        min-height: 330px;
        background-position: center 42%;
    }
}

@media (max-width: 580px) {
    .pcidf-home-local-card {
        min-height: 365px;
        background-position: 56% center;
    }

    .pcidf-home-local-card::before {
        background:
            linear-gradient(
                180deg,
                rgba(5, 9, 14, 0.74) 0%,
                rgba(5, 9, 14, 0.56) 38%,
                rgba(5, 9, 14, 0.86) 100%
            );
    }
}