:root{
  --bg-primary:#0d1f1a;
  --bg-card:#132a22;
  --bg-card-2:#1a3a2e;
  --accent-green:#1e5c47;
  --accent-green-light:#2e7d5b;
  --text-primary:#eaf2ee;
  --text-secondary:#9fb8ab;
  --cta-orange:#f2a93c;
  --cta-orange-hover:#ffb84d;
  /* Couleur utilisée quand l'accent sert de TEXTE/bordure sur un fond clair (pas de fond
     plein derrière) — par défaut identique à --cta-orange partout, sauf dans les espaces
     admin/influenceur où le fond passe au blanc et où le jaune vif serait illisible en texte. */
  --cta-text:var(--cta-orange);
  --border:rgba(255,255,255,0.08);
  --radius:20px;
  --radius-sm:16px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0;}

/* Texte présent pour les lecteurs d'écran (ex: étiquette d'un champ) mais invisible à
   l'écran — pour ne pas alourdir visuellement une mise en page déjà compacte. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Une fois une vidéo (iframe) chargée dans une carte, on coupe l'animation "lift" au tap :
   le décalage de position pendant le tap perturbait la réception des clics par l'iframe
   YouTube/Vimeo sur mobile, rendant la pause impossible. */
.video-loaded,
.video-loaded:hover,
.video-loaded:active{transform:none !important;}

body{
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  font-weight:600;
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.5;
  overflow-x:hidden;
}

.container{max-width:720px;margin:0 auto;padding:0 20px;}

h1,h2,h3{font-weight:800;letter-spacing:-0.01em;}
h1{font-size:2.1rem;line-height:1.15;margin-bottom:14px;}
h2{font-size:1.9rem;line-height:1.2;margin-bottom:8px;}
h2.light{color:#fff;}
h3{font-size:1.15rem;margin-bottom:8px;font-weight:700;}
mark{background:var(--accent-green-light);color:#fff;padding:0 6px;border-radius:8px;box-decoration-break:clone;-webkit-box-decoration-break:clone;}

p{color:var(--text-secondary);font-weight:600;}
.lead{font-size:1.05rem;margin-bottom:24px;font-weight:700;}
.section-sub{color:var(--text-secondary);margin-bottom:28px;font-weight:700;}
.section-sub.small{margin-bottom:16px;text-align:center;}

/* Buttons */
.btn{
  display:inline-block;
  text-decoration:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:700;
  border-radius:999px;
  transition:all 0.25s ease-in-out;
  text-align:center;
}
.btn-primary{background:var(--cta-orange);color:#1a1200;box-shadow:0 0 0 rgba(242,169,60,0);}
.btn-primary:hover{
  background:var(--cta-orange-hover);
  transform:scale(1.03);
  box-shadow:0 8px 30px rgba(242,169,60,0.5), 0 0 24px rgba(242,169,60,0.35);
}
.btn-primary:active{transform:scale(0.98);}
.btn-sm{padding:8px 18px;font-size:0.9rem;}
.btn-lg{padding:16px 36px;font-size:1.05rem;}
.btn-block{display:block;width:100%;margin:22px 0;}
.btn.glow{box-shadow:0 0 24px 4px rgba(242,169,60,0.45);}

.btn-outline{
  background:transparent;border:1.5px solid var(--cta-text);color:var(--cta-text);
  padding:12px 20px;border-radius:999px;font-weight:700;font-family:inherit;cursor:pointer;
  display:block;width:100%;margin:22px 0;
  transition:all 0.25s ease-in-out;
}
.btn-outline:hover,
.btn-outline:active{
  transform:translateY(-2px);
  background:rgba(242,169,60,0.1);
}

.btn-dark{
  background:#0b0b0b;color:#fff;border:none;border-radius:12px;
  padding:10px 14px;font-weight:600;font-family:inherit;width:100%;cursor:pointer;margin:12px 0;
  transition:all 0.25s ease-in-out;
}
.btn-dark:hover,
.btn-dark:active{transform:translateY(-2px);background:#1c1c1c;}

/* Badge */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bg-card-2);border:1px solid var(--border);
  color:var(--accent-green-light);font-size:0.85rem;font-weight:600;
  padding:6px 16px;border-radius:999px;margin-bottom:18px;
}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-green-light);}

.sales-badge{margin-top:24px;}
.sales-badge-direct{color:var(--cta-text);}
.sales-badge-direct .dot{background:var(--cta-text);}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(13,31,26,0.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 20px;}
.logo{
  display:flex;align-items:center;gap:12px;
  font-weight:800;font-size:1.45rem;color:#fff;text-decoration:none;
  transition:color 0.2s ease-in-out;
}
.logo:hover,
.logo:active{color:var(--cta-text);}
.logo-mark{
  width:44px;height:44px;flex-shrink:0;border-radius:12px;
  background:#1f6b4f;
  display:flex;align-items:center;justify-content:center;
}
.logo-mark svg{width:24px;height:24px;}
.header-actions{display:flex;align-items:center;gap:10px;min-width:0;}
@media (max-width:360px){
  .header-inner{padding:12px 14px;gap:10px;}
  .logo{font-size:1.15rem;gap:8px;}
  .logo-mark{width:36px;height:36px;border-radius:10px;}
  .logo-mark svg{width:20px;height:20px;}
  .btn-sm{padding:8px 14px;font-size:0.85rem;}
}

