/* Pivotech West-Africa · animations au survol, sur toutes les pages
   Réservées aux écrans avec souris et aux visiteurs qui n'ont pas demandé de
   réduire les animations. Sur un téléphone, le survol resterait bloqué après
   le toucher : les états de base.css suffisent. */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  /* =======================================================
     Boutons : le fond balaie de gauche à droite, le bouton se soulève
     ======================================================= */

  .btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .25s var(--ease-out), box-shadow .25s ease-out, color .25s ease-out;
  }
  .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--blue-deep);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s var(--ease-out);
  }
  .btn:is(:hover, :focus-visible) {
    background: var(--blue);
    box-shadow: 0 12px 26px rgba(47, 98, 234, .38);
    transform: translateY(-3px);
  }
  .btn:is(:hover, :focus-visible)::before {
    transform: scaleX(1);
    transform-origin: left;
  }
  .btn:is(:hover, :focus-visible) .ico { transform: translateX(5px); }
  .btn:active { transform: translateY(0) scale(.98); }

  .btn--glass::before { background: var(--white); }
  .btn--glass:is(:hover, :focus-visible) {
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 12px 26px rgba(15, 12, 29, .28);
    color: var(--blue-ink);
  }

  .to-top { transition: background .25s ease-out, transform .25s var(--ease-out); }
  .to-top:is(:hover, :focus-visible) { transform: translateY(-4px); }
  .to-top:is(:hover, :focus-visible) .ico { animation: pv-monte .7s var(--ease-out) infinite alternate; }

  .dots button::before { transition: background .2s ease-out, transform .2s var(--ease-out); }
  .dots button:hover::before { transform: scale(1.5); }

  /* =======================================================
     Liens : soulignement qui se déploie, flèche qui avance
     ======================================================= */

  .link-more {
    background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
    transition: background-size .35s var(--ease-out), gap .25s var(--ease-out);
  }
  .link-more:hover,
  .svc:is(:hover, :focus-within) .link-more {
    background-size: 100% 1px;
    gap: 14px;
  }

  .nav__link { position: relative; }
  .nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 2px;
    background: var(--blue-soft);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s var(--ease-out);
  }
  .nav__link:is(:hover, :focus-visible)::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .submenu a { transition: background .2s ease-out, padding-left .25s var(--ease-out); }
  .submenu a .ico { transition: transform .25s var(--ease-out); }
  .submenu a:is(:hover, :focus-visible) { padding-left: 18px; }
  .submenu a:is(:hover, :focus-visible) .ico { transform: scale(1.18); }

  .header__logo img { transition: height var(--t-fast) ease-out, transform .3s var(--ease-out); }
  .header__logo:hover img { transform: scale(1.04); }

  .header__call-ico { transition: box-shadow .3s ease-out, transform .3s var(--ease-out); }
  .header__call:is(:hover, :focus-visible) .header__call-ico {
    box-shadow: 0 0 0 7px rgba(53, 106, 248, .3);
    transform: scale(1.05);
  }
  .header__call:is(:hover, :focus-visible) .header__call-ico .ico { animation: pv-sonne .6s ease-in-out infinite; }

  .breadcrumb a { transition: color .2s ease-out; }

  .footer__links a { transition: color .2s ease-out, transform .25s var(--ease-out); }
  .footer__links a::before { transition: width .25s var(--ease-out), background .2s ease-out; }
  .footer__links a:is(:hover, :focus-visible) { transform: translateX(5px); }
  .footer__links a:is(:hover, :focus-visible)::before { width: 14px; background: var(--white); }
  .footer__contact .ico { transition: transform .25s var(--ease-out), color .2s ease-out; }
  .footer__contact li:hover .ico { color: var(--white); transform: scale(1.2); }

  /* =======================================================
     Sections : l'intitulé s'étire, un filet naît sous le titre, le décor bouge
     ======================================================= */

  .eyebrow::before {
    transform-origin: left;
    transition: transform .4s var(--ease-out);
  }
  :is(.section, .why, .cta):hover .eyebrow::before { transform: scaleX(1.2); }

  .title {
    padding-bottom: 10px;
    background: linear-gradient(var(--blue-bright), var(--blue-bright)) no-repeat left bottom / 0 3px;
    transition: background-size .55s var(--ease-out);
  }
  .title--center,
  .head--center .title { background-position: center bottom; }
  :is(.section, .why):hover .title { background-size: 76px 3px; }

  .lines::before,
  .lines::after { transition: transform 1.2s var(--ease-out), opacity 1.2s ease-out; opacity: .7; }
  .lines:hover::before { opacity: 1; transform: translate(14px, 10px); }
  .lines:hover::after { opacity: 1; transform: rotate(180deg) translate(14px, 10px); }

  .hero__slide { transition: opacity 1.1s ease-out, transform 5s ease-out, filter .8s ease-out; }
  .hero:hover .hero__slide { transform: scale(1.04); filter: saturate(.5); }

  .page-hero__img { transition: transform 5s ease-out; }
  .page-hero:hover .page-hero__img { transform: scale(1.05); }

  .partners__band {
    background-size: 170% 100%;
    background-position: left center;
    transition: background-position .8s var(--ease-out), box-shadow .4s ease-out;
  }
  .partners__band:hover {
    background-position: right center;
    box-shadow: 0 18px 44px rgba(47, 98, 234, .32);
  }
  .partners__band img { transition: opacity .25s ease-out, transform .3s var(--ease-out); }
  .partners__band:hover img { opacity: .55; }
  .partners__band img:hover { opacity: 1; transform: scale(1.12); }

  .about__main { transition: transform .7s var(--ease-out); }
  .about__inset { transition: transform .7s var(--ease-out), box-shadow .5s ease-out; }
  .about__square { transition: transform .7s var(--ease-out); }
  .about__media:hover .about__main { transform: translateX(6px); }
  .about__media:hover .about__inset {
    box-shadow: 0 24px 50px rgba(15, 12, 29, .2);
    transform: translate(-10px, -10px);
  }
  .about__media:hover .about__square { transform: translate(14px, -14px) rotate(45deg); }

  .about__checks li { transition: color .2s ease-out, transform .25s var(--ease-out); }
  .about__check { transition: transform .25s var(--ease-out), background .2s ease-out; }
  .about__checks li:hover { color: var(--blue-ink); transform: translateX(5px); }
  .about__checks li:hover .about__check { background: var(--blue-deep); transform: scale(1.18); }

  .why:hover .why__bar-line { animation: pv-remplit 1s var(--ease-out); }
  .why:hover .why__bar + .why__bar .why__bar-line { animation-delay: .12s; }
  .why__bar-line { transform-origin: left; }
  .why__media img { transition: transform 1.2s var(--ease-out); }
  .why__media:hover img { transform: scale(1.05); }
  .why__swoosh {
    transform-origin: bottom;
    transition: transform .8s var(--ease-out);
  }
  .why__media:hover .why__swoosh { transform: scaleY(1.14); }

  .faq__media img { transition: transform .5s var(--ease-out), box-shadow .5s ease-out; }
  .faq__media:hover img {
    box-shadow: 0 20px 42px rgba(15, 12, 29, .16);
    transform: translateY(-6px);
  }
  .faq__circuit { transition: transform 1.1s var(--ease-out), filter .8s ease-out; }
  .faq:hover .faq__circuit {
    filter: drop-shadow(0 0 7px rgba(53, 106, 248, .55));
    transform: translate(-10px, 10px);
  }

  /* Le bandeau d'appel : dégradé qui glisse et reflet qui traverse */
  .cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-size: 170% 100%;
    background-position: left center;
    transition: background-position .9s var(--ease-out);
  }
  .cta::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -20%;
    bottom: -20%;
    left: -30%;
    width: 22%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
    transform: skewX(-20deg);
    transition: left .9s var(--ease-out);
  }
  .cta:hover { background-position: right center; }
  .cta:hover::after { left: 115%; }

  .footer::before,
  .footer::after { transition: transform .9s var(--ease-out); }
  .footer:hover::before { transform: translateX(10px); }
  .footer:hover::after { transform: translateX(-10px); }

  /* =======================================================
     Cartes de service
     ======================================================= */

  .svc { transition: transform .35s var(--ease-out), box-shadow .35s ease-out; }
  .svc::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--blue-bright);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease-out);
  }
  .svc:is(:hover, :focus-within) {
    box-shadow: 0 16px 34px rgba(53, 106, 248, .3);
    transform: translateY(-10px);
  }
  .svc:is(:hover, :focus-within)::after { transform: scaleX(1); }
  .svc__icon { transition: transform .35s var(--ease-out), background .25s ease-out; }
  .svc:is(:hover, :focus-within) .svc__icon {
    background: var(--blue-bright);
    transform: translateY(-5px) rotate(-8deg) scale(1.08);
  }
  .svc__title { transition: color .25s ease-out; }
  .svc:is(:hover, :focus-within) .svc__title { color: var(--blue-ink); }
  .svc:is(:hover, :focus-within) .svc__photo img { transform: scale(1.08); }

  /* =======================================================
     Tuiles sombres : voile bleu, texte qui remonte, flèche qui pivote
     ======================================================= */

  .tile::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(rgba(53, 106, 248, .1), rgba(36, 72, 173, .92));
    opacity: 0;
    transition: opacity .4s ease-out;
  }
  .tile::after { transition: opacity .4s ease-out; }
  a.tile:is(:hover, :focus-visible)::before { opacity: 1; }
  a.tile:is(:hover, :focus-visible)::after { opacity: 0; }
  a.tile:is(:hover, :focus-visible) img { transform: scale(1.08); }
  .tile__text { transition: transform .35s var(--ease-out); }
  a.tile:is(:hover, :focus-visible) .tile__text { transform: translateY(-6px); }
  .tile__label { transition: color .25s ease-out; }
  a.tile:is(:hover, :focus-visible) .tile__label { color: var(--white); }
  .tile__go .ico { transition: transform .35s var(--ease-out); }
  a.tile:is(:hover, :focus-visible) .tile__go {
    background: var(--white);
    border-color: var(--white);
    color: var(--blue);
  }
  a.tile:is(:hover, :focus-visible) .tile__go .ico { transform: rotate(-45deg); }

  /* =======================================================
     Trois échelles
     ======================================================= */

  .scale__plate { transition: padding-bottom .3s var(--ease-out), background .25s ease-out; }
  .scale:is(:hover, :focus-visible) .scale__plate {
    background: var(--blue-deep);
    padding-bottom: 26px;
  }
  .scale:is(:hover, :focus-visible) img { transform: scale(1.07); }
  .scale__go { transition: background .25s ease-out, color .25s ease-out, transform .35s var(--ease-out); }
  .scale:is(:hover, :focus-visible) .scale__go {
    background: var(--white);
    color: var(--blue);
    transform: rotate(-45deg) scale(1.1);
  }

  /* =======================================================
     Repères
     ======================================================= */

  .guide { transition: transform .35s var(--ease-out), box-shadow .35s ease-out, border-color .25s ease-out; }
  .guide:hover {
    border-color: var(--blue);
    box-shadow: 0 20px 42px rgba(15, 12, 29, .12);
    transform: translateY(-7px);
  }
  .guide:hover .guide__photo img { transform: scale(1.07); }
  .guide__badge { transition: transform .35s var(--ease-out), background .25s ease-out; }
  .guide:hover .guide__badge { background: var(--blue-bright); transform: rotate(-8deg) scale(1.1); }
  .guide h3 { transition: color .25s ease-out; }
  .guide:hover h3 { color: var(--blue-ink); }

  /* =======================================================
     Étapes de la méthode
     ======================================================= */

  .step-card { transition: transform .35s var(--ease-out), box-shadow .35s ease-out; }
  .step-card:hover {
    box-shadow: 0 18px 38px rgba(47, 98, 234, .2);
    transform: translateY(-8px);
  }
  .step-card__icon { transition: background .25s ease-out, color .25s ease-out, transform .35s var(--ease-out); }
  .step-card:hover .step-card__icon {
    background: var(--blue);
    color: var(--white);
    transform: rotate(-8deg);
  }
  .step-card__num { transition: transform .35s var(--ease-out); transform-origin: right bottom; }
  .step-card:hover .step-card__num { transform: scale(1.14); }

  /* =======================================================
     Atouts, détails d'une solution, coordonnées
     ======================================================= */

  .why__feature { transition: transform .3s var(--ease-out); }
  .why__icon { transition: background .25s ease-out, color .25s ease-out, transform .35s var(--ease-out); }
  .why__feature:hover .why__icon {
    background: var(--blue);
    color: var(--white);
    transform: rotate(-6deg) scale(1.06);
  }
  .why__feature h3 { transition: color .25s ease-out; }
  .why__feature:hover h3 { color: var(--blue-ink); }

  .couvre__item {
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease-out), box-shadow .35s ease-out;
  }
  .couvre__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--blue-bright);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease-out);
  }
  .couvre__item:hover {
    box-shadow: 0 18px 38px rgba(15, 12, 29, .11);
    transform: translateY(-7px);
  }
  .couvre__item:hover::before { transform: scaleX(1); }
  .couvre__icon { transition: background .25s ease-out, color .25s ease-out, transform .35s var(--ease-out); }
  .couvre__item:hover .couvre__icon {
    background: var(--blue);
    color: var(--white);
    transform: rotate(-8deg);
  }

  .contact__block { transition: transform .3s var(--ease-out); }
  .contact__block:hover { transform: translateX(5px); }
  .contact__icon { transition: background .25s ease-out, color .25s ease-out, transform .35s var(--ease-out); }
  .contact__block:hover .contact__icon {
    background: var(--blue);
    color: var(--white);
    transform: rotate(-6deg);
  }

  /* =======================================================
     Questions et formulaire
     ======================================================= */

  .faq__item { transition: box-shadow .3s ease-out, transform .3s var(--ease-out); }
  .faq__item:hover {
    box-shadow: 0 14px 32px rgba(47, 98, 234, .16);
    transform: translateX(5px);
  }
  .faq__q { transition: color .2s ease-out; }
  .faq__item:hover .faq__q { color: var(--blue-ink); }
  .faq__toggle { transition: background .25s ease-out, color .25s ease-out, transform .35s var(--ease-out); }
  .faq__item:hover .faq__toggle {
    background: var(--blue);
    color: var(--white);
  }
  .faq__item:not([open]):hover .faq__toggle { transform: rotate(90deg); }

  .field input,
  .field select,
  .field textarea { transition: border-color .2s ease-out, box-shadow .25s ease-out; }
  .field input:hover,
  .field select:hover,
  .field textarea:hover {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-tint);
  }

  /* =======================================================
     Mouvements
     ======================================================= */

  @keyframes pv-monte {
    from { transform: translateY(2px); }
    to { transform: translateY(-3px); }
  }
  @keyframes pv-sonne {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-12deg); }
    75% { transform: rotate(12deg); }
  }
  @keyframes pv-remplit {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}