/* =====================================================================
   Suzuki Tunisie — Concours « تصوّر تونس بعينيهم »
   Landing page styles
   ===================================================================== */

:root{
  --red:#ED1C24;          --red-dark:#b3121a;
  --suzuki-red:#E2001A;
  --blue:#2B6FD6;         --blue-dark:#1c52a8;
  --navy:#16245f;
  --yellow:#F5B335;       --yellow-dark:#d4901c;
  --fb:#1877F2;           --fb-dark:#0e57c2;
  --left-bg: url('../images/bg-left.png') no-repeat left center;
  --right-bg: url('../images/bg-right.png') no-repeat right center;
  --paper: url('../images/pattern.jpg') repeat center;
  --ink:#16245f;
  --muted:#59617d;
  --muted2:#6f7790;
  --font-display:'Fredoka','Cairo',system-ui,sans-serif;
  --font-text:'Cairo',system-ui,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-text);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;}
img{display:block;max-width:100%;}

.page{position:relative;overflow:hidden;min-height:100vh;}

/* ---------- Decorative layer ---------- */
.left-bg{position:fixed;top:0;left:0;width:50%;height:100%;background:var(--left-bg);z-index:1;pointer-events:none;}
.right-bg{position:fixed;top:0;right:0;width:50%;height:100%;background:var(--right-bg);z-index:1;pointer-events:none;}
.deco{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.blob{position:absolute;border-radius:50%;}
.blob-1{top:-90px;left:-70px;width:380px;height:380px;background:radial-gradient(circle at 42% 42%,rgba(237,28,36,.15),transparent 62%);}
.blob-2{top:30px;right:-90px;width:400px;height:400px;background:radial-gradient(circle at 50% 50%,rgba(43,111,214,.13),transparent 62%);}
.blob-3{bottom:-100px;left:6%;width:360px;height:360px;background:radial-gradient(circle at 50% 50%,rgba(31,138,91,.12),transparent 62%);}
.blob-4{bottom:40px;right:3%;width:340px;height:340px;background:radial-gradient(circle at 50% 50%,rgba(245,179,53,.16),transparent 62%);}
.blob-5{top:44%;left:-80px;width:300px;height:300px;background:radial-gradient(circle at 50% 50%,rgba(226,0,26,.09),transparent 62%);}
.doodle{position:absolute;}
.doodle-sun{top:128px;right:8%;animation:floaty 6s ease-in-out infinite;}
.doodle-cloud{top:96px;left:5%;animation:floaty2 7s ease-in-out infinite;}
.doodle-heart{top:52%;left:4%;animation:floaty 8s ease-in-out infinite;}
.doodle-star{top:60%;right:9%;animation:floaty2 6.5s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floaty2{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-9px) rotate(-6deg)}}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:3px solid var(--suzuki-red);}
.header-inner{max-width:1180px;margin:0 auto;padding:11px clamp(14px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:14px;}
.logos{display:flex;align-items:center;gap:clamp(10px,2vw,18px);}
.logo{height:46px;width:auto;object-fit:contain;}
.logo-suzuki{width:clamp(116px,17vw,168px);}
.logo-carpro{width:clamp(86px,13vw,128px);}
.divider{width:2px;height:32px;background:#dcdce2;display:inline-block;}
.lang-toggle{display:flex;align-items:center;gap:4px;}
.lang-btn{border:2px solid transparent;border-radius:999px;padding:6px 15px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;cursor:pointer;line-height:1;background:transparent;color:var(--navy);transition:all .15s;}
.lang-btn.active{background:var(--suzuki-red);color:#fff;border-color:var(--suzuki-red);}

/* ---------- Layout helpers ---------- */
main{position:relative;z-index:1;}
.section{max-width:1080px;margin:0 auto;padding:clamp(30px,6vw,60px) clamp(16px,4vw,40px);scroll-margin-top:88px;}
.section-head{text-align:center;margin-bottom:clamp(24px,4vw,42px);}
.section-title{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:clamp(26px,4.4vw,46px);line-height:1.12;margin:0;}
.section-sub{color:var(--muted2);font-size:clamp(14px,1.9vw,17px);margin:12px 0 0;}

/* ---------- Hero ---------- */
.hero{max-width:1180px;margin:0 auto;padding:clamp(30px,6vw,66px) clamp(16px,4vw,40px) clamp(18px,4vw,36px);text-align:center;}
.kicker{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid #ffe0c2;color:var(--suzuki-red);font-family:var(--font-display);font-weight:600;font-size:clamp(12px,1.6vw,15px);padding:8px 18px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.06);}
.hero-title-ar{font-family:'Cairo',sans-serif;font-weight:900;color:var(--suzuki-red);font-size:clamp(46px,9vw,106px);line-height:1.04;margin:clamp(16px,3vw,26px) 0 8px;letter-spacing:-1px;}
.hero-title-fr{font-family:var(--font-display);font-weight:600;color:var(--navy);font-size:clamp(21px,3.4vw,36px);margin-bottom:14px;}
.hero-lead{max-width:600px;margin:0 auto;color:var(--muted);font-size:clamp(15px,2vw,19px);line-height:1.6;}

/* ---------- Hero tiles ---------- */
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,2.5vw,26px);margin-top:clamp(28px,5vw,48px);}
.tile{flex:1 1 280px;max-width:340px;text-decoration:none;border-radius:30px;padding:22px 22px 26px;display:flex;flex-direction:column;align-items:center;gap:16px;transition:transform .15s,box-shadow .15s;}
.tile:hover{transform:translateY(3px);}
.tile--yellow{background:var(--yellow);box-shadow:0 12px 0 var(--yellow-dark),0 22px 30px rgba(0,0,0,.12);}
.tile--yellow:hover{box-shadow:0 9px 0 var(--yellow-dark),0 16px 24px rgba(0,0,0,.14);}
.tile--red{flex-basis:300px;max-width:362px;background:var(--red);box-shadow:0 12px 0 var(--red-dark),0 22px 30px rgba(237,28,36,.2);}
.tile--red:hover{box-shadow:0 9px 0 var(--red-dark),0 16px 24px rgba(237,28,36,.24);}
.tile--blue{background:var(--blue);box-shadow:0 12px 0 var(--blue-dark),0 22px 30px rgba(43,111,214,.2);}
.tile--blue:hover{box-shadow:0 9px 0 var(--blue-dark),0 16px 24px rgba(43,111,214,.24);}
.tile-media{position:relative;width:100%;height:118px;background:#fff;border-radius:18px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px;}
.tile-media img{width:88%;height:88%;object-fit:contain;}
.tile-media .art{object-fit:contain;border-radius:12px;}
.play-btn{width:62px;height:62px;border-radius:50%;background:#2BA7E0;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(43,167,224,.4);}
.dl-badge{position:absolute;bottom:8px;right:10px;width:34px;height:34px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.25);}
.fb-badge{position:absolute;top:8px;left:10px;width:34px;height:34px;border-radius:9px;background:var(--fb);display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-weight:700;color:#fff;font-size:22px;line-height:1;box-shadow:0 4px 10px rgba(0,0,0,.2);}
.tile-label{font-family:var(--font-display);font-weight:700;color:#fff;font-size:clamp(19px,2.4vw,24px);line-height:1.15;}
.tile--red .tile-label{font-size:clamp(19px,2.4vw,25px);}
.tile-sub{font-family:var(--font-text);color:rgba(255,255,255,.92);font-size:14px;margin-top:4px;}

/* ---------- Gallery ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(18px,3vw,30px);}
.card{background:var(--red);border-radius:26px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 10px 0 var(--red-dark),0 18px 26px rgba(237,28,36,.18);}
.card-photo{position:relative;width:100%;height:150px;background:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px;}
.card-photo img{width:92%;height:92%;object-fit:contain;}
.badge-a4{position:absolute;top:8px;inset-inline-start:8px;background:var(--navy);color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:11px;padding:3px 8px;border-radius:6px;}
.card-name{font-family:var(--font-display);font-weight:700;color:#fff;font-size:clamp(22px,3vw,28px);line-height:1;}
.card-name-ar{font-family:'Cairo',sans-serif;font-weight:700;color:rgba(255,255,255,.92);font-size:16px;margin-top:5px;line-height:1;}
.btn-download{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--red);font-family:var(--font-display);font-weight:600;font-size:15px;text-decoration:none;padding:11px 20px;border-radius:999px;box-shadow:0 4px 0 rgba(0,0,0,.13);transition:transform .12s,box-shadow .12s;}
.btn-download:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.13);}
.center{text-align:center;}
.mt-cta{margin-top:clamp(28px,5vw,44px);}
.btn-reglement{display:inline-flex;align-items:center;gap:10px;background:var(--blue);color:#fff;font-family:var(--font-display);font-weight:600;font-size:clamp(16px,2vw,19px);border:none;cursor:pointer;padding:14px 36px;border-radius:999px;box-shadow:0 7px 0 var(--blue-dark),0 14px 22px rgba(43,111,214,.28);transition:transform .12s,box-shadow .12s;text-decoration:none}
.btn-reglement:hover{transform:translateY(2px);box-shadow:0 5px 0 var(--blue-dark),0 10px 16px rgba(43,111,214,.3);}

/* ---------- Steps ---------- */
.steps-band{background:#fff;border-top:1px solid #efece4;border-bottom:1px solid #efece4;}
.steps-band .section{max-width:1200px;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,32px);}
.step{position:relative;background:var(--paper);border:2px solid #f0ede5;border-radius:22px;padding:34px 24px 28px;text-align:center;}
.step-num{position:absolute;top:-18px;inset-inline-start:50%;transform:translateX(-50%);width:42px;height:42px;border-radius:50%;background:var(--suzuki-red);color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(226,0,26,.3);}
.step-title{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:clamp(16px,1.7vw,19px);}
.step-asterisk{color:var(--suzuki-red);font-size:.75em;vertical-align:super;margin-inline-start:2px;}
.step-text{color:var(--muted);font-size:15px;line-height:1.6;margin:10px 0 0;}

/* ---------- Steps note ---------- */
.steps-note{margin:clamp(16px,3vw,26px) 0 0;color:var(--muted);font-size:14px;line-height:1.6;text-align:center;font-style:italic;}

/* ---------- Footer ---------- */
.footer{position:relative;background:linear-gradient(135deg,#16245f,#1d3a86);color:#fff;overflow:hidden;}
.footer-inner{max-width:900px;margin:0 auto;padding:clamp(46px,7vw,84px) clamp(16px,4vw,40px);text-align:center;position:relative;z-index:1;}
.footer-kicker{font-family:var(--font-display);font-weight:600;color:#ffd36b;font-size:clamp(14px,2vw,17px);letter-spacing:.5px;}
.footer-title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4.6vw,48px);line-height:1.14;margin:10px 0 14px;}
.footer-lead{max-width:560px;margin:0 auto 30px;color:rgba(255,255,255,.85);font-size:clamp(15px,2vw,18px);line-height:1.6;}
.btn-fb{display:inline-flex;align-items:center;gap:12px;background:var(--fb);color:#fff;font-family:var(--font-display);font-weight:700;font-size:clamp(17px,2.4vw,22px);text-decoration:none;padding:18px 38px;border-radius:999px;box-shadow:0 9px 0 var(--fb-dark),0 18px 30px rgba(24,119,242,.4);transition:transform .15s,box-shadow .15s;}
.btn-fb:hover{transform:translateY(3px);box-shadow:0 6px 0 var(--fb-dark),0 12px 20px rgba(24,119,242,.45);}
.fb-icon{width:30px;height:30px;border-radius:8px;background:#fff;color:var(--fb);display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-weight:700;font-size:20px;}
.footer-note{margin-top:34px;color:rgba(255,255,255,.6);font-size:13px;}

/* ---------- Modale vidéo ---------- */
.modal-video{align-items:center;}
.modal-video-panel{position:relative;width:fit-content;max-width:min(900px,92vw);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);}
.modal-video-close{position:absolute;top:8px;right:8px;z-index:10;width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,.12);backdrop-filter:blur(4px);color:#222;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.modal-video-close:hover{background:rgba(0,0,0,.22);}
.video-player{display:block;width:auto;max-width:min(900px,92vw);max-height:80vh;}

/* ---------- Règlement modal ---------- */
.modal{position:fixed;inset:0;z-index:100;background:rgba(15,20,45,.55);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:clamp(14px,4vw,48px);overflow:auto;}
.modal[hidden]{display:none;}
.modal-panel{background:#fff;max-width:760px;width:100%;border-radius:24px;padding:clamp(24px,4vw,44px);box-shadow:0 30px 70px rgba(0,0,0,.35);position:relative;border-top:6px solid var(--suzuki-red);}
.modal-close{position:absolute;top:14px;inset-inline-end:14px;width:38px;height:38px;border-radius:50%;border:none;background:#f1f0ec;color:var(--navy);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.modal-title{font-family:var(--font-display);font-weight:700;color:var(--suzuki-red);font-size:clamp(22px,3.4vw,32px);margin:0 0 20px;text-align:center;}
.reg-list{display:flex;flex-direction:column;gap:13px;}
.reg-item{display:flex;gap:12px;align-items:flex-start;}
.reg-check{flex:none;width:24px;height:24px;border-radius:50%;background:#1f8a5b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;margin-top:1px;}
.reg-item span:last-child{color:#41496a;font-size:clamp(14px,1.8vw,16px);line-height:1.55;}
.reg-post{margin-top:22px;color:var(--navy);font-weight:600;font-size:15px;line-height:1.5;}
.reg-address{margin-top:6px;color:var(--suzuki-red);font-weight:700;font-size:15px;}
.reg-env-label{margin-top:20px;color:var(--navy);font-weight:700;font-size:15px;}
.reg-env{margin:8px 0 0;padding-inline-start:22px;color:#41496a;font-size:15px;line-height:1.75;}
.reg-sel{margin-top:22px;background:#fbf3f4;border-radius:14px;padding:16px 18px;}
.reg-sel-title{font-family:var(--font-display);font-weight:700;color:var(--suzuki-red);font-size:17px;margin-bottom:6px;}
.reg-sel-text{color:#41496a;font-size:15px;line-height:1.6;}
.modal-foot{text-align:center;margin-top:26px;}
.btn-modal-close{background:var(--navy);color:#fff;border:none;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:16px;padding:12px 30px;border-radius:999px;}

/* ---------- Small screens ---------- */
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .left-bg,.right-bg{display:none;}
  .logo{height:34px;}
  .logo-suzuki{width:clamp(88px,22vw,116px);}
  .logo-carpro{width:clamp(64px,16vw,86px);}
  .tile{flex-basis:100%;max-width:420px;}
  .steps{grid-template-columns:1fr;}
}