/* Barre de nav façon Chariow — liens vers les sections de la page, cachés sur mobile
   derrière un menu hamburger (sinon ils ne rentrent pas à l'horizontale). */
.header-left{display:flex;align-items:center;gap:10px;}
.header-nav{display:none;align-items:center;gap:28px;}
.header-nav a{color:var(--text-secondary);font-weight:700;font-size:0.95rem;text-decoration:none;white-space:nowrap;transition:color 0.2s ease-in-out;}
.header-nav a:hover{color:var(--text-primary);}

.nav-burger{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
  background:transparent;color:var(--text-primary);cursor:pointer;
}
.nav-burger svg{width:20px;height:20px;}

.nav-mobile-panel{
  display:flex;flex-direction:column;
  max-height:0;overflow:hidden;
  background:var(--bg-primary);border-top:0 solid var(--border);
  transition:max-height 0.3s var(--ease);
}
.nav-mobile-panel.open{max-height:400px;border-top-width:1px;}
.nav-mobile-panel a{padding:14px 20px;color:var(--text-primary);text-decoration:none;font-weight:700;border-bottom:1px solid var(--border);}
.nav-mobile-panel a.btn{margin:14px 20px;border-bottom:none;text-align:center;}

@media(min-width:900px){
  .header-nav{display:flex;}
  .nav-burger,.nav-mobile-panel{display:none;}
}

/* Hero */
.hero{padding:56px 0 8px;text-align:center;}
.hero .container{display:flex;flex-direction:column;align-items:center;}

