/* Kiosko — services numériques à Ouagadougou. Maquette. Direction : aplats francs, tickets et étiquettes, fond clair. */
:root{
  --papier:#FFFFFF;--ecru:#F3F1EA;--encre:#111111;--gris:#5E5E5E;--ligne:#111111;
  --jaune:#FFD400;--bleu:#1E40FF;--rouge:#F03A2F;
  --netflix:#E50914;--spotify:#1DB954;--snap:#FFFC00;--crunchy:#F47521;--prime:#00A8E1;--telegram:#2AABEE;--canal:#111111;--iptv:#6D28D9;--tiktok:#111111;--fb:#1877F2;
  --ff:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --max:1120px;--gutter:20px;--r:14px;--ease:cubic-bezier(.16,1,.3,1);color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--ff);font-size:17px;line-height:1.5;padding-inline:var(--gutter);padding-block:0 84px;-webkit-font-smoothing:antialiased;overflow-x:clip;font-variation-settings:"wdth" 100}
img,svg{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;line-height:1;letter-spacing:-.035em;text-wrap:balance}
h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--max);margin-inline:auto}
:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
.eyebrow{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--encre);color:#fff;padding:.32rem .55rem;border-radius:4px}
.eyebrow.jaune{background:var(--jaune);color:var(--encre)}
.lead{color:var(--gris);font-size:1.08rem}

.demo-note{margin:0 calc(-1*var(--gutter));background:var(--encre);color:#bdbdbd;font-size:.72rem;letter-spacing:.03em;text-align:center;padding:.45rem var(--gutter)}
.demo-note strong{color:#fff;font-weight:700}

/* header */
.nav{position:sticky;top:0;z-index:30;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--encre)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:70px}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:800;font-size:1.25rem;letter-spacing:-.03em}
.brand i{width:32px;height:32px;border-radius:8px;background:var(--jaune);border:2px solid var(--encre);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:1rem}
.nav-links{display:none;gap:1.5rem;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-size:.95rem;font-weight:600;color:var(--encre);border-bottom:2px solid transparent;padding-bottom:.1rem}
.nav-links a:hover{border-color:var(--encre)}
.nav-actions{display:flex;gap:.6rem;align-items:center}
.nav .nav-cta{display:none}
@media (min-width:960px){.nav-links{display:flex}.nav .nav-cta{display:inline-flex}}

