/* ============================================================
   REPTHOCI.NET — Espaces publicitaires (styles partagés)
   Chargé par toutes les pages du frontend, après la feuille
   de style inline de chaque page.

   N'introduit que des classes NOUVELLES pour ne jamais écraser
   les styles existants (.ad-space, .ad-sidebar-rect, etc.).
   ============================================================ */

/* ------------------------------------------------------------
   1. Bannières hero (hero_banner_1 / hero_banner_2) — 300×120
   ------------------------------------------------------------ */
.hero-ads-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 380px;
}

/* Neutralise le height:100% de la page : la colonne est desormais un
   conteneur flex, le slideshow prend la place restante. */
.hero-ads-col > .hero-ads {
    flex: 1 1 auto;
    height: auto;
    min-height: 240px;
}

.hero-ads-banners {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 auto;
}

.ad-hero-banner {
    height: 120px;
    border: 1.5px dashed rgba(204, 31, 31, 0.55);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: rgba(255, 200, 180, 0.9);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: background .2s;
}

.ad-hero-banner:hover {
    background: rgba(204, 31, 31, 0.12);
}

.ad-hero-banner i {
    font-size: 20px;
    opacity: 0.7;
}

.ad-hero-banner .ad-rent-tag {
    background: rgba(239, 159, 39, 0.15);
    color: #F5C9A0;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 4px;
}

@media (max-width: 960px) {
    .hero-ads-col { min-height: 0; margin-top: 8px; }
    .hero-ads-col > .hero-ads { height: 240px; min-height: 240px; margin-top: 0; }
    .hero-ads-banners { flex-direction: row; }
    .ad-hero-banner { flex: 1; height: 100px; }
}

@media (max-width: 640px) {
    .hero-ads-col > .hero-ads { height: 200px; min-height: 200px; }
    .hero-ads-banners { flex-direction: column; }
}

/* ------------------------------------------------------------
   2. Logo partenaire en pied de page (logo_partenaire) — 130×52
   ------------------------------------------------------------ */
.footer-ad-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Le conteneur se réduit à zéro quand le label et l'emplacement sont
   masqués par js/regie-espaces.js : aucune marge n'est portée par le
   conteneur lui-même, tout est sur les enfants. */
p.footer-ad-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #D4926A;
    margin: 18px 0 0;
    text-align: center;
}

.ad-logo-partenaire {
    margin-bottom: 6px;
    width: 130px;
    height: 52px;
    border: 1px dashed rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #F5C9A0;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: background .2s, border-color .2s;
}

.ad-logo-partenaire:hover {
    background: rgba(239, 159, 39, 0.12);
    border-color: rgba(239, 159, 39, 0.6);
}

.ad-logo-partenaire i {
    font-size: 16px;
    opacity: 0.7;
}

.ad-logo-partenaire .ad-tarif {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
}

/* ------------------------------------------------------------
   3. Bannières horizontales pour les pages sans sidebar
      (apropos, galerie, organisme)
      Classes dédiées : ne surchargent aucun style existant.
   ------------------------------------------------------------ */
.ad-banner-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

p.ad-banner-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #8a8a8a);
    margin: 8px 0 0;
    text-align: center;
}

.ad-banner-inline,
.ad-banner-bottom {
    margin-bottom: 28px;
    width: 100%;
    max-width: 728px;
    height: 80px;
    overflow: hidden;
}

.ad-banner-bottom {
    max-width: 970px;
    height: 90px;
}

@media (max-width: 768px) {
    .ad-banner-inline,
    .ad-banner-bottom { height: 70px; }
}

/* ------------------------------------------------------------
   4. Emplacements vacants (aucune publicité active)
      En production ils sont MASQUÉS par js/regie-espaces.js
      (display:none posé en ligne, sur l'emplacement et sur son
      label). Tant qu'une campagne n'est pas enregistrée, rien
      n'apparaît : ni cadre, ni case vide, ni titre orphelin.
      La classe ci-dessous ne sert donc qu'au mode ?pub=preview.
   ------------------------------------------------------------ */
.rh-espace-libre {
    cursor: pointer;
}