.video-card{margin-top:8px;width:100%;}
.video-thumb{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:var(--bg-card) center/cover no-repeat;aspect-ratio:16/10;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.video-thumb:hover,
.video-thumb:active{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.35);}
.video-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.video-thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.placeholder-bg{background:radial-gradient(circle at 30% 20%,var(--accent-green-light),var(--bg-card) 70%);}
.play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;border:none;
  background:rgba(255,60,60,0.9);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.25s ease-in-out;
}
.play-btn:hover,
.play-btn:active{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 24px rgba(255,60,60,0.5);}
.play-btn svg{width:26px;height:26px;margin-left:3px;}
.play-btn.small{position:static;transform:none;width:44px;height:44px;background:rgba(0,0,0,0.55);margin:auto;}
.play-btn.small:hover,
.play-btn.small:active{transform:scale(1.08);}
.video-caption{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(0deg,rgba(0,0,0,0.75),transparent);
  padding:14px;text-align:left;
}
.video-logo{width:28px;height:28px;border-radius:8px;background:#1f6b4f;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.video-logo svg{width:14px;height:14px;}
.video-title{font-weight:700;font-size:0.95rem;color:#fff;}
.video-sub{font-size:0.75rem;color:var(--text-secondary);}

/* Sections */
.section{padding:56px 0;text-align:center;}
.section-alt{background:var(--bg-card);}
/* Moins d'espace entre la dernière tuile "Comment ça marche" et "Ils témoignent...". */
#comment-ca-marche{padding-bottom:24px;}

/* Cards / steps */
.card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:26px 22px;text-align:left;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover,
.card:active{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,0.3);}
.steps{display:grid;gap:12px;margin-top:8px;}
.step-card{padding:16px 18px;}
.step-card h3{font-size:1rem;margin-bottom:4px;}
.step-card p{font-size:0.88rem;}
.step-num{
  width:30px;height:30px;border-radius:50%;background:var(--bg-card-2);
  color:var(--accent-green-light);font-weight:800;font-size:0.85rem;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;
}

/* Carousel */
.carousel{position:relative;margin-top:8px;}
.carousel-track{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:none;
  /* Isole le rendu de ce carrousel du reste de la page pendant le défilement automatique
     (évite les à-coups causés par des recalculs de mise en page ailleurs sur la page). */
  contain:layout paint;will-change:scroll-position;
}
.carousel-track::-webkit-scrollbar{display:none;}

.testi-card{
  position:relative;flex:0 0 82%;scroll-snap-align:start;
  background:#111;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);aspect-ratio:9/16;text-align:left;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.testi-card:hover,
.testi-card:active{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,0.35);}
.testi-tags{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2;}
.tag{background:#000;color:#fff;font-size:0.72rem;font-weight:700;padding:4px 10px;border-radius:6px;}
.testi-menu{position:absolute;top:10px;right:10px;background:#000;color:#fff;border:none;border-radius:6px;width:28px;height:28px;cursor:pointer;z-index:2;}
.testi-body{
  flex:1;display:flex;align-items:center;justify-content:center;position:relative;
  background:linear-gradient(160deg,#3a3a3a,#1a1a1a) center/cover no-repeat;
}
.testi-body.alt{background-color:var(--bg-card);}
.testi-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.testi-label{
  position:absolute;top:60px;left:16px;background:#fff;color:#111;
  font-weight:700;font-size:0.85rem;padding:10px 14px;border-radius:10px;line-height:1.3;
}
.testi-scrub{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#000;color:#fff;font-size:0.72rem;}
.testi-scrub .bar{flex:1;height:3px;background:rgba(255,255,255,0.3);border-radius:2px;}
.vimeo{opacity:0.7;font-style:italic;}

/* Petites vidéos de preuve — rangée légère sous "Mes propres résultats", sans défilement
   automatique : on navigue à la main avec les flèches jaunes de chaque côté. */
.proof-videos-title{margin-top:32px;display:inline-flex;}
.proof-carousel{padding:0 6px;}
.proof-track{gap:10px;scroll-snap-type:x proximity;}
.proof-card{
  position:relative;flex:0 0 150px;scroll-snap-align:start;
  background:#111;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--border);aspect-ratio:9/16;
}
.proof-card .testi-body{width:100%;height:100%;}
.proof-card .play-btn.small{width:40px;height:40px;}

.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--cta-orange);color:#1a1200;font-size:1.25rem;font-weight:800;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.3);transition:transform 0.15s ease-in-out;
}
.carousel-arrow:hover{transform:translateY(-50%) scale(1.06);}
.carousel-arrow.left{left:-4px;}
.carousel-arrow.right{right:-4px;}

/* Phone mocks (results) */
.phone-mock{
  flex:0 0 78%;scroll-snap-align:start;
  background:#fff;border-radius:18px;overflow:hidden;color:#111;
  border:1px solid var(--border);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.phone-mock:hover,
.phone-mock:active{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,0.35);}
/* Couleur fixe (pas une variable de thème) : cette barre imite un fond d'écran de
   téléphone sombre et doit le rester quel que soit le thème du site, sinon le texte
   blanc dessus devient invisible (comme c'était le cas avec le thème Chariow blanc). */
.phone-topbar{background:#0d1f1a;color:#fff;font-weight:700;font-size:0.85rem;padding:10px 14px;}
.phone-body{padding:16px;text-align:left;}
.rev-label{font-size:0.75rem;color:#888;}
.rev-total{font-size:1.4rem;font-weight:800;margin:4px 0 12px;}
.rev-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;border-radius:10px;padding:8px 12px;font-size:0.8rem;margin-bottom:8px;font-weight:600;}
.rev-row.pending{background:#fdf3d8;color:#8a6d1a;}
.rev-row.paid{background:#dcf3e3;color:#1a7a3d;}
.rev-sub{display:flex;justify-content:space-between;font-size:0.8rem;font-weight:700;margin:14px 0 8px;}
/* Couleur fixe (pas une variable de thème) : cette mini-maquette de téléphone garde
   toujours un fond blanc quel que soit le thème du site, il faut donc un orange qui
   reste lisible dessus dans tous les cas — pas le jaune vif du thème Chariow. */
.rev-sub a{color:#e0900f;font-weight:700;text-decoration:none;font-size:0.75rem;transition:color 0.2s ease-in-out;}
.rev-sub a:hover,
.rev-sub a:active{color:#b56e00;}
.rev-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:0.85rem;font-weight:600;border-top:1px solid #eee;}
.pill{font-size:0.68rem;font-weight:700;padding:3px 8px;border-radius:999px;}
.pill.pending{background:#fdf3d8;color:#8a6d1a;}
.pill.paid{background:#dcf3e3;color:#1a7a3d;}

/* Pricing */
.pricing-card{
  background:linear-gradient(160deg,var(--accent-green-light),var(--bg-card-2));
  border-radius:var(--radius);padding:36px 24px;text-align:center;
}
.pricing-box{margin-top:18px;}
.pricing-box p{color:rgba(255,255,255,0.85);margin-bottom:14px;}
.price-row{display:flex;align-items:flex-start;justify-content:center;gap:14px;}
.price-main{display:flex;flex-direction:column;align-items:center;line-height:1.05;}
.price{font-size:2.6rem;font-weight:800;color:#fff;}
.price-currency{display:block;font-size:1.8rem;font-weight:800;color:#fff;}
.price-old{font-size:0.95rem;color:rgba(255,255,255,0.5);text-decoration:line-through;line-height:1.2;margin-top:2px;}

.secure-row{
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--accent-green-light);font-size:0.9rem;font-weight:600;margin-bottom:28px;
}
.secure-row svg{width:16px;height:16px;}

/* CTA section */
.cta-section{background:linear-gradient(160deg,var(--accent-green-light),var(--bg-card));}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:14px;text-align:left;}
.faq-item{
  background:var(--bg-card-2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.faq-item:hover,
.faq-item:active{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,0.3);}
.faq-q{
  width:100%;background:none;border:none;color:var(--text-primary);
  font-family:inherit;font-weight:700;font-size:1rem;padding:20px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;
}
.faq-icon{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--bg-card);
  color:var(--accent-green-light);display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;transition:transform 0.3s ease-in-out;
}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.35s var(--ease);}
.faq-a p{padding:0 20px 20px;}

/* Footer */
.site-footer{
  background:var(--bg-card);border-top:1px solid var(--border);
  padding:40px 0 30px;text-align:center;
}
.site-footer .logo{justify-content:center;margin-bottom:22px;}
.footer-nav{display:flex;flex-direction:column;gap:16px;margin-bottom:24px;font-weight:600;}
.footer-nav a{color:var(--text-primary);text-decoration:none;transition:color 0.2s ease-in-out;}
.footer-nav a:hover,
.footer-nav a:active{color:var(--cta-orange);}
.copyright{color:var(--text-secondary);font-size:0.85rem;margin-top:6px;}

/* Help FAB */
.help-fab{
  position:fixed;bottom:20px;right:20px;z-index:100;
  display:flex;align-items:center;gap:8px;
  background:var(--accent-green-light);color:#fff;border:none;font-family:inherit;
  border-radius:999px;padding:12px 20px;font-weight:700;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,0.4);
  transition:all 0.25s ease-in-out;
}
.help-fab:hover,
.help-fab:active{transform:translateY(-2px) scale(1.03);box-shadow:0 10px 28px rgba(0,0,0,0.5);background:var(--accent-green);}
.help-fab svg{width:18px;height:18px;flex-shrink:0;}

/* Sur mobile, le bouton complet ("Besoin d'aide ?") chevauchait le coin des vidéos et
   interceptait les taps destinés au lecteur (pause, plein écran...). On le réduit à une
   simple icône ronde sur petit écran pour libérer cette zone. */
@media(max-width:640px){
  .help-fab{padding:14px;}
  .help-fab-label{display:none;}
}

/* Forms (inscription / connexion) */
.form-page{text-align:left;padding-top:40px;}
.container-narrow{max-width:480px;}
.form-page h1{font-size:1.8rem;}
.form-page .lead{margin-bottom:28px;}

.form{display:flex;flex-direction:column;gap:20px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
/* min-width:0 : sans ça, une grille laisse ses cases s'élargir jusqu'à la taille "naturelle"
   du contenu (ici, la largeur par défaut d'un champ <input>), ce qui pouvait pousser la
   ligne Prénom/Nom à déborder légèrement du cadre à certaines largeurs d'écran. */
.form-group{display:flex;flex-direction:column;gap:8px;min-width:0;}
.form-group label{font-weight:600;font-size:0.92rem;color:var(--text-primary);}
.form-group input{
  width:100%;font-family:inherit;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:13px 16px;color:var(--text-primary);
  font-size:0.95rem;transition:border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
.form-group input::placeholder{color:var(--text-secondary);opacity:0.7;}
.form-group input:focus{
  outline:none;border-color:var(--accent-green-light);
  box-shadow:0 0 0 3px rgba(46,125,91,0.35);
}
.form-group select{
  width:100%;font-family:inherit;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:13px 16px;color:var(--text-primary);
  font-size:0.95rem;transition:border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
  cursor:pointer;
}
.form-group select:focus{
  outline:none;border-color:var(--accent-green-light);
  box-shadow:0 0 0 3px rgba(46,125,91,0.35);
}
.field-hint{color:var(--text-secondary);font-size:0.78rem;}
.field-error{color:#e6685f;font-size:0.85rem;font-weight:600;min-height:1em;}

.input-icon-wrap{position:relative;display:flex;align-items:center;}
.input-icon-wrap input{width:100%;padding-right:46px;}
.toggle-visibility{
  position:absolute;right:12px;background:none;border:none;cursor:pointer;
  color:var(--text-secondary);display:flex;align-items:center;justify-content:center;
  transition:color 0.2s ease-in-out;
}
.toggle-visibility:hover,
.toggle-visibility:active{color:var(--text-primary);}
.toggle-visibility svg{width:19px;height:19px;}

.trust-row{
  display:flex;justify-content:center;gap:22px;margin-top:22px;
  color:var(--accent-green-light);font-size:0.85rem;font-weight:600;
}
.trust-row.single{margin-top:10px;}
.trust-row span{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary);}
.trust-row svg{width:15px;height:15px;}

.forgot-link{text-align:right;margin-top:-8px;}
.forgot-link a{color:var(--accent-green-light);font-size:0.85rem;font-weight:600;text-decoration:none;transition:color 0.2s ease-in-out;}
.forgot-link a:hover,
.forgot-link a:active{color:var(--cta-orange);}

.form-footer{text-align:center;margin-top:26px;color:var(--text-secondary);font-size:0.92rem;padding-bottom:20px;}
.form-footer a{color:var(--accent-green-light);font-weight:700;text-decoration:none;transition:color 0.2s ease-in-out;}
.form-footer a:hover,
.form-footer a:active{color:var(--cta-orange);}

@media(max-width:420px){
  .form-row{grid-template-columns:1fr;}
}

/* Header outline button (Se déconnecter) */
.btn-sm-outline{
  display:inline-flex;align-items:center;gap:7px;width:auto;flex-shrink:0;margin:0;
  padding:8px 16px;font-size:0.85rem;white-space:nowrap;
  background:rgba(242,169,60,0.08);
  box-shadow:0 2px 10px rgba(242,169,60,0.12);
}
.btn-sm-outline svg{width:15px;height:15px;flex-shrink:0;}
.btn-sm-outline:hover,
.btn-sm-outline:active{
  background:rgba(242,169,60,0.18);
  box-shadow:0 4px 16px rgba(242,169,60,0.22);
}
/* Sur petit écran, le texte disparaît et il ne reste que l'icône (bouton devient rond)
   pour ne jamais risquer de déborder du header. */
@media(max-width:420px){
  .btn-sm-outline{padding:10px;border-radius:50%;}
  .btn-sm-outline-label{display:none;}
}

/* Petit bouton plein (à ne pas confondre avec .btn-sm-outline, qui est un style "contour") */
.btn-sm-solid{
  display:inline-block;width:auto;margin:0;padding:8px 16px;font-size:0.85rem;white-space:nowrap;
}

/* Formation — grille de modules */
.container-wide{max-width:1040px;}
.module-grid{display:grid;gap:18px;margin-top:8px;grid-template-columns:1fr;align-items:start;}
.module-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.module-card:hover,
.module-card:active{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,0.3);}
.module-thumb{
  position:relative;aspect-ratio:16/9;
  background:var(--bg-card-2) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
}
.module-thumb:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;background:#000;}
/* Sur téléphone tenu en portrait, on "couche" la vidéo en pivotant de 90° pour qu'elle
   remplisse tout l'écran comme un vrai plein écran paysage (au lieu de rester en petit
   format portrait avec des bandes noires en haut et en bas). Si le navigateur accepte de
   verrouiller l'orientation en paysage (voir script.js), l'écran tourne vraiment et cette
   règle ne s'applique plus (le média "portrait" ne correspond plus). */
@media (orientation: portrait){
  .module-thumb:fullscreen{
    width:100vh;height:100vw;
    transform:rotate(90deg);
    transform-origin:center center;
  }
}
.module-thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.module-thumb.locked{filter:grayscale(0.6);opacity:0.6;}

/* Lecteur YouTube "maison" (module) — l'iframe généré par l'API (qui prend la place de
   .yt-mount) n'a pas ses propres contrôles (controls:0) : pointer-events est coupé dessus
   et tout passe par nos boutons .custom-video-toggle / .custom-fullscreen-toggle par-dessus,
   qui recouvrent toute la vidéo pour qu'aucun lien YouTube ne reste cliquable. */
.yt-mount{position:absolute;inset:0;pointer-events:none;}
.custom-video-toggle{
  position:absolute;inset:0;width:100%;height:100%;border:none;background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:22px;
}
.toggle-icon-wrap{display:flex;pointer-events:none;}
.toggle-icon-wrap svg{
  width:56px;height:56px;padding:14px;border-radius:50%;
  background:rgba(0,0,0,0.45);color:#fff;transition:all 0.25s ease-in-out;
}
.custom-video-toggle:hover .toggle-icon-wrap svg,
.custom-video-toggle:active .toggle-icon-wrap svg{background:rgba(0,0,0,0.65);transform:scale(1.06);}
.toggle-icon-wrap .icon-play{padding-left:17px;}
.icon-is-hidden{display:none !important;}

/* Disparition automatique des boutons lecture/pause/-10/+10 pendant la lecture */
.toggle-icon-wrap,
.skip-btn{transition:opacity 0.35s ease-in-out, background 0.25s ease-in-out, transform 0.25s ease-in-out;}
.custom-video-toggle.controls-idle .toggle-icon-wrap,
.custom-video-toggle.controls-idle .skip-btn{opacity:0;pointer-events:none;}

/* Boutons -10s / +10s de part et d'autre du bouton lecture/pause */
.skip-btn{
  border:none;background:rgba(0,0,0,0.4);color:#fff;border-radius:50%;
  width:44px;height:44px;flex-shrink:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:all 0.25s ease-in-out;
}
.skip-btn:hover,
.skip-btn:active{background:rgba(0,0,0,0.6);transform:scale(1.08);}
.skip-btn svg{width:18px;height:18px;}
.skip-btn span{font-size:0.6rem;font-weight:700;line-height:1;}

.custom-fullscreen-toggle{
  position:absolute;right:8px;bottom:34px;z-index:2;
  border:none;background:rgba(0,0,0,0.5);color:#fff;border-radius:10px;
  padding:8px;cursor:pointer;display:flex;transition:all 0.25s ease-in-out;
}
.custom-fullscreen-toggle:hover,
.custom-fullscreen-toggle:active{background:rgba(0,0,0,0.75);transform:scale(1.06);}
.custom-fullscreen-toggle svg{width:20px;height:20px;}

/* Barre de progression (modules) */
.video-progress-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:8px;padding:6px 10px;
  background:linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
  transition:bottom 0.25s ease-in-out;
}
/* En plein écran, on remonte un peu la barre pour ne pas coller au tout bord de l'écran */
.module-thumb:fullscreen .video-progress-bar{bottom:48px;}
.module-thumb:fullscreen .custom-fullscreen-toggle{bottom:82px;}
.video-time{color:#fff;font-size:0.68rem;font-weight:700;flex-shrink:0;min-width:26px;}
.video-time-current{text-align:right;}
.video-progress-track{
  position:relative;flex:1;height:14px;display:flex;align-items:center;cursor:pointer;
}
.video-progress-track::before{
  content:'';position:absolute;left:0;right:0;height:4px;border-radius:2px;
  background:rgba(255,255,255,0.3);
}
.video-progress-fill{
  position:absolute;left:0;height:4px;width:0%;border-radius:2px;
  background:var(--cta-orange);
}
.video-progress-handle{
  position:absolute;top:50%;left:0%;width:12px;height:12px;
  background:var(--cta-orange);border-radius:50%;
  transform:translate(-50%,-50%);box-shadow:0 0 0 2px rgba(0,0,0,0.5);
}

.module-info{padding:18px 20px;text-align:left;}
.module-index{
  display:inline-block;color:var(--accent-green-light);font-weight:700;
  font-size:0.78rem;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;
}
.module-info h3{margin-bottom:0;}

.module-prompt{padding:0 20px 20px;}
.module-prompt-intro{color:var(--text-secondary);font-size:0.85rem;margin-bottom:10px;}
.module-prompt-box{
  background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px;font-family:inherit;font-size:0.82rem;color:var(--text-primary);
  white-space:pre-wrap;word-break:break-word;max-height:180px;overflow-y:auto;margin-bottom:12px;
}
.copy-prompt-btn{margin:0;}

/* E-books */
.ebook-section-title{margin-top:48px;}
.ebook-grid{display:grid;gap:18px;margin-top:8px;grid-template-columns:1fr;}
.ebook-card{
  display:flex;gap:16px;align-items:center;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.ebook-card:hover,
.ebook-card:active{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,0.3);}
.ebook-cover{
  flex-shrink:0;width:70px;aspect-ratio:2/3;border-radius:var(--radius-sm);
  background:var(--bg-card-2) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;color:var(--text-secondary);
}
.ebook-cover svg{width:26px;height:26px;}
.ebook-cover.locked{opacity:0.5;}
.ebook-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;}
.ebook-info h3{font-size:1.3rem;line-height:1.2;}
.ebook-subtitle{color:var(--accent-green-light);font-size:0.85rem;font-weight:600;margin-top:-4px;}
.ebook-download{padding:10px 18px;font-size:0.85rem;margin:0;width:auto;align-self:flex-start;}
.ebook-download[aria-disabled="true"]{opacity:0.5;pointer-events:none;}

/* Tableaux de bord admin / influenceur */
.live-tile{
  display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:999px;
  padding:10px 18px;font-size:0.85rem;font-weight:600;color:var(--text-secondary);
}
.live-tile strong{color:var(--text-primary);font-size:1rem;}
.live-dot{
  width:9px;height:9px;border-radius:50%;background:#3ecf6f;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(62,207,111,0.6);animation:live-pulse 2s infinite;
}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgba(62,207,111,0.6);}
  70%{box-shadow:0 0 0 8px rgba(62,207,111,0);}
  100%{box-shadow:0 0 0 0 rgba(62,207,111,0);}
}

/* Filtre calendrier — remplace les boutons jour/mois/année par un petit calendrier
   qui permet de choisir un point de départ et voir les résultats jusqu'à maintenant. */
.calendar-filter{position:relative;display:inline-block;margin-top:16px;}
.calendar-filter-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:999px;
  padding:10px 16px;color:var(--text-primary);font-family:inherit;font-weight:600;
  font-size:0.85rem;cursor:pointer;transition:all 0.2s ease-in-out;
}
.calendar-filter-btn:hover{border-color:var(--cta-orange);}
.calendar-filter-btn svg{width:16px;height:16px;flex-shrink:0;color:var(--text-secondary);}
.calendar-filter-btn .chevron{width:12px;height:12px;transition:transform 0.2s ease-in-out;}
.calendar-filter.open .chevron{transform:rotate(180deg);}

.calendar-dropdown{
  display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:50;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:16px;width:270px;box-shadow:0 12px 30px rgba(0,0,0,0.35);
}
.calendar-filter.open .calendar-dropdown{display:block;}

.calendar-dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.calendar-dropdown-header span{font-weight:700;color:var(--text-primary);font-size:0.9rem;}
.calendar-nav-btn{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:none;
  color:var(--text-secondary);cursor:pointer;font-size:1rem;font-family:inherit;
  display:flex;align-items:center;justify-content:center;transition:all 0.2s ease-in-out;
}
.calendar-nav-btn:hover{background:var(--bg-card-2);color:var(--text-primary);}

.calendar-weekdays{
  display:grid;grid-template-columns:repeat(7,1fr);text-align:center;
  font-size:0.7rem;color:var(--text-secondary);font-weight:700;margin-bottom:6px;
}
.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.calendar-day{
  aspect-ratio:1;border:none;background:none;border-radius:50%;color:var(--text-primary);
  font-family:inherit;font-size:0.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all 0.15s ease-in-out;
}
.calendar-day.empty{cursor:default;}
.calendar-day:hover:not(:disabled):not(.empty){background:var(--bg-card-2);}
.calendar-day.today{color:var(--cta-text);font-weight:800;}
.calendar-day.selected{background:var(--cta-orange);color:#1a1200;font-weight:800;}
.calendar-day:disabled{opacity:0.25;cursor:not-allowed;}

.calendar-reset-btn{
  display:block;width:100%;margin-top:14px;padding:9px;background:none;
  border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);
  font-family:inherit;font-weight:600;font-size:0.8rem;cursor:pointer;transition:all 0.2s ease-in-out;
}
.calendar-reset-btn:hover{border-color:var(--cta-text);color:var(--cta-text);}

.calendar-range-hint{color:var(--text-secondary);font-size:0.85rem;margin-top:8px;}

.calendar-day-nav{display:flex;align-items:center;gap:8px;}
.calendar-day-nav .calendar-range-hint{margin-top:8px;}

.admin-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0 8px;
}
.admin-stat{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:16px;display:flex;flex-direction:column;gap:4px;
  font-size:0.82rem;color:var(--text-secondary);font-weight:600;
}
.admin-stat span{font-size:1.5rem;font-weight:800;color:var(--text-primary);}

/* Tuiles "Ventes"/"Total gagné" plus compactes côté client et influenceur. */
#affiliationStats,
#affiliateStats{grid-template-columns:repeat(2,1fr);gap:8px;max-width:360px;}
#affiliationStats .admin-stat,
#affiliateStats .admin-stat{padding:10px 12px;gap:2px;font-size:0.72rem;}
#affiliationStats .admin-stat span,
#affiliateStats .admin-stat span{font-size:1.1rem;}

.admin-table-wrap{overflow-x:auto;margin:8px 0;border-radius:var(--radius-sm);border:1px solid var(--border);}
.toggle-list-btn{
  display:block;width:100%;margin:12px 0 32px;padding:4px;
  background:none;border:none;cursor:pointer;font-family:inherit;
  color:var(--accent-green-light);font-size:0.85rem;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;text-align:center;
  transition:color 0.2s ease-in-out;
}
.toggle-list-btn:hover,
.toggle-list-btn:active{color:var(--cta-text);}
.admin-table{width:100%;border-collapse:collapse;font-size:0.85rem;white-space:nowrap;}
.admin-table th,
.admin-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);}
.admin-table th{color:var(--text-secondary);font-weight:700;background:var(--bg-card);}
.admin-table td{color:var(--text-primary);}
.admin-table tbody tr:last-child td{border-bottom:none;}
.admin-link{color:var(--accent-green-light);font-size:0.78rem;}
.admin-table .num{text-align:right;}
.chariow-link-steps{margin:0 0 18px;padding-left:20px;color:var(--text-secondary);font-size:0.9rem;line-height:1.7;}
#chariowLinkSubmitBtn{margin-top:14px;}

.confirm-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:200;padding:20px;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 0.2s ease-in-out;
}
.confirm-overlay.open{opacity:1;pointer-events:auto;}
.confirm-modal{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:26px;max-width:380px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,0.35);
  transform:scale(0.95);transition:transform 0.2s ease-in-out;
}
.confirm-overlay.open .confirm-modal{transform:scale(1);}
.confirm-modal h3{margin:0 0 10px;font-size:1.15rem;color:var(--text-primary);}
.confirm-modal p{margin:0 0 22px;color:var(--text-secondary);font-size:0.9rem;line-height:1.5;}
.confirm-actions{display:flex;gap:10px;justify-content:flex-end;}
.confirm-actions .btn{padding:9px 18px;font-size:0.85rem;}
.admin-actions{display:flex;gap:8px;}
.admin-actions .btn{margin:0;}

