.background{background-image:url(../images/background2.webp);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;position:relative;width:100%;min-height:100vh;overflow:hidden;}h1{font-family:"Aboreto";font-size:45px;color:rgb(255,255,255);text-align:center;margin:3% auto;padding:initial;}.flex{display:flex;flex-direction:row;justify-content:center;align-items:center;width:95%;margin:3% auto;margin-bottom:2rem;}.box{padding:1rem;margin:0 auto;display:flex;flex-direction:column;align-items:center;border-radius:15px;}.demo {width: 30%;box-shadow: 1px 1px 11px 0px black;}.info{width: 80%;background:rgba(255,255,255,0.5);} .box h2{font-family:"Aboreto";font-size:35px;color:rgb(255,255,255);padding:30px;text-align:center;}.box img{height:400px;}.btn-primary,.btn-secondary{display:inline-block;text-decoration:none;border:none;border-radius:8px;font-family:"Abaya";font-size:16px;padding:14px 36px;transition:all 0.3s ease;cursor:pointer;font-weight:600;width:auto;min-width:180px;background-color:#000;color:#fff;}.btn-primary:hover{background-color:rgba(255,223,82,0.693);box-shadow:0 4px 12px rgba(0,0,0,0.2);color:#000;}.box p{width: 80%;font-family: "Abaya";font-size:22px;color:rgb(0, 0, 0);text-align:center;margin:0 auto;}.btn-primary,.btn-secondary,.box a{display:inline-block;text-decoration:none;border:none;border-radius:8px;font-family:"Abaya";font-size:16px;padding:14px 36px;transition:all 0.3s ease;cursor:pointer;font-weight:600;width:auto;min-width:180px;margin:0 auto 1.5rem;background-color:#000;color:#fff;text-align:center;}.btn-primary:hover,.box a:hover{background-color:rgba(255,223,82,0.693);box-shadow:0 4px 12px rgba(0,0,0,0.2);color:#000;}@media (max-width:480px){.background{background-attachment:scroll;}h1{font-size:25px;margin:5% auto;}.flex{flex-direction:column;margin:1rem auto;}.box h2{font-size:20px;padding:1rem;}.box img{height:250px;}.box{width:90%;margin-bottom:2rem;padding:0.5rem;}.box p{font-size:18px;width:90%;}.box a{font-size:16px;padding:0.4rem 0.6rem;}}@media (min-width:500px) and (max-width:767px){.background{background-attachment:scroll;}h1{font-size:32px;}.flex{flex-direction:column;margin:1rem auto;}}@media (max-width:400px){h1{font-size:20px;}.box h2{font-size:16px;padding:0.7rem;}.box img{height:160px;}.box p{font-size:14px;}.box a{font-size:13px;padding:0.3rem 0.5rem;}}@media (max-width:480px){h1{font-size:25px;}.flex{flex-direction:column;margin:1rem auto;}.box h2{font-size:20px;padding:1rem;}.box img{height:200px;}.box{width:95%;margin-bottom:1.2rem;padding:0.5rem;}.box p{font-size:16px;width:95%;}.box a{font-size:15px;padding:0.4rem 0.6rem;}}@media (max-width:600px){h1{font-size:28px;}.box img{height:220px;}.box{width:90%;}}@media (max-width:900px){h1{font-size:32px;}.flex{flex-direction:column;margin:1.5rem auto;}.box{width:80%;margin-bottom:2rem;padding:1rem;}.box img{height:260px;}.box h2{font-size:22px;}.box p{font-size:18px;}}

/* --- Comment ça fonctionne (modeles) --- */
.how-it-works { padding: 2.5rem 5% 1.5rem; }
.hiw-title { font-family: "Aboreto"; font-size: 38px; color: #fff; text-align: center; margin-bottom: 2.5rem; }
.hiw-steps { display: flex; flex-direction: row; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.hiw-step { background: rgba(255,255,255,0.12); border-radius: 16px; padding: 2rem 1.5rem; width: 260px; text-align: center; backdrop-filter: blur(6px); }
.hiw-num { width: 52px; height: 52px; line-height: 52px; border-radius: 50%; background: #fff; color: #111; font-family: "Aboreto"; font-size: 22px; font-weight: 700; margin: 0 auto 1rem; }
.hiw-step h3 { font-family: "Aboreto"; font-size: 18px; color: #fff; margin-bottom: 0.7rem; }
.hiw-step p { font-family: "Abaya"; font-size: 16px; color: rgba(255,255,255,0.85); line-height: 1.5; }
.hiw-cta { text-align: center; margin: 2rem 0 3rem; }
.demo-nav { margin: 0.5rem 0 1rem; width: 100%; text-align: center; }
.demo-nav-label { font-family: "Abaya"; font-size: 15px; color: rgba(255,255,255,0.7); margin-bottom: 0.5rem; }
.demo-nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.demo-nav-links a { font-family: "Abaya"; font-size: 14px; padding: 6px 14px; background: rgba(255,255,255,0.15); border-radius: 6px; color: #fff !important; min-width: unset !important; width: auto !important; text-decoration: none; transition: background 0.2s; margin: 0 !important; }
.demo-nav-links a:hover { background: rgba(255,223,82,0.6) !important; color: #111 !important; }
@media (max-width: 900px) {
  .hiw-steps { flex-direction: column; align-items: center; }
  .hiw-step { width: 85%; }
  .hiw-title { font-size: 28px; }
}