/* ═══════════════════════════════════════════════════════════════════════════
   AIMER CAMPER — composants des pages éditoriales (chargés conditionnellement)
   contact · mentions légales · B2B pros · FAQ globale · quiz
   (les formulaires .cform, .cta-dark, .thead, .prose vivent dans ac-portail.css)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CONTACT ───────────────────────────────────────────────────────────────── */
.ct-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:start}
@media(max-width:820px){.ct-grid{grid-template-columns:1fr}}
.ct-info{display:flex;flex-direction:column;gap:14px}
.ct-card{background:var(--ac-white);border:1px solid var(--ac-line);border-radius:var(--r-lg);padding:20px}
.ct-card h3{margin-bottom:6px}
.ct-card p{font-size:.9rem}
.ct-card a{color:var(--ac-black);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--portail-accent)}
.ct-b2b{background:var(--ac-highlight);border-radius:var(--r-lg);padding:22px}
.ct-b2b h3{margin-bottom:6px}
.ct-b2b p{font-size:.9rem;margin-bottom:14px}
.form-note{text-align:center;font-family:var(--ac-font-ui);font-size:.86rem;color:var(--ac-stone);margin-top:16px}
.form-note a{color:var(--ac-black);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--portail-accent)}

/* ── MENTIONS LÉGALES / DOC ────────────────────────────────────────────────── */
.doc{display:grid;grid-template-columns:240px 1fr;gap:52px;align-items:start}
@media(max-width:820px){.doc{grid-template-columns:1fr;gap:18px}}
.doc-nav{position:sticky;top:86px;display:flex;flex-direction:column;gap:2px;counter-reset:doc-toc;padding:16px;background:var(--ac-paper);border:1px solid var(--ac-line);border-radius:var(--r-lg)}
/* Libellé visible "Sommaire" (retour Théo 20/08/2026, "le sommaire des articles est
 * bizarre") : la nav n'avait qu'un aria-label, invisible à l'écran - sans lui, la liste de
 * liens ne se présentait pas comme un sommaire, juste comme une suite de liens flottants
 * sans intitulé (plus déroutant encore en pile de pastilles sur mobile, cf règle 820px
 * ci-dessous). Même traitement typographique que .guide-card-label (ac-portail.css). */
.doc-nav-label{display:block;font-family:var(--ac-font-ui);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ac-stone);margin-bottom:10px}
/* Sélecteur enfant direct (26/08/2026, retour Théo) - PAS ".doc-nav a" : le bouton "Faire le
 * quiz" (.doc-cta .btn) est aussi un <a>, mais niché plus profond (.doc-nav > .doc-cta > a),
 * pas un lien de sommaire. Avec le sélecteur descendant large d'origine, il héritait à tort de
 * la numérotation ("05", 5e <a> du compteur) ET du fond blanc au survol - texte blanc
 * (.doc-cta .btn:hover ci-dessous) sur fond quasi blanc, illisible. Bug trouvé en testant le
 * rendu réel (survol sur preprod bdl), pas visible en relisant le CSS seul. */