/* ------------------------------------------------------------
   5. Modes de débogage
      ?pub=preview → RÉVÈLE les emplacements vacants, chacun
                     marqué d'un badge portant son code
      ?pub=hide    → masque les emplacements vacants (identique
                     au comportement de production)
      ?pub=off     → retour au comportement de production
      Aucun effet visiteur : les classes .pub-preview / .pub-hide
      ne sont posées sur <body> que par js/regie-espaces.js.
   ------------------------------------------------------------ */
body.pub-preview .rh-espace-libre {
    position: relative;
    outline: 2px dashed #EF9F27;
    outline-offset: 2px;
    /* Les conteneurs de la régie v2 sont des div VIDES : sans hauteur
       imposee ils se replient a zero pixel et le mode de reperage
       n'afficherait rien. */
    min-height: 46px;
    display: block;
}

body.pub-preview .rh-badge-apercu {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 3;
    background: #EF9F27;
    color: #2B1508;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
    white-space: nowrap;
}

/* Bandeau de rappel : on n'est pas dans le rendu de production. */
body.pub-preview::before,
body.pub-hide::before {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #EF9F27;
    color: #2B1508;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    padding: 6px 12px;
    pointer-events: none;
}

body.pub-preview::before {
    content: "Mode repérage des espaces publicitaires — ajoutez ?pub=off à l\2019 URL pour revenir à l\2019 affichage normal";
}

body.pub-hide::before {
    content: "Emplacements vacants masqués — ajoutez ?pub=off à l\2019 URL pour revenir à l\2019 affichage normal";
}

/* ------------------------------------------------------------
   6. Carrousel publicitaire
      Actif dès qu'un espace a 2 publicités actives ou plus
      (sidebar, leaderboard, inline, strip, hero, logo…).
      Structure posée par js/regie-espaces.js :
        .rh-rotation > .rh-vue.is-active > a|div > img
                             > .rh-puces > button.rh-puce
   ------------------------------------------------------------ */
/* Le selecteur exigeait la classe .ad-space, heritee des emplacements
   de la v1. Les conteneurs actuels sont de simples <div data-pub-espace>
   sans aucune classe : AUCUNE de ces regles ne s'appliquait, les slides
   se retrouvaient empilees les unes sous les autres, toutes visibles.
   On cible desormais .rh-rotation seul, classe posee par le script. */
.rh-rotation {
    position: relative;
    padding: 0;
    overflow: hidden;

    /* GRILLE A UNE SEULE CASE.
       Toutes les diapositives sont placees dans la MEME case et restent
       dans le flux : la hauteur du conteneur est celle de la plus haute
       d'entre elles, calculee par le navigateur, sans aucune intervention.

       Les deux approches precedentes echouaient :
       - toutes les diapositives en position absolue : le conteneur, vide
         de tout contenu en flux, se repliait a zero pixel ;
       - la premiere laissee en flux et les autres en absolu : la hauteur
         dependait alors de « height:100% » sur un parent de hauteur auto,
         un calcul qui retombe a zero des que l'image n'expose pas de
         proportions intrinseques.
       La grille supprime la question : plus de pourcentage a resoudre,
       plus de cas particulier sur la premiere diapositive. */
    display: grid;
    grid-template-columns: 1fr;
}

.rh-rotation .rh-vue {
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
    z-index: 1;
    /* Les diapositives masquees ne doivent pas capter les clics de
       celle qui est affichee par-dessus. */
    pointer-events: none;
}

.rh-rotation .rh-vue.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    pointer-events: auto;
}

/* Les visuels gardent leurs proportions : la mise a l'echelle est posee
   en ligne par js/regie-espaces.js (max-width, object-fit). On se garde
   donc d'imposer ici une largeur qui deformerait un logo etroit. */
.rh-rotation .rh-vue > a,
.rh-rotation .rh-vue > div {
    width: 100%;
}

/* ------------------------------------------------------------
   Leaderboard haut de page
   ------------------------------------------------------------
   Bandeau juste sous la barre de navigation, sur les 11 pages.

   Les marges sont posees sur .rh-espace-rempli, JAMAIS sur le
   conteneur exterieur : cette classe n'apparait que lorsqu'une
   campagne occupe l'emplacement. Un espace invendu ne laisse donc
   aucun blanc sous le menu — c'est toute la difference entre un
   emplacement vide et un trou dans la page.
   ------------------------------------------------------------ */
