/* ============================================================
   REPTHOCI.NET — Socle commun de mise en forme
   Généré le 04/09/2026 à partir des règles CSS qui étaient recopiées à
   l'identique dans au moins 8 des 15 pages du site.

   POURQUOI
   Chaque page portait sa propre copie du même socle — variables de charte,
   remise à zéro, conteneur, boutons, étiquettes, en-tête, pied de page.
   Une retouche de charte demandait quinze modifications, avec le risque
   qu'une page soit oubliée et diverge silencieusement.

   CE QUI N'EST PAS ICI
   Rien de ce qui vit dans un @media, un @supports ou un @keyframes : ces
   règles dépendent d'un contexte et les sortir de leur bloc les appliquerait
   à toutes les tailles d'écran. Elles restent dans chaque page.

   PLACEMENT DANS LA CASCADE
   Chargé AVANT le bloc <style> de chaque page : les règles propres à une
   page continuent donc de primer, exactement comme avant l'extraction.
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root { --green-dark: #2A1206; --green-mid: #4A1E0A; --green-main: #6B3010; --green-light: #8B4513; --green-pale: #F5E6DA; --gold: #CC1F1F; --gold-light: #E84444; --gold-pale: #FDEAEA; --text-primary: #1A0D05; --text-secondary:#5A3A1A; --text-muted: #9A7A5A; --bg: #FFFFFF; --bg-card: #FFFFFF; --border: rgba(107,48,16,0.12); --border-hover: rgba(107,48,16,0.28); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 4px rgba(107,48,16,0.08); --shadow-md: 0 4px 16px rgba(107,48,16,0.13); }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text-primary); line-height: 1.6; font-size: 15px; }
a { text-decoration: none; color: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.tag { display: inline-block; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; padding: 3px 8px; border-radius: 4px; }
.tag-green { background: var(--green-pale); color: var(--gold); }
.tag-gold { background: var(--gold-pale); color: #8B0000; }
.tag-white { background: rgba(255,255,255,.2); color: #fff; }
.topbar { background: var(--green-dark); padding: 8px 0; font-size: 12px; color: #F5C9A0; letter-spacing: 0.04em; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; }
.topbar-left { display: flex; align-items: center; gap: 20px; }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-right a { color: #F5C9A0; transition: color .2s; }
.topbar-right a:hover { color: #fff; }
.topbar-sep { opacity: 0.3; }
.navbar { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
.navbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.nav-links { display: flex; gap: 6px; list-style: none; }
.nav-links li a { padding: 7px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text-secondary); transition: background .2s, color .2s; }
.nav-links li a:hover, .nav-links li a.active { background: var(--green-pale); color: var(--gold); }
.navbar-inner { gap: 18px; }
.logo { flex-shrink: 0; line-height: 0; }
.logo img { height: 48px; width: auto; display: block; }
.nav-links { gap: 2px; flex-wrap: nowrap; }
.nav-links li a { display: block; padding: 7px 11px; white-space: nowrap; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-toggle { display: none; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 50%; background: none; color: var(--green-main); cursor: pointer; transition: border-color .2s, color .2s; }
.nav-toggle:hover { border-color: var(--green-light); color: var(--gold); }
.nav-toggle .ti { font-size: 20px; }
.btn-nav-search { background: none; border: 1px solid var(--border); border-radius: 20px; padding: 7px 8px 7px 14px; color: var(--text-muted); font-size: 14px; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: border-color .2s, color .2s; }
.btn-nav-search:hover { border-color: var(--green-light); color: var(--green-main); }
.btn-nav-search .ti { font-size: 17px; color: var(--gold); flex: none; }
.btn-nav-kbd { border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; font-family: inherit; font-size: 10px; letter-spacing: .04em; white-space: nowrap; color: var(--text-muted); background: var(--bg); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.btn-cta { background: var(--green-main); color: #fff; border: none; padding: 9px 18px; border-radius: 20px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; transition: background .2s; }
.btn-cta:hover { background: var(--gold); }
.ticker-label { background: var(--gold); color: var(--green-dark); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 12px; border-radius: 0 4px 4px 0; white-space: nowrap; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #F5C9A0; margin-bottom: 14px; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb-sep { opacity: 0.5; }
.page-hero h1 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 36px; color: #fff; line-height: 1.2; margin-bottom: 10px; }
.page-hero h1 em { color: var(--gold); font-style: italic; }
.filters-bar { background: #fff; border-bottom: 1px solid var(--border); padding: 16px 0; position: sticky; top: 65px; z-index: 90; box-shadow: var(--shadow-sm); }
.search-input-wrap { flex: 1; min-width: 220px; position: relative; }
.search-input-wrap input:focus { outline: none; border-color: var(--green-main); background: #fff; }
.search-input-wrap input::placeholder { color: var(--text-muted); }
.cat-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.cat-chip i { font-size: 13px; color: var(--green-light); }
.cat-chip:hover, .cat-chip.active { border-color: var(--green-main); color: var(--green-main); background: var(--green-pale); }
.cat-chip.active i { color: var(--gold); }
.main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: start; }
.section-title-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.section-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.section-title::before { content: ''; display: inline-block; width: 4px; height: 22px; background: var(--gold); border-radius: 2px; flex-shrink: 0; }
.article-meta span { display: flex; align-items: center; gap: 4px; }
.article-card { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-card); cursor: pointer; transition: box-shadow .2s, border-color .2s; }
.article-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-hover); }
.page-btn:hover { border-color: var(--green-main); color: var(--green-main); background: var(--green-pale); }
.page-btn.active { background: var(--green-main); color: #fff; border-color: var(--green-main); }
.sidebar { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 20px; }
.sidebar-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 16px; }
.sidebar-block h3 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.sidebar-block h3 i { font-size: 17px; color: var(--gold); }
.nl-mini { background: linear-gradient(135deg, var(--green-dark), #4A1E0A); border-radius: var(--radius-lg); padding: 20px 18px; }
.nl-mini h3 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color: #F5C9A0; margin-bottom: 8px; }
.nl-mini p { font-size: 12px; color: #D4926A; line-height: 1.5; margin-bottom: 14px; }
.nl-mini input::placeholder { color: rgba(255,255,255,.45); }
.nl-mini input:focus { outline: none; border-color: var(--gold); }
.btn-nl-mini { width: 100%; background: var(--gold); color: var(--green-dark); border: none; padding: 10px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; transition: background .2s; }
.btn-nl-mini:hover { background: var(--gold-light); }
.flash-list { display: flex; flex-direction: column; gap: 10px; }
.flash-item { display: flex; gap: 10px; align-items: flex-start; }
.flash-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 5px; }
.flash-text { font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.flash-date { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.ad-pricing-block { background: linear-gradient(135deg, var(--green-dark), #4A1E0A); border-radius: var(--radius-lg); padding: 20px 18px; color: #fff; }
.ad-pricing-block h3 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color: #F5C9A0; margin-bottom: 6px; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table tr { border-bottom: 1px solid rgba(255,255,255,0.08); }
.price-table tr:last-child { border: none; }
.price-table td:first-child { color: #F5C9A0; }
.price-table td:last-child { text-align: right; color: #F5C9A0; font-weight: 500; }
.btn-devis:hover { background: var(--gold-light); }
footer { background: var(--green-dark); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding: 52px 0 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand p { font-size: 13px; color: #D4926A; line-height: 1.7; margin-bottom: 18px; margin-top: 12px; }
.social-links { display: flex; gap: 8px; }
.social-btn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: #F5C9A0; font-size: 16px; transition: background .2s; cursor: pointer; }
.social-btn:hover { background: var(--gold); color: #fff; }
.footer-col h4 { font-size: 11px; font-weight: 500; color: var(--gold-light); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.footer-links-list { display: flex; flex-direction: column; gap: 8px; }
.footer-links-list a { font-size: 13px; color: #F5C9A0; transition: color .2s; }
.footer-links-list a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 12px; color: #D4926A; }
.footer-bottom a { color: #D4926A; transition: color .2s; }
.footer-bottom a:hover { color: #fff; }
#ad-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; align-items: center; justify-content: center; }
.article-content { font-size: 16px; line-height: 1.85; color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.article-content p { margin: 0 0 1.2em; }
.article-content p:last-child { margin-bottom: 0; }
.article-content h2 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 700; color: var(--text-primary); margin: 2em 0 .6em; line-height: 1.3; border-left: 4px solid var(--gold); padding-left: 14px; }
.article-content h3 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 600; color: var(--text-primary); margin: 1.6em 0 .5em; line-height: 1.4; }
.article-content h4 { font-size: 17px; font-weight: 600; color: var(--text-primary); margin: 1.4em 0 .4em; }
.article-content strong, .article-content b { font-weight: 600; color: var(--text-primary); }
.article-content em, .article-content i { font-style: italic; color: var(--text-secondary); }
.article-content u { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.article-content a { color: var(--gold); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .2s; }
.article-content a:hover { text-decoration-color: var(--gold); }
.article-content ul { margin: 0 0 1.2em 1.4em; padding: 0; list-style: none; }
.article-content ul li { position: relative; padding-left: 18px; margin-bottom: .5em; }
.article-content ul li::before { content: ''; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.article-content ol { margin: 0 0 1.2em 1.6em; padding: 0; counter-reset: art-ol; list-style: none; }
.article-content ol li { position: relative; padding-left: 10px; margin-bottom: .5em; counter-increment: art-ol; }
.article-content ol li::before { content: counter(art-ol) '.'; position: absolute; left: -1.4em; color: var(--gold); font-weight: 600; font-size: 14px; }
.article-content blockquote { margin: 1.5em 0; padding: 14px 20px; border-left: 4px solid var(--gold); background: var(--gold-pale); border-radius: 0 8px 8px 0; font-style: italic; color: var(--text-secondary); font-size: 15px; line-height: 1.7; }
.article-content blockquote p { margin: 0; }
.article-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 1.4em 0; display: block; box-shadow: 0 4px 16px rgba(0,0,0,.1); }
/* ── Images et légendes dans le corps d'un article ────────────
   L'éditeur de l'administration pose les images avec les classes
   .fimg / .fimg-fig / .fimg--pleine|centre|gauche|droite et une largeur
   en ligne. Ces classes étaient stylées DANS l'éditeur et sur la fiche
   d'organisme, mais nulle part sur les pages d'article : le rendu public
   ne correspondait donc pas à ce que le rédacteur voyait en saisissant.

   Trois conséquences, toutes visibles :
   - la légende se centrait sur la FIGURE et non sur l'image. Dès que
     l'image était moins large que la colonne, la légende s'étalait plus
     large qu'elle et semblait déborder ;
   - une image réglée « centrée » restait collée à gauche ;
   - une image « habillée à gauche » ou « à droite » ne flottait pas : le
     texte passait dessous au lieu de venir à côté.

   Les règles ci-dessous reprennent exactement celles de l'éditeur, pour
   que l'aperçu de saisie et la page publiée soient identiques. */

/* Le bloc de contenu doit contenir ses propres flottants : sans cela, une
   image habillée en fin d'article dépassait sous le cadre blanc de la
   fiche, par-dessus le bloc suivant. */
.article-content { display: flow-root; }

.article-content figure {
    margin: 1.5em 0;
    /* Une largeur en ligne supérieure à la colonne ne doit jamais
       pousser la page : le texte déborderait avec elle. */
    max-width: 100%;
}

/* L'image remplit sa figure : c'est ce qui aligne la légende sur l'image.
   Sans cette règle, une image plus étroite que la colonne laissait la
   légende s'étendre jusqu'aux bords de la figure. */
.article-content figure.fimg-fig img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

.article-content figcaption {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
    font-style: italic;
    line-height: 1.5;
    /* Une légende sans espace — un nom de fichier, une URL, un nom propre
       très long — forçait la largeur de la figure et débordait avec elle. */
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* Position de l'image dans le texte, telle que réglée dans l'éditeur. */
.article-content .fimg { max-width: 100%; height: auto; border-radius: 10px; }

.article-content .fimg--pleine,
.article-content figure.fimg-fig.fimg--pleine {
    display: block; width: 100%; margin-left: 0; margin-right: 0; float: none;
}

.article-content .fimg--centre,
.article-content figure.fimg-fig.fimg--centre {
    display: block; margin-left: auto; margin-right: auto; float: none;
}

.article-content .fimg--gauche,
.article-content figure.fimg-fig.fimg--gauche {
    float: left; margin: .35em 22px 14px 0;
}

.article-content .fimg--droite,
.article-content figure.fimg-fig.fimg--droite {
    float: right; margin: .35em 0 14px 22px;
}

/* Le texte qui suit ne doit pas rester accroché à une image flottante :
   sans cela, un titre de section venait se loger à côté de l'image. */
.article-content h2,
.article-content h3,
.article-content hr,
.article-content blockquote,
.article-content table { clear: both; }

/* Sur téléphone, une image habillée à 42 % laisse trois mots par ligne.
   On déplie tout en pleine largeur. */
@media (max-width: 640px) {
    .article-content .fimg--gauche,
    .article-content .fimg--droite,
    .article-content figure.fimg-fig.fimg--gauche,
    .article-content figure.fimg-fig.fimg--droite,
    .article-content figure.fimg-fig {
        float: none;
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
    }
}
.article-content hr { border: none; border-top: 2px solid var(--border); margin: 2em 0; }
.article-content pre { background: #1a1a2e; color: #e2e8f0; border-radius: 8px; padding: 16px 20px; font-size: 14px; overflow-x: auto; margin: 1.4em 0; line-height: 1.6; }
.article-content code { background: var(--gold-pale); color: #8B0000; padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: 'Courier New', monospace; }
.article-content pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.article-content table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 14px; }
.article-content th { background: var(--gold-pale); color: var(--text-primary); font-weight: 600; padding: 10px 14px; text-align: left; border: 1px solid var(--border); }
.article-content td { padding: 9px 14px; border: 1px solid var(--border); vertical-align: top; }
.article-content tr:nth-child(even) td { background: var(--bg); }
.lang-switch { display:inline-flex; align-items:center; border:1px solid rgba(245,201,160,.4); border-radius:20px; overflow:hidden; margin-left:4px; }
.lang-switch button { background:transparent; border:none; color:#F5C9A0; font-size:11px; font-weight:700; padding:3px 9px; cursor:pointer; font-family:inherit; letter-spacing:.03em; transition:background .15s, color .15s; }
.lang-switch button.active { background:var(--gold); color:#fff; }
.lang-switch button:not(.active):hover { color:#fff; }
