/* ═════════════════════════════════════════════════════════════════════════
 *  COWORKEA pSéo — CSS pixel-perfect du template "Coworkea"
 *  Fichier édité MANUELLEMENT, chargé par le plugin via wp_enqueue_style
 *  UNIQUEMENT sur les pages pSéo singulières avec le template Coworkea actif.
 *
 *  Scope : `.cw-pseo` et descendants (templates/single-page_pseo-coworkea.php).
 *  Cohabite avec coworkea-pseo.css (neutre, scopé `.coworkea-pseo-*`).
 *
 *  ⚠️ NE PAS éditer le PHP pour modifier le rendu visuel — tout est ici.
 * ════════════════════════════════════════════════════════════════════════ */

/* ═══ Tokens design Coworkea ═══════════════════════════════════════════════ */
.cw-pseo {
    --cw-c-black:        #000;
    --cw-c-yellow:       #FCC300;
    --cw-c-yellow-soft:  #FFF6D5;
    --cw-c-yellow-dark:  #E7A105;
    --cw-c-border:       #D9D9D9;
    --cw-c-white:        #FFF;
    --cw-c-muted:        #555;
    --cw-c-bg-soft:      #F7F7F7;

    --cw-f-display:      "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
    --cw-f-body:         "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --cw-fs-h1:          36px;
    --cw-fs-h2:          32px;
    --cw-fs-h3:          18px;
    --cw-fs-over:        22px;
    --cw-fs-intro:       16px;
    --cw-fs-body:        16px;

    --cw-radius-card:    16px;
    --cw-radius-faq:     8px;
    --cw-radius-icon:    12px;
    --cw-shadow-card:    0 0 8px 0 rgba(0,0,0,.15);

    --cw-container:      1650px;
    --cw-pad-x:          clamp(1rem, 3vw, 2rem);
    --cw-gap-section:    clamp(2.5rem, 5vw, 4rem);
}

/* ═══ Reset & base ═════════════════════════════════════════════════════════ */
.cw-pseo,
.cw-pseo * { box-sizing: border-box; }
.cw-pseo {
    max-width: var(--cw-container);
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3rem) var(--cw-pad-x) clamp(3rem, 5vw, 4rem);
    color: var(--cw-c-black);
    font-family: var(--cw-f-display);
    font-size: var(--cw-fs-body);
    line-height: 1.5;
}
.cw-pseo > * + * { margin-top: var(--cw-gap-section); }

/* ═══ Force typo sur ce wrapper (battre les thèmes monospace) ════════════
 * Open Sans pour le corps, Raleway pour les titres + éléments structurants. */
.cw-pseo,
.cw-pseo *:not(input):not(textarea):not(select):not(code):not(pre):not(kbd):not(samp) {
    font-family: var(--cw-f-display) !important;
}
.cw-pseo__intro-p,
.cw-pseo__editorial-p,
.cw-pseo__why-image-credit,
.cw-pseo__faq-a p {
    font-family: var(--cw-f-body) !important;
}