.withdrawal-box{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(135deg,var(--accent-green-light),var(--accent-green));
  border-radius:var(--radius);padding:20px 22px;margin:24px 0 8px;
}
.withdrawal-box h3{color:#fff;margin-bottom:4px;}
.withdrawal-box .field-hint{color:rgba(255,255,255,0.85);}
.withdrawal-box .btn{width:auto;margin:0;flex-shrink:0;}
.withdrawal-box .btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;}
.withdrawal-form{display:flex;gap:8px;flex-wrap:wrap;}
.withdrawal-form input{
  width:110px;font-family:inherit;font-weight:600;
  background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);
  border-radius:var(--radius-sm);padding:10px 12px;color:#fff;
}
.withdrawal-form input::placeholder{color:rgba(255,255,255,0.7);}
.withdrawal-form input:disabled{opacity:0.5;}

/* Mise en page admin — menu latéral façon Chariow, couleurs Afrilaunch */
.admin-shell{display:flex;min-height:100vh;background:var(--bg-primary);}

.admin-sidebar-toggle{
  position:fixed;top:16px;left:16px;z-index:210;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--border);
  background:var(--bg-card);color:var(--text-primary);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.admin-sidebar-toggle svg{width:20px;height:20px;}
.admin-sidebar-toggle:active{background:var(--bg-card-2);}

