/* Annonces OrcaCod (IMAGES seulement) — fichier IDENTIQUE dans les quatre projets (orcacod, darna, jawab-platform, mekhzoni) : modifier au centre puis recopier.
   Deux formes : bandeau long COLLANT en haut (.oc-ad--top) et carte compacte COLLÉE au bas de l'écran (.oc-ad--side, ordinateur seulement).
   Sans aucun script : le bouton × est une case à cocher (.oc-toggle) ; le mot « إعلان » reste toujours visible sur l'image.
   --oc-top-h = hauteur du bandeau : les en-têtes collants propres à chaque site se décalent sous lui avec cette variable (voir la fin du CSS de chaque site). */
:root { --oc-top-h: clamp(46px, 6.2vw, 92px); }
@media (max-width: 719px) { :root { --oc-top-h: 58px; } }

.oc-toggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.oc-toggle:checked + .oc-ad { display: none; }

.oc-ad, .oc-ad * { box-sizing: border-box; }
.oc-ad { position: relative; font: 700 11px/1 system-ui, "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif; background: #0f172a; overflow: hidden; }
.oc-ad a { display: block; color: inherit; text-decoration: none; }
.oc-ad picture { display: block; }
.oc-ad__pic { display: block; width: 100%; }
.oc-ad__px { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Étiquette de transparence (toujours visible) et bouton de fermeture, posés sur l'image */
.oc-ad__tag { position: absolute; z-index: 2; padding: 3px 8px; border-radius: 99px; background: rgba(15, 23, 42, .72); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .3px; pointer-events: none; }
.oc-ad__x { position: absolute; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(15, 23, 42, .72); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; user-select: none; }
.oc-ad__x:hover { background: rgba(15, 23, 42, .92); }

/* Bandeau long en haut : COLLANT (reste visible quand on fait défiler la page) */
.oc-ad--top { position: sticky; top: 0; z-index: 1000; height: var(--oc-top-h); }
.oc-ad--top .oc-ad__a, .oc-ad--top picture { height: 100%; }
.oc-ad--top .oc-ad__pic { height: 100%; object-fit: cover; object-position: center; }
.oc-ad--top .oc-ad__tag { inset-block-end: 5px; inset-inline-start: 8px; }
.oc-ad--top .oc-ad__x { top: 50%; transform: translateY(-50%); inset-inline-end: 8px; }

/* Carte compacte : COLLÉE en bas de l'écran, côté opposé au sens de lecture (à gauche en arabe) */
.oc-ad--side { position: fixed; inset-block-end: 18px; inset-inline-end: 18px; z-index: 1000; width: 280px; border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(10, 25, 60, .32); animation: oc-in .55s ease-out both; }
.oc-ad--side .oc-ad__pic { height: auto; max-height: 400px; object-fit: cover; }
.oc-ad--side .oc-ad__tag { top: 9px; inset-inline-start: 9px; }
.oc-ad--side .oc-ad__x { top: 8px; inset-inline-end: 8px; }
@keyframes oc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Aperçu dans la salle du directeur : ni collant, ni animé */
.oc-ad--preview { animation: none; }
.oc-ad--preview.oc-ad--top { position: relative; border-radius: 12px; }
.oc-ad--preview.oc-ad--side { position: relative; inset: auto; }

@media (max-width: 719px) { .oc-ad--side { display: none; } }          /* sur téléphone : le bandeau seulement (la carte masquerait le contenu) */
@media (prefers-reduced-motion: reduce) { .oc-ad--side { animation: none; } }
@media print { .oc-ad, .oc-toggle { display: none !important; } }