/* ============================================================
   WATERTECH CI — Infographique de process animé (v3)
   Anneau qui se dessine · icône pop · halo pulsant ·
   flèches qui se tracent · point de flux le long des flèches
   S'appuie sur les variables de style.css

   v3 — révélation étape par étape sur mobile, connecteurs
   verticaux redessinés, halo allégé pour le rendu mobile.
   ============================================================ */

.wt-process-section { padding: var(--space-12) 0; overflow: hidden; }

.wt-process {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(14px, 4vw, 56px);
    flex-wrap: nowrap;
    margin-top: var(--space-8);
}

.wt-pstep {
    position: relative;
    flex: 0 1 210px;
    min-width: 0;
    text-align: center;
}

/* Sur grand écran la révélation est pilotée par le bloc entier ;
   sur mobile, chaque étape se révèle à son tour. Les deux
   déclencheurs partagent les mêmes règles via :is(). */

/* ---------------- Le cercle ---------------- */
.wt-pcircle {
    position: relative;
    width: clamp(132px, 15vw, 176px);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 14px 34px rgba(21, 40, 85, 0.13);
    display: flex;
    align-items: center;
    justify-content: center;
    /* entrée */
    opacity: 0;
    transform: scale(0.55);
    transition: opacity .5s ease,
                transform .6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--i) * 0.16s);
}
:is(.wt-process.is-in, .wt-pstep.is-in) .wt-pcircle { opacity: 1; transform: scale(1); }

/* Halo pulsant (idle).
   L'ombre est dessinée une fois sur un pseudo-élément et seule son
   opacité est animée : le navigateur la compose au lieu de
   recalculer un box-shadow à chaque image, ce qui coûtait cher
   avec cinq halos en boucle sur un téléphone. */
.wt-pcircle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 26px -3px var(--c);
    opacity: 0;
    pointer-events: none;
}
:is(.wt-process.is-in, .wt-pstep.is-in) .wt-pcircle::after {
    animation: wt-halo 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.16s + 1.3s);
}
@keyframes wt-halo {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

/* ---- Anneau de progression (SVG) qui se dessine ---- */
.wt-pring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wt-ring-track { fill: none; stroke: var(--gray-200); stroke-width: 3; }
.wt-ring-fill {
    fill: none;
    stroke: var(--c);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 289;
    stroke-dashoffset: 289;
    transition: stroke-dashoffset 1s cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: calc(var(--i) * 0.16s + 0.15s);
}
:is(.wt-process.is-in, .wt-pstep.is-in) .wt-ring-fill { stroke-dashoffset: 0; }

/* ---- Numéro + icône ---- */
.wt-ptop { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.wt-pnum {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    color: var(--c);
    line-height: 1;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease, transform .4s ease;
    transition-delay: calc(var(--i) * 0.16s + 0.35s);
}
:is(.wt-process.is-in, .wt-pstep.is-in) .wt-pnum { opacity: 1; transform: none; }
.wt-picon {
    width: clamp(28px, 3.2vw, 38px);
    height: clamp(28px, 3.2vw, 38px);
    color: var(--c);
    opacity: 0;
    transform: scale(0.3) rotate(-30deg);
    transition: opacity .4s ease, transform .55s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--i) * 0.16s + 0.5s);
}
:is(.wt-process.is-in, .wt-pstep.is-in) .wt-picon { opacity: 1; transform: none; }
.wt-picon svg { width: 100%; height: 100%; display: block; }

/* ---- Titre + description ---- */
.wt-pbody {
    margin-top: var(--space-3);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
    transition-delay: calc(var(--i) * 0.16s + 0.55s);
}
:is(.wt-process.is-in, .wt-pstep.is-in) .wt-pbody { opacity: 1; transform: none; }
.wt-plabel {
    display: inline-block;
    background: var(--c);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .03em;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    box-shadow: 0 6px 16px rgba(21, 40, 85, 0.16);
}
.wt-pdesc {
    margin: var(--space-2) auto 0;
    max-width: 210px;
    color: var(--gray-700);
    font-size: .92rem;
    line-height: 1.5;
}

/* ---------------- Connecteur (flèche + point de flux) ---------------- */
.wt-pconn {
    position: absolute;
    top: 42%;
    left: calc(100% + 2px);
    width: clamp(18px, 5vw, 64px);
    height: 62px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
}
.wt-pstep:last-child .wt-pconn { display: none; }
.wt-pconn.is-up svg { transform: scaleY(-1); }
.wt-pconn svg { width: 100%; height: 100%; overflow: visible; }

.wt-pconn .wt-cline {
    fill: none;
    stroke: var(--c);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    transition: stroke-dashoffset .7s ease;
    transition-delay: calc(var(--i) * 0.16s + 0.55s);
}
:is(.wt-process.is-in, .wt-pstep.is-in) .wt-pconn .wt-cline { stroke-dashoffset: 0; }

.wt-pconn .wt-arrowhead {
    fill: var(--c);
    opacity: 0;
    transform: scale(0.4);
    transform-origin: 78px 30px;
    transition: opacity .3s ease, transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--i) * 0.16s + 1.1s);
}
:is(.wt-process.is-in, .wt-pstep.is-in) .wt-pconn .wt-arrowhead { opacity: 1; transform: scale(1); }

