/* * Civio Hold — réservation d'espace + spinner pendant le rendu JS d'un widget. * * Un élément .civio-hold est « tenu » : son espace est réservé et son contenu * masqué, jusqu'à ce que le JS le marque .civio-hold--ready (contenu rendu). * * Robustesse : si le JS ne tourne pas (erreur, bloqueur), une règle de secours * révèle quand même le contenu après un court délai (voir .civio-hold en bas). */ /* ===================================================================== * CSS CRITIQUE above-the-fold — anti-FOUC des widgets Elementor du header. * * Le CSS des widgets Elementor (icon-list…) est chargé PAR WIDGET dans le * , donc APRÈS le premier paint : le menu du haut s'affiche d'abord en * liste verticale à puces (rendu

brut) puis « prend forme » en menu * horizontal quand le tardif arrive. Ce plugin charge son CSS dans le * (non-différé) : on y réplique les quelques règles CRITIQUES du menu * icon-list inline pour qu'il soit correct DÈS le premier paint. * (Répliqué depuis elementor/assets/css/widget-icon-list.min.css — règles de * mise en page uniquement, pas d'habillage : couleurs/tailles restent pilotées * par le CSS Elementor de la page.) * ===================================================================== */ /* Liste : pas de puces, pas de marge/padding natifs. */ .elementor-widget .elementor-icon-list-items { list-style-type: none; margin: 0; padding: 0; } /* Inline : items en ligne (flex) au lieu d'empilés verticalement. */ .elementor-widget .elementor-icon-list-items.elementor-inline-items { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; } .elementor-widget .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item { margin-left: 8px; margin-right: 8px; word-break: break-word; } .elementor-widget .elementor-icon-list-item { margin: 0; padding: 0; position: relative; } .elementor-widget .elementor-icon-list-item, .elementor-widget .elementor-icon-list-item a { display: flex; align-items: center; font-size: inherit; } /* Alignement centré (le menu est en elementor-align-center). */ .elementor-widget.elementor-align-center .elementor-inline-items { justify-content: center; } .elementor-widget.elementor-align-center .elementor-icon-list-item, .elementor-widget.elementor-align-center .elementor-icon-list-item a { justify-content: center; } .civio-hold { position: relative; /* Réservation minimale par défaut ; le JS ajuste la hauteur réelle. Évite le collapse à 0 avant l'init du widget. */ min-height: 200px; overflow: hidden; } /* Contenu masqué tant que non prêt (révélé en fondu par le JS). */ .civio-hold:not(.civio-hold--ready) > * { opacity: 0; transition: opacity 0.25s ease; } .civio-hold.civio-hold--ready { min-height: 0 !important; /* on rend la main au layout naturel une fois prêt */ overflow: visible; } .civio-hold.civio-hold--ready > * { opacity: 1; } /* Spinner centré (sauf si .civio-hold--no-spinner). */ .civio-hold:not(.civio-hold--ready):not(.civio-hold--no-spinner)::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(0, 0, 0, 0.12); border-top-color: #e30613; /* rouge charte OEC */ border-radius: 50%; animation: civio-hold-spin 0.7s linear infinite; z-index: 2; pointer-events: none; } @keyframes civio-hold-spin { to { transform: rotate(360deg); } } /* Respecte les préférences de réduction de mouvement. */ @media (prefers-reduced-motion: reduce) { .civio-hold:not(.civio-hold--ready):not(.civio-hold--no-spinner)::after { animation: none; opacity: 0.5; } .civio-hold:not(.civio-hold--ready) > * { transition: none; } }