/* Sorti de profil.html : script-src et style-src valent 'self'. */

  :root{
    --ink:#0A1028; --ink2:#16224E; --blue:#497AEA; --blue-l:#7EA5F5;
    --green:#55AE60; --green-l:#7ED08A; --red:#E5484D;
    --text:#E8ECF6; --muted:#A8B4CC; --line:rgba(168,180,204,.22);
    --panel:rgba(24,38,88,.55);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:linear-gradient(180deg,#16224E 0%,#0A1028 55%,#0A1028 100%);
    background-attachment:fixed; color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.65; -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:940px; margin:0 auto; padding:0 22px}
  .narrow{max-width:680px; margin:0 auto}
  a{color:var(--blue-l)}

  /* ---------- barre ---------- */
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 0; border-bottom:1px solid var(--line);
  }
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
  .brand svg{width:30px; height:30px; flex:none}
  .brand b{font-size:19px; font-weight:800; letter-spacing:-.3px}
  .brand b span{color:var(--blue)}
  .nav a.link{color:var(--muted); text-decoration:none; font-size:15px}
  .nav a.link:hover{color:var(--text)}

  /* ---------- menu deroulant ---------- */
  .menu-zone{position:relative; display:flex; align-items:center; gap:14px}
  .menu-bouton{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:40px; height:40px; padding:0 9px; flex:none;
    background:transparent; border:1px solid var(--line);
    border-radius:10px; cursor:pointer;
  }
  .menu-bouton span{
    display:block; height:2px; border-radius:2px; background:var(--muted);
    transition:transform .18s ease, opacity .18s ease, background .18s ease;
  }
  .menu-bouton:hover span{background:var(--text)}
  /* Deplie, les trois traits deviennent une croix : le meme bouton referme,
     sans avoir a viser ailleurs. */
  .menu-bouton[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-bouton[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-bouton[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .menu{
    position:absolute; right:0; top:calc(100% + 12px); z-index:40;
    min-width:236px; display:flex; flex-direction:column; padding:8px;
    /* Fond opaque, pas var(--panel) : le panneau passe au-dessus du texte
       de la page, qui transparaitrait a travers. */
    background:#101B3C; border:1px solid var(--line); border-radius:14px;
    box-shadow:0 20px 44px rgba(0,0,0,.5);
  }
  /* display:flex l emporterait sur la regle [hidden] du navigateur. */
  .menu[hidden]{display:none}
  .menu a{
    color:var(--muted); text-decoration:none; font-size:14.5px;
    padding:10px 12px; border-radius:9px; line-height:1.4;
  }
  .menu a:hover{background:rgba(255,255,255,.07); color:var(--text)}
  .menu a[aria-current="page"]{color:var(--text); font-weight:700}

  /* ---------- hero ---------- */
  .hero{position:relative; overflow:hidden; padding:64px 0 56px; text-align:center}
  .hero .wrap{position:relative; z-index:1}

  /* Fond anime : uniquement transform et opacity, donc compose par le GPU.
     Aucun filter:blur -- le degrade radial est deja doux et ne coute rien
     a chaque image. Important sur les appareils modestes. */
  .aurora{position:absolute; inset:-20% -10%; z-index:0; pointer-events:none}
  .aurora i{position:absolute; display:block; border-radius:50%; opacity:.85}
  .aurora i:nth-child(1){
    width:620px; height:620px; left:-8%; top:-16%;
    background:radial-gradient(circle at 50% 50%, rgba(73,122,234,.72), rgba(73,122,234,0) 70%);
    animation:drift1 26s ease-in-out infinite;
  }
  .aurora i:nth-child(2){
    width:540px; height:540px; right:-10%; top:4%;
    background:radial-gradient(circle at 50% 50%, rgba(85,174,96,.55), rgba(85,174,96,0) 70%);
    animation:drift2 32s ease-in-out infinite;
  }
  .aurora i:nth-child(3){
    width:470px; height:470px; left:34%; bottom:-26%;
    background:radial-gradient(circle at 50% 50%, rgba(126,165,245,.46), rgba(126,165,245,0) 72%);
    animation:drift3 38s ease-in-out infinite;
  }
  @keyframes drift1{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(60px,40px,0) scale(1.12)} }
  @keyframes drift2{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-50px,55px,0) scale(1.08)} }
  @keyframes drift3{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(40px,-45px,0) scale(1.15)} }

  /* Balayage : rappel du scan, volontairement lent et rare. */
  .sweepline{
    position:absolute; left:0; right:0; height:180px; z-index:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(126,165,245,0), rgba(126,165,245,.24), rgba(126,165,245,0));
    animation:sweepDown 11s ease-in-out infinite;
  }
  @keyframes sweepDown{
    0%{transform:translateY(-160px); opacity:0}
    10%{opacity:1} 70%{opacity:1}
    100%{transform:translateY(760px); opacity:0}
  }

  /* Trame de points en derive, sous la section des situations. */
  .dotted{position:relative; overflow:hidden}
  .dotted::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:radial-gradient(rgba(168,180,204,.30) 1px, transparent 1px);
    background-size:26px 26px;
    animation:dotShift 40s linear infinite;
  }
  .dotted > .wrap{position:relative; z-index:1}
  @keyframes dotShift{ to{background-position:26px 26px} }
  .hero h1{
    font-size:clamp(30px,5.4vw,46px); line-height:1.15; letter-spacing:-.8px;
    margin:0 0 16px; font-weight:800;
  }
  .hero h1 em{font-style:normal; color:var(--blue-l)}
  .hero .lead{color:var(--muted); font-size:18px; max-width:560px; margin:0 auto 30px}
  .cta{
    display:inline-flex; align-items:center; gap:9px;
    padding:14px 26px; border-radius:12px; font-size:16px;
    font-weight:600; text-decoration:none; border:1px solid rgba(73,122,234,.45);
    background:rgba(73,122,234,.18); color:#fff;
  }
  .cta:hover{background:rgba(73,122,234,.28); border-color:var(--blue-l)}
  .cta-ico{width:19px; height:19px; flex:none}
  .cta-note{color:var(--muted); font-size:14px; margin:12px 0 0}

  /* ---------- mockup ---------- */
  /* cadre de telephone, utilise pour les captures reelles */
  .phone{
    width:268px; margin:44px auto 0; border-radius:32px; padding:10px;
    background:#0B142F; border:1px solid var(--line);
    box-shadow:0 24px 60px rgba(0,0,0,.45);
  }
  .phone img{display:block; width:100%; height:auto; border-radius:23px}

  /* ---------- scenes animees ---------- */
  .scenes{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
  .scene{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px}
  .scene svg{display:block; width:100%; height:auto; border-radius:10px; background:rgba(10,16,40,.55)}
  .scene h4{margin:14px 4px 4px; font-size:16px}
  .scene p{margin:0 4px; color:var(--muted); font-size:14.5px}
  .sc *{transform-box:fill-box; transform-origin:center}

  @keyframes sweep    { 0%{transform:translateY(0)} 45%,100%{transform:translateY(38px)} }
  @keyframes fadeIn   { 0%,35%{opacity:0} 55%,100%{opacity:1} }
  @keyframes drawCheck{ 0%,45%{stroke-dashoffset:26} 65%,100%{stroke-dashoffset:0} }
  @keyframes payMove  { 0%,60%{transform:translateX(0);opacity:0} 70%{opacity:1} 100%{transform:translateX(112px);opacity:1} }
  @keyframes pulseSoft{ 0%,100%{opacity:.35} 50%{opacity:.9} }
  @keyframes scanRow  { 0%{transform:translateX(0)} 100%{transform:translateX(150px)} }
  @keyframes popIn    { 0%{transform:scale(.4);opacity:0} 100%{transform:scale(1);opacity:1} }
  @keyframes routeDraw{ to{stroke-dashoffset:-30} }
  @keyframes shopIn   { 0%,45%{opacity:.25} 65%,100%{opacity:1} }
  @keyframes typeBar  { 0%{width:0} 100%{width:44px} }

  .a-sweep{animation:sweep 4s ease-in-out infinite}
  .a-check{stroke-dasharray:26; animation:drawCheck 4s ease-in-out infinite}
  .a-ring {animation:fadeIn 4s ease-in-out infinite}
  .a-cash {animation:payMove 4s ease-in-out infinite}
  .b-scan {animation:scanRow 4.4s ease-in-out infinite}
  .b-d1{animation:popIn .5s ease-out .9s both}
  .b-d2{animation:popIn .5s ease-out 1.6s both}
  .b-d3{animation:popIn .5s ease-out 2.3s both}
  .b-d4{animation:popIn .5s ease-out 3s both}
  .c-type {animation:typeBar 4.5s steps(6) infinite}
  .c-ok   {animation:fadeIn 4.5s ease-in-out infinite}
  .c-route{animation:routeDraw 1.4s linear infinite}
  .c-shop {animation:shopIn 4.5s ease-in-out infinite}
  .c-pin  {animation:popIn .6s ease-out 2.6s both}
  .c-glow {animation:pulseSoft 3s ease-in-out infinite}

  /* Respect du reglage systeme : tout se fige sur l'etat final. */
  @media (prefers-reduced-motion: reduce){
    .sc *{animation:none !important}
    .a-check{stroke-dashoffset:0}
    .a-cash{opacity:1; transform:translateX(112px)}
    .c-pin,.c-shop,.b-d1,.b-d2,.b-d3,.b-d4{opacity:1; transform:none}
    /* Les fonds restent en place, sans mouvement. Le balayage disparait :
       une bande claire figee sur le heros n'aurait aucun sens. */
    .aurora i, .dotted::before{animation:none !important}
    .sweepline{display:none}
  }

  .shots{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:26px; margin-top:8px;
  }
  .shot{text-align:center}
  .shot .frame{
    border-radius:26px; padding:8px; background:#0B142F;
    border:1px solid var(--line); box-shadow:0 14px 34px rgba(0,0,0,.38);
  }
  .shot img{display:block; width:100%; height:auto; border-radius:19px}
  .shot p{color:var(--muted); font-size:14px; margin:14px 4px 0}
  .shot b{display:block; color:var(--text); font-size:15px; margin-bottom:2px}

  /* ---------- sections ---------- */
  section{padding:56px 0; border-top:1px solid var(--line)}
  h2{font-size:clamp(21px,3.2vw,27px); margin:0 0 8px; letter-spacing:-.4px}
  .sub{color:var(--muted); margin:0 0 28px}
  h3{font-size:16px; margin:26px 0 4px; color:var(--blue-l)}
  p{margin:8px 0}

  .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
  .card{
    background:var(--panel); border:1px solid var(--line);
    border-radius:14px; padding:18px 20px;
  }
  .card h4{margin:0 0 6px; font-size:16px}
  .card p{margin:0; color:var(--muted); font-size:14.5px}
  .card .ico{
    width:34px; height:34px; border-radius:9px; display:flex; align-items:center;
    justify-content:center; margin-bottom:12px;
    background:rgba(73,122,234,.16); border:1px solid rgba(73,122,234,.35);
  }
  .card .ico svg{width:18px; height:18px}

  .steps{counter-reset:s; display:grid; gap:14px}
  .step{display:flex; gap:14px; align-items:flex-start}
  .step .n{
    flex:none; width:30px; height:30px; border-radius:50%; display:flex;
    align-items:center; justify-content:center; font-weight:700; font-size:14px;
    background:rgba(73,122,234,.2); border:1px solid rgba(73,122,234,.4); color:#fff;
  }
  .step p{margin:0; color:var(--muted); font-size:15px}
  .step b{color:var(--text); display:block; font-size:15.5px}

  .packs{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
  .pack{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:18px; text-align:center; position:relative;
  }
  .pack.pop{border-color:rgba(85,174,96,.5)}
  .pack .badge{
    position:absolute; top:-10px; left:50%; transform:translateX(-50%);
    background:var(--green); color:#06210F; font-size:11px; font-weight:700;
    padding:3px 10px; border-radius:20px; white-space:nowrap;
  }
  .pack .name{font-weight:700; margin:0 0 4px}
  .pack .qty{color:var(--blue-l); font-size:24px; font-weight:800; margin:0}
  .pack .unit{color:var(--muted); font-size:13px; margin:2px 0 0}

  code{
    background:rgba(73,122,234,.16); border:1px solid rgba(73,122,234,.35);
    padding:2px 8px; border-radius:6px; font-size:15px; color:#fff;
  }
  .contact{border-color:rgba(85,174,96,.45); background:rgba(85,174,96,.10)}
  .contact a{color:var(--green); font-weight:700; text-decoration:none; font-size:18px}
  ul{padding-left:20px; margin:8px 0}
  li{margin:5px 0}

  footer{
    padding:34px 0 56px; border-top:1px solid var(--line);
    color:var(--muted); font-size:14px; text-align:center;
  }
  footer a{margin:0 10px; display:inline-block}

  /* Reprend la hierarchie de l'ecran Profil de l'application : une ligne par
     information, libelle a gauche, valeur a droite. */
  .compte{
    max-width:520px; margin:0 auto;
    background:var(--panel); border:1px solid var(--line);
    border-radius:14px; padding:18px 20px;
  }
  .entete{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding-bottom:14px;
  }
  .solde{font-size:16px}
  .solde b{color:var(--green-l); font-size:20px}
  .courriel{margin:0 0 4px; color:var(--muted); font-size:13.5px; word-break:break-all}

  .ligne{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 0; border-top:1px solid var(--line); font-size:14.5px;
  }
  .ligne span{color:var(--muted)}
  .ligne b{font-weight:700; text-align:right}
  .code{letter-spacing:3px; font-size:20px; font-weight:800; color:var(--green-l)}
  .actif{color:var(--green-l)}

  .bouton{
    display:inline-block; border:1px solid var(--line); background:transparent;
    color:var(--text); border-radius:10px; padding:9px 16px;
    font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit;
  }
  .bouton:hover{border-color:var(--blue-l)}

  .liens{
    padding-top:14px; border-top:1px solid var(--line);
    font-size:13px; color:var(--muted); margin:0;
  }

  /* Volontairement discret : une action irreversible ne doit pas se proposer
     avec la meme insistance qu'une action courante. Le rouge n'apparait qu'au
     survol, quand l'intention est deja la. */
  .supprimer{
    display:block; margin:18px auto 0; background:none; border:0;
    color:var(--muted); font-size:12.5px; text-decoration:underline;
    cursor:pointer; font-family:inherit;
  }
  .supprimer:hover{color:var(--red)}

  .msg{margin-top:14px; font-size:13.5px; min-height:1em}
  .msg.err{color:#FFB4B4}
  .attente{text-align:center; color:var(--muted); padding:40px 0}
  .hidden{display:none !important}

/* Anciens attributs style="" de la page. La CSP refuse
   desormais le style en ligne ; la declaration est reprise
   telle quelle pour que le rendu ne bouge pas. */
.u-border-top-0{border-top:0 !important}
.u-margin-0-0-16px{margin:0 0 16px !important}
.u-margin-top-14px{margin-top:14px !important}
.u-text-align-center{text-align:center !important}