/* ============================================
   Ansas Papillon — Couche responsive
   Chargée APRÈS style.css et les <style> des gabarits
   (voir le <link> en fin de header.php, après do_action('apl_head')),
   afin de pouvoir corriger les grilles déclarées
   en ligne dans chaque gabarit.
   Breakpoints : 1024 (nav) · 900 (tablette) · 620 (mobile)
   ============================================ */

/* Garde-fou : plus aucun débordement horizontal.
   `clip` (et non `hidden`) pour ne pas casser le position:sticky de la nav. */
html { overflow-x: clip; }

/* ============================================
   NAV MOBILE — burger + panneau
   ============================================ */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
body.nav-is-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-is-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-is-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--bg);
  max-height: calc(100vh - var(--nav-h, 66px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile-inner { padding: 18px var(--gutter) 30px; }
.nm-links { display: flex; flex-direction: column; }
.nm-link,
.nm-group-label {
  display: block;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.nm-link.active { color: var(--gold-deep); }
.nm-group-label {
  color: var(--ink-mute);
  font-size: 17px;
  font-style: italic;
  border-bottom: none;
  padding: 12px 0 2px;
}
.nm-sub {
  display: flex;
  flex-direction: column;
  padding: 0 0 10px 16px;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-left: 2px;
}
.nm-sub a {
  padding: 8px 0;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.nm-sub a.active { color: var(--gold-deep); }
.nm-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 22px;
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: #fff;
}
.nm-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.nm-contact a { color: var(--ink-soft); }

/* Dropdown "Lecture" ouvrable au clic (tactile) */
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(5px);
}
.nav-dropdown.is-open .nav-caret { transform: translateY(0) rotate(225deg); }

/* Popins d'info (badges SFEP / CEEA) ouvrables au tap. Hors media query :
   au-dessus de 620px il y a aussi des écrans tactiles (tablettes), où le
   survol n'existe pas et la popin serait donc inatteignable. */
.badge-info.is-open .info-pop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 1024px) {
  .nav-inner {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 14px var(--gutter);
  }
  .nav-side { display: none; }
  .nav-burger { display: flex; }
  .nav-brand {
    display: grid;
    grid-template-columns: auto minmax(0, auto);
    align-items: center;
    column-gap: 12px;
    padding: 0;
    justify-self: start;
    text-align: left;
  }
  /* le thème rend un <img class="brand-logo">, la maquette un monogramme
     texte .brand-mark : les deux occupent la même case de grille. */
  .nav-brand .brand-mark,
  .nav-brand .brand-logo {
    grid-row: 1 / span 2;
    width: 38px; height: 38px;
    font-size: 15px;
    margin-bottom: 0;
  }
  .nav-brand .brand-name {
    grid-column: 2;
    align-self: end;
    font-size: 17px;
    margin-bottom: 2px;
  }
  .nav-brand .brand-sub { grid-column: 2; align-self: start; font-size: 7.5px; }
  .nav-mobile { display: block; }
  .nav-mobile[hidden] { display: none; }
  /* Verrou de défilement. `overflow: hidden` seul ne suffit pas : le corps
     reste scrollé, et surtout la nav en `position: sticky` perd son ancrage
     dès que son conteneur ne défile plus — elle repart se placer en haut du
     document, hors de l'écran si on avait défilé. On fige donc le corps à sa
     position courante (top négatif posé par le JS) et on passe la nav en
     `fixed`, seule position qui reste solidaire de l'écran. */
  body.nav-is-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }
  /* le menu ouvert passe devant le bandeau cookies (z-index 80) */
  body.nav-is-open .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
}

/* Sous ~560px la baseline ne tient plus à côté du burger : on la retire
   plutôt que de la laisser se couper. */
