/**
 * Clip-path Oleis — Forme organique logo
 * =======================================
 *
 * UTILISATION
 * -----------
 * Ajouter la classe `rounded` à une balise <img> ou à son wrapper :
 *
 *   <img class="rounded" src="..." alt="..." />
 *   <div class="rounded"><img src="..." alt="..." /></div>
 *
 * Dans Elementor : champ "CSS Classes" du widget Image → saisir `rounded`.
 * Dans ACF (image) : appliquer la classe sur le <img> ou son conteneur PHP.
 * Dans le WYSIWYG : ajouter class="rounded" directement sur la balise <img>.
 *
 * VARIANTE MIROIR
 * ---------------
 * La classe `rounded--reverse` applique la forme en miroir horizontal
 * (inclinaison symétrique), utile pour alterner l'orientation sur une grille.
 *
 * RATIO RECOMMANDÉ
 * ----------------
 * - Idéal   : 1.3:1 (ex. 780×600 px) — rendu optimal, ellipse bien proportionnée
 * - Correct : 4:3 ou 1:1 — légèrement compressé mais lisible
 * - Déconseillé : 16:9 ou plus large — ellipse trop écrasée
 *
 * FALLBACK
 * --------
 * Les navigateurs sans support de clip-path: url() (< 1 % du trafic)
 * reçoivent un border-radius: 50% (cercle). Aucun contenu n'est masqué
 * aux lecteurs d'écran : le clip-path est purement visuel.
 *
 * DÉPENDANCE
 * ----------
 * Le <clipPath id="oleis-logo-shape"> est injecté une seule fois dans le
 * footer via inc/clip-path-oleis.php (hook wp_footer, priorité 5).
 */

/* ─── Forme principale ─────────────────────────────────────────────────────── */

.rounded {
    -webkit-clip-path: url(#oleis-logo-shape);
            clip-path: url(#oleis-logo-shape);
    object-fit: cover;
    object-position: center;
}

/* ─── Variante miroir horizontal ───────────────────────────────────────────── */

.rounded--reverse {
    -webkit-clip-path: url(#oleis-logo-shape-reverse);
            clip-path: url(#oleis-logo-shape-reverse);
    object-fit: cover;
    object-position: center;
}

/* ─── Fallback navigateurs anciens ─────────────────────────────────────────── */

@supports not (clip-path: url(#test)) {
    .rounded,
    .rounded--reverse {
        border-radius: 50%;
        overflow: hidden;
    }
}