/* point lumineux qui circule le long de la flèche (flux continu) */
.wt-cdot {
    fill: var(--c);
    opacity: 0;
    offset-path: path("M4 44 C 26 8, 58 8, 80 30");
    offset-rotate: 0deg;
}
:is(.wt-process.is-in, .wt-pstep.is-in) .wt-cdot {
    animation: wt-flow 2.6s cubic-bezier(0.6, 0, 0.4, 1) infinite;
    animation-delay: calc(var(--i) * 0.16s + 1.4s);
}
@keyframes wt-flow {
    0%   { offset-distance: 0%;   opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

/* ---- Survol ----
   Réservé aux appareils à pointeur : sur écran tactile, `:hover`
   reste collé après le tap et l'étape gardait son décalage. */
@media (hover: hover) and (pointer: fine) {
    .wt-pstep:hover .wt-pcircle { transform: translateY(-8px) scale(1.04); }
    .wt-pstep:hover .wt-picon   { transform: scale(1.12); }
    .wt-pstep:hover .wt-ring-fill { stroke-width: 5; }
}

/* ============================================================
   RESPONSIVE — en colonne sur mobile/tablette
   ============================================================ */
@media (max-width: 900px) {
    .wt-process {
        flex-direction: column;
        align-items: center;
        /* De la place entre deux étapes pour loger le connecteur. */
        gap: clamp(52px, 13vw, 68px);
    }
    .wt-pstep { flex: none; width: 100%; max-width: 340px; }

    /* La description n'a plus à tenir dans une colonne étroite. */
    .wt-pdesc { max-width: 300px; }

    /* Chaque étape se révèle à son tour : l'échelonnement `--i`
       n'a plus lieu d'être, il ferait attendre l'étape déjà
       à l'écran. Les délais deviennent internes à l'étape. */
    .wt-pcircle  { transition-delay: 0s; }
    .wt-ring-fill { transition-delay: .12s; }
    .wt-pnum     { transition-delay: .22s; }
    .wt-picon    { transition-delay: .3s; }
    .wt-pbody    { transition-delay: .34s; }
    :is(.wt-process.is-in, .wt-pstep.is-in) .wt-pcircle::after { animation-delay: 1s; }

    /* Le connecteur SVG est taillé pour une lecture horizontale :
       en colonne, il est remplacé par un trait vertical dessiné en
       pseudo-éléments, posé dans l'écart AVANT chaque étape à
       partir de la deuxième. L'ancien placement le mettait au-dessus
       de sa propre étape, ce qui laissait une flèche orpheline
       avant l'étape 1 et aucune entre les deux dernières. */
    .wt-pconn { display: none; }

    .wt-pstep + .wt-pstep::before,
    .wt-pstep + .wt-pstep::after {
        content: "";
        position: absolute;
        left: 50%;
        pointer-events: none;
    }

    /* le trait, qui se dessine du haut vers le bas */
    .wt-pstep + .wt-pstep::before {
        bottom: calc(100% + 13px);
        width: 2px;
        height: 26px;
        background: var(--c);
        border-radius: 2px;
        transform: translateX(-50%) scaleY(0);
        transform-origin: top center;
        transition: transform .45s cubic-bezier(0.65, 0, 0.35, 1);
    }
    .wt-pstep + .wt-pstep.is-in::before,
    .wt-process.is-in .wt-pstep + .wt-pstep::before {
        transform: translateX(-50%) scaleY(1);
    }

    /* le chevron, qui prend le relais du point de flux */
    .wt-pstep + .wt-pstep::after {
        bottom: calc(100% + 3px);
        width: 9px;
        height: 9px;
        border-right: 2px solid var(--c);
        border-bottom: 2px solid var(--c);
        opacity: 0;
        transform: translateX(-50%) rotate(45deg);
        transition: opacity .3s ease .4s;
    }
    .wt-pstep + .wt-pstep.is-in::after,
    .wt-process.is-in .wt-pstep + .wt-pstep::after {
        opacity: 1;
        animation: wt-chevron 2.2s ease-in-out .7s infinite;
    }
    @keyframes wt-chevron {
        0%, 100% { transform: translate(-50%, 0)   rotate(45deg); opacity: .55; }
        50%      { transform: translate(-50%, 5px) rotate(45deg); opacity: 1; }
    }
}

/* ============================================================
   Neutralisation d'un correctif générique de style.css
   ------------------------------------------------------------
   style.css applique sous 768 px, pour les « étapes process
   01/02/03 » de l'accueil, la règle suivante :

       .process-step, .step, [class*="process"] {
           display: flex !important;
           flex-direction: column !important;
           gap: .5rem !important;
           padding: 1rem !important;
       }

   Le sélecteur d'attribut attrape aussi .wt-process et
   .wt-process-section. Conséquence sur téléphone : l'écart entre
   les étapes retombait à 8 px — trop peu pour loger le
   connecteur — et la section perdait ses marges verticales.
   Sélecteurs volontairement plus spécifiques pour reprendre la
   main sans toucher à la règle d'origine, qui sert ailleurs.
   ============================================================ */
@media (max-width: 768px) {
    section.wt-process-section {
        display: block !important;
        padding: var(--space-10) 0 !important;
    }
    .wt-process-section .wt-process {
        gap: clamp(52px, 13vw, 68px) !important;
        padding: 0 !important;
    }
}

/* ---- Accessibilité : mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
    .wt-pcircle, .wt-pnum, .wt-picon, .wt-pbody,
    .wt-pconn .wt-cline, .wt-pconn .wt-arrowhead,
    .wt-pstep + .wt-pstep::before, .wt-pstep + .wt-pstep::after {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
    }
    /* les pseudo-éléments gardent leur centrage horizontal */
    .wt-pstep + .wt-pstep::before { transform: translateX(-50%) !important; }
    .wt-pstep + .wt-pstep::after  { transform: translateX(-50%) rotate(45deg) !important; }
    .wt-cdot { animation: none !important; opacity: 0 !important; }
    .wt-pcircle::after { animation: none !important; opacity: 0 !important; }
}