/**
 * ET SVG Anim — l'animation, côté visiteur.
 *
 * Les réglages arrivent en variables posées sur l'élément : une seule feuille
 * sert tous les cas, là où une balise `<style>` par instance en aurait donné
 * autant que d'animations dans la page.
 *
 * Deux règles tiennent l'ensemble :
 *
 *   - Rien ne bouge avant son déclencheur. Une animation qui part au
 *     chargement alors qu'elle est en bas de page a fini avant qu'on la voie.
 *
 *   - `prefers-reduced-motion` arrête tout. Ce n'est pas une politesse : pour
 *     une partie des visiteurs, un mouvement qu'ils n'ont pas demandé provoque
 *     un vertige. Le réglage existe dans les systèmes pour cela, et l'ignorer
 *     revient à décider à leur place.
 */

.et-svg {
    display: inline-block;
    line-height: 0;
    max-width: 100%;
}

/*
 * Aucune largeur réglée : le dessin prend celle de son conteneur.
 *
 * `inline-block` en largeur automatique autour d'un SVG en `width:100%`
 * est circulaire ; le navigateur y répond par sa boîte par défaut de
 * 300 × 150, que le rapport de forme rétrécit encore. Un bloc pleine
 * largeur pose la question dans le bon sens.
 */
.et-svg--pleine {
    display: block;
    width: 100%;
    /*
     * Ne jamais dépasser la hauteur offerte.
     *
     * Prendre toute la largeur d'une colonne étroite donne, pour un dessin
     * presque carré, une hauteur supérieure à celle du bloc qui l'accueille
     * — et c'est le conteneur qui coupe. Sans hauteur imposée par le parent,
     * cette ligne ne contraint rien.
     */
    max-height: 100%;
}

.et-svg svg {
    display: block;
    width: 100%;
    height: auto;
    /*
     * Le dessin se loge dans la place offerte, dans les deux dimensions.
     *
     * `preserveAspectRatio` vaut « meet » par défaut : la hauteur maximale
     * ne l'aplatit donc pas, elle le fait rentrer et le centre. Sans elle,
     * `height:auto` calcule une hauteur qui peut sortir du bloc, et le
     * dessin est coupé sans qu'aucun réglage n'y puisse rien.
     */
    max-height: 100%;
    overflow: visible;
}

/*
 * Un dessin ne doit jamais être coupé par son propre conteneur : si son
 * trait déborde légèrement du viewBox — un exportateur qui serre les
 * bords —, on préfère le voir dépasser que le voir amputé.
 */
.et-svg { overflow: visible; }

.et-svg-absent {
    display: inline-block;
    padding: 4px 10px;
    border: 1px dashed #d63638;
    border-radius: 4px;
    color: #d63638;
    font-size: 13px;
}

/* ── Ce qui attend son tour ─────────────────────────────────────────── */

/*
 * Au chargement et à l'apparition, l'état de départ est posé tout de suite :
 * sans lui, le dessin s'affiche entier une fraction de seconde avant de
 * disparaître pour s'animer, et ce clignotement se voit.
 */
.et-svg--au-chargement.et-svg--apparition,
.et-svg--au-visible.et-svg--apparition   { opacity: 0; }

.et-svg--au-chargement.et-svg--montee,
.et-svg--au-visible.et-svg--montee       { opacity: 0; transform: translateY(14px); }

.et-svg--au-chargement.et-svg--zoom,
.et-svg--au-visible.et-svg--zoom         { opacity: 0; transform: scale(.86); }

.et-svg--au-chargement.et-svg--trace svg *,
.et-svg--au-visible.et-svg--trace svg *  { stroke-dashoffset: var(--et-svg-longueur, 1200); }

/* ── Le départ ──────────────────────────────────────────────────────── */

/*
 * Trois déclencheurs, un seul jeu d'animations. `is-vu` est posé par le
 * script quand le dessin entre dans l'écran ; le chargement l'a d'emblée ;
 * le survol passe par `:hover`.
 */