@media (max-width: 560px) {
  .nav-brand { grid-template-rows: auto; }
  .nav-brand .brand-mark,
  .nav-brand .brand-logo { grid-row: 1; }
  .nav-brand .brand-sub { display: none; }
  .nav-brand .brand-name { align-self: center; margin-bottom: 0; }
}
@media (max-width: 420px) {
  .nav-brand .brand-name { font-size: 15px; }
  .nav-brand .brand-mark,
  .nav-brand .brand-logo { width: 34px; height: 34px; font-size: 13px; }
}

/* ============================================
   TABLETTE — ≤ 900px
   ============================================ */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; gap: 32px; }

  .section, .section-full { padding: 64px var(--gutter); }
  .section-tight { padding: 44px var(--gutter); }

  .section-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
    margin-bottom: 36px;
  }

  .footer { padding: 60px var(--gutter) 28px; margin-top: 80px; }
  .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 40px; padding-bottom: 44px; }
}

/* ============================================
   MOBILE — ≤ 620px
   ============================================ */
@media (max-width: 620px) {
  html, body { font-size: 15px; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 28px; }

  .section, .section-full { padding: 48px var(--gutter); }
  .section-tight { padding: 34px var(--gutter); }
  .section-head h2 { font-size: clamp(30px, 9vw, 40px); }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr !important; gap: 34px; }
  .footer-brand { font-size: 26px; }
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: left;
    line-height: 1.6;
  }
  .footer-zones { margin-top: 36px; }
  .footer-zones .fz-links { gap: 8px 18px; }

  /* Boutons : pleine largeur, cible tactile confortable */
  .btn { padding: 14px 20px; font-size: 11px; letter-spacing: 0.14em; }

  /* Bandeau cookies */
  .cookie-inner { padding: 18px var(--gutter); }
  .cookie-text p { font-size: 12.5px; }

  /* Popin d'info : voir plus bas, elle passe en feuille ancrée en bas d'écran */
}

/* ============================================
   PAGES SEO LOCALES (.lp-*)
   ============================================ */
@media (max-width: 620px) {
  .lp-hero { padding: 44px var(--gutter) 36px; }
  .lp-deck { font-size: 16px; margin-top: 20px; }
  .lp-badges { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 26px; }
  .lp-badges > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .lp-badges > div:nth-child(2n) { border-right: none; }
  .lp-badges .v { font-size: 17px; }
  .lp-wrap { padding: 40px var(--gutter) 12px; }
  .lp-section { margin-bottom: 40px; }
  .lp-section p, .lp-section li { font-size: 15px; line-height: 1.7; }
  .lp-faq summary { font-size: 18px; gap: 12px; }
  .lp-cta { padding: 0 var(--gutter) 60px; }
  .lp-cta .box { padding: 32px 24px; flex-direction: column; align-items: flex-start; gap: 22px; }
  .lp-cta .btn { width: 100%; justify-content: center; }
}

/* ============================================
   ACCUEIL (index.html)
   ============================================ */
