/* =====================================================================
   N4CC — « L'Heure Juste » : harmonisation des articles existants
   Les articles gardent leur HTML et leurs traductions FaLang ; on aligne ici couleurs, boutons,
   titres et tailles de texte sur le kit (hj-kit.css). Dette assumée : chaque bloc disparaît
   quand sa page reçoit une composition dédiée. Préfixe :root.n4h .hj-article = passe devant
   les styles embarqués des articles sans !important (sauf là où l'article en met déjà).
   ===================================================================== */

/* ---------- 0. Tous les articles ---------- */
:root.n4h .hj-article { color: var(--ink); }
:root.n4h .hj-article :is(h2, h3) { text-wrap: balance; }
/* Pages de lecture : texte courant ≥ 16 px (les cartes descendaient à 12-14 px) */
:root.n4h .hj-page .hj-article :is(p, li, dd, dt, td, th, summary, figcaption, blockquote) { font-size: clamp(16px, 1em, 21px); }
/* Titres posés directement dans l'article (pages v28) : ceux du kit */
:root.n4h .hj-page .hj-article > h2, :root.n4h .hj-page .hj-article > section > h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.05rem); line-height: 1.15; letter-spacing: -.015em; margin: var(--sp-7) 0 var(--sp-3); }
:root.n4h .hj-page .hj-article > h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; margin: var(--sp-5) 0 var(--sp-2); }
/* Les anciens conteneurs centrés s'alignent sur la colonne de lecture */
:root.n4h .hj-page .hj-article :is(.n4doc, .n4pil, .n4cv, .n4sv, .n4av, .n4ap, .n4ri, .esp50, .v113, .n4sk, .n4jardin) { max-width: none; margin-left: 0; margin-right: 0; }
:root.n4h .hj-page .hj-article > :first-child, :root.n4h .hj-page .hj-article > script:first-child + * { margin-top: 0; }
/* Boutons des articles : mêmes gestes que le kit (48 px, 16 px, pilule) */
:root.n4h .hj-article :is(.n4doc-btn, .n4pil-btn, .n4cv-btn, .n4av-btn, .n4sv-btn, .n4rc-btn, .esp-btn, .n4ck-btn-ghost, .ax-btn, .n4ex-btn) { min-height: 48px; padding-inline: 22px; font-size: 16px; font-weight: 700; border-radius: var(--r-pill); }
:root.n4h .hj-article .n4sk-btns a { min-height: 48px; padding-inline: 22px; font-size: 16px; font-weight: 700; }
:root.n4h .hj-article :is(.n4doc-btn, .n4pil-btn.p, .n4cv-btn.p, .n4av-btn.p, .n4sv-btn.p, .n4rc-btn.p, .esp-btn.prim, .n4pil-baselinks a.gold, .n4cv-baselinks a.gold, .n4sk-btns a:not(.alt)) { background: var(--sun) !important; color: var(--ink) !important; border: 0; box-shadow: 0 3px 0 var(--sun-2); }
:root.n4h .hj-article :is(.n4doc-btn, .n4pil-btn.p, .n4cv-btn.p, .n4av-btn.p, .n4sv-btn.p, .n4rc-btn.p, .esp-btn.prim, .n4sk-btns a:not(.alt)):hover { box-shadow: 0 5px 0 var(--sun-2); transform: translateY(-1px); }
:root.n4h .hj-article :is(.n4sv-btn.s, .n4ck-btn-ghost) { background: transparent; color: var(--ink); border: 0; box-shadow: inset 0 0 0 1.5px var(--ink); }
/* Panneaux sombres : le bleu nuit du kit, sans dégradé turquoise */
:root.n4h .hj-article :is(.n4doc-contact, .n4ct-maphead, .n4pil-base, .n4pil-cta, .n4pil-se-h, .n4cv-base, .n4cv-cta, .n4sk-card) { background: var(--night); }

