/* Opaddock - styles specifiques (UTF-8) */
/* A completer avec la maquette */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; }

/* ═══════════════════════════════════════════════════════════════════════════
   MAILLAGE INTERNE — « Découvrir aussi » (13/09/2026)
   ---------------------------------------------------------------------------
   Le bloc de liens contextuels posé en bas des fiches d'établissement et de
   parcours (shared/functions/opaddock_maillage.php). Il répare le défaut que le
   sitemap documentait : les fiches n'étaient liées depuis aucune page indexable.

   Parti pris : ce bloc se lit, il ne se subit pas. Il vient APRÈS le contenu, en
   retrait visuel, sur fond neutre — un visiteur qui a fini sa lecture y trouve
   la suite, il ne le confond pas avec le contenu de la fiche.
   ═══════════════════════════════════════════════════════════════════════════ */
.opd-maillage {
    max-width: 1180px;
    margin: 8px auto 40px;
    padding: 26px 18px 4px;
    border-top: 1px solid rgba(15, 23, 42, .07);
}
.opd-maillage-chapeau {
    font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #94a3b8; margin: 0 0 18px;
}
.opd-maillage-bloc { margin-bottom: 26px; }
.opd-maillage-titre {
    font-size: 17px; font-weight: 800; color: #1e293b; margin: 0 0 12px;
}
/* Deux à trois colonnes selon la place : une liste de 6 liens sur une seule
   colonne oblige à défiler pour rien. */
.opd-maillage-liste {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 22px;
}
.opd-maillage-liste li {
    padding: 7px 0; border-bottom: 1px solid rgba(15, 23, 42, .05);
    font-size: 14.5px; line-height: 1.45;
}
.opd-maillage-liste a {
    color: var(--primary-dark); font-weight: 600; text-decoration: none;
}
.opd-maillage-liste a:hover { text-decoration: underline; }
.opd-maillage-liste a:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px;
}
/* La ville accompagne le nom sans entrer dans l'ancre : l'ancre doit rester le
   nom de la fiche, c'est ce qu'attend un lecteur et ce qui reste naturel à
   l'échelle du site. */
.opd-maillage-ville { color: #94a3b8; font-size: 13px; font-weight: 500; }

@media (max-width: 560px) {
    .opd-maillage { padding: 22px 14px 4px; margin-bottom: 28px; }
    .opd-maillage-liste { grid-template-columns: 1fr; }
}

/* Variante « accès direct » : la même liste, posée SOUS des résultats déjà
   affichés (recherche de balades). Plus discrète — elle complète la grille, elle
   ne la concurrence pas. */
.opd-maillage-inline { border-top: 1px dashed rgba(15, 23, 42, .12); margin-top: 26px; padding-top: 20px; }
.opd-maillage-inline .opd-maillage-titre { font-size: 14px; color: #64748b; font-weight: 700; }
.opd-maillage-inline .opd-maillage-liste li { font-size: 13.5px; }

/* ── FAQ (page « Proposez vos installations ») ──────────────────────────────
   <details> natif : ouvrable sans JavaScript, accessible au clavier, et son
   contenu reste dans le HTML même replié — donc lisible par un moteur et par une
   IA. Ne pas le remplacer par un accordéon maison en JS. */
.opd-faq { max-width: 820px; margin: 8px auto 56px; padding: 0 18px; }
.opd-faq-titre {
    font-size: 24px; font-weight: 800; color: #0f172a; margin: 0 0 20px; text-align: center;
}
.opd-faq-item {
    border: 1px solid rgba(15, 23, 42, .09); border-radius: 14px;
    background: #fff; margin-bottom: 10px; overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.opd-faq-item[open] {
    border-color: rgba(var(--primary-rgb), .35);
    box-shadow: 0 10px 26px -18px rgba(15, 23, 42, .35);
}
.opd-faq-item > summary {
    cursor: pointer; list-style: none; padding: 15px 46px 15px 18px; position: relative;
    font-size: 15.5px; font-weight: 650; color: #1e293b; line-height: 1.45;
}
.opd-faq-item > summary::-webkit-details-marker { display: none; }
.opd-faq-item > summary::after {
    content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    font-size: 20px; font-weight: 400; color: var(--primary); transition: transform .18s;
}
.opd-faq-item[open] > summary::after { content: '\2212'; }
.opd-faq-item > summary:focus-visible {
    outline: 2px solid var(--primary); outline-offset: -2px;
}
.opd-faq-item > p {
    margin: 0; padding: 0 18px 17px; font-size: 14.5px; line-height: 1.62; color: #475569;
}
@media (prefers-reduced-motion: reduce) {
    .opd-faq-item, .opd-faq-item > summary::after { transition: none; }
}

/* ── Glossaire équestre ─────────────────────────────────────────────────────
   <dl> natif : le balisage HTML fait pour une liste de définitions. Il porte le
   sens sans qu'aucun attribut ne soit nécessaire — ne pas le remplacer par des
   <div>. */
.opd-glossaire { max-width: 780px; margin: 0 auto; padding: 40px 18px 64px; }
.opd-glossaire h1 { font-size: 30px; font-weight: 800; color: #0f172a; margin: 0 0 12px; }
.opd-glossaire-intro { font-size: 16px; line-height: 1.65; color: #64748b; margin: 0 0 34px; }
.opd-glossaire-liste { margin: 0; }
.opd-glossaire-liste dt {
    font-size: 17px; font-weight: 750; color: var(--primary-dark);
    margin-top: 26px; padding-bottom: 6px; border-bottom: 2px solid rgba(var(--primary-rgb), .18);
}
.opd-glossaire-liste dd {
    margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: #475569;
}