.lb-haut {
    display: flex;
    justify-content: center;
}

.lb-haut > [data-pub-espace] {
    width: 100%;
    max-width: 970px;      /* format leaderboard 970x90 */
}

.lb-haut > .rh-espace-rempli {
    margin: 18px auto;
}

@media (max-width: 1024px) {
    .lb-haut > [data-pub-espace] { max-width: 728px; }
}

@media (max-width: 768px) {
    .lb-haut > [data-pub-espace] { max-width: 320px; }
    .lb-haut > .rh-espace-rempli { margin: 12px auto; }
}

/* ------------------------------------------------------------
   Effet de zoom au survol
   ------------------------------------------------------------
   Le visuel de la publicite affichee grossit legerement quand le
   curseur entre dans l'emplacement. Le script met deja la rotation
   en pause au survol : les deux se completent, le visiteur peut
   examiner l'annonce qui l'interesse sans qu'elle lui echappe.

   Le zoom porte sur l'IMAGE, jamais sur le conteneur : agrandir le
   conteneur deplacerait le reste de la page a chaque survol. Le
   conteneur ayant overflow:hidden, le debordement est rogne
   proprement.

   @media (hover: hover) : sur un ecran tactile, un « survol » reste
   colle apres le doigt et l'image resterait agrandie indefiniment.
   L'effet est donc reserve aux appareils dotes d'un vrai pointeur.
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {

    .rh-rotation .rh-vue img,
    .rh-espace-rempli > a img,
    .rh-espace-rempli > div img {
        transition: transform .45s cubic-bezier(.22, .61, .36, 1);
    }

    /* Seule la vue active reagit : les vues masquees dessous n'ont
       aucune raison de s'animer. */
    .rh-rotation:hover .rh-vue.is-active img {
        transform: scale(1.07);
    }

    /* Meme traitement pour un emplacement a une seule publicite,
       sinon le survol se comporterait differemment selon le nombre
       d'annonceurs — une incoherence visible pour le visiteur. */
    .rh-espace-rempli:not(.rh-rotation):hover > a img,
    .rh-espace-rempli:not(.rh-rotation):hover > div img {
        transform: scale(1.07);
    }

    /* Le curseur main indique que l'encart est cliquable. */
    .rh-espace-rempli a { cursor: pointer; }
}

/* Mouvement reduit : reglage systeme des personnes sensibles aux
   animations, ou gene par elles. On n'impose rien. */
@media (prefers-reduced-motion: reduce) {
    .rh-rotation .rh-vue img,
    .rh-espace-rempli > a img,
    .rh-espace-rempli > div img {
        transition: none;
        transform: none !important;
    }
}

.rh-rotation .rh-puces {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
}

.rh-rotation .rh-puce {
    width: 6px;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
    cursor: pointer;
    pointer-events: auto;
    transition: width .25s, background .2s, border-radius .25s;
}

.rh-rotation .rh-puce.is-active {
    width: 16px;
    border-radius: 3px;
    background: #EF9F27;
}

@media (prefers-reduced-motion: reduce) {
    .rh-rotation .rh-vue { transition: none; }
}

/* ------------------------------------------------------------
   7. Grand format sidebar (accueil)
      Fusion de l'ancien Medium Rectangle 300×250 et du bloc
      "Flash infos" — les flashs restent diffusés par le bandeau
      défilant en haut de page.
   ------------------------------------------------------------ */
.ad-sidebar-tall {
    height: 600px;
}

/* Medium Rectangle 300×250 — issu des fusions d'emplacements
   (accueil : bannière sidebar + tarifs ; actualités : flash infos
   + bannière sidebar). */
.ad-sidebar-medium {
    height: 250px;
}

@media (max-width: 960px) {
    .ad-sidebar-tall { height: 320px; }
    .ad-sidebar-medium { height: 200px; }
}

/* ------------------------------------------------------------
   8. Popup publicitaire (interstitiel)
      Emplacements popup_accueil / popup_site, ou tout espace
      créé en type « popup » depuis l'administration.

      La fenêtre entière est construite par js/regie-espaces.js :
        .regie-popup-overlay > .regie-popup-card
             > .regie-popup-bar
             > .regie-popup-head > .regie-popup-mention + button.regie-popup-close
             > .regie-popup-body > a|div > img

      Aucun sélecteur ci-dessous n'existe ailleurs dans le projet :
      le popup ne peut pas entrer en conflit avec les modales
      « demande d'espace » déjà présentes dans les pages.
   ------------------------------------------------------------ */