@media (max-width: 620px) {
  .mosaic { padding: 24px var(--gutter) 40px; }
  .mosaic-grid { gap: 12px; }
  .tile-hero { padding: 28px 24px !important; }
  .tile-hero h1 { font-size: clamp(34px, 10vw, 46px); margin: 18px 0; }
  .tile-hero .th-sub { font-size: 14px; margin-bottom: 22px; }
  .tile-hero .th-actions { gap: 12px; }
  .tile-hero .th-meta { gap: 22px; flex-wrap: wrap; }
  .tile { padding: 20px; }
  .tile h3 { font-size: 23px; }
  .tile .tile-arrow { top: 16px; right: 16px; width: 32px; height: 32px; }
  .tile-ico { top: 16px; left: 18px; width: 34px; height: 34px; }
  .glossaire-tile { padding: 24px; }
  .glossaire-tile .gl-alpha a { width: 30px; height: 30px; font-size: 16px; }
  .es-badge .es-label { max-width: none; }

  .estimation { padding: 48px var(--gutter); }
  .estimation-inner { gap: 32px; }
  .steps { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .estimation .lead { margin-bottom: 26px; }

  .services-grid { grid-template-columns: 1fr !important; }
  .service-tile { padding: 32px 0; }
  .service-tile h3 { font-size: 27px; border-left-width: 7px; padding-left: 13px; }

  .results-band { padding: 52px var(--gutter); }
  .results-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .result-card .adj { font-size: 34px; }
  .results-cta-row { margin-top: 40px; padding-top: 32px; }

  .partners { padding: 44px var(--gutter); }
  .partners-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pl { min-height: 72px; font-size: 17px; padding: 20px 10px; }
  .pl.sans { font-size: 11px; letter-spacing: 0.14em; }
  .pl.serif-cap { font-size: 14px; }

  .news-grid { grid-template-columns: 1fr !important; }
  .news-card.large h3 { font-size: 27px; }

  .faq-home { padding: 52px var(--gutter); }
  .faq-home .faq-item > summary { padding: 20px 40px 20px 0; gap: 12px; }

  .final-cta { padding: 60px var(--gutter); }
  .final-cta h2 { font-size: clamp(36px, 11vw, 52px); }
  .final-cta p { font-size: 15px; margin-bottom: 30px; }

  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-image { aspect-ratio: 4/3; }
  .hero-content { padding: 44px var(--gutter) 40px; }
  .hero-meta { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
}

/* Le bloc « Nos partenaires » + « Nous contacter » est un conteneur empilé
   (deux tuiles en `1fr 1fr`) qui, sous 980px, se voit imposer une seule rangée
   de grille : chaque tuile tombe à 68px et le picto en absolu recouvre le
   titre. On lui rend deux rangées, pour que chaque tuile ait sa hauteur pleine. */
@media (max-width: 980px) {
  .mosaic-grid > div.s-3x2 { grid-row: span 2 !important; }
}

/* ============================================
   PAGES INTÉRIEURES — grilles déclarées en ligne
   ============================================ */

/* Les gabarits passent déjà en `1fr` sous 980px, mais une piste `1fr` a une
   taille minimale `auto` : un enfant indivisible (formulaire, gros titre, rangée
   de chiffres) élargit la piste et fait déborder toute la page. `minmax(0, 1fr)`
   supprime ce plancher. */
@media (max-width: 1024px) {
  .page-hero, .contact-inner, .contact-wrap, .news-inner, .about-inner,
  .featured-sale, .ad-inner, .sr-inner, .feature, .letter-section,
  .expert-profile, .map-band, .team-section-head, .ed-card.size-row,
  .ao-top, .gl-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Barres d'onglets horizontales : défilement interne au lieu du débordement,
   et décalage sticky aligné sur la hauteur réelle de la nav. */
@media (max-width: 1024px) {
  .tabs, .tabs-band {
    top: var(--nav-h, 66px) !important;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar, .tabs-band::-webkit-scrollbar { display: none; }
  .tabs .tab, .tabs-band .tab { flex: 0 0 auto; white-space: nowrap; }
  .filter-bar, .alpha-bar { top: var(--nav-h, 66px) !important; }
  .letter-mark { top: calc(var(--nav-h, 66px) + 70px) !important; }
}

@media (max-width: 900px) {
  /* presse.html — mosaïque éditoriale sur 12 colonnes : les cartes couvrent
     `span 12`, donc 11 gouttières s'ajoutent à la largeur du conteneur. */
  .editorial-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .editorial-grid > * { grid-column: span 1 !important; grid-row: auto !important; }

  /* ventes.html */
  .sale-row, .sale-head { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
  /* resultats · expertise · glossaire · presse · partenaires */
  .rm-grid, .cat-grid, .pm-grid, .thumbs, .kpi-row,
  .linked-grid, .ao-linked-grid, .pl-grid,
  .artist-list, .lots-grid, .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .rm-grid, .cat-grid, .pm-grid,
  .linked-grid, .ao-linked-grid,
  .team-grid, .lots-grid, .artist-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Ces blocs restent lisibles à deux colonnes */
  .thumbs, .pl-grid, .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpi-row .kpi { padding: 14px 12px 14px 12px; }

  /* En-têtes de section en `1fr auto` (titre + méta/lien) */
  .cat-head, .filters, .filter-bar, .list-head, .toolbar, .ed-head, .news-head,
  .vs-head, .rs-head, .search-band, .contact-card .field-line {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }
  .cat-head .cat-meta { flex-wrap: wrap; gap: 18px; }

  /* cabinet.html — chiffres clés */
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }

  /* contact.html — lignes libellé/valeur de la carte info */
  .info-card .field-line { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; }

  /* presse.html — rangées de métadonnées et cases à cocher sur une seule ligne */
  .feature .meta, .news-checks { flex-wrap: wrap; gap: 10px 16px; }

  /* presse.html — formulaire newsletter en ligne */
  .news-band { padding: 64px var(--gutter); }
  .news-form { flex-direction: column; gap: 8px; }
  .news-form input { width: 100%; }
  .news-form .btn, .news-form button { width: 100%; justify-content: center; }

  /* contact.html — bandeau titre du formulaire */
  .form-card .fc-head { grid-template-columns: 56px minmax(0, 1fr); }
  .form-card .fc-num { font-size: 26px; }
  .form-card .fc-title { padding: 16px 18px; }
  .form-card .fc-title .et { font-size: 9px; letter-spacing: 0.12em; }
  .info-card { padding: 26px 22px; }

  /* cabinet.html — carte coordonnées */
  .contact-card { padding: 24px 22px; }
  .contact-card .field { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  /* glossaire.html — panneau artiste plein écran */
  .artist-overlay .ao-panel { width: 100% !important; max-width: none !important; }
}

/* Très petits écrans (≤ 360px de large) : les rangées « titre — filet — méta »
   n'ont plus la place de tenir sur une ligne. */
@media (max-width: 480px) {
  .year-divider, .past-btn {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px !important;
  }
  .year-divider .line, .past-btn .pb-line { display: none; }
  .past-btn { padding: 26px 22px; }
  .past-btn .pb-arrow { margin-left: auto; }
}

/* Tableaux et blocs larges : défilement interne plutôt que débordement de page */
@media (max-width: 900px) {
  table { display: block; width: 100%; overflow-x: auto; }
  pre { overflow-x: auto; }
}

/* Popin d'info : petite feuille ancrée en bas d'écran sur mobile,
   plutôt qu'une bulle qui sort du cadre. */
@media (max-width: 620px) {
  .badge-info .info-pop {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 14px;
    top: auto;
    width: auto;
    transform: none;
    z-index: 90;
  }
  .badge-info:hover .info-pop,
  .badge-info:focus-visible .info-pop,
  .badge-info.is-open .info-pop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .badge-info .info-pop::after { display: none; }
}

/* ============================================
   GABARITS PROPRES AU THÈME WORDPRESS
   (pages absentes de la maquette statique :
   Nos services, Guide de l'expert, Actualité & Presse, article single)
   ============================================ */

/* Ces gabarits basculent déjà en une colonne, mais en `1fr` : même piège de
   plancher `auto` que les autres. On force `minmax(0, 1fr)`. */
@media (max-width: 1024px) {
  .services-hero, .services-cta .inner,
  .articles-wrap, .article-hero, .article-cover, .article-cta, .article {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* tpl-actualites : vignette 180px + texte */
  .news-item { grid-template-columns: 120px minmax(0, 1fr) !important; gap: 20px !important; }
}

@media (max-width: 620px) {
  .articles-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 28px; }
  .news-item { grid-template-columns: 88px minmax(0, 1fr) !important; gap: 16px !important; }
  .news-pager { flex-wrap: wrap; gap: 6px; }

  .services-hero, .services-cta .inner { padding: 44px var(--gutter); gap: 28px; }
  .services-cta .ctas { width: 100%; }
  .services-cta .ctas .btn { width: 100%; justify-content: center; }
  .services-body { padding: 40px var(--gutter); }

  .article-hero { padding: 48px var(--gutter) 30px; }
  .article { padding: 36px var(--gutter) 30px; }
  .article-cta { padding: 0 var(--gutter) 64px; }
  .article-cta .box { padding: 32px 24px; gap: 22px; }
  .article-cta .box .btn { width: 100%; justify-content: center; }
  .pull { font-size: 20px; padding-left: 18px; }
  .checklist { padding: 22px 20px; }
  .crumbs { font-size: 10px; letter-spacing: 0.12em; margin-bottom: 20px; }
  .crumbs .sep { margin: 0 7px; }

  /* pages SEO locales : grilles de catégories / villes */
  .lp-cats, .lp-citygrid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Le contenu des articles est saisi dans l'éditeur : un mot long non sécable
   (URL, chemin de fichier, référence) suffit à faire déborder la page.
   On autorise la coupure plutôt que le débordement. */
@media (max-width: 900px) {
  .article, .article p, .article li, .article h2, .article h3,
  .article-hero h1, .article-hero .deck, .pull, .checklist,
  .lp-section p, .lp-section li, .lp-faq p,
  .news-item, .news-item p, .articles-grid p {
    overflow-wrap: break-word;
  }
}

/* Barre d'admin WordPress : en dessous de 782px elle n'est plus fixe, donc la
   nav sticky à top:0 passe dessous en défilant. Rien à corriger sur la nav,
   mais le panneau mobile doit retirer sa hauteur du calcul de max-height. */
@media (max-width: 782px) {
  body.admin-bar .nav-mobile { max-height: calc(100vh - var(--nav-h, 66px) - 46px); }
}

/* ---------------------------------------------------------------------------
   Ancres & barres collantes (2026-09-29)
   La nav mesure 117 à 127 px sur ordinateur (72 px en mobile) : les barres
   collantes calées en dur à 110 px glissaient sous la nav. On les accroche
   à la hauteur réelle (--nav-h, posée par js/site.js), et les ancres
   s'arrêtent sous l'ensemble nav + barre (--anchor-offset, idem).
   --------------------------------------------------------------------------- */
html { scroll-padding-top: var(--anchor-offset, 140px); }
.tabs, .alphabet { top: var(--nav-h, 110px) !important; }
@media (min-width: 1025px) {
  .filter-bar { top: calc(var(--nav-h, 110px) + var(--tabs-h, 66px)) !important; }
  .letter-mark { top: calc(var(--nav-h, 110px) + 70px) !important; }
}

/* ---------------------------------------------------------------------------
   Casse normale pour les CONTENUS (2026-10-02) — lieux, dates, badges,
   noms, fil d'Ariane, légendes : « Paris » et non « PARIS ». Les éléments
   décoratifs du design (sur-titres, menus, boutons, onglets, libellés de
   formulaires et de chiffres-clés) restent en petites capitales.
   --------------------------------------------------------------------------- */
.crumbs, .lp-crumbs,
.article-hero .kicker, .article-hero .meta,
.lp-citygrid .c-region,
.article figcaption, .article .wp-block-image figcaption,
.article blockquote cite, .article .wp-block-quote cite,
.news-date, .news-tag,
.article-card .ac-tag, .article-card .ac-meta,
.expert-profile .ep-content .ep-role,
.updated,
.al-card .ac-info, .linked-card .lc-meta, .ao-lc .lc-meta, .ao-img-cap,
.tile-card .tc-meta, .result-card .rm, .news-card .nc-tag, .news-card .nc-meta,
.services-body .apl-values h3,
.pm-cell .pm-city, .pm-cell .pm-link,
.feature-content .meta, .ed-tag, .ed-meta, .cat-item .ci-title .small, .cat-item .meta,
.vp-date, .rm-card .rm-meta,
.fs-info .fs-date .sub, .sale-date .my, .sale-cta .lots,
.jx-paris text, .jx-pop .pd, .jx-date .my, .jx-eye {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}