/* ============================================================
   ROLLAND-SI : mouvement complémentaire (chargé après styles.css)
   Ton : plaquette de direction, sobre et précis. Aucun effet ludique.
   Complète riviere.js (ruban, entrée du hero, sceaux, lignes qui apparaissent, frise) sans le dupliquer.
   - Tout est sous prefers-reduced-motion:no-preference.
   - Les états « avant animation » ne sont posés que par mouvement.js, sur des éléments
     encore hors écran : sans JavaScript, tout reste visible et lisible.
   ============================================================ */

@property --arc{syntax:"<angle>";inherits:false;initial-value:0deg;}

@media (prefers-reduced-motion:no-preference){

  /* ---------- Repères de page : barre de lecture aux couleurs du ruban, en-tête qui se détache ---------- */
  .mv-progres{
    position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none;
    background:linear-gradient(90deg,var(--marine),var(--bleu) 55%,var(--cyan));
    transform-origin:left;transform:scaleX(var(--mv-scroll,0));
  }
  .site-header{transition:box-shadow .35s var(--ease-out);}
  .site-header.mv-defile{box-shadow:0 14px 30px -24px rgba(13,27,42,.55);}

  /* ---------- Boutons : la couleur se déverse de gauche à droite au survol ---------- */
  .btn{
    --mv-balayage:var(--bleu);
    background-size:0% 100%;
    transition:transform .3s var(--ease-out),background-size .5s var(--ease-out),border-color .3s,color .2s;
  }
  /* Le dégradé est redéclaré sur chaque état : les règles de survol de styles.css (« background: … ») le remettent à zéro */
  .btn,.btn:hover,.btn-contour:hover,.btn-blanc:hover{
    background-image:linear-gradient(var(--mv-balayage),var(--mv-balayage));
    background-repeat:no-repeat;background-position:left center;
  }
  .btn:hover{background-size:100% 100%;background-color:var(--marine);}
  .btn-contour{--mv-balayage:var(--marine);}
  .btn-contour:hover{background-color:transparent;transition-delay:0s,0s,0s,.16s;} /* le texte vire au blanc quand le fond arrive */
  .btn-blanc{--mv-balayage:var(--cyan);}
  .btn-blanc:hover{background-color:#fff;}

  /* ---------- Lignes de service : filet bleu qui se trace sous la ligne survolée ---------- */
  .svc{position:relative;}
  .svc::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--bleu);
    transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out);pointer-events:none;
  }
  .svc:hover::after,.svc:focus-visible::after{transform:scaleX(1);}
  .svc:hover .go::after{transform:translateX(3px);}

  /* ---------- Filets marine qui ouvrent les listes : ils se tracent à l'arrivée (classes posées par mouvement.js) ---------- */
  .mv-filet{position:relative;border-top-color:transparent;}
  .mv-filet::before{
    content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--marine);
    transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-out);pointer-events:none;
  }
  .mv-filet.mv-trace::before{transform:scaleX(1);}

  /* ---------- Titres de section : petit trait bleu qui se pose dessous ---------- */
  .sec-title{position:relative;}
  .sec-title::after{
    content:"";position:absolute;left:0;bottom:-11px;width:56px;height:3px;border-radius:2px;background:var(--bleu);
    transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out) .2s;pointer-events:none;
  }
  .sec-title.mv-atteint::after{transform:scaleX(1);}

  /* ---------- Sceaux : les chiffres se comptent, un anneau cyan fait le tour du disque puis s'efface ---------- */
  .sceau .disque{font-variant-numeric:tabular-nums;}
  .sceau .disque::after{
    content:"";position:absolute;inset:-6px;border-radius:50%;padding:2px;pointer-events:none;opacity:0;
    background:conic-gradient(from -90deg,var(--cyan) var(--arc),transparent 0);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  }
  @keyframes mvBalayage{
    0%{--arc:0deg;opacity:1;}
    72%{--arc:360deg;opacity:1;}
    100%{--arc:360deg;opacity:0;}
  }
  .sceaux.mv-atteint .disque::after{animation:mvBalayage 1.9s var(--ease-out) both;animation-delay:calc(var(--mv-i,0) * .12s + .3s);}

  /* ---------- Socle et bandeau final (marine laqué) : un reflet de laque les traverse lentement ---------- */
  .socle,.cta-band{position:relative;overflow:hidden;}
  .socle::after,.cta-band::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.06) 50%,transparent 58%);
    translate:-100% 0;animation:mvReflet 11s ease-in-out 2s infinite;
  }
  @keyframes mvReflet{0%,55%{translate:-100% 0;}100%{translate:100% 0;}}
  .socle.mv-hors::after,.cta-band.mv-hors::after{animation-play-state:paused;}

  /* ---------- Frise : chaque pastille se remplit et émet une onde quand la lecture l'atteint ---------- */
  .t-step::before{transition:background-color .45s var(--ease-out),border-color .45s var(--ease-out);}
  @keyframes mvOnde{
    from{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
    to{box-shadow:0 0 0 16px rgba(37,99,235,0);}
  }
  .t-step.mv-atteint::before{background-color:var(--bleu);animation:mvOnde 1.1s var(--ease-out) both;}
  .t-step:first-child.mv-atteint::before{background-color:var(--marine);}

  /* ---------- Liens du bandeau de contact : un trait cyan se trace sous le lien survolé ---------- */
  .cta-links a{
    background:linear-gradient(var(--cyan),var(--cyan)) 0 100%/0% 2px no-repeat;
    background-origin:border-box;
    transition:background-size .5s var(--ease-out),border-color .5s var(--ease-out);
  }
  .cta-links a:hover{background-size:100% 2px;border-bottom-color:transparent;}

  /* ============================================================
     Vague 2
     ============================================================ */

  /* ---------- Titres de colonnes (compétences) : le filet marine se trace, colonne après colonne ---------- */
  .competences h3.mv-filet-bas{position:relative;border-bottom-color:transparent;}
  .competences h3.mv-filet-bas::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--marine);
    transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out);
    transition-delay:calc(var(--mv-i,0) * .12s);pointer-events:none;
  }
  .competences h3.mv-filet-bas.mv-trace::after{transform:scaleX(1);}

  /* ---------- Listes : un trait bleu souligne l'élément survolé, la puce devient un losange ---------- */
  .competences li{
    background:linear-gradient(var(--bleu),var(--bleu)) 0 100%/0% 1px no-repeat;background-origin:border-box;
    transition:background-size .5s var(--ease-out),color .25s,border-color .5s var(--ease-out);
  }
  /* la bordure grise se dessine par-dessus un fond : elle s'efface pour laisser voir le trait bleu */
  .competences li:hover{background-size:100% 1px;color:var(--encre);border-bottom-color:transparent;}
  .tech-list li::before{transition:transform .35s var(--ease-out);}
  .tech-list li:hover::before{transform:translateY(-2px) rotate(45deg) scale(1.3);}

  /* ---------- Réalisations : barre bleue qui descend sur le bord de la ligne survolée, mots-clés qui se soulèvent en cascade ---------- */
  .mrow{position:relative;}
  .mrow::before{
    content:"";position:absolute;left:0;top:0;bottom:-1px;width:3px;background:var(--bleu);
    transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out);pointer-events:none;
  }
  .mrow:hover::before{transform:scaleY(1);}
  .mrow .m-tags span{transition:transform .3s var(--ease-out),background-color .3s;}
  .mrow:hover .m-tags span{transform:translateY(-2px);background-color:#D5E1F4;}
  .mrow:hover .m-tags span:nth-child(2){transition-delay:.04s;}
  .mrow:hover .m-tags span:nth-child(3){transition-delay:.08s;}
  .mrow:hover .m-tags span:nth-child(4){transition-delay:.12s;}
  .mrow:hover .m-tags span:nth-child(n+5){transition-delay:.16s;}

  /* ---------- Lignes de contact : filet bleu sous la ligne survolée ---------- */
  .contact-line{position:relative;}
  .contact-line::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--bleu);
    transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out);pointer-events:none;
  }
  .contact-line:hover::after,.contact-line:focus-visible::after{transform:scaleX(1);}

  /* ---------- Liens de renvoi : le fond bleu pâle se déverse au survol ---------- */
  .xlink{
    background-image:linear-gradient(#E4EBF6,#E4EBF6);background-repeat:no-repeat;
    background-position:left center;background-size:0% 100%;
    transition:border-color .25s,transform .25s var(--ease-out),background-size .5s var(--ease-out);
  }
  .xlink:hover{background-size:100% 100%;}

  /* ---------- Bloc « Loire » (marine laqué) : un seul reflet le traverse quand il apparaît ---------- */
  .zone-bloc.marine{position:relative;overflow:hidden;}
  .zone-bloc.marine::after{
    content:"";position:absolute;inset:0;pointer-events:none;translate:-100% 0;
    background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.09) 50%,transparent 60%);
  }
  .zone-bloc.marine.mv-atteint::after{animation:mvReflet1 1.8s var(--ease-out) .35s both;}
  @keyframes mvReflet1{from{translate:-100% 0;}to{translate:100% 0;}}

  /* ---------- FAQ : une barre bleue se pose sur le bord de la question ouverte ---------- */
  .qa{position:relative;}
  .qa::before{
    content:"";position:absolute;left:0;top:0;bottom:-1px;width:3px;background:var(--bleu);
    transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease-out);pointer-events:none;
  }
  .qa.open::before{transform:scaleY(1);}

  /* ---------- Navigation : une règle bleue glisse d'un lien à l'autre (posée par mouvement.js) ---------- */
  .nav-links{position:relative;}
  .mv-glisse{
    position:absolute;left:0;bottom:5px;width:100px;height:2px;border-radius:1px;background:var(--bleu);
    transform-origin:left;pointer-events:none;opacity:0;
    transition:translate .4s var(--ease-out),scale .4s var(--ease-out),opacity .25s;
  }
  .mv-glisse.mv-actif{opacity:1;}
  .mv-glisse.mv-sans-transition{transition:none;}

  /* ---------- Pied de page : trait blanc qui se trace sous le lien survolé ---------- */
  .foot-grid ul a{
    background:linear-gradient(#fff,#fff) 0 calc(100% - 3px)/0% 1px no-repeat;
    transition:color .2s,background-size .4s var(--ease-out);
  }
  .foot-grid ul a:hover{background-size:100% 1px;text-decoration:none;}

  /* ---------- Menu mobile : les liens se posent l'un après l'autre à l'ouverture ---------- */
  @keyframes mvGlisse{from{opacity:0;translate:-10px 0;}to{opacity:1;translate:0 0;}}
  @media(max-width:1020px){
    .mobile-menu.open a{animation:mvGlisse .4s var(--ease-out) both;}
    .mobile-menu.open a:nth-child(2){animation-delay:.05s;}
    .mobile-menu.open a:nth-child(3){animation-delay:.1s;}
    .mobile-menu.open a:nth-child(4){animation-delay:.15s;}
    .mobile-menu.open a:nth-child(5){animation-delay:.2s;}
    .mobile-menu.open a:nth-child(n+6){animation-delay:.25s;}
  }

  /* ============================================================
     Vague 3
     ============================================================ */

  /* ---------- Titre d'accueil : un surlignage bleu se pose sous les mots bleus, une fois le titre en place ---------- */
  @keyframes mvSurligne{to{background-size:100% 34%;}}
  .hero2 h1 em{
    background:linear-gradient(rgba(37,99,235,.14),rgba(37,99,235,.14)) 0 90%/0% 34% no-repeat;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
    animation:mvSurligne 1.1s var(--ease-out) 1.6s forwards;
  }

  /* ---------- Listes techniques : un surligneur passe sous les mots forts, ligne après ligne ---------- */
  .tech-list li b{
    background:linear-gradient(rgba(37,99,235,.15),rgba(37,99,235,.15)) 0 88%/0% 38% no-repeat;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
    transition:background-size .7s var(--ease-out);transition-delay:calc(var(--mv-i,0) * .09s + .2s);
  }
  .tech-list.mv-atteint li b{background-size:100% 38%;}

  /* ---------- Titres de groupe : le filet qui les prolonge se déploie ---------- */
  .group-title.mv-ligne::after{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out) .15s;}
  .group-title.mv-ligne.mv-atteint::after{transform:scaleX(1);}

  /* ---------- Colonne d'étiquette collante : un filet vertical se remplit au fil de la lecture de la section ---------- */
  .duo-label::before,.duo-label::after{content:"";position:absolute;left:-18px;top:0;bottom:0;width:2px;border-radius:1px;pointer-events:none;}
  .duo-label::before{background:var(--filet);}
  .duo-label::after{background:var(--bleu);transform:scaleY(var(--mv-lecture,0));transform-origin:top;}
  @media(max-width:900px){.duo-label::before,.duo-label::after{display:none;}}

  /* ---------- Retour en haut : mini-sceau à double anneau, l'anneau bleu indique la progression de lecture ---------- */
  .mv-haut{
    position:fixed;right:22px;bottom:22px;z-index:55;width:52px;height:52px;padding:0;border:0;border-radius:50%;cursor:pointer;
    display:grid;place-items:center;color:var(--marine);
    background:conic-gradient(var(--bleu) calc(var(--mv-scroll,0) * 360deg),var(--filet-fort) 0);
    box-shadow:0 10px 24px -14px rgba(13,27,42,.55);
    opacity:0;visibility:hidden;translate:0 14px;
    transition:opacity .35s var(--ease-out),translate .45s var(--ease-out),visibility 0s .45s,color .25s;
  }
  .mv-haut::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--blanc);box-shadow:inset 0 0 0 1px var(--filet);transition:background-color .25s;}
  .mv-haut span{position:relative;font-size:1.3rem;font-weight:700;line-height:1;transition:translate .3s var(--ease-out);}
  .mv-haut.mv-visible{opacity:1;visibility:visible;translate:0 0;transition-delay:0s;}
  .mv-haut:hover{color:#fff;}
  .mv-haut:hover::before{background-color:var(--marine);}
  .mv-haut:hover span{translate:0 -3px;}
  @media(max-width:640px){.mv-haut{right:14px;bottom:14px;width:46px;height:46px;}}

  /* ============================================================
     Vague 4
     ============================================================ */

  /* ---------- Sceaux : l'anneau intérieur devient pointillé et tourne lentement au survol ---------- */
  @keyframes mvTour{to{rotate:360deg;}}
  .sceau:hover .disque::before{border-style:dashed;animation:mvTour 14s linear infinite;}

  /* ---------- États d'appui : le clic se sent ---------- */
  .btn:active,.nav-cta:active,.xlink:active{transform:translateY(0) scale(.98);}
  .svc:active .go{scale:.92;}
  .mv-haut:active{scale:.92;}

  /* ---------- Blocs de zone : la bordure prend la couleur de la marque au survol ---------- */
  .zone-bloc.clair{transition:border-color .3s;}
  .zone-bloc.clair:hover{border-color:var(--bleu-clair);}

  /* ---------- Bandeau final et chapôs de section : arrivée en cascade (états posés par mouvement.js, jamais sans lui) ---------- */
  .mv-attente{opacity:0;translate:0 14px;}
  .mv-attente.mv-atteint{
    opacity:1;translate:0 0;
    transition:opacity .7s var(--ease-out),translate .7s var(--ease-out);
    transition-delay:calc(var(--mv-i,0) * .09s);
  }
}

/* Impression : pas d'effet de tracé en cours de route */
@media print{
  .mv-progres,.mv-haut{display:none;}
  .mv-attente{opacity:1;translate:none;}
  .mv-filet{border-top-color:var(--marine);}
  .mv-filet::before{display:none;}
}