/* Our own additions on top of the kept Divi/theme CSS — not part of the original files. */ /* Entrance-animation FOUC fix: Divi's own trigger only runs a beat after first paint, so elements it's about to animate would otherwise render at full opacity for a frame, vanish, then animate in. et_pending_animation is added (scripts/_shared.py, strip_had_animation) to every element that used to carry Divi's stale et_had_animation marker, so this rule can hide them from the very first paint -- this is a render-blocking stylesheet in , so it applies before anything is ever shown. Divi's JS sets its own inline opacity/transform when it processes each element, which wins over this class rule by specificity, so no flash on the way in. The :not(.et_had_animation) is required, not decorative: et_pending_animation is never removed once added, and Divi's own animation *cleanup* clears the inline opacity/transform it set once the transition finishes -- with a bare `.et_pending_animation{opacity:0}` rule that meant the element would go right back to hidden the moment its animation completed, since nothing was left to override the class rule anymore (confirmed: elements played their animation correctly, then vanished again right after). A first attempt gated this on :not(.et_animated) instead, on the theory that Divi adds "et_animated" once and never removes it -- wrong: its own cleanup removes "et_animated"/"et_is_animating" again at completion and re-adds "et_had_animation" (the same marker we strip at build time, confirmed via MutationObserver logging its class list over time), so :not(.et_animated) started matching again right when the animation finished, i.e. the exact bug this rule exists to prevent. et_had_animation is the one marker that's only ever present *after* Divi finishes with an element, so gating on that (not et_animated) is what actually holds. html.no-js fallback: if JS never runs at all, don't leave content permanently invisible (the early inline `document.documentElement. className = 'js'` script upgrades this the instant JS does run). */ .et_pending_animation:not(.et_had_animation) { opacity: 0; } html.no-js .et_pending_animation { opacity: 1; } /* Footer "Suivre" social-follow widget (shared footer template, appears on every subpage): Divi's per-page critical-CSS snapshot is inconsistent about which of these rules it includes -- confirmed complete on the Immatriculations capture, entirely missing on Modifications and Tarifs, same markup every time. Rather than chase this per page, the full working set (values read from the Immatriculations page's computed styles) is declared once here so every page renders it the same regardless of what its own captured critical CSS happened to snapshot. padding needs !important: on pages where the snapshot omits Divi's own "ul.et_pb_social_media_follow{padding:0}" (specificity 0-1-1, same as this rule minus the element -- normally wins on source order alone), the only padding rule left standing is the theme's generic "#left-area ul, .et-l--footer ul, ...{padding:0 0 23px 1em}", which is MORE specific (0-1-1 vs this rule's 0-1-0) and wins outright regardless of order -- confirmed as the cause of a padded LinkedIn icon on Tarifs specifically, where that snapshot rule was missing. */ .et_pb_social_media_follow { list-style-type: none !important; margin: 0 0 22px; padding: 0 !important; } .et_pb_social_media_follow li { display: inline-block; margin-bottom: 8px; position: relative; } .et_pb_social_media_follow li a { margin-right: 8px; display: inline-block; text-decoration: none; text-align: center; position: relative; } .et_pb_social_media_follow li a.icon { height: 32px; width: 32px; padding: 0; box-sizing: content-box; border-radius: 3px; } .et_pb_social_media_follow li a.icon:before { height: 32px; width: 32px; font-size: 16px; line-height: 32px; display: block; color: #fff; transition: color 0.3s; position: relative; z-index: 10; } .et_pb_social_media_follow li a.icon:hover:before { color: hsla(0, 0%, 100%, 0.7); } .et_pb_social_icon a.icon { vertical-align: middle; } .et_pb_social_icon a.icon:before { font-family: ETmodules; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; direction: ltr; } .et-social-linkedin a.icon:before { content: "\E09D"; } .et-social-linkedin a.icon { background-color: #007bb6; } .et_pb_social_media_follow_network_name { display: none; } /* "A propos" portrait: Divi's own column CSS only splits into the 2/3 + 1/3 grid at min-width:981px (desktop). Below that both columns fall back to full width and stack — fine on phones (the viewport itself is narrow), but on tablets (Divi's own 768–980px band) that meant the portrait blew up to nearly the full content width. Cap it to a fixed size in that band only; phone and desktop are left exactly as Divi already renders them. */ @media (min-width: 768px) and (max-width: 980px) { #apropos .et_pb_image_0 img { max-width: 320px; height: auto; margin: 0 auto; display: block; } } /* Contact form (/me-contacter/) Formspree AJAX feedback, see js/custom.js. Empty by default (no text -> no border/padding), so it stays invisible until a submission actually populates it. */ .et-pb-contact-message { margin-bottom: 0; transition: margin-bottom 0.2s; } .et-pb-contact-message--success, .et-pb-contact-message--error { margin-bottom: 20px; padding: 12px 16px; border-radius: 3px; font-size: 14px; } .et-pb-contact-message--success { background: #e6f4ea; color: #1e7e34; border: 1px solid #b7dfc2; } .et-pb-contact-message--error { background: #fbe9e9; color: #a02525; border: 1px solid #f0c2c2; }