/* boutons : plats, bord noir, ombre dure */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.9rem 1.35rem;border-radius:10px;font-family:var(--ff);font-weight:700;font-size:.95rem;text-decoration:none;border:2px solid var(--encre);cursor:pointer;line-height:1;box-shadow:4px 4px 0 var(--encre);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--encre)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--encre)}
.btn-wa{background:#25D366;color:var(--encre)}
.btn-jaune{background:var(--jaune);color:var(--encre)}
.btn-blanc{background:#fff;color:var(--encre)}
.btn-noir{background:var(--encre);color:#fff}
.btn-sm{padding:.65rem 1rem;font-size:.85rem;box-shadow:3px 3px 0 var(--encre)}
.btn svg{width:18px;height:18px;flex:none}

/* burger + menu */
.burger{display:inline-grid;gap:5px;width:44px;height:44px;place-content:center;background:#fff;border:2px solid var(--encre);border-radius:10px;cursor:pointer;padding:0;box-shadow:3px 3px 0 var(--encre)}
.burger span{display:block;width:20px;height:2px;background:var(--encre);border-radius:2px;transition:transform .45s var(--ease),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-mobile[hidden]{display:none}
.menu-mobile{position:fixed;inset:0;z-index:29;background:var(--jaune);padding:calc(var(--menu-top,70px) + 1rem) var(--gutter) 2rem;display:flex;flex-direction:column;justify-content:space-between;overflow:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.menu-mobile.open{opacity:1;transform:none}
.menu-mobile ul{list-style:none;margin:0;padding:0}
.menu-mobile li{position:relative;opacity:0;transform:translateX(-18px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*60ms + 100ms)}
.menu-mobile li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--encre);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease);transition-delay:calc(var(--i,0)*60ms + 220ms)}
.menu-mobile.open li{opacity:1;transform:none}.menu-mobile.open li::after{transform:scaleX(1)}
.menu-mobile li a{display:block;padding:1rem 0;text-decoration:none;font-size:1.6rem;font-weight:800;letter-spacing:-.03em}
.menu-actions{display:grid;gap:.7rem;padding-top:1.5rem;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:.45s}
.menu-mobile.open .menu-actions{opacity:1;transform:none}
.menu-mobile.closing li,.menu-mobile.closing .menu-actions{transition-delay:0s;transition-duration:.25s}
body.menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
body.menu-open .mobile-bar{display:none}
body.menu-open .nav{position:fixed;top:0;left:0;right:0;margin:0;z-index:31}
@media (min-width:960px){.burger{display:none}.menu-mobile{display:none!important}}

/* hero */
.hero .wrap{display:grid;gap:2.5rem;padding-block:3rem 2.5rem;align-items:center}
.hero h1{font-size:clamp(2.3rem,7.4vw,4.6rem);margin-top:1.1rem}
.hero h1 mark{background:var(--jaune);color:var(--encre);padding:0 .12em;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero .lead{margin-top:1.2rem;max-width:44ch}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.hero .puces{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.hero .puces span{font-size:.82rem;font-weight:600;border:2px solid var(--encre);border-radius:999px;padding:.4rem .75rem;background:#fff}
.hero .puces span b{font-weight:800}
@media (min-width:900px){.hero .wrap{grid-template-columns:1.05fr .95fr;gap:4rem;padding-block:4.5rem 3.5rem}}

/* le jeu de tickets : cartes plates en éventail */
.tickets{position:relative;height:clamp(320px,52vw,420px);max-width:460px;margin-inline:auto}
.ticket{position:absolute;left:50%;top:50%;width:min(78%,320px);aspect-ratio:1.6;border-radius:16px;border:2px solid var(--encre);box-shadow:6px 6px 0 var(--encre);padding:1rem 1.1rem;display:grid;grid-template-rows:auto 1fr auto;color:#fff;background:var(--c);transform:translate(-50%,-50%) rotate(var(--rot,0deg)) translate(var(--dx,0),var(--dy,0));transition:transform .6s var(--ease)}
.ticket.claire{color:var(--encre)}
.ticket .t{font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.ticket .s{font-size:.78rem;font-weight:600;opacity:.85;align-self:end}
.ticket .p{display:flex;justify-content:space-between;align-items:end;font-size:.78rem;font-weight:700}
.ticket .p b{font-size:1.05rem;font-weight:800}
.ticket.visa{background:var(--encre);color:#fff;grid-template-rows:auto auto 1fr auto}
.ticket.visa .puce{width:34px;height:26px;border-radius:5px;background:var(--jaune);border:2px solid #000;margin-top:.4rem}
.ticket.visa .num{font-weight:700;letter-spacing:.1em;align-self:end;font-size:1rem}
.ticket.visa .p i{font-style:italic;font-weight:800;font-size:1.2rem}
.tickets:hover .ticket{--dx:0;--dy:0}
.tickets .ticket:nth-child(1){--rot:-14deg;--dx:-90px;--dy:34px}
.tickets .ticket:nth-child(2){--rot:-6deg;--dx:-34px;--dy:6px}
.tickets .ticket:nth-child(3){--rot:6deg;--dx:30px;--dy:-18px}
.tickets .ticket:nth-child(4){--rot:1deg;--dx:4px;--dy:-54px}
.tickets:hover .ticket:nth-child(1){--rot:-18deg;--dx:-120px;--dy:26px}
.tickets:hover .ticket:nth-child(2){--rot:-8deg;--dx:-48px;--dy:-2px}
.tickets:hover .ticket:nth-child(3){--rot:8deg;--dx:46px;--dy:-26px}
.tickets:hover .ticket:nth-child(4){--rot:3deg;--dx:10px;--dy:-66px}
.tickets-legende{margin-top:.6rem;text-align:center;font-size:.85rem;color:var(--gris)}

/* bandeau services : chips plats */
.bande{margin:0 calc(-1*var(--gutter));overflow:hidden;border-block:2px solid var(--encre);padding:.7rem 0;background:var(--ecru)}
.bande .track{display:flex;width:max-content;animation:defile 38s linear infinite}
.bande .set{display:flex;gap:.7rem;padding-right:.7rem;align-items:center}
.bande span{font-weight:700;font-size:.9rem;white-space:nowrap;border:2px solid var(--encre);border-radius:999px;padding:.4rem .85rem;background:var(--c,#fff);color:var(--tc,#fff)}
.bande:hover .track{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bande .track{animation:none}}

/* sections */
.section{padding-block:4rem}
@media (min-width:900px){.section{padding-block:6rem}}
.section-head{display:grid;gap:.8rem;margin-bottom:2rem}
.section-head h2{font-size:clamp(1.8rem,4.8vw,2.8rem);margin-top:.7rem}
.section-head p{color:var(--gris);max-width:56ch;font-size:1.02rem}
@media (min-width:900px){.section-head{grid-template-columns:1.1fr 1fr;align-items:end;gap:3rem}.section-head>p{justify-self:end;padding-bottom:.3rem}}
.ecru{background:var(--ecru);margin:0 calc(-1*var(--gutter));padding-inline:var(--gutter)}

/* catalogue : étiquettes de couleur pleine */
.catalogue{display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr)}
.offre{position:relative;background:var(--c);color:var(--tc,#fff);border:2px solid var(--encre);border-radius:var(--r);padding:1.1rem;min-height:170px;display:flex;flex-direction:column;gap:.5rem;text-decoration:none;box-shadow:0 0 0 var(--encre);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.offre:hover,.offre:active{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--encre)}
.offre{-webkit-tap-highlight-color:transparent}
.offre .logo{font-weight:800;font-size:1.25rem;letter-spacing:-.03em;line-height:1.05}
.offre p{font-size:.86rem;line-height:1.4;opacity:.9}
.offre .prix{margin-top:auto;display:flex;flex-direction:column;gap:.1rem;padding-top:.6rem;border-top:2px solid currentColor}
.offre .prix b{font-weight:800;font-size:.95rem;white-space:nowrap}
.offre .prix span{font-size:.74rem;opacity:.85}
.offre.large{grid-column:span 2;background:var(--encre);color:#fff}
.offre.large .logo{font-size:1.5rem}
@media (min-width:760px){.catalogue{grid-template-columns:repeat(3,1fr);gap:1rem}.offre{padding:1.3rem}.offre.large{grid-column:span 3;display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:end}.offre.large .prix{border:0;padding:0;align-items:flex-end}.offre.large .prix b{font-size:1.4rem}}
@media (min-width:1000px){.catalogue{grid-template-columns:repeat(4,1fr)}.offre.large{grid-column:span 4}}

/* carte visa */
.visa-sec .grid{display:grid;gap:2rem;align-items:center}
.visa-sec .affiche{border:2px solid var(--encre);border-radius:var(--r);overflow:hidden;box-shadow:8px 8px 0 var(--jaune)}
.visa-sec .affiche img{width:100%}
.usages{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.6rem}
.usages li{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 1rem;background:#fff;border:2px solid var(--encre);border-radius:12px;font-size:.95rem}
.usages li b{font-weight:700;display:block}
.usages li span{color:var(--gris);font-size:.88rem}
.usages i{flex:none;width:30px;height:30px;border-radius:8px;background:var(--jaune);border:2px solid var(--encre);display:grid;place-items:center;font-style:normal}
.usages i svg{width:16px;height:16px;stroke:var(--encre)}
.note{margin-top:1rem;font-size:.84rem;color:var(--gris)}
@media (min-width:900px){.visa-sec .grid{grid-template-columns:.8fr 1.2fr;gap:4rem}}

/* étapes : reçus numérotés */
.etapes{display:grid;gap:1rem;counter-reset:e}
.etape{position:relative;background:#fff;border:2px solid var(--encre);border-radius:var(--r);padding:1.4rem 1.3rem 1.4rem;counter-increment:e;box-shadow:5px 5px 0 var(--encre)}
.etape::before{content:counter(e);font-weight:800;font-size:.9rem;width:34px;height:34px;border-radius:50%;background:var(--jaune);border:2px solid var(--encre);display:grid;place-items:center;margin-bottom:.9rem}
.etape h3{font-size:1.15rem}
.etape p{color:var(--gris);margin-top:.5rem;font-size:.95rem}
@media (min-width:760px){.etapes{grid-template-columns:repeat(3,1fr);gap:1.3rem}}
.garanties{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr)}
.garantie{border:2px solid var(--encre);border-radius:12px;padding:1rem 1rem;background:#fff}
.garantie b{display:block;font-weight:800;font-size:1rem}
.garantie p{color:var(--gris);font-size:.86rem;margin-top:.3rem}
@media (min-width:760px){.garanties{grid-template-columns:repeat(4,1fr)}}

/* faq : accordéon animé (le contenu reste rendu, la classe .ouvert pilote la hauteur) */
.faq{display:grid;gap:.6rem}
.faq details{background:#fff;border:2px solid var(--encre);border-radius:12px;padding:0 1.1rem;transition:box-shadow .3s var(--ease),transform .3s var(--ease),background .3s}
.faq details:hover,.faq details:active{box-shadow:4px 4px 0 var(--encre);transform:translate(-2px,-2px)}
.faq details.ouvert{box-shadow:6px 6px 0 var(--jaune);background:#FFFBE6}
.faq summary{cursor:pointer;list-style:none;padding:1rem 0;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:1rem;-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:800;font-size:1.4rem;line-height:1;width:28px;height:28px;border:2px solid var(--encre);border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .45s var(--ease),background .3s}
.faq details.ouvert summary::after{transform:rotate(135deg);background:var(--jaune)}
.js .faq .rep{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.js .faq details.ouvert .rep{grid-template-rows:1fr}
.faq .rep-in{overflow:hidden}
.faq details p{color:var(--gris);padding:0 0 1.1rem;font-size:.95rem;margin:0}
.js .faq details p{opacity:0;transform:translateY(-8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.js .faq details.ouvert p{opacity:1;transform:none;transition-delay:.12s}

/* final */
.final{margin:0 calc(-1*var(--gutter));padding-inline:var(--gutter);background:var(--jaune);border-block:2px solid var(--encre)}
.final .wrap{display:grid;gap:1.4rem;padding-block:4rem;text-align:center;justify-items:center}
.final h2{font-size:clamp(1.9rem,5.4vw,3rem);max-width:18ch}
.final p{color:var(--encre);max-width:44ch}
.final .num{font-weight:800;font-size:1.3rem;text-decoration:none;letter-spacing:-.02em;border-bottom:3px solid var(--encre)}

.footer{padding-block:2rem 1rem;color:var(--gris);font-size:.8rem;display:grid;gap:.5rem}
@media (min-width:760px){.footer{grid-template-columns:1fr auto;align-items:center}}

.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:.6rem;padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:2px solid var(--encre)}
.mobile-bar .btn{flex:1}
@media (min-width:960px){.mobile-bar{display:none}body{padding-bottom:0}}

/* mouvement : sobre */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js .hero .eyebrow{animation:rise .8s var(--ease) .15s both}
.js .hero h1{animation:rise .9s var(--ease) .3s both}
.js .hero .lead{animation:rise .8s var(--ease) .45s both}
.js .hero .cta-row{animation:rise .8s var(--ease) .6s both}
.js .hero .puces{animation:rise .8s var(--ease) .75s both}
.js .tickets{animation:rise 1s var(--ease) .5s both}
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js *,.js *::before,.js *::after{animation:none!important;transition:none!important}.js [data-reveal]{opacity:1;transform:none}.menu-mobile,.menu-mobile li,.menu-mobile .menu-actions{opacity:1;transform:none}}

/* micro-animations */
.nav-links a{transition:border-color .25s}
.brand i{transition:transform .4s var(--ease)}
.brand:hover i{transform:rotate(-8deg) scale(1.08)}
.hero .puces span{transition:transform .25s var(--ease),background .25s}
.hero .puces span:hover{transform:translateY(-2px);background:var(--jaune)}
.hero h1 mark{background:linear-gradient(var(--jaune),var(--jaune)) no-repeat left/0% 100%;transition:background-size .8s var(--ease)}
.js .hero h1 mark{animation:none}
.js .hero h1.pret mark{background-size:100% 100%}
.bande span{transition:transform .25s var(--ease)}
.bande span:hover{transform:translateY(-2px) rotate(-2deg)}
.usages li{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.usages li:hover,.usages li:active{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--encre)}
.usages i svg{transform:scale(0);transition:transform .4s var(--ease) .2s}
.usages li.in i svg{transform:scale(1)}
.etape{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.etape:hover,.etape:active{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--encre)}
.etape::before{transform:scale(0);transition:transform .45s var(--ease) .15s}
.etape.in::before{transform:scale(1)}
.garantie{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.garantie:hover,.garantie:active{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--encre)}
.visa-sec .affiche{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.visa-sec .affiche:hover{transform:rotate(-1.5deg);box-shadow:12px 12px 0 var(--jaune)}
.final .num{transition:background .3s;padding:0 .2em}
.final .num:hover{background:#fff}
.offre .logo{transition:transform .3s var(--ease)}
.offre:hover .logo{transform:translateX(3px)}
.ticket{will-change:transform}
@keyframes respire{0%,100%{margin-top:0}50%{margin-top:-8px}}
.js .ticket{animation:respire 5s ease-in-out infinite}
.js .ticket:nth-child(2){animation-delay:.6s}.js .ticket:nth-child(3){animation-delay:1.2s}.js .ticket:nth-child(4){animation-delay:1.8s}
@media (prefers-reduced-motion:reduce){.js .faq .rep{transition:none}.js .faq details p{transition:none;opacity:1;transform:none}.etape::before,.usages i svg{transform:none;transition:none}.js .hero h1 mark{background-size:100% 100%}.js .ticket{animation:none}}