.regie-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(26, 13, 5, 0.74);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .22s ease;
}

.regie-popup-overlay.is-open {
    opacity: 1;
}

.regie-popup-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FFFDF9;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(26, 13, 5, 0.42);
    transform: translateY(14px) scale(.985);
    transition: transform .26s cubic-bezier(.22, .9, .3, 1);
}

.regie-popup-overlay.is-open .regie-popup-card {
    transform: none;
}

/* Liseré haut aux couleurs du logo : rouge .net vers marron. */
.regie-popup-bar {
    flex: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #CC1F1F 0%, #E84444 45%, #6B3010 100%);
}

.regie-popup-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px 8px;
}

/* Mention légale discrète : le visiteur doit pouvoir distinguer
   un contenu commercial d'un contenu éditorial. */
.regie-popup-mention {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9A7A5A;
}

.regie-popup-close {
    appearance: none;
    border: 0;
    background: none;
    padding: 4px 6px;
    margin: -4px -6px -4px 0;
    border-radius: 6px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #CC1F1F;
    cursor: pointer;
    transition: color .18s, background .18s;
}

.regie-popup-close:hover {
    color: #8E1414;
    background: #FDEAEA;
}

.regie-popup-close:focus-visible {
    outline: 2px solid #CC1F1F;
    outline-offset: 2px;
}

.regie-popup-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 16px 16px;
    overflow: hidden;
}

.regie-popup-body > a,
.regie-popup-body > div {
    display: block;
    height: auto !important;
    border-radius: 8px;
    overflow: hidden;
}

/* buildSlide() pose des styles en ligne (width/height 100%, object-fit)
   adaptés aux bannières à hauteur fixe. Ici la carte s'adapte au visuel,
   d'où les !important : ils ne visent que l'image du popup. */
.regie-popup-body img {
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 160px);
    object-fit: contain !important;
    display: block;
}

@media (max-width: 600px) {
    .regie-popup-overlay { padding: 12px; }
    .regie-popup-card { max-height: calc(100vh - 24px); border-radius: 12px; }
    .regie-popup-head { padding: 9px 13px 7px; }
    .regie-popup-body { padding: 0 13px 13px; }
    .regie-popup-body img { max-height: calc(100vh - 130px); }
}

@media (prefers-reduced-motion: reduce) {
    .regie-popup-overlay,
    .regie-popup-card { transition: none; }
    .regie-popup-card { transform: none; }
}

/* ════════════════════════════════════════════════════════════
   9. HABILLAGE MODERNE DES EMPLACEMENTS  (09/2026)

   Jusqu'ici une publicité était une image nue posée dans une boîte :
   ni étiquette, ni cadre, ni respiration. Elle se confondait avec le
   contenu éditorial — ce qui nuit à la crédibilité du site autant qu'à
   la valeur perçue de l'espace vendu.

   Le bloc ci-dessous donne à chaque emplacement une enveloppe commune :
   mention « Publicité », fond très légèrement teinté, coins arrondis,
   ombre douce et hauteur réservée (pas de saut de page au chargement).
   ════════════════════════════════════════════════════════════ */