/* ═══ Hero (H1 + intro 2 colonnes) ═════════════════════════════════════════ */
.cw-pseo__hero {
    margin: 0;
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.cw-pseo__hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.cw-pseo__hero-left { display: flex; flex-direction: column; gap: 1rem; }
.cw-pseo__overtitle.cw-pseo__hero-overtitle {
    margin: 0;
    color: var(--cw-c-yellow-dark);
    font-family: var(--cw-f-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
}
.cw-pseo__h1 {
    margin: 0;
    color: var(--cw-c-black);
    font-family: var(--cw-f-display);
    font-size: var(--cw-fs-h1);
    font-weight: 700;
    line-height: 1.15;
}
.cw-pseo__hero-right { display: flex; flex-direction: column; gap: 1rem; }
.cw-pseo__intro-p {
    margin: 0;
    color: var(--cw-c-black);
    font-family: var(--cw-f-body);
    font-size: var(--cw-fs-intro);
    font-weight: 400;
    line-height: 1.55;
}

/* ═══ Navigation retours (hub / index) ════════════════════════════════════ */
.cw-pseo__hero-left .coworkea-pseo-retour-hub,
.cw-pseo__hero-left .coworkea-pseo-retour-index {
    margin: 0;
    font-family: var(--cw-f-body);
    font-size: 14px;
    opacity: .7;
}
.cw-pseo__hero-left .coworkea-pseo-retour-hub a,
.cw-pseo__hero-left .coworkea-pseo-retour-index a {
    color: var(--cw-c-black);
    text-decoration: none;
}
.cw-pseo__hero-left .coworkea-pseo-retour-hub a:hover,
.cw-pseo__hero-left .coworkea-pseo-retour-index a:hover { text-decoration: underline; }

/* ═══ Map ASL — pleine largeur ════════════════════════════════════════════ */
.cw-pseo__map {
    width: 100vw;
    margin-top: var(--cw-gap-section);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 16px;
}
.cw-pseo__map > * { width: 100%; max-width: 100%; }

/* ═══ Section Pourquoi louer ══════════════════════════════════════════════ */
.cw-pseo__why {
    padding-bottom: clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--cw-c-border);
}
.cw-pseo__why-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 3fr)
        minmax(0, 0.6fr)
        minmax(0, 3fr)
        minmax(0, 0.6fr)
        minmax(0, 3fr);
    gap: 0;
    align-items: start;
}
.cw-pseo__why-left      { grid-column: 1; }
.cw-pseo__why-editorial { grid-column: 3; }
.cw-pseo__why-media     { grid-column: 5; }
.cw-pseo__overtitle {
    margin: 0 0 .5rem;
    color: var(--cw-c-yellow);
    font-family: var(--cw-f-display);
    font-size: var(--cw-fs-over);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cw-pseo__h2 {
    margin: 0 0 1.5rem;
    color: var(--cw-c-black);
    font-family: var(--cw-f-display);
    font-size: var(--cw-fs-h2);
    font-weight: 700;
    line-height: 1.2;
}
.cw-pseo__arguments {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.cw-pseo__argument {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 1rem;
    align-items: start;
}
.cw-pseo__argument-icon {
    display: flex;
    width: 70px;
    height: 70px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: var(--cw-c-yellow-soft);
    border-radius: var(--cw-radius-icon);
}
.cw-pseo__argument-icon svg { width: 100%; height: auto; max-width: 50px; }
.cw-pseo__argument-body { display: flex; flex-direction: column; gap: .35rem; }
.cw-pseo__argument-titre {
    margin: 0;
    color: var(--cw-c-black);
    font-family: var(--cw-f-display);
    font-size: var(--cw-fs-h3);
    font-weight: 700;
    line-height: 1.3;
}
.cw-pseo__argument-desc {
    margin: 0;
    color: var(--cw-c-black);
    font-family: var(--cw-f-display);
    font-size: var(--cw-fs-body);
    font-weight: 400;
    line-height: 24px;
}

.cw-pseo__why-editorial,
.cw-pseo__why-media { display: flex; flex-direction: column; gap: 1rem; }
.cw-pseo__editorial-p {
    margin: 0;
    color: var(--cw-c-black);
    font-family: var(--cw-f-display);
    font-size: var(--cw-fs-body);
    font-weight: 400;
    line-height: 24px;
}
.cw-pseo__why-image { margin: 0; }
.cw-pseo__why-image-el {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--cw-radius-card);
}
.cw-pseo__why-image-credit {
    margin-top: .5rem;
    font-family: var(--cw-f-body);
    font-size: 13px;
    color: var(--cw-c-muted);
}
.cw-pseo__why-image-credit a { color: inherit; text-decoration: underline; }

/* ═══ Section FAQ ══════════════════════════════════════════════════════════ */
.cw-pseo__faq-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
}
.cw-pseo__faq-left .cw-pseo__h2 { margin-bottom: 0; }
.cw-pseo__faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cw-pseo__faq-item {
    border-radius: var(--cw-radius-faq);
    border: 1px solid var(--cw-c-border);
    background: var(--cw-c-white);
}
.cw-pseo__faq-item details { padding: 1rem 1.25rem; }
.cw-pseo__faq-q {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    color: var(--cw-c-black);
    font-family: var(--cw-f-display);
    font-size: var(--cw-fs-body);
    font-weight: 700;
    line-height: 1.4;
}
.cw-pseo__faq-q::-webkit-details-marker { display: none; }
.cw-pseo__faq-q::after {
    content: '';
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--cw-c-yellow);
    border-bottom: 2px solid var(--cw-c-yellow);
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.cw-pseo__faq-item details[open] .cw-pseo__faq-q::after {
    transform: rotate(-135deg);
}
.cw-pseo__faq-a { padding-top: .75rem; }
.cw-pseo__faq-a p {
    margin: 0;
    color: var(--cw-c-black);
    font-family: var(--cw-f-display);
    font-size: var(--cw-fs-body);
    font-weight: 400;
    line-height: 24px;
}

/* ═══ Section Voir aussi ══════════════════════════════════════════════════ */
.cw-pseo__related { margin-top: var(--cw-gap-section); }
.cw-pseo__related-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}
.cw-pseo__related-header { padding-top: 1rem; }
.cw-pseo__related-header .cw-pseo__h2 { margin-bottom: 0; line-height: 1.15; }
.cw-pseo__related-cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
.cw-pseo__related-card {
    border-radius: var(--cw-radius-card);
    background: var(--cw-c-white);
    box-shadow: var(--cw-shadow-card);
    transition: transform .15s ease, box-shadow .15s ease;
}
.cw-pseo__related-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px 0 rgba(0,0,0,.18);
}
.cw-pseo__related-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.75rem 1.75rem calc(1.75rem + 31px + 1rem);
    color: var(--cw-c-black);
    text-decoration: none;
    height: 100%;
    min-height: 200px;
    position: relative;
}
.cw-pseo__related-icon {
    display: inline-flex;
    width: 70px;
    height: 70px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: var(--cw-c-yellow);
    border-radius: var(--cw-radius-icon);
}
.cw-pseo__related-icon svg { width: 40px; height: 40px; }
.cw-pseo__related-text {
    font-family: var(--cw-f-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--cw-c-black);
}
.cw-pseo__related-arrow {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    display: inline-flex;
    width: 31px;
    height: 31px;
    justify-content: center;
    align-items: center;
    transition: transform .15s ease;
}
.cw-pseo__related-arrow svg { width: 100%; height: 100%; }
.cw-pseo__related-link:hover .cw-pseo__related-arrow { transform: translateX(3px); }