/* ---------- 1. Documents (contact, FAQ, plan d'accès, mentions, cookies, sécurité, Dream Wash, jardins) ---------- */
:root.n4h .hj-article .n4doc { --ink: #0A2540; --navy: #0A2540; --navy-2: #12355A; --gold: #F2B21B; --gold-deep: #0A2540; --gold-soft: #FFF3C4; --sand: #F3EEE2; --card: #FFFDF8; --border: #E2DACA; --muted: #566275; font-family: var(--f-body); }
:root.n4h .hj-article .n4doc-body { max-width: none; margin: 0; padding: 0; }
:root.n4h .hj-article .n4doc-intro { font-size: var(--t-lede); color: var(--ink-2); }
:root.n4h .hj-article .n4doc-section > h2 { padding-left: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.05rem); line-height: 1.15; letter-spacing: -.015em; }
:root.n4h .hj-article .n4doc-section > h2::before { display: none; }
:root.n4h .hj-article .n4doc-section h3, :root.n4h .hj-article :is(.n4doc-card, .n4ct-card) h3 { font-size: 17px; color: var(--ink); }
:root.n4h .hj-article .n4doc a:not([class]) { color: var(--ink); border-bottom: 0; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; text-decoration-color: rgba(10, 37, 64, .35); }
:root.n4h .hj-article .n4doc a:not([class]):hover { color: var(--ink); text-decoration-color: var(--coral); }
:root.n4h .hj-article .n4doc [class*="maphead"] a:not([class]) { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .32); }
:root.n4h .hj-article .n4doc-callout { background: #FFF8DB; border-color: #F6E3A1; border-left-color: var(--sun-2); }
:root.n4h .hj-article :is(.n4doc-card, .n4ct-card, .n4doc-rows, .n4acc-btn) { box-shadow: var(--sh-paper); }
:root.n4h .hj-article .n4acc-btn { background: var(--white); }
:root.n4h .hj-article .n4acc-btn b { font-size: 16px; color: var(--ink); }
:root.n4h .hj-article .n4acc-btn small { font-size: 14px; color: var(--ink-2); }
:root.n4h .hj-article .n4doc-updated { color: var(--ink-3); }

/* ---------- 2. Guides « pilier » (Pyrénées-Orientales, Sud de la France) et Côte Vermeille ---------- */
:root.n4h .hj-article :is(.n4pil, .n4cv) { --ink: #0A2540; --ink2: #33445C; --gold: #F2B21B; --gold2: #FFD93D; --sea: #1B4F72; --line: #E2DACA; --sand: #F3EEE2; --muted: #566275; }
:root.n4h .hj-article :is(.n4pil-h, .n4cv-h) { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-7); font: 500 var(--t-meta)/1.3 var(--f-data); letter-spacing: .08em; color: var(--ink-3); }
:root.n4h .hj-article :is(.n4pil-h, .n4cv-h)::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--sun-2); flex: none; }
:root.n4h .hj-article :is(.n4pil-h2, .n4cv-h2) { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.05rem); line-height: 1.15; letter-spacing: -.015em; }
:root.n4h .hj-article :is(.n4pil-lead, .n4cv-lead) { font-size: var(--t-lede); color: var(--ink-2); }
:root.n4h .hj-article :is(.n4pil-card, .n4cv-card) { background: var(--white); box-shadow: var(--sh-paper); }
:root.n4h .hj-article :is(.n4pil-card, .n4cv-card, .n4pil-iti, .n4cv-iti, .n4pil-tip, .n4cv-tip) h3, :root.n4h .hj-article :is(.n4pil-tip, .n4cv-tip) .th { font-size: 18px; }
:root.n4h .hj-article :is(.n4pil-tip, .n4cv-tip) { border-left-color: var(--sun-2); }
:root.n4h .hj-article :is(.n4pil-faq, .n4cv-faq) summary { font-size: 17px; }
:root.n4h .hj-article :is(.n4pil-faq, .n4cv-faq) summary::after { color: var(--ink); }
:root.n4h .hj-article :is(.n4pil-iti-meta, .n4cv-iti-meta) span { font-size: 13px; }
:root.n4h .hj-article :is(.n4pil-iti-link, .n4cv-iti-link) { font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
:root.n4h .hj-article :is(.n4pil-svc, .n4cv-svc) p { color: #D3DEEA; }
:root.n4h .hj-article :is(.n4pil-baselinks, .n4cv-baselinks) a { min-height: 44px; font-size: 15px; }

/* ---------- 3. Services, Avant de partir, À propos ---------- */
:root.n4h .hj-article .n4sv { --ink: #0A2540; --sea: #1B4F72; --sky: #1B4F72; --mint: #0B7A55; --line: #E2DACA; --soft: #FFFDF8; }
:root.n4h .hj-article .n4av { --ink: #0A2540; --sun: #FFD93D; --sun2: #F2B21B; --line: #E2DACA; --muted: #566275; }
:root.n4h .hj-article .n4sv-item .tx b { font-size: 16.5px; color: var(--ink); }
:root.n4h .hj-article .n4sv-item .tx span { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
:root.n4h .hj-article .n4sv-grp-h h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; color: var(--ink); }
:root.n4h .hj-article .n4ap { --ap-ink: #0A2540; --ap-sea: #1B4F72; --ap-gold: #F2B21B; }
:root.n4h .hj-article .n4ap .ap-trust .ap-note { color: var(--coral-ink); }

/* ---------- 4. Guides v28 (Perpignan, Espagne) ---------- */
:root.n4h .hj-article .v113 h2, :root.n4h .hj-article .esp50 h2.esp-h { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.05rem); line-height: 1.15; letter-spacing: -.015em; color: var(--ink); }
:root.n4h .hj-article .esp50 h2.esp-h { text-align: left; }
:root.n4h .hj-article .esp50 .esp-sub { text-align: left; margin-left: 0; }
:root.n4h .hj-article .esp50 h2.esp-h em { color: inherit; font-style: italic; background: linear-gradient(transparent 62%, var(--sun) 62%, var(--sun) 92%, transparent 92%); }
:root.n4h .hj-article .esp-eyebrow { background: transparent; padding: 0; color: var(--ink-3); font: 500 var(--t-meta)/1.3 var(--f-data); letter-spacing: .08em; }
:root.n4h .hj-article .v113-faq details { border-left-color: var(--sun-2); }
:root.n4h .hj-article .v113-table caption { color: var(--ink); background: var(--paper-2); }
:root.n4h .hj-article .v113-table .d { color: var(--mint-ink); }

/* ---------- 5. Règlement intérieur ---------- */
:root.n4h .hj-article .n4ri { --ink: #0A2540; --line: #E2DACA; --gold: #F2B21B; --gold2: #B83A0E; }

/* ---------- 6. Petits outils restés en thème sombre : passés sur papier ---------- */
:root.n4h .hj-article .calculator-container { max-width: 640px; margin: 0; padding: var(--sp-5); background: var(--white); color: var(--ink); border-radius: var(--r-panel); box-shadow: inset 0 0 0 1px var(--line), var(--sh-paper); font-family: var(--f-body); }
:root.n4h .hj-article .calculator-container label { font-size: 16px; color: var(--ink); }
:root.n4h .hj-article .calculator-container :is(input, select) { min-height: 50px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); font: 400 17px/1.3 var(--f-body); border-radius: var(--r); }
:root.n4h .hj-article .calculator-container button { min-height: 54px; background: var(--sun); color: var(--ink); font: 700 17px/1 var(--f-body); border-radius: var(--r-pill); box-shadow: 0 3px 0 var(--sun-2); }
:root.n4h .hj-article .calculator-container .result { background: var(--paper-2); color: var(--ink); }
:root.n4h .hj-article .calculator-container .result strong { color: var(--coral-ink); }
:root.n4h .hj-article .calculator-container .tips { font-size: 16px; color: var(--ink-2); }
:root.n4h .hj-article .bp-root { background: var(--white); color: var(--ink); font-family: var(--f-body); box-shadow: inset 0 0 0 1px var(--line); }
:root.n4h .hj-article .bp-root :is(h1, h2) { color: var(--ink); font-family: var(--f-display); }
:root.n4h .hj-article .bp-root a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
:root.n4h .hj-article > div[style*="#2c2c2c"] { background: var(--white) !important; color: var(--ink) !important; font-family: var(--f-body) !important; border-radius: var(--r-panel); box-shadow: inset 0 0 0 1px var(--line); }
:root.n4h .hj-article > div[style*="#2c2c2c"] a { color: var(--ink) !important; }

/* ---------- 7. Écrans sombres conservés (arcade, photos, vidéos, assistant) : posés comme des écrans ---------- */
:root.n4h .hj-article :is(.n4ja, section.n4ph, .n4cc-youtubers, #n4cc-wrap) { border-radius: var(--r-panel); }

/* ---------- 8. Icônes au trait (émojis remplacés côté serveur sur les pages pratiques) ---------- */
:root.n4h .hj-article .hj-ico { display: inline-grid; place-items: center; flex: none; color: var(--night-3); font-size: 0; line-height: 0; }
:root.n4h .hj-article .hj-ico .hj-i { width: 22px; height: 22px; }
:root.n4h .hj-article :is(.n4ct-ic, .n4acc-ic, .n4doc-card-ico).hj-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
:root.n4h .hj-article .n4sv .hj-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
:root.n4h .hj-article .n4sv .n4sv-grp-h .hj-ico { width: 32px; height: 32px; background: var(--sun); box-shadow: none; color: var(--ink); }
:root.n4h .hj-article :is(.n4pil, .n4cv) .si.hj-ico .hj-i { width: 20px; height: 20px; color: var(--sun); }
:root.n4h .hj-article .hj-gps-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-family: var(--f-data); }

/* ---------- 9. FAQ : recherche et questions au format du kit ---------- */
:root.n4h .hj-article .n4faq-search input { min-height: 52px; font: 400 17px/1.3 var(--f-body); color: var(--ink); background: var(--white); border-radius: var(--r-pill); }
:root.n4h .hj-article .n4faq-answer { font-size: 16.5px; color: var(--ink-2); }
:root.n4h .hj-article .n4faq-item { border-radius: var(--r); border-color: var(--line); background: var(--white); }
:root.n4h .hj-article .n4faq-item > summary { font-size: 17px; font-weight: 650; color: var(--ink); min-height: 56px; }
:root.n4h .hj-article .n4faq-item > summary::after { color: var(--ink); }
:root.n4h .hj-article .n4faq-item[open] { border-color: var(--sun-2); }

/* ---------- 10. Accessibilité des anciens articles : contrastes AA et cibles ---------- */
/* Surtitres de section : ceux du kit (encre pâle + trait soleil) */
:root.n4h .hj-article :is(.n4av-h, .n4rc-h, .n4ex-h) { display: flex; align-items: center; gap: 10px; font: 500 var(--t-meta)/1.3 var(--f-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
:root.n4h .hj-article :is(.n4av-h, .n4rc-h, .n4ex-h)::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--sun-2); flex: none; }
:root.n4h .hj-article .n4ap .ap-updated { color: var(--ink-3); }
:root.n4h .hj-article [style*="color: orange"] { color: var(--coral-ink) !important; }
:root.n4h .hj-article .ax-credits { color: rgba(255, 255, 255, .8) !important; }
:root.n4h .hj-article .n4faq-more a { color: var(--ink); }
:root.n4h .hj-article .esp-inlink { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
:root.n4h .hj-article .esp-galhint { color: var(--ink-3); }
:root.n4h .hj-article .esp-tag { color: var(--mint-ink); font-size: 12px; }
:root.n4h .hj-article .n4ri-chip { font-size: 12.5px; }
:root.n4h .hj-article .n4ri-chip.ok { color: #0B6B47; }
:root.n4h .hj-article .n4ri-chip.warn { color: #8F4500; }
:root.n4h .hj-article .n4jardin-carnet > h3 { color: #8E4A2A; }
:root.n4h .hj-article .v113-fig figcaption span { color: var(--ink-3) !important; font-size: 13px !important; }
/* Top 50 : pastilles de catégorie assombries juste ce qu'il faut pour le texte blanc */
:root.n4h .hj-article [style*="--cat:#0891b2"] { --cat: #0E7490 !important; }
:root.n4h .hj-article [style*="--cat:#059669"] { --cat: #047857 !important; }
:root.n4h .hj-article [style*="--cat:#ca8a04"] { --cat: #A16207 !important; }
:root.n4h .hj-article [style*="--cat:#db2777"] { --cat: #BE185D !important; }
:root.n4h .hj-article .n4ex-cat-tag[style*="#0891b2"] { background: #0E7490 !important; }
:root.n4h .hj-article .n4ex-cat-tag[style*="#059669"] { background: #047857 !important; }
:root.n4h .hj-article .n4ex-cat-tag[style*="#ca8a04"] { background: #A16207 !important; }
:root.n4h .hj-article .n4ex-cat-tag[style*="#db2777"] { background: #BE185D !important; }
:root.n4h .hj-article .n4ex-cat-tag { font-size: 12px; }
/* Liens dans le texte : soulignés (pas seulement colorés) */
:root.n4h .hj-article :is(.n4pil, .n4cv, .n4sv) :is(p, li, span) > a:not([class]) { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
/* E-mail masqué par Joomla : cible confortable */
:root.n4h .hj-article joomla-hidden-mail a { display: inline-block; padding-block: 4px; }
:root.n4h .hj-article .hj-mailbtn { padding: 0; }
:root.n4h .hj-article .hj-mailbtn joomla-hidden-mail a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; color: inherit; text-decoration: none; }
/* Zones défilantes : focus visible */
:root.n4h .hj-article :is(.n4av-svgwrap, .esp-gal, .v113-table-wrap):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
:root.n4h .hj-article .n4ex-bonus-dist { color: #0E7490; font-size: 13px; }
:root.n4h .hj-article p[style*="color:#64748b"] { color: var(--ink-3) !important; font-size: 14px !important; }
:root.n4h .hj-article :is(.ax-eyebrow, .ax-kicker) { color: var(--coral-ink); }
:root.n4h .hj-article :is(.ax-lead, .ax-empty) { color: var(--ink-2); }
:root.n4h .hj-article .agx :is(.ax-note, .meta span) { color: var(--ink-2); }
/* Top 50 (pleine largeur) : texte des cartes lisible */
:root.n4h .hj-article .n4ex :is(.n4ex-card p, .n4ex-desc, .n4ex-card li) { font-size: 15.5px; line-height: 1.5; }