.admin-sidebar-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:190;
  opacity:0;pointer-events:none;transition:opacity 0.25s ease-in-out;
}
.admin-sidebar-overlay.open{opacity:1;pointer-events:auto;}

.admin-sidebar{
  position:fixed;top:0;left:0;bottom:0;width:250px;z-index:200;
  background:var(--bg-card);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:22px 14px;
  transform:translateX(-100%);transition:transform 0.28s ease-in-out;
}
.admin-sidebar.open{transform:translateX(0);}
.admin-sidebar-logo{
  display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;
  color:var(--text-primary);padding:8px;margin-bottom:26px;
}
.admin-nav{display:flex;flex-direction:column;gap:4px;flex:1;}
.admin-nav-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);
  background:none;border:none;color:var(--text-secondary);font-family:inherit;font-weight:600;
  font-size:0.92rem;cursor:pointer;text-align:left;width:100%;transition:all 0.2s ease-in-out;
}
.admin-nav-item svg{width:18px;height:18px;flex-shrink:0;}
.admin-nav-item:hover{background:var(--bg-card-2);color:var(--text-primary);}
.admin-nav-item.active{background:var(--cta-orange);color:#1a1200;}
.nav-badge{
  margin-left:auto;background:#e6685f;color:#fff;font-size:0.72rem;font-weight:800;
  min-width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  padding:0 6px;flex-shrink:0;
}
.admin-nav-logout{margin-top:auto;color:var(--cta-text);}
.admin-nav-logout:hover{background:rgba(242,169,60,0.12);color:var(--cta-text);}

.admin-main{flex:1;padding:76px 18px 40px;min-width:0;}
.admin-topbar{
  display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;
  gap:14px;margin-bottom:20px;
}
.admin-topbar .live-tile{margin-top:0;}

.admin-panel{display:none;}
.admin-panel.active{display:block;}

@media(min-width:900px){
  .admin-sidebar{transform:translateX(0);position:sticky;height:100vh;}
  .admin-sidebar-toggle,.admin-sidebar-overlay{display:none;}
  .admin-main{margin-left:0;padding:36px 44px 44px;}
}

@media(min-width:640px){
  .admin-stats{grid-template-columns:repeat(4,1fr);}
}

@media(min-width:640px){
  .module-grid{grid-template-columns:repeat(2,1fr);}
  .ebook-grid{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:960px){
  .module-grid{grid-template-columns:repeat(3,1fr);}
}

/* Responsive */
@media(min-width:640px){
  .steps{grid-template-columns:repeat(3,1fr);}
  h1{font-size:2.6rem;}
}

/* Sur grand écran, les cartes témoignages/résultats gardaient leur taille "pleine largeur
   mobile" (82%/78% du conteneur) — avec le format vidéo portrait (9:16), ça donnait des
   cartes énormes (~1000px de haut) et un défilement qui semblait cassé. On les rétrécit
   pour que plusieurs cartes soient visibles à la fois, comme un vrai carrousel. */
@media(min-width:640px){
  .testi-card{flex-basis:240px;}
  .phone-mock{flex-basis:240px;}
}

/* ============================================================
   Palette "Chariow" (jaune + blanc) — appliquée à tout le site.
   .admin-shell / .affiliate-shell gardent leurs styles de mise en page
   propres (sidebar, etc.) ; .site-chariow applique juste la palette
   aux autres pages (accueil, inscription, connexion, formation...).
   ============================================================ */
.admin-shell,
.affiliate-shell,
.site-chariow{
  --bg-primary:#ffffff;
  --bg-card:#ffffff;
  --bg-card-2:#fff6d9;
  --accent-green:#7a5c00;
  --accent-green-light:#a67c00;
  --text-primary:#1a1a17;
  --text-secondary:#736f61;
  --cta-orange:#ffcc00;
  --cta-orange-hover:#ffd84d;
  --cta-text:#b5551a;
  --border:rgba(0,0,0,0.1);
}

.affiliate-shell .site-header,
.site-chariow .site-header{background:rgba(255,255,255,0.9);}
.affiliate-shell .logo,
.site-chariow .logo{color:var(--text-primary);}

/* La grande tuile de prix et la section CTA finale reprennent la même couleur que les
   tuiles de la FAQ (au lieu du dégradé vert d'origine), donc leur texte passe du blanc
   au foncé habituel pour rester lisible sur ce fond clair. */
.site-chariow .pricing-card{background:var(--bg-card-2);border:1px solid var(--border);}
.site-chariow .cta-section{background:var(--bg-card-2);}
.site-chariow h2.light{color:var(--text-primary);}
.site-chariow .pricing-box p{color:var(--text-secondary);}
.site-chariow .price,
.site-chariow .price-currency{color:var(--text-primary);}
.site-chariow .price-old{color:var(--text-secondary);opacity:0.7;}

/* Tous les boutons "contour" (Se déconnecter, Refuser...) passent en jaune plein comme
   les boutons principaux, au lieu d'un simple contour de couleur. */
.admin-shell .btn-outline,
.affiliate-shell .btn-outline,
.site-chariow .btn-outline,
.admin-shell .btn-sm-outline,
.affiliate-shell .btn-sm-outline,
.site-chariow .btn-sm-outline{
  background:var(--cta-orange);
  border-color:var(--cta-orange);
  color:#1a1200;
  box-shadow:none;
}
.admin-shell .btn-outline:hover,
.affiliate-shell .btn-outline:hover,
.site-chariow .btn-outline:hover,
.admin-shell .btn-outline:active,
.affiliate-shell .btn-outline:active,
.site-chariow .btn-outline:active,
.admin-shell .btn-sm-outline:hover,
.affiliate-shell .btn-sm-outline:hover,
.site-chariow .btn-sm-outline:hover,
.admin-shell .btn-sm-outline:active,
.affiliate-shell .btn-sm-outline:active,
.site-chariow .btn-sm-outline:active{
  background:var(--cta-orange-hover);
  border-color:var(--cta-orange-hover);
}

.admin-shell .form-group input:focus,
.affiliate-shell .form-group input:focus,
.site-chariow .form-group input:focus{
  box-shadow:0 0 0 3px rgba(166,124,0,0.25);
}

.admin-shell .admin-nav-logout:hover{background:rgba(181,85,26,0.1);}

/* Mots mis en avant dans les titres ("en ligne", "en vidéo"...) — texte coloré et gras,
   sans le fond en forme de pastille. */
.site-chariow mark{background:none;color:var(--accent-green-light);padding:0;border-radius:0;}