/* ═══ Maillage arrondissements — pills horizontales discrètes ════════════
 * Cocon Phase 1 : 2-3 liens vers les pages arrondissements (PageRank).
 * Style sobre = un titre eyebrow + pills inline, peu envahissant. */
.cw-pseo + .coworkea-pseo-arrondissements,
.cw-pseo .coworkea-pseo-arrondissements {
    margin-top: var(--cw-gap-section);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--cw-c-border);
    font-family: var(--cw-f-display);
}
.cw-pseo .coworkea-pseo-arrondissements__titre,
.cw-pseo + .coworkea-pseo-arrondissements .coworkea-pseo-arrondissements__titre {
    margin: 0 0 1rem;
    color: var(--cw-c-yellow-dark);
    font-family: var(--cw-f-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0;
}
.cw-pseo .coworkea-pseo-arrondissements__liste,
.cw-pseo + .coworkea-pseo-arrondissements .coworkea-pseo-arrondissements__liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}
.cw-pseo .coworkea-pseo-arrondissements__item,
.cw-pseo + .coworkea-pseo-arrondissements .coworkea-pseo-arrondissements__item {
    margin: 0;
}
.cw-pseo .coworkea-pseo-arrondissements__item a,
.cw-pseo + .coworkea-pseo-arrondissements .coworkea-pseo-arrondissements__item a {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1rem;
    border: 1px solid var(--cw-c-border);
    border-radius: 999px;
    color: var(--cw-c-black);
    text-decoration: none;
    font-family: var(--cw-f-display);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    transition: border-color .15s ease, background .15s ease;
}
.cw-pseo .coworkea-pseo-arrondissements__item a:hover,
.cw-pseo + .coworkea-pseo-arrondissements .coworkea-pseo-arrondissements__item a:hover {
    border-color: var(--cw-c-yellow);
    background: var(--cw-c-yellow-soft);
}

/* ═══ Lien retour final ═══════════════════════════════════════════════════ */
.cw-pseo__back {
    margin-top: var(--cw-gap-section);
    padding-top: 1.5rem;
    border-top: 1px solid var(--cw-c-border);
    font-family: var(--cw-f-display);
    font-size: var(--cw-fs-body);
}
.cw-pseo__back a {
    color: var(--cw-c-black);
    font-weight: 700;
    text-decoration: none;
}
.cw-pseo__back a:hover { color: var(--cw-c-yellow-dark); }

/* ═══ Agile Store Locator — masquage agressif search + filter ═════════════ */
#asl-storelocator .Filter_section,
#asl-storelocator .search_filter,
#asl-storelocator .sl-filter-sec,
#asl-storelocator .asl-search,
#asl-storelocator .asl-sf,
#asl-storelocator .asl-cb,
#asl-storelocator .cl-options,
#asl-storelocator .asl-categories,
#asl-storelocator .asl_categories,
#asl-storelocator .asl-search-section,
#asl-storelocator .asl-search-bar,
#asl-storelocator .asl-search-form,
.asl_w .Filter_section,
.asl_w .search_filter,
.asl_w .asl-search,
.asl_w .asl-sf,
.asl_w .asl-cb,
.asl_w .asl-categories {
    display: none !important;
}

/* ═══ Responsive ═══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
    .cw-pseo__why-grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }
    .cw-pseo__why-left      { grid-column: 1; }
    .cw-pseo__why-editorial { grid-column: 2; }
    .cw-pseo__why-media     { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
    .cw-pseo__faq-grid { grid-template-columns: 1fr; }
    .cw-pseo__related-grid { grid-template-columns: 1fr; }
    .cw-pseo__related-header { padding-top: 0; }
    .cw-pseo__related-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .cw-pseo { --cw-fs-h1: 28px; --cw-fs-h2: 24px; --cw-fs-over: 18px; --cw-fs-intro: 16px; }
    .cw-pseo__hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .cw-pseo__why-grid  { grid-template-columns: 1fr; gap: 1.5rem; }
    .cw-pseo__why-left,
    .cw-pseo__why-editorial,
    .cw-pseo__why-media { grid-column: auto; }
    .cw-pseo__argument { grid-template-columns: 56px 1fr; gap: .75rem; }
    .cw-pseo__argument-icon { width: 56px; height: 56px; padding: 6px; }
    .cw-pseo__related-cards { grid-template-columns: 1fr; }
}