.doc-nav > a{counter-increment:doc-toc;display:flex;align-items:baseline;gap:8px;font-family:var(--ac-font-ui);font-size:.85rem;color:var(--ac-stone);padding:8px 10px;border-radius:var(--r-md);border-left:2px solid transparent;transition:all var(--dur)}
.doc-nav > a::before{content:counter(doc-toc,decimal-leading-zero);flex:none;font-weight:700;font-size:.72rem;color:var(--portail-accent);font-variant-numeric:tabular-nums}
.doc-nav > a:hover{background:var(--ac-white);color:var(--ac-black);border-left-color:var(--portail-accent)}
.doc-cta{margin-top:14px;padding-top:14px;border-top:1px solid var(--ac-line)}
.doc-cta-eyebrow{display:block;font-family:var(--ac-font-ui);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--portail-accent);margin-bottom:6px}
.doc-cta p{font-size:.85rem;line-height:1.45;color:var(--ac-graphite);margin:0 0 12px}
.doc-cta .btn{width:100%;padding:11px 14px;font-size:.85rem;color:#fff}
.doc-cta .btn:hover{color:#fff}
@media(max-width:820px){.doc-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:8px;background:transparent;border:0;padding:0}.doc-nav > a{border:1px solid var(--ac-line);background:var(--ac-white)}.doc-nav > a:hover{border-left-color:var(--ac-line)}.doc-nav-label{width:100%;margin-bottom:2px}.doc-cta{width:100%;margin-top:4px;padding:16px;border-top:0;background:var(--ac-paper);border-radius:var(--r-lg)}}
.doc-body{max-width:900px}
.doc-body h2{scroll-margin-top:88px}
.doc-body :target{animation:doc-target-flash 1.6s ease}
@keyframes doc-target-flash{0%{background:rgba(var(--portail-accent-rgb),.14)}100%{background:transparent}}
.doc-updated{color:var(--ac-stone);font-size:.86rem}

/* ── B2B — POUR LES PROS ───────────────────────────────────────────────────── */
.b2b-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding:clamp(30px,4vw,56px) 0}
@media(max-width:920px){.b2b-hero{grid-template-columns:1fr;gap:34px}}
.b2b-hero h1{margin-bottom:16px}
.b2b-hero .sub{font-size:1.14rem;color:var(--ac-graphite);max-width:52ch;margin-bottom:24px;line-height:1.6}
.b2b-hero .sub strong{color:var(--ac-black)}
.b2b-hero .sub p{margin:0}
.b2b-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.b2b-mini{display:flex;flex-wrap:wrap;gap:0;font-family:var(--ac-font-ui);font-size:.86rem;color:var(--ac-stone)}
.b2b-mini span{display:inline-flex;align-items:center;gap:7px;padding-right:16px;margin-right:16px;border-right:1px solid var(--ac-line)}
.b2b-mini span:last-child{border-right:0}
.b2b-mini b{color:var(--ac-black);font-family:var(--ac-font-display);font-style:italic;font-weight:800}
.b2b-visual{background:var(--ac-white);border:1px solid var(--ac-line);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:18px;transform:rotate(-1deg)}
.bv-serp{border:1px solid var(--ac-line);border-radius:var(--r-md);padding:14px 16px;margin-bottom:12px}
.bv-serp .u{font-family:var(--ac-font-ui);font-size:.72rem;color:#1a7f37}
.bv-serp .t{font-family:var(--ac-font-display);font-style:italic;font-weight:800;color:#1a0dab;font-size:1.02rem;margin:3px 0}
.bv-serp .d{font-family:var(--ac-font-ui);font-size:.78rem;color:var(--ac-stone)}
.bv-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(var(--portail-accent-rgb),.1);color:var(--portail-accent);font-family:var(--ac-font-ui);font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:999px}
.bv-ia{display:flex;gap:10px;align-items:flex-start;background:var(--ac-ink);border-radius:var(--r-md);padding:12px 14px;font-family:var(--ac-font-ui);font-size:.8rem;color:var(--ac-paper)}
.bv-ia .ai{width:26px;height:26px;border-radius:6px;background:var(--ac-black);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0}
.bstat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:720px){.bstat-grid{grid-template-columns:1fr 1fr}}
.bstat{text-align:center;padding:8px}
.bstat b{display:block;font-family:var(--ac-font-display);font-style:italic;font-weight:800;font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--ac-black)}
.bstat span{font-family:var(--ac-font-ui);font-size:.82rem;color:var(--ac-stone)}
.benef{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:720px){.benef{grid-template-columns:1fr}}
.benef-card{background:var(--ac-white);border:1px solid var(--ac-line);border-radius:var(--r-lg);padding:26px}
.benef-card .ic{width:46px;height:46px;border-radius:var(--r-md);background:rgba(var(--portail-accent-rgb),.1);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:14px}
.benef-card h3{margin-bottom:8px}
.benef-card p{font-size:.92rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
.step{background:var(--ac-white);border:1px solid var(--ac-line);border-radius:var(--r-lg);padding:22px}
.step .n{font-family:var(--ac-font-display);font-style:italic;font-weight:900;font-size:1.8rem;color:var(--portail-accent);line-height:1}
.step h3{margin:8px 0 6px;font-size:1rem}
.step p{font-size:.88rem}
.elig{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;max-width:820px}
@media(max-width:600px){.elig{grid-template-columns:1fr}}
.elig li{list-style:none;position:relative;padding-left:30px;font-family:var(--ac-font-ui);font-size:.94rem;color:var(--ac-graphite);padding-top:6px;padding-bottom:6px}
.elig li::before{content:"\2713";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;background:rgba(var(--portail-accent-rgb),.12);color:var(--portail-accent);font-weight:800;font-size:.7rem;display:flex;align-items:center;justify-content:center}
.pricing{background:var(--ac-highlight);border-radius:var(--r-xl);padding:clamp(28px,4vw,44px);text-align:center;max-width:720px;margin:0 auto}
/* clamp() plutôt qu'un 3rem fixe : .p0 affiche b2b_offer_headline (texte libre ACF, pas
 * juste un chiffre court comme .bstat b ou .step .n) - sur mobile étroit un intitulé un
 * peu long à taille fixe se serait retrouvé sur plusieurs lignes disproportionnées dans
 * la carte .pricing. Mêmes bornes que .bstat b pour rester cohérent avec le composant voisin. */
.pricing .p0{font-family:var(--ac-font-display);font-style:italic;font-weight:900;font-size:clamp(1.8rem,5vw,3rem);color:var(--ac-black);line-height:1.1}
.pricing p{max-width:52ch;margin:12px auto 20px}
.testi{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:760px){.testi{grid-template-columns:1fr}}
.testi-card{background:var(--ac-white);border:1px solid var(--ac-line);border-radius:var(--r-lg);padding:24px}
.testi-card p{font-size:.96rem;line-height:1.6;margin-bottom:14px}
.testi-card .who{display:flex;align-items:center;gap:11px;font-family:var(--ac-font-ui)}
.testi-card .av{width:42px;height:42px;border-radius:50%;background:var(--ac-paper-dark);display:flex;align-items:center;justify-content:center;font-family:var(--ac-font-display);font-style:italic;font-weight:800;color:var(--ac-graphite)}
.testi-card .nm{font-weight:600;font-size:.86rem}
.testi-card .rl{font-size:.76rem;color:var(--ac-stone)}

/* Rendu par defaut de Contact Form 7 : aucune regle ne le stylisait nulle part sur le reseau
 * (trouve le 28/08/2026 sur la page B2B "referencer-camping" - formulaire brut, "Sujet" mal
 * aligne, bouton colle au texte de consentement). On applique le meme systeme visuel que
 * .cform/.cfield (composants.css, formulaire de demonstration) SANS toucher au contenu des
 * formulaires CF7 (balises [your-name] etc.) pour ne pas casser l'envoi des mails. Cible les
 * noms de champs par defaut CF7 (your-name/your-email/your-subject/your-message/acceptance-*),
 * identiques sur les 5 formulaires du reseau (meme origine, id 1422 duplique par portail).
 * Scope : pages.css n'est charge que sur contact/legal/B2B/FAQ/quiz/auteur, jamais ailleurs. */
.wpcf7{background:var(--ac-white);border:1px solid var(--ac-line);border-radius:var(--r-lg);padding:24px}
.wpcf7-form>p{display:flex;flex-wrap:wrap;gap:14px;margin:0}
.wpcf7-form-control-wrap{flex:1 1 260px;display:flex;position:relative}
.wpcf7-form-control-wrap[data-name*="message"],
.wpcf7-form-control-wrap[data-name*="acceptance"]{flex-basis:100%}
.wpcf7-form-control-wrap input.wpcf7-form-control,
.wpcf7-form-control-wrap select.wpcf7-form-control,
.wpcf7-form-control-wrap textarea.wpcf7-form-control{width:100%;border:1px solid var(--ac-line);border-radius:var(--r-md);padding:11px 13px;font-family:var(--ac-font-ui);font-size:.9rem;background:var(--ac-white);color:var(--ac-black)}
.wpcf7-form-control-wrap textarea.wpcf7-form-control{resize:vertical;min-height:96px}
.wpcf7-form-control-wrap input.wpcf7-form-control:focus,
.wpcf7-form-control-wrap select.wpcf7-form-control:focus,
.wpcf7-form-control-wrap textarea.wpcf7-form-control:focus{outline:none;border-color:var(--portail-accent)}
.wpcf7-list-item{display:flex;gap:9px;align-items:flex-start;margin:2px 0 0}
.wpcf7-list-item-label{font-family:var(--ac-font-ui);font-size:.78rem;color:var(--ac-stone);line-height:1.5}
.wpcf7-list-item input{margin-top:2px;flex-shrink:0}
input.wpcf7-form-control.wpcf7-submit{flex-basis:100%;width:100%;display:inline-flex;align-items:center;justify-content:center;padding:16px 26px;font-family:var(--ac-font-ui);font-size:1rem;font-weight:600;line-height:1;border:1px solid var(--portail-accent);border-radius:999px;background:var(--portail-accent);color:#fff;cursor:pointer;transition:filter var(--dur),box-shadow var(--dur)}
input.wpcf7-form-control.wpcf7-submit:hover{filter:brightness(.93)}
.wpcf7-spinner{margin:0 0 0 8px}
.wpcf7-not-valid-tip{display:block;margin-top:4px;font-family:var(--ac-font-ui);font-size:.76rem;color:#c0392b}
.wpcf7-response-output{margin:14px 0 0!important;border-radius:var(--r-md);padding:11px 13px;font-family:var(--ac-font-ui);font-size:.85rem}
.wpcf7-mail-sent-ok{border:1px solid #2e7d32;color:#2e7d32;background:#f1f8f1}
.wpcf7-validation-errors,.wpcf7-mail-sent-ng,.wpcf7-acceptance-missing,.wpcf7-spam-blocked{border:1px solid #c0392b;color:#c0392b;background:#fdf0ee}

/* ── FAQ GLOBALE ───────────────────────────────────────────────────────────── */
.faqcat{max-width:860px;margin:0 auto}
.faqcat .faq-cat-h{margin:32px 0 6px;font-size:1.3rem}
.faqcat .faq-cat-h:first-child{margin-top:0}
.faq-search{max-width:520px;margin:0 auto 8px;display:flex;gap:8px}
.faq-search input{flex:1;border:1px solid var(--ac-line);border-radius:var(--r-md);padding:12px 15px;font-family:var(--ac-font-ui);font-size:.92rem}
.faq-search input:focus{outline:none;border-color:var(--portail-accent)}
.faq-empty{text-align:center;color:var(--ac-stone);font-family:var(--ac-font-ui);padding:24px 0}

/* ── QUIZ ──────────────────────────────────────────────────────────────────── */
.quiz{max-width:680px;margin:0 auto}
.quiz-prog{height:6px;background:var(--ac-line);border-radius:99px;overflow:hidden;margin-bottom:10px}
.quiz-prog i{display:block;height:100%;background:var(--portail-accent);width:0;transition:width .35s var(--ease)}
.quiz-step{font-family:var(--ac-font-ui);font-size:.76rem;color:var(--ac-stone);text-transform:uppercase;letter-spacing:.05em;margin-bottom:20px}
.quiz-q{font-family:var(--ac-font-display);font-style:italic;font-weight:800;font-size:1.55rem;line-height:1.15;margin-bottom:22px}
.quiz-opts{display:grid;gap:12px}
.quiz-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--ac-line);border-radius:var(--r-lg);background:var(--ac-white);cursor:pointer;font-family:var(--ac-font-ui);font-size:1rem;font-weight:500;text-align:left;transition:all var(--dur)}
.quiz-opt .qi{font-size:1.4rem;width:1.5em;text-align:center}
.quiz-opt:hover{border-color:var(--portail-accent);background:rgba(var(--portail-accent-rgb),.05);transform:translateX(3px)}
.quiz-back{margin-top:20px;font-family:var(--ac-font-ui);font-size:.86rem;color:var(--ac-stone);cursor:pointer;background:none;border:0;display:inline-flex;align-items:center;gap:6px}
.quiz-back:hover{color:var(--ac-black)}
.quiz-result{text-align:center}
.quiz-result .rc{width:66px;height:66px;border-radius:50%;background:rgba(var(--portail-accent-rgb),.12);display:flex;align-items:center;justify-content:center;font-size:1.9rem;margin:0 auto 16px}
.quiz-result h2{margin-bottom:10px}
.quiz-result p{max-width:48ch;margin:0 auto 18px}
.quiz-result .rtags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.quiz-result .rtags span{font-family:var(--ac-font-ui);font-size:.8rem;padding:6px 13px;border-radius:999px;background:var(--ac-ink);border:1px solid var(--ac-ink);color:var(--ac-paper)}
.quiz-result .rbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.quiz-empty{text-align:center;color:var(--ac-stone);font-family:var(--ac-font-ui);padding:24px 0}

/* ── AUTEUR (E-E-A-T) ──────────────────────────────────────────────────────── */
.au-head{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
@media(max-width:600px){.au-head{grid-template-columns:1fr;text-align:center}}
.au-av{width:120px;height:120px;border-radius:50%;background:var(--ac-black);color:var(--ac-paper);display:flex;align-items:center;justify-content:center;font-family:var(--ac-font-display);font-style:italic;font-weight:800;font-size:2.6rem;overflow:hidden;flex-shrink:0}
.au-av img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:600px){.au-av{margin:0 auto}}
.au-role{font-family:var(--ac-font-ui);font-size:.9rem;color:var(--portail-accent);font-weight:600;margin-bottom:8px}
.au-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
@media(max-width:600px){.au-tags{justify-content:center}}
.au-tags span{font-family:var(--ac-font-ui);font-size:.78rem;padding:5px 12px;border-radius:999px;background:var(--ac-white);border:1px solid var(--ac-line);color:var(--ac-graphite)}
/* Lien LinkedIn (page-auteur-theo.php + author.php), affiché seulement si renseigné */
.au-linkedin{display:inline-block;margin-top:14px;font-family:var(--ac-font-ui);font-size:.86rem;font-weight:600;color:var(--ac-black);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--portail-accent)}

/* Grille articles ("ses guides") : réutilise .blog-grid/.post de home.css, cf inc/enqueue.php */

/* Article riche (single-article.php) : résumé, sources, partage, nav prev/next, carte auteur */
.art-meta{font-family:var(--ac-font-ui);font-size:.86rem;color:var(--ac-stone);margin-top:8px}
.art-meta a{color:var(--ac-black);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--portail-accent)}
.art-resume{background:var(--ac-highlight);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:28px}
.art-resume h2{margin-top:0}
/* Refonte 26/08/2026 (retour Théo) : l'ancien border-top créait un "double trait" juste après la
 * bordure basse du dernier item FAQ (.faq-item, ac-portail.css) - remplacé par un vrai encart en
 * fond de couleur (même token --ac-highlight que .art-resume juste au-dessus dans ce fichier,
 * cohérence visuelle), qui n'a plus besoin d'une ligne de séparation pour se distinguer. Marge
 * basse généreuse (40px) pour aérer avant .art-share qui suit. */
.art-sources{background:var(--ac-highlight);border-radius:var(--r-lg);padding:22px 24px;margin:32px 0 40px}
.art-sources h2{margin-top:0}
.art-sources ul{padding-left:20px;margin-bottom:0}
.art-sources li{margin-bottom:6px}
.art-sources li:last-child{margin-bottom:0}
.art-sources a{color:var(--ac-black);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--portail-accent)}
.art-share{display:flex;align-items:center;gap:10px;margin-top:28px;flex-wrap:wrap}
.art-share-label{font-family:var(--ac-font-ui);font-size:.86rem;color:var(--ac-stone)}
.art-nav{display:flex;justify-content:space-between;gap:16px;margin-top:28px;padding-top:20px;border-top:1px solid var(--ac-line);font-family:var(--ac-font-ui);font-size:.9rem}
.art-nav a{color:var(--ac-black);font-weight:600}
.art-nav a:hover{color:var(--portail-accent)}
.art-author{margin-top:24px}
.art-author-inner{display:flex;align-items:center;gap:14px;background:var(--ac-white);border:1px solid var(--ac-line);border-radius:var(--r-lg);padding:14px 18px;max-width:420px}
.art-author-av{width:48px;height:48px;flex:none;border-radius:50%;background:var(--ac-black);color:var(--ac-paper);display:flex;align-items:center;justify-content:center;font-family:var(--ac-font-display);font-style:italic;font-weight:800;font-size:1.1rem;overflow:hidden}
.art-author-av img{width:100%;height:100%;object-fit:cover}
.art-author-name{font-weight:700;color:var(--ac-black)}
.art-author-role{font-family:var(--ac-font-ui);font-size:.8rem;color:var(--ac-stone)}
/* Encart compact en tête d'article (miniature + nom, "Par X") - 25/08/2026, cf single-article.php
   et single.php, juste après le titre/.art-meta, avant le corps */