.et-svg--au-chargement,
.et-svg--au-visible.is-vu,
.et-svg--au-survol:hover {
    animation-duration: var(--et-svg-duree, 900ms);
    animation-delay: var(--et-svg-delai, 0ms);
    animation-timing-function: var(--et-svg-easing, ease-out);
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

.et-svg--boucle.et-svg--au-chargement,
.et-svg--boucle.et-svg--au-visible.is-vu,
.et-svg--boucle.et-svg--au-survol:hover {
    animation-iteration-count: infinite;
}

.et-svg--apparition.et-svg--au-chargement,
.et-svg--apparition.et-svg--au-visible.is-vu,
.et-svg--apparition.et-svg--au-survol:hover   { animation-name: et-svg-apparition; }

.et-svg--montee.et-svg--au-chargement,
.et-svg--montee.et-svg--au-visible.is-vu,
.et-svg--montee.et-svg--au-survol:hover       { animation-name: et-svg-montee; }

.et-svg--zoom.et-svg--au-chargement,
.et-svg--zoom.et-svg--au-visible.is-vu,
.et-svg--zoom.et-svg--au-survol:hover         { animation-name: et-svg-zoom; }

.et-svg--rotation.et-svg--au-chargement,
.et-svg--rotation.et-svg--au-visible.is-vu,
.et-svg--rotation.et-svg--au-survol:hover     { animation-name: et-svg-rotation; }

.et-svg--pulsation.et-svg--au-chargement,
.et-svg--pulsation.et-svg--au-visible.is-vu,
.et-svg--pulsation.et-svg--au-survol:hover    { animation-name: et-svg-pulsation; }

.et-svg--flottement.et-svg--au-chargement,
.et-svg--flottement.et-svg--au-visible.is-vu,
.et-svg--flottement.et-svg--au-survol:hover   { animation-name: et-svg-flottement; }

.et-svg--balancement.et-svg--au-chargement,
.et-svg--balancement.et-svg--au-visible.is-vu,
.et-svg--balancement.et-svg--au-survol:hover  { animation-name: et-svg-balancement; }

/*
 * Le tracé s'anime sur les formes, pas sur le conteneur : c'est le trait de
 * chaque chemin qui se dessine. La longueur est mesurée par le script et
 * posée en variable ; la valeur de repli suffit aux petites icônes.
 */
.et-svg--trace.et-svg--au-chargement svg *,
.et-svg--trace.et-svg--au-visible.is-vu svg *,
.et-svg--trace.et-svg--au-survol:hover svg * {
    animation: et-svg-trace var(--et-svg-duree, 900ms) var(--et-svg-easing, ease-out)
               var(--et-svg-delai, 0ms) both;
}

.et-svg--trace svg * {
    stroke-dasharray: var(--et-svg-longueur, 1200);
}

/* ── Les mouvements ─────────────────────────────────────────────────── */

@keyframes et-svg-apparition {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes et-svg-montee {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes et-svg-zoom {
    from { opacity: 0; transform: scale(.86); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes et-svg-rotation {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes et-svg-pulsation {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

@keyframes et-svg-flottement {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@keyframes et-svg-balancement {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(6deg); }
    75%      { transform: rotate(-6deg); }
}

@keyframes et-svg-trace {
    from { stroke-dashoffset: var(--et-svg-longueur, 1200); }
    to   { stroke-dashoffset: 0; }
}

/* ── Ceux qui ne veulent pas que ça bouge ───────────────────────────── */

/*
 * Pour une partie des visiteurs, un mouvement non sollicité provoque un
 * vertige. Le réglage existe dans les systèmes d'exploitation pour cela.
 * Tout s'arrête, et le dessin s'affiche dans son état final — pas invisible.
 */
@media (prefers-reduced-motion: reduce) {

    .et-svg,
    .et-svg svg * {
        animation: none !important;
        transition: none !important;
    }

    .et-svg {
        opacity: 1 !important;
        transform: none !important;
    }

    .et-svg svg * {
        stroke-dashoffset: 0 !important;
    }
}