.rh-annonce {
    position: relative;
    display: block;
    border-radius: 14px;
    background: color-mix(in srgb, var(--green-pale, #F5F1EA) 55%, #fff);
    border: 1px solid color-mix(in srgb, var(--border, #E3E0DA) 70%, transparent);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

/* Repli pour les navigateurs sans color-mix : la règle ci-dessus est
   alors ignorée en bloc, celle-ci prend le relais. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .rh-annonce { background: #F7F4EF; border-color: #E6E2DB; }
}

.rh-annonce:hover {
    box-shadow: 0 10px 30px rgba(42, 18, 6, .10);
    border-color: color-mix(in srgb, var(--gold, #C68B43) 45%, transparent);
}

/* Mention de transparence : discrète mais toujours lisible. Elle est
   attendue par les annonceurs sérieux et par les régies partenaires. */
.rh-annonce-mention {
    position: absolute;
    top: 7px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #6B625A;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    pointer-events: none;
    line-height: 1.6;
}

.rh-annonce-mention::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold, #C68B43);
}

/* Sur un visuel sombre en pleine largeur, la pastille claire ressort mal :
   variante inversée posée par le script quand le visuel occupe tout le cadre. */
.rh-annonce.rh-pleine .rh-annonce-mention {
    background: rgba(0, 0, 0, .42);
    color: rgba(255, 255, 255, .92);
}

/* ── Squelette de chargement ──────────────────────────────────
   Un emplacement vide le temps que l'image arrive, c'est un trou blanc
   dans la page. On anime un dégradé le temps du chargement, puis le
   visuel apparaît en fondu. */
.rh-annonce-squelette {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(0, 0, 0, .035) 30%,
        rgba(0, 0, 0, .075) 50%,
        rgba(0, 0, 0, .035) 70%);
    background-size: 220% 100%;
    animation: rh-shimmer 1.5s ease-in-out infinite;
}

@keyframes rh-shimmer {
    from { background-position: 130% 0; }
    to   { background-position: -30% 0; }
}

.rh-annonce img.rh-visuel {
    opacity: 0;
    transition: opacity .45s ease;
}

.rh-annonce img.rh-visuel.est-charge { opacity: 1; }

.rh-annonce a.rh-lien { transition: transform .35s ease; }
.rh-annonce:hover a.rh-lien { transform: scale(1.015); }

@media (prefers-reduced-motion: reduce) {
    .rh-annonce, .rh-annonce a.rh-lien, .rh-annonce img.rh-visuel { transition: none; }
    .rh-annonce-squelette { animation: none; }
    .rh-annonce:hover a.rh-lien { transform: none; }
}

/* ── Encart natif ─────────────────────────────────────────────
   Le format le plus efficace et le plus élégant : il reprend la forme
   d'une carte éditoriale et s'insère dans la grille des contenus, au
   lieu d'interrompre la lecture avec un rectangle publicitaire. */
.rh-native {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--border, #E3E0DA);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.rh-native:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(42, 18, 6, .13);
    border-color: color-mix(in srgb, var(--gold, #C68B43) 50%, transparent);
}

.rh-native-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #EFEAE2;
    overflow: hidden;
}

.rh-native-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.rh-native:hover .rh-native-media img { transform: scale(1.05); }

.rh-native-corps {
    padding: 15px 16px 17px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.rh-native-annonceur {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6B625A);
}

.rh-native-annonceur img {
    width: 26px; height: 26px;
    border-radius: 7px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border, #E3E0DA);
    padding: 2px;
    flex-shrink: 0;
}

.rh-native-titre {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary, #2A1206);
    margin: 0;
}

.rh-native-accroche {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary, #6B625A);
    margin: 0;
}

.rh-native-cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gold, #C68B43);
}

.rh-native-cta::after {
    content: "→";
    transition: transform .25s ease;
}

.rh-native:hover .rh-native-cta::after { transform: translateX(4px); }

/* ── Bandeau bas mobile ───────────────────────────────────────
   Remplace le popup interstitiel sur téléphone : même visibilité,
   sans bloquer la lecture (et sans la pénalité Google qui frappe les
   interstitiels sur mobile). */
.rh-sticky {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 940;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border, #E3E0DA);
    box-shadow: 0 -6px 24px rgba(42, 18, 6, .12);
    transform: translateY(110%);
    transition: transform .4s cubic-bezier(.22, .8, .3, 1);
}

.rh-sticky.est-visible { transform: translateY(0); }

.rh-sticky-visuel {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rh-sticky-visuel img {
    max-width: 100%;
    max-height: 62px;
    width: auto; height: auto;
    display: block;
    border-radius: 6px;
}

.rh-sticky-fermer {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border, #E3E0DA);
    background: #fff;
    color: #6B625A;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rh-sticky-fermer:hover { background: #F3EFE9; color: #2A1206; }

.rh-sticky-mention {
    position: absolute;
    top: -17px; left: 10px;
    padding: 1px 7px;
    border-radius: 6px 6px 0 0;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--border, #E3E0DA);
    border-bottom: none;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8A7A6A;
}

/* Le bandeau est un format mobile : au-delà, les emplacements de la page
   suffisent et il ne ferait qu'encombrer. */
@media (min-width: 768px) {
    .rh-sticky { display: none !important; }
}

/* ── Hauteurs réservées par emplacement ───────────────────────
   Sans elles, la page « saute » quand la publicité arrive : c'est
   désagréable à la lecture et pénalisé par Google (CLS). */
[data-pub-espace="leaderboard_haut"]  { min-height: 92px; }
[data-pub-espace="billboard_fin"]     { min-height: 132px; }
[data-pub-espace="rail_sticky"]       { min-height: 258px; }
[data-pub-espace="interscroll"]       { min-height: 122px; }
[data-pub-espace="sponsor_newsletter"]{ min-height: 62px; }

@media (max-width: 767px) {
    [data-pub-espace="leaderboard_haut"] { min-height: 104px; }
    [data-pub-espace="billboard_fin"]    { min-height: 104px; }
    [data-pub-espace="interscroll"]      { min-height: 104px; }
}

/* Un emplacement masqué (aucune campagne) ne réserve aucune hauteur :
   la page se referme sur elle-même. */
[data-pub-espace][style*="display: none"],
[data-pub-espace][style*="display:none"] { min-height: 0 !important; }

/* ── Auto-promotion d'un emplacement invendu ──────────────────
   Activée au cas par cas avec data-pub-repli sur le conteneur. */
.rh-annonce.rh-repli { background: linear-gradient(135deg, #FBF8F3, #F3EDE3); }

.rh-repli-lien {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    padding: 18px 20px;
    min-height: 100%;
    text-decoration: none;
    color: inherit;
}

.rh-repli-titre {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #2A1206);
}

.rh-repli-texte {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-secondary, #6B625A);
    max-width: 46ch;
}

.rh-repli-cta {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--gold, #C68B43);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    transition: filter .2s ease;
}

.rh-repli-lien:hover .rh-repli-cta { filter: brightness(1.08); }

/* Un repli maison n'est pas une publicité : la mention n'a pas lieu d'être. */
.rh-annonce.rh-repli .rh-annonce-mention { display: none; }

/* ════════════════════════════════════════════════════════════
   10. LOUPE DES EMPLACEMENTS ÉTROITS  (11/2026)

   Le rail de droite fait 300 px. Une affiche d'annonceur y est réduite
   au quart de sa taille : l'image se voit, mais plus une seule ligne ne
   se lit — dates d'inscription, diplômes, conditions, téléphone.
   L'annonceur payait donc pour un visuel illisible.

   Au survol, le visuel réapparaît à côté du rail, à une taille où le
   texte se lit. Le panneau est en position fixe, donc jamais rogné par
   le conteneur de l'emplacement.
   ════════════════════════════════════════════════════════════ */

.rh-loupe {
    position: fixed;
    z-index: 980;
    opacity: 0;
    visibility: hidden;
    transform: scale(.97);
    transform-origin: center;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    /* Le panneau ne doit jamais voler le clic destiné à l'annonce. */
    pointer-events: none;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 70px rgba(26, 13, 5, .34), 0 0 0 1px rgba(0, 0, 0, .07);
}

.rh-loupe.est-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.rh-loupe img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

/* Même mention de transparence que sur l'emplacement d'origine : agrandi,
   le visuel ne doit pas pouvoir passer pour un contenu de la rédaction. */
.rh-loupe-mention {
    position: absolute;
    top: 8px;
    left: 9px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .46);
    color: rgba(255, 255, 255, .93);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1.7;
}

/* Repère discret : sans lui, personne ne devine que survoler agrandit. */
.rh-loupe-indice {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #6B625A;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.6;
    pointer-events: none;
    opacity: .75;
    transition: opacity .2s ease;
}

.rh-loupe-indice i { font-size: 13px; color: var(--gold, #C68B43); }

.rh-loupe-active:hover .rh-loupe-indice { opacity: 1; }

/* Pas de survol sur écran tactile : l'appui doit ouvrir le lien, et le
   repère n'aurait aucun sens. Le script applique déjà la même règle. */
@media (hover: none), (pointer: coarse) {
    .rh-loupe, .rh-loupe-indice { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .rh-loupe { transition: opacity .01s linear; transform: none; }
    .rh-loupe.est-visible { transform: none; }
}