.art-author-mini{display:inline-flex;align-items:center;gap:10px;margin-top:14px;text-decoration:none}
.art-author-mini-av{width:32px;height:32px;flex:none;border-radius:50%;background:var(--ac-black);color:var(--ac-paper);display:flex;align-items:center;justify-content:center;font-family:var(--ac-font-display);font-style:italic;font-weight:800;font-size:.78rem;overflow:hidden}
.art-author-mini-av img{width:100%;height:100%;object-fit:cover}
.art-author-mini-name{font-family:var(--ac-font-ui);font-size:.86rem;font-weight:600;color:var(--ac-black)}
/* Encart développé en fin d'article (photo plus grande, bio, liens page auteur + LinkedIn) -
   25/08/2026, modificateur de .art-author : la carte englobe tout le bloc (pas seulement
   avatar+nom comme la variante par défaut), cf single-article.php et single.php */
.art-author-lg{background:var(--ac-white);border:1px solid var(--ac-line);border-radius:var(--r-lg);padding:20px 22px;max-width:480px}
.art-author-lg .art-author-inner{background:none;border:none;padding:0;max-width:none}
.art-author-lg .art-author-av{width:64px;height:64px;font-size:1.3rem}
.art-author-bio{margin-top:14px;font-size:.92rem;line-height:1.55;color:var(--ac-graphite)}
.art-author-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.art-author-links a{font-family:var(--ac-font-ui);font-size:.86rem;font-weight:600;color:var(--ac-black);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--portail-accent)}