/* RESET & BASICS */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(120deg,#1b1833 0%, #262347 100%);
  color: #edeaf5;
  line-height: 1.7;
  letter-spacing: 0.01em;
}
a { color: #d1bb6f; text-decoration: none; transition: color .15s; }
a:hover, a:focus { color: #925cfb; }

header {
  background: rgba(34,28,65,0.97);
  color: #edeaf5;
  position: sticky;
  top: 0;
  z-index: 99;
  box-shadow: 0 2px 20px #21144e11;
  padding: 0.7rem 0;
}
.nav-container {
  max-width: 1120px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.3rem;
}
.menu-toggle {
  font-size: 2rem;
  background: none;
  border: none;
  color: #edeaf5;
  cursor: pointer;
  display: none;
}
h1.logo {
  font-size: 2.3rem;
  letter-spacing: .08em;
  font-weight: 900;
  color: #d1bb6f;
  text-shadow: 0 1px 9px #0006;
  transition: color .2s;
}
nav ul.nav-menu {
  list-style: none;
  display: flex;
  gap: 1.45rem;
}
nav ul.nav-menu li a {
  color: #edeaf5;
  font-weight: 700;
  padding: 0.38rem 1.07rem;
  border-radius: 32px;
  font-size: 1.05rem;
  transition: background 0.3s, color 0.2s;
  position: relative;
  z-index: 1;
}
nav ul.nav-menu li a[aria-current="page"],
nav ul.nav-menu li a:hover, nav ul.nav-menu li a:focus {
  background: linear-gradient(90deg,#a084f5 0%,#d1bb6f 100%);
  color: #21172b;
  box-shadow: 0 2px 18px #a084f533;
}

main {
  padding: 3.5rem 2vw 2.5rem 2vw;
  max-width: 950px;
  margin: auto;
  width: 100%;
}

/* HERO SECTION */
.hero {
  background: linear-gradient(120deg,#232040 70%,#402e8d 100%);
  color: #fff;
  padding: 4rem 2rem 4rem 2.5rem;
  border-radius: 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 64px #411cb444, 0 0 1px #0006;
  margin-bottom: 2.7rem;
}
.hero .hero-content {
  max-width: 530px;
  z-index: 2; position: relative;
}
.hero h2 {
  
  font-size: 2.7rem;
  color: #d1bb6f;
  font-weight: 900;
  margin-bottom: 1.2rem;
  line-height: 1.15;
  text-shadow: 0 5px 24px #a084f523;
  animation: fadeInSlide 1.2s both;
}
.hero h2 .highlight {
  background: linear-gradient(90deg,#a084f5 20%,#d1bb6f 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-weight: 900;
}
@keyframes fadeInSlide {
  from { opacity: 0; transform: translateY(50px);}
  to   { opacity: 1; transform: translateY(0);}
}
.hero p {
  font-size: 1.14rem;
  margin-bottom: 2.2rem;
  color: #ececff;
  opacity: 0.89;
}
.hero .btn-primary {
  background: linear-gradient(90deg,#d1bb6f 0%, #925cfb 97%);
  color: #221c41;
  font-weight: 700;
  font-size: 1.17rem;
  padding: 1rem 2.3rem;
  border-radius: 45px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px #a084f525, 0 0 1px #0003;
  margin-top: 1.2rem;
  transition: 
    background 0.33s cubic-bezier(.16,.8,.65,1),
    box-shadow 0.33s,
    transform 0.12s cubic-bezier(.5,.4,.8,1.3);
  text-align: center;
  letter-spacing: 0.04em;
}
.hero .btn-primary:hover, .hero .btn-primary:focus {
  background: linear-gradient(90deg,#925cfb 0%, #d1bb6f 100%);
  color: #402e8d;
  box-shadow: 0 16px 40px #d1bb6f44, 0 0 1px #a084f566;
  outline: none;
  transform: translateY(-4px) scale(1.03);
}
.wave-effect {
  position: absolute;
  bottom: 0; left: 0; width: 100%; height: 110px;
  background-size: cover;
  opacity: .23;
  pointer-events: none;
  z-index: 1;
  animation: waveAnimation 24s linear infinite;
}
@keyframes waveAnimation {
  0%   { background-position-x: 0;}
  100% { background-position-x: 2200px;}
}

/* ABOUT */
.about {
  margin-top: 2rem;
  font-size: 1.15rem;
  background: rgba(92,74,160,0.09);
  border-radius: 1.2rem;
  box-shadow: 0 2px 32px #402e8d10;
  padding: 2.3rem 2rem 2rem 2rem;
  color: #bdaaef;
  backdrop-filter: blur(2.5px);
  animation: fadeInSlide 1.05s 0.4s backwards;
}
.about h3 {
  margin-bottom: 1.1rem;
  color: #d1bb6f;
  
  font-size: 1.35rem;
  font-weight: 900;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 2.3rem 1rem 1.3rem 1rem;
  font-size: 1.05rem;
  background: linear-gradient(90deg, #1b1833 0%, #2d2958 100%);
  color: #a084f5;
  margin-top: 4rem;
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 -2px 30px #21144e11;
  letter-spacing: .01em;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  main { max-width: 97vw; padding: 2.2rem 1vw 2rem 1vw; }
  .hero { padding: 2.4rem 1.2rem; border-radius: 1.3rem;}
  .about { padding: 1.6rem 1rem }
}
@media (max-width: 800px) {
  header { padding: 0.2rem 0;}
  .nav-container { flex-direction: column;}
  .menu-toggle   { display: block; }
  nav ul.nav-menu { 
    flex-direction: column;
    display: none;
    background: #21143eca;
    position: absolute;
    top: 48px;
    right: 0;
    min-width: 150px;
    border-radius: 0 0 1.1rem 1.1rem;
    box-shadow: 0 10px 25px #20102a25;
    gap: 0.6rem;
    z-index: 91;
    padding: 1.1rem 0;
  }
  nav ul.nav-menu.show { display: flex; }
}

@media (max-width: 600px) {
  .hero h2      { font-size: 1.35rem; }
  .hero h2 .highlight { font-size: 0.95rem; }
  .about, .footer { font-size: 1rem; }
  h1.logo { font-size: 1.17rem;}
}
.order-form {
  background: linear-gradient(120deg, #241e43 65%, #332e57 100%);
  max-width: 680px;
  margin: 4.5rem auto 2.7rem auto;
  padding: 3.7rem 3.2rem 3rem 3.2rem;
  border-radius: 2.3rem;
  box-shadow: 0 14px 54px #402e8dbb, 0 0 1px #0005;
  position: relative;
  color: #c7bee5;
  animation: fadeInSlide 1.1s both;
  font-size: 1.13rem;
}

.order-form h2 {
  
  color: #d1bb6f;
  font-weight: 900;
  font-size: 2.45rem;
  letter-spacing: .033em;
  margin-bottom: 2.5rem;
  text-align: left;
}

.order-form label {
  display: block;
  margin: 1.35rem 0 0.45rem 0;
  font-weight: 700;
  color: #edeaf5;
  letter-spacing: .01em;
  font-size: 1.11rem;
}

.order-form input,
.order-form select,
.order-form textarea {
  width: 100%;
  margin-bottom: .26rem;
  padding: 1.13rem 1.1rem;
  font-size: 1.15rem;
  background: rgba(255,255,255,0.08);
  color: #edeaf5;
  border: 1.8px solid #29254d;
  border-radius: 18px;
  transition: border 0.3s, background 0.3s, box-shadow .20s;
  margin-top: 0.1rem;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 2px 12px #211c4238;
}

.order-form input:focus,
.order-form select:focus,
.order-form textarea:focus {
  outline: none;
  border: 2.5px solid #a084f5;
  background: rgba(173,141,249,0.13);
  box-shadow: 0 6px 25px #a084f522, 0 2px 8px #d1bb6f22;
}

.order-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='gold' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 1.4em;
  padding-right: 2.5rem;
  color-scheme: dark;
  font-weight: 600;
}

.order-form option {
  color: #262347;
  background: #ecd060;
  font-weight: 600;
}

/* Animation fade */
@keyframes fadeInSlide {
  from { opacity: 0; transform: translateY(50px);}
  to   { opacity: 1; transform: translateY(0);}
}

.order-form textarea { min-height: 120px; resize: vertical; }

.order-form span[aria-hidden="true"] { color: #d1bb6f; font-weight: 900; margin-left: 1px;}

.price-display {
  margin: 1.7rem 0 1rem 0;
  font-size: 1.24rem;
  font-weight: 700;
  color: #d1bb6f;
  background: rgba(242,236,159,0.09);
  padding: 0.7rem 1.35rem;
  border-radius: 12px;
  display: inline-block;
  letter-spacing: .01em;
}
.btn-primary {
  background: linear-gradient(90deg,#d1bb6f 10%, #925cfb 98%);
  color: #221c41;
  font-weight: 700;
  font-size: 1.17rem;
  padding: 1.21rem 2.3rem;
  border-radius: 37px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 32px #a084f526, 0 0 1px #211c4264;
  margin-top: 1.3rem;
  width: 100%;
  transition: background 0.24s cubic-bezier(.16,.8,.65,1), box-shadow 0.22s, transform 0.13s;
  text-align: center;
  letter-spacing: 0.035em;
}

.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(90deg,#925cfb 0%, #d1bb6f 100%);
  color: #402e8d;
  box-shadow: 0 18px 39px #d1bb6f44, 0 0 1px #a084f566;
  outline: none;
  transform: translateY(-3px) scale(1.015);
}

/* Responsive */
@media(max-width:900px){
  .order-form {
    max-width: 96vw;
    padding: 2.1rem 0.2rem;
    border-radius: 1.3rem;
  }
  .order-form h2 { font-size: 1.5rem;}
}
body.draw {
  background: linear-gradient(120deg, #19163B 0%, #2a2548 100%);
  color: #edeaf5;
  font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
}

body.draw header {
  background: rgba(34,28,65,0.98);
  color: #edeaf5;
  box-shadow: 0 2px 20px #21144e11;
  padding: 0.7rem 0;
}

body.draw h1 {
  
  color: #d1bb6f;
  font-weight: 900;
  font-size: 2.2rem;
  letter-spacing: 0.09em;
  margin: 0;
}

body.draw .nav-container {
  max-width: 1100px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.3rem;
}

body.draw .nav-menu {
  list-style: none;
  display: flex;
  gap: 1.2rem;
}

body.draw .nav-menu li a {
  color: #edeaf5;
  font-weight: 700;
  padding: 0.40rem 1.15rem;
  border-radius: 32px;
  font-size: 1.05rem;
  transition: background 0.2s, color 0.18s;
}

body.draw .nav-menu li a:hover, 
body.draw .nav-menu li a:focus {
  background: linear-gradient(90deg,#a084f5 0%,#d1bb6f 100%);
  color: #241e43;
  box-shadow: 0 3px 15px #a084f444;
  outline: none;
}

body.draw main {
  padding: 3.5rem 2vw 2.5rem 2vw;
  max-width: 900px;
  margin: auto;
}

body.draw .instructions {
  background: rgba(92,74,160,0.13);
  padding: 2.2rem 2rem 2rem 2rem;
  border-radius: 1.2rem;
  box-shadow: 0 2px 32px #402e8d10;
  margin-bottom: 3rem;
  color: #bdaaef;
  animation: fadeInSlide 0.9s 0.2s backwards;
}

body.draw .instructions h2 {
  
  margin-bottom: 1.2rem;
  font-size: 2rem;
  color: #d1bb6f;
  font-weight: 900;
}

body.draw .instructions p {
  font-size: 1.12rem;
  color: #edeaf5;
  opacity: 0.88;
}

body.draw .whiteboard {
  background: linear-gradient(120deg, #231e3c 65%, #332e57 100%);
  border-radius: 1.4rem;
  box-shadow: 0 10px 48px #402e8d45, 0 0 1px #0003;
  padding: 2rem 1.4rem;
  margin-bottom: 2.5rem;
  animation: fadeInSlide 1.05s 0.25s backwards;
}

body.draw .whiteboard iframe {
  border: none;
  width: 100%;
  height: 60vh;
  min-height: 350px;
  box-shadow: 0 2px 18px #d1bb6f33, 0 0 1px #0002;
  border-radius: 1.1rem;
  background: #fff;
}

body.draw footer {
  text-align: center;
  padding: 2.2rem 1rem 1.13rem 1rem;
  font-size: 1.07rem;
  background: linear-gradient(90deg, #1b1833 0%, #2d2958 100%);
  color: #a084f5;
  margin-top: 4rem;
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 -2px 30px #21144e11;
  letter-spacing: .01em;
}

/* Responsive pour la whiteboard et les padding */
@media (max-width: 900px) {
  body.draw main { max-width: 98vw; padding: 2.2rem 3vw 2rem 3vw; }
  body.draw .whiteboard { padding: 1rem 0.3rem; }
}
@media (max-width: 600px) {
  body.draw .whiteboard iframe { height: 300px; }
  body.draw h1 { font-size: 1.17rem; }
}

@keyframes fadeInSlide {
  from { opacity: 0; transform: translateY(40px);}
  to   { opacity: 1; transform: translateY(0);}
}
#referenceImage {
  background: rgba(255,255,255,0.08);
  color: #edeaf5;
  border: 1.5px solid #29254d;
  border-radius: 13px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.07rem;
  padding: 0.62rem 1rem;
  width: 100%;
}
#referenceImage:focus {
  outline: none;
  border: 1.8px solid #a084f5;
  background:rgba(173,141,249,0.11);
}
.import-design {
  margin: 2rem 0 0 0;
  text-align: left;
}
.import-btn {
  background: linear-gradient(90deg, #925cfb 0%, #d1bb6f 100%);
  color: #211c41;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.75rem 2.2rem;
  border-radius: 34px;
  cursor: pointer;
  display: block;      /* ← Change ceci */
  width: 100%;         /* ← Et ajoute ceci */
  margin: 0 0 0.7rem 0;/* ← Pour supprimer l'alignement à gauche */
  box-shadow: 0 5px 17px #925cfb44;
  text-align: center;
  transition: background 0.24s, color 0.15s, transform 0.13s;
}
.import-btn:hover, .import-btn:focus {
  background: linear-gradient(90deg, #d1bb6f 0%, #925cfb 100%);
  color: #332e57;
  transform: translateY(-2px) scale(1.03);
}

#referenceImage {
  background: rgba(255,255,255,0.08);
  color: #edeaf5;
  border: 1.5px solid #29254d;
  border-radius: 13px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.07rem;
  padding: 0.62rem 1rem;
  width: 100%;
  margin-bottom: 0.5rem;
}
#referenceImage:focus {
  outline: none;
  border: 1.8px solid #a084f5;
  background:rgba(173,141,249,0.11);
}
.import-design {
  margin: 2rem 0 0 0;
  text-align: left;
}
.import-btn {
  background: linear-gradient(90deg, #925cfb 0%, #d1bb6f 100%);
  color: #211c41;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.75rem 2.2rem;
  border-radius: 34px;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 0.7rem;
  box-shadow: 0 5px 17px #925cfb44;
  text-align: center;
  transition: background 0.24s, color 0.15s, transform 0.13s;
}
.import-btn:hover, .import-btn:focus {
  background: linear-gradient(90deg, #d1bb6f 0%, #925cfb 100%);
  color: #332e57;
  transform: translateY(-2px) scale(1.03);
}
.instructions strong, .instructions span[style] {
  color: #D4AF37;
  background: rgba(34,28,65,0.18);
  padding: 0.19em 0.4em;
  border-radius: 0.7em;
  font-weight: 700;
}
.delete-btn {
  display: block;
  width: 100%;
  margin: 0.5rem 0 1rem 0;
  background: linear-gradient(90deg, #e84545 20%, #ba274a 100%);
  color: #fff8e1;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 32px;
  padding: 0.7rem 2rem;
  text-align: center;
  box-shadow: 0 4px 8px #e8454522;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background 0.18s, color 0.13s, transform 0.12s;
}
.delete-btn:hover, .delete-btn:focus {
  background: linear-gradient(90deg, #ba274a 20%, #e84545 100%);
  color: #fff;
  outline: none;
  transform: translateY(-2px) scale(1.02);
}
.price-note {
  font-size: 0.88em;
  color: #9ca0b0;
  display: block;
  margin-top: .3em;
  font-weight: 400;
}
.price-note:first-of-type {
  display: inline;
  margin-left: 0.2em;
}
/* === FORMULAIRE EN DEUX COLONNES === */
.order-grid {
  display: flex;
  gap: 3rem;
  justify-content: center;
  align-items: flex-start;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* Colonne du formulaire principal (gauche) */
.order-col.left {
  flex: 3 1 370px;
  min-width: 270px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.order-col.left h2 {
  margin-bottom: 2rem;
}

.order-col.left label {
  display: block;
  margin: 1.3rem 0 0.44rem 0;
  font-weight: 700;
  color: #edeaf5;
  font-size: 1.09rem;
  letter-spacing: .01em;
}
.order-col.left label[for=name], .order-col.left label[for=email] { margin-top: 0; }

.order-col.left input,
.order-col.left select,
.order-col.left textarea {
  width: 100%;
  margin-bottom: .16rem;
  padding: 1rem 1rem;
  font-size: 1.11rem;
  background: rgba(255,255,255,0.08);
  color: #edeaf5;
  border: 1.7px solid #29254d;
  border-radius: 15px;
  transition: border 0.3s, background 0.3s, box-shadow .20s;
  margin-top: 0.09rem;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 1.6px 10px #211c4240;
}
.order-col.left input:focus,
.order-col.left select:focus,
.order-col.left textarea:focus {
  outline: none;
  border: 2px solid #a084f5;
  background: rgba(173,141,249,0.13);
  box-shadow: 0 6px 14px #a084f522, 0 2px 8px #d1bb6f22;
}
.order-col.left select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='gold' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a 1 1 0 010-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 1.4em;
  padding-right: 2.4rem;
  font-weight: 600;
}
.order-col.left textarea { min-height: 110px; resize: vertical; }


/* Colonne panier (droite, plus petite) */
.order-col.right.panier {
  flex: 1 1 250px;
  min-width: 240px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Carte panier */
.panier-inner {
  width: 100%;
  background: linear-gradient(110deg, #201c3c 65%, #332e57 100%);
  border-radius: 18px;
  box-shadow: 0 4px 22px #311c4270, 0 2px 30px #0002;
  padding: 2.2rem 1.2rem 2.0rem 1.2rem;
  margin-top: 0.2rem;
  margin-bottom: 1.5rem;
}

.panier-inner label {
  margin-top: 0.4em;
  font-size: 1.03rem;
  color: #edeaf5;
  font-weight: 600;
  margin-bottom: 0.1em;
}
.file-label {
  font-size: 0.95em;
  color: #8d90a5;
  font-weight: 500;
  margin: 0.18em 0 0.55em 0;
  display: block;
}
input[type="file"] {
  background: rgba(255,255,255,0.08);
  color: #cab6ff;
  border: 1.2px solid #29254d;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.07rem;
  padding: 0.52rem 1rem;
  width: 100%;
  margin-bottom: 0.15rem;
}
input[type="file"]:focus {
  outline: none;
  border: 1.8px solid #a084f5;
  background:rgba(173,141,249,0.11);
}
img#previewImage {
  display: block;
  max-width: 100%;
  margin:0.7rem 0 1rem 0;
  border-radius:12px;
  box-shadow:0 3px 18px #311c4277;
}

/* Button, delete button */
.btn-primary, .panier-submit {
  background: linear-gradient(90deg,#d1bb6f 10%, #925cfb 98%);
  color: #221c41;
  font-weight: 700;
  font-size: 1.13rem;
  padding: 1rem 2.3rem;
  border-radius: 37px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 32px #a084f526, 0 0 1px #211c4264;
  width: 100%;
  margin-top: 1.1rem;
  transition: background 0.24s cubic-bezier(.16,.8,.65,1), box-shadow 0.22s, transform 0.13s;
  text-align: center;
  letter-spacing: 0.035em;
}
.btn-primary:hover, .panier-submit:hover, .btn-primary:focus, .panier-submit:focus {
  background: linear-gradient(90deg,#925cfb 0%, #d1bb6f 100%);
  color: #402e8d;
  box-shadow: 0 18px 39px #d1bb6f44, 0 0 1px #a084f566;
  outline: none;
  transform: translateY(-3px) scale(1.015);
}
.delete-btn {
  display: block;
  width: 100%;
  margin: 0.4rem 0 0.9rem 0;
  background: linear-gradient(90deg, #e84545 20%, #ba274a 100%);
  color: #fff8e1;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 32px;
  padding: 0.7rem 2rem;
  text-align: center;
  box-shadow: 0 4px 8px #e8454522;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background 0.18s, color 0.13s, transform 0.12s;
}
.delete-btn:hover, .delete-btn:focus {
  background: linear-gradient(90deg, #ba274a 20%, #e84545 100%);
  color: #fff;
  outline: none;
  transform: translateY(-2px) scale(1.02);
}

/* Bloc total et note panier */
.price-display {
  margin: 2.1rem 0 1.2rem 0;
  font-size: 1.10rem;
  font-weight: 700;
  color: #d1bb6f;
  background: rgba(242,236,159,0.08);
  padding: 1.1rem 1.15rem 0.6rem 1.15rem;
  border-radius: 13px;
  display: block;
  letter-spacing: .01em;
}
.price-note {
  font-size: 0.88em;
  color: #9ca0b0;
  display: block;
  margin-top: .32em;
  font-weight: 400;
}
.price-note:first-of-type {
  display: inline;
  margin-left: 0.17em;
}

/* Responsive : columns l'une sous l'autre sur mobile/tablette */
@media (max-width: 1000px) {
  .order-grid { flex-direction: column; gap: 0; }
  .order-col.right.panier { max-width: 97vw; margin-top: 2.8rem; }
  .order-col.left, .order-col.right.panier, .panier-inner { max-width: 100%; }
}
.custom-select,
.order-col.left select {
  appearance: none;
  background: linear-gradient(120deg, #241e43 60%, #332e57 100%);
  color: #edeaf5;
  border: 1.8px solid #29254d;
  border-radius: 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.10rem;
  font-weight: 600;
  padding: 1.13rem 2.5rem 1.13rem 1.1rem;
  /* flèche custom */
  background-image: url("data:image/svg+xml,%3Csvg fill='gold' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 1.6em;
  transition: border 0.3s, background 0.3s, box-shadow .20s;
}
.custom-select:focus,
.order-col.left select:focus {
  outline: none;
  border: 2.5px solid #a084f5;
  background:linear-gradient(120deg, #292152 60%, #3c3173 100%);
  box-shadow: 0 6px 25px #a084f522, 0 2px 8px #d1bb6f22;
}
.custom-select option,
.order-col.left select option {
  background: #211d3f;
  color: #d1bb6f;
  font-weight: 600;
}

/* Form effet carte sur mobile aussi */
.order-form, .panier-inner {
  box-shadow: 0 10px 54px #402e8dbb, 0 0 1px #0005;
  background: linear-gradient(120deg, #241e43 65%, #332e57 100%);
  border-radius: 2.1rem;
}

/* Responsive */
@media (max-width: 950px) {
  .order-grid {
    flex-direction: column;
    gap: 0;
    max-width: 96vw;
    padding: 0;
  }
  .order-col.left,
  .order-col.right.panier,
  .panier-inner {
    max-width: 100%;
    min-width: unset;
    border-radius: 1rem;
    margin: 0 auto 2.5rem auto;
  }
  .order-col.right.panier {
    margin-top: 2rem;
    margin-bottom: 0;
    align-items: stretch;
  }
}

@media (max-width: 600px) {
  .order-form, .panier-inner {
    padding: 1.4rem 0.7rem;
    border-radius: 1.1rem;
  }
  .order-col.left h2 { font-size: 1.18rem;}
  .custom-select, .order-col.left select { font-size: 1rem; padding: 1rem 2rem 1rem 0.9rem; }
}

/* === PRICING CARDS GRID === */
.pricing-layout {
  display: flex;
  gap: 3.1rem;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 1180px;
  margin: 2.5rem auto 0 auto;
  padding: 0 1rem;
}
@media (max-width: 950px) {
  .pricing-layout { flex-direction: column; gap: 0; }
}
.pricing-cards-section {
  flex: 1 1 340px;
  min-width: 250px;
  max-width: 440px;
}
.pricing-cards {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.card {
  background: linear-gradient(120deg,#211c36 76%,#2b2546 100%);
  border-radius: 1.1rem;
  box-shadow: 0 4px 20px #241b386e, 0 0 0 #0000;
  padding: 1.3rem 1.1rem 1.05rem 1.1rem;
  text-align: left;
  color: #edeaf5;
  transition: box-shadow 0.16s, transform 0.16s;
  opacity: 0.94;
  border: 1.5px solid #232047;
}
.card:hover, .card:focus-within {
  box-shadow: 0 10px 32px #a084f52e, 0 1px 20px #d1bb6f18;
  opacity: 1;
  z-index: 3;
  transform: translateY(-2px) scale(1.012);
}
.card h4 {
  
  color: #d1bb6f;
  font-size: 1.13rem;
  margin-bottom: .8rem;
  font-weight: bold;
  letter-spacing: 0.03em;
}
.card .prix {
  font-size: 1.46rem;
  
  color: #a084f5;
  font-weight: bold;
  margin-bottom: 0.7rem;
  display: block;
}
.card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0.7rem 0;
  font-size: 0.97rem;
  color: #bdbae7;
}
.card ul li {
  margin-bottom: 0.33em;
}
.btn-secondary {
  background: linear-gradient(90deg,#a084f5 5%,#d1bb6f 100%);
  color: #211c41;
  font-weight: 700;
  font-size: 1.00rem;
  padding: 0.62rem 1.3rem;
  border-radius: 29px;
  border: none;
  box-shadow: 0 4px 10px #a084f522;
  cursor: pointer;
  letter-spacing: 0.018em;
  transition: background 0.16s, color 0.14s, transform 0.11s;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}
.btn-secondary:hover, .btn-secondary:focus {
  background: linear-gradient(90deg,#d1bb6f 5%,#a084f5 100%);
  color: #332e57;
  outline: none;
  transform: translateY(-2px) scale(1.04);
}
.pricing-layout {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 2.5rem auto 0 auto;
  padding: 0 1rem;
}

.pricing-cards-section {
  flex: 1 1 340px;
  min-width: 260px;
  max-width: 370px;
}

.reveal-screen-right {
  flex: 1 1 510px;
  min-width: 350px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Ordinateur stylisé */
.computer-frame {
  position: relative;
  width: 95%;
  max-width: 460px;
  aspect-ratio: 16 / 10;
  min-height: 272px;
  background: linear-gradient(120deg,#2b274b 80%,#31266b 100%);
  border-radius: 20px 20px 18px 18px/20px 20px 35px 35px;
  box-shadow: 0 10px 90px #231b388c, 0 1px 20px #0003;
  margin-top: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.computer-camera {
  width: 22px;
  height: 6px;
  border-radius: 15px;
  background: #19163b;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.3;
}
.computer-screen {
  background: #1c1735;
  border-radius: 12px;
  border: 2.3px solid #282040;
  box-shadow: 0 1px 16px #a084f525;
  width: 93%;
  height: 78%;
  margin: 2.7% auto 0 auto;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
}
/* Base pied ordinateur */
.computer-base {
  width: 70px;
  height: 22px;
  border-radius: 11px 11px 16px 16px/11px 11px 17px 17px;
  background: linear-gradient(90deg,#d1bb6f55 8%,#29254c 85%);
  margin: 15px auto 0 auto;
  box-shadow: 0 2px 13px #d1bb6f22;
}

/* Responsive - superpose sur petit écran */
@media (max-width: 950px) {
  .pricing-layout { flex-direction: column;  }
  .reveal-screen-right { max-width:100vw; margin:2.2rem 0 0 0; }
  .computer-frame { margin: 2.5rem auto 0 auto; }
}
@media (max-width: 600px) {
  .computer-frame { min-height: 160px; }
  .computer-base { width: 44px; height:15px;}
}
.computer-screen {
  background: #1c1735;
  border-radius: 12px;
  border: 2.3px solid #282040;
  box-shadow: 0 1px 16px #a084f525;
  width: 93%;
  height: 78%;
  margin: 2.7% auto 0 auto;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  /* interdit que rien ne dépasse */
  position: relative;
}
.computer-nav {
  display: flex;
  gap: 0.2em;
  justify-content: center;
  background: #232040;
  border-radius: 1em;
  padding: 0.37em 0 0.37em 0;
  white-space: nowrap; /* pour scroll horizontal */
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  scrollbar-width: thin;
}
.computer-nav::-webkit-scrollbar {
  height: 6px;
}
.computer-nav::-webkit-scrollbar-thumb {
  background: #34215a;
  border-radius: 10px;
}
.computer-nav button {
  font-family:Montserrat,sans-serif;
  font-size:0.92em;
  font-weight:700;
  background: #282040;
  color:#edeaf5;
  border:none;
  border-radius:1em;
  padding:0.5em 1.1em;
  margin:0 0.13em;
  cursor:pointer;
  transition:background 0.2s,color 0.15s;
  outline:none;
}
.computer-nav button.active {
  background: linear-gradient(90deg,#d1bb6f 0%,#a084f5 60%);
  color: #231b38;
}

.computer-content {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
  max-height: calc(100% - 2.2em);
  /* scroll sympas */
  scrollbar-width: thin;
}
.computer-content::-webkit-scrollbar {
  width: 8px;
}
.computer-content::-webkit-scrollbar-thumb {
  background: #34215a;
  border-radius: 5px;
}
/* Pour que la colonne ordi prenne tout en hauteur et marche bien en sticky : */
@media (min-width: 900px) {
  .pricing-layout {
    align-items: flex-start;
    min-height: 500px;
  }
  .reveal-screen-right {
    position: relative;
    height: 100%;
    min-height: 420px;
    display: flex;
    justify-content: flex-end;
  }
  .computer-frame {
    position: sticky;
    top: 6.7rem; /* Adjuste selon ton header nav */
    /* Le JS s’occupera du déplacement */
    will-change: transform;
    z-index: 5;
    transition: box-shadow 0.22s;
  }
  
}

.strike-red {
  position: relative;
  display: inline-block;
  color: #da3535;
  font-weight: 55;
  text-decoration: none;
  line-height: 1;
}

.strike-red::after {
  content: '';
  position: absolute;
  left: 0;
  top: 45%;
  width: 25%;
  height: 3px;
  background: #da3535;
  transform: rotate(-14deg);
  pointer-events: none;
}
/* === PANIER EN 2 COLONNES === */
.checkout-grid {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  justify-content: stretch;
  max-width: 900px;
  margin: 2.2rem auto 2rem auto;
  /* possibilité d'adapter padding/**
  padding: 0 1.5rem;
}
.checkout-form-summary {
  flex: 3 1 400px;
  min-width: 220px;
  max-width: 580px;
  background: linear-gradient(120deg, #1e193a 65%, #292445 100%);
  border-radius: 1.8rem; 
  box-shadow: 0 10px 36px #20143333, 0 0 1px #0002;
  padding: 2.4rem 2.2rem 2.1rem 2.2rem;
  /* Ajoute un peu d'air */
}
.checkout-form-summary h2 {
  color: #d1bb6f;
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 2.2rem;
}
.checkout-row {
  margin-bottom: 1.21rem;
  display: flex;
  justify-content: space-between;
  font-size:1.11rem;
  gap:1.4em;
  line-height: 1.5;
}
.checkout-label {
  color: #edeaf5;
  font-weight: 700;
}
.checkout-details {
  color: #d1bb6f;
}
#no-cart {
  margin-top: 2.7rem;
  text-align: left;
}

/* Colonne prix à droite */
.checkout-payment {
  flex: 1 1 250px;
  min-width: 200px;
  max-width: 310px;
  background: linear-gradient(120deg, #221c39 65%, #312c52 100%);
  border-radius: 1.25rem;
  box-shadow: 0 4px 22px #311c4270, 0 2px 30px #0002;
  padding: 2.2rem 1.3rem 2.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.checkout-price {
  font-size: 2.1rem;
  font-weight: bold;
  color: #d1bb6f;
  margin-bottom: 0.65em;
  background: rgba(242,236,159,0.10);
  border-radius: 0.8em;
  padding: 0.65em 0.8em;
  text-align: center;
  letter-spacing: 0.01em;
}
.checkout-price-half {
  font-size: 1.16rem;
  color: #bbaaff;
  margin-bottom: .45em;
  text-align: center;
}
.btn-payer[disabled] {
  opacity: 0.57;
  cursor: not-allowed;
}
.btn-payer {
  background: linear-gradient(90deg,#d1bb6f 10%, #925cfb 98%);
  color: #221c41;
  font-weight: 700;
  font-size: 1.09rem;
  padding: 1.13rem 2.2rem;
  border-radius: 38px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 32px #a084f526, 0 0 1px #211c4264;
  margin-top: 1.5rem;
  margin-bottom: 0.7em;
  transition: background 0.24s cubic-bezier(.16,.8,.65,1), box-shadow 0.22s, transform 0.13s;
  text-align: center;
  letter-spacing: 0.035em;
  width: 100%;
}
.btn-payer:hover:not([disabled]), .btn-payer:focus:not([disabled]) {
  background: linear-gradient(90deg,#925cfb 0%, #d1bb6f 100%);
  color: #402e8d;
  box-shadow: 0 16px 40px #d1bb6f44, 0 0 1px #a084f566;
  outline: none;
  transform: translateY(-4px) scale(1.03);
}

/* RESPONSIVE : colonne unique en mobile/tablette */
@media (max-width: 900px) {
  .checkout-grid {
    flex-direction: column;
    gap: 0;
    max-width: 97vw;
    padding: 0;
  }
  .checkout-form-summary,
  .checkout-payment {
    max-width: 100%;
    min-width: unset;
    border-radius: 1.1rem;
    margin: 0 auto 2.2rem auto;
  }
  .checkout-payment {
    margin-top: 1.5rem;
    margin-bottom: 0;
    align-items: stretch;
  }
}
@media (max-width: 600px) {
  .checkout-form-summary, .checkout-payment {
    padding:1.1rem 0.6rem;
  }
  .checkout-form-summary h2 { font-size: 1.16rem;}
  .checkout-price { font-size: 1.3rem;}
}
.checkout-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 950px;
  width: 100%;
  margin: 2.2rem auto;
  overflow: visible;
}

.checkout-form-summary {
  flex: 3 1 400px;
  min-width: 220px;
  max-width: 580px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.checkout-payment {
  flex: 1 1 250px;
  min-width: 200px;
  max-width: 310px;
  word-break: break-word;
}


html, body {
  overflow-x: hidden;
  overflow-y: visible;
}
main {
  overflow: visible;
}
.pricing-layout,
.reveal-screen-right {
  overflow: visible !important;
}

/* Responsive, 1 colonne sous 1000px */
@media (max-width: 1000px) {
  .checkout-grid {
    flex-direction: column;
    gap: 0;
    max-width: 100vw;
  }
  .checkout-form-summary, .checkout-payment {
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 1.1rem;
    margin: 0 auto 2.2rem auto;
  }
  .checkout-payment {
    margin-top: 1.5rem;
    margin-bottom: 0;
    align-items: stretch;
  }
}
.recap-table {
  display: grid;
  grid-template-columns: 1.3fr 2fr 1.2fr;
  gap: 0.5em 1.2em;
}
.recap-row {
  display: contents; /* Pour que les enfants prennent la grille du parent */
}
.recap-label {
  font-weight: 700;
  color: #edeaf5;
  align-self: center;
  padding: 0.32em 0;
}
.recap-value {
  color: #bbaa4d;
  font-weight: 500;
  align-self: center;
  padding: 0.32em 0;
  word-break: break-all;
}
.recap-price {
  color: #a084f5;
  font-weight: 700;
  text-align: right;
  align-self: center;
  padding: 0.32em 0;
  min-width: 70px;
}
@media (max-width:680px) {
  .recap-table { grid-template-columns: 1fr 1.5fr 1fr; font-size: .95em;}
  .recap-label, .recap-value, .recap-price { padding: 0.13em 0;}
}
#delete-cart-btn {
  /* Bouton 'vider' stylé, tu l’as sans doute déjà, mais au cas où : */
  margin: 1.25em 0 0 0;
}
html, body {
  height: 100%;
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1 0 auto;
}
footer {
  flex-shrink: 0;
} 
#pages option {
  color: #edeaf5;
  background: #232040;
  font-weight: 400;
}
html, body {
  min-height: 100%;
  height: auto;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
  background: linear-gradient(120deg,#1b1833 0%, #262347 100%);
  margin: 0;
  padding: 0;
  /* PAS de display: flex ici !! */
}
main {
  width: 100%;
  margin: 0 auto;
  padding: 3.5rem 2vw 2.5rem 2vw;
  max-width: 950px;
  /* PAS de flex ici non plus ! */
}
/* Bloc code promo */
.promo-container {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  margin-bottom: 1.2em;
  font-family: 'Montserrat', sans-serif;
}

.promo-input-row {
  display: flex;
  gap: 0.6em;
  width: 100%;
}

#promo-code-input {
  font-family: inherit;
  border: 1px solid #443e63;
  color: #e7e7ef;
  background: #22213b;
  border-radius: 8px;
  padding: 0.48em 0.95em;
  font-size: 1em;
  transition: border-color 0.2s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

#promo-code-input:focus {
  border-color: #bbaa4d;
}

#apply-promo-btn {
  font-family: inherit;
  background: linear-gradient(93deg, #bbaa4d 50%, #a084f5);
  color: #161620;
  border: none;
  border-radius: 8px;
  padding: 0.48em 1.35em;
  font-size: 1em;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
   width: 100%;
}

#apply-promo-btn:hover {
  background: linear-gradient(93deg, #a084f5 60%, #bbaa4d);
  color: #1b1e23;
}

#promo-msg {
  font-size: 0.97em;
  min-height: 1.3em;
  padding-left: 1px;
  /* couleur dynamique déjà gérée par le JS */
}

.checkout-payment .promo-container {
  margin-top: 1em;
  margin-bottom: 1em;
}
/* La zone du détail ouverte en dessous */
.details-drop-row .recap-detail-full {
  grid-column: 1 / span 3;
  background: #22213b;
  color: #e7e7ef;
  border-radius: 12px;
  padding: 0;
  font-size: 1.13em;
  margin: 0.6em 0 0 0;
  min-height: 120px;
  max-height: 420px;
  box-shadow: 0 2px 16px 0 rgba(145,125,255,0.08);
  overflow-y: auto;
  width: 100%;
}

#r-details {
  padding: 1.3em;
}

/* Sur mobile */
@media (max-width: 700px) {
  .details-drop-row .recap-detail-full {
    max-width: 97vw;
    font-size: 1em;
    padding: 0;
  }
  #r-details {
    padding: 1em;
  }
}
.db-label {
  display: flex;
  align-items: flex-start;
  gap: 0.85em;
  cursor: pointer;
  user-select: none;
}
.db-label input[type="checkbox"] {
  display: none;
}
.custom-checkbox {
  display: inline-block;
  width: 1.20em;
  height: 1.20em;
  min-width: 1.20em;
  min-height: 1.20em;
  border-radius: 7px;
  border: 2.1px solid #bbaa4d;
  background: linear-gradient(120deg, #28254d 70%, #241e43 100%);
  box-shadow: 0 2px 7px #bbaa4d12;
  position: relative;
  transition: border-color 0.14s, background 0.16s;
  margin-top: 0.16em;
}
.db-label input[type="checkbox"]:focus + .custom-checkbox {
  border-color: #a084f5;
  box-shadow: 0 0 0 2px #a084f566;
  outline: none;
}
.db-label input[type="checkbox"]:checked + .custom-checkbox {
  background: linear-gradient(120deg,#d1bb6f 50%,#a084f5 100%);
  border-color: #a084f5;
}
.db-label input[type="checkbox"]:checked + .custom-checkbox::after {
  content: '';
  display: block;
  position: absolute;
  left: 0.33em;
  top: 0.15em;
  width: 0.28em;
  height: 0.62em;
  border-right: 2.2px solid #221c41;
  border-bottom: 2.2px solid #221c41;
  transform: rotate(37deg);
}
.db-label-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.db-price-sup {
  font-size: 0.96em;
  margin-left: 2.2em;
  min-height: 1.3em;
  margin-top: 0.15em;
  padding: 0.14em 0.6em 0.12em 0.3em;
  border-radius: 7px;
  background: none;
  color: #a084f5;
  transition: color 0.15s, background 0.18s;
}
.db-price-sup.active {
  background: linear-gradient(90deg,#d1bb6f22 38%,#a084f51c 100%);
  color: #d1bb6f;
  font-weight: 700;
}
@media (max-width:650px) {
  .db-label { gap: 0.48em; }
  .db-price-sup { margin-left: 1.7em; font-size:0.95em;}
  .db-label-text {font-size: 0.98em;}
}
.checkout-grid2 {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  justify-content: stretch;
  max-width: 900px;
  margin: 2.2rem auto 2rem auto;

}
body {
  background: linear-gradient(120deg,#1b1833 0%, #262347 100%);
  color: #edeaf5;
  position: relative;
  z-index: 1;
}
/* Carré 1 */
@keyframes float1 {
  0%   { transform: translate(0,0) scale(1) rotate(10deg);}
  33%  { transform: translate(-2vw, 7vh) scale(1.09) rotate(22deg);}
  65%  { transform: translate(2vw, -3vh) scale(0.97) rotate(16deg);}
  100% { transform: translate(0,0) scale(1) rotate(10deg);}
}
.bgc1 {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 10;
  animation: float1 14s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg width='110' height='110' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='92' height='92' rx='20' x='9' y='9' fill='%23110e22' opacity='0.19'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 110px 110px;
  background-position: 10vw 8vh;
  opacity: .16;
}

/* Carré 2 */
@keyframes float2 {
  0%   { transform: translate(0,0) scale(1.12) rotate(-33deg);}
  23%  { transform: translate(6vw,3vh) scale(0.97) rotate(-16deg);}
  85%  { transform: translate(-4vw,-9vh) scale(1.11) rotate(-29deg);}
  100% { transform: translate(0,0) scale(1.12) rotate(-33deg);}
}
.bgc2 {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 11;
  animation: float2 18s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg width='78' height='78' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='69' height='69' rx='14' x='4.5' y='4.5' fill='%23110e22' opacity='0.19'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 78px 78px;
  background-position: 38vw 21vh;
  opacity: .16;
}

/* Carré 3 */
@keyframes float3 {
  0%   { transform: translate(0,0) scale(1.19) rotate(16deg);}
  30%  { transform: translate(-7vw,8vh) scale(1.13) rotate(27deg);}
  69%  { transform: translate(13vw,-10vh) scale(0.93) rotate(5deg);}
  100% { transform: translate(0,0) scale(1.19) rotate(16deg);}
}
.bgc3 {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 12;
  animation: float3 15s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='74' height='74' rx='17' x='12' y='12' fill='%23110e22' opacity='0.19'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 100px 100px;
  background-position: 67vw 11vh;
  opacity: .16;
}

/* Carré 4 */
@keyframes float4 {
  0%   { transform: translate(0,0) scale(1.05) rotate(-9deg);}
  38%  { transform: translate(-5vw,6vh) scale(1.13) rotate(-31deg);}
  85%  { transform: translate(17vw,-7vh) scale(0.87) rotate(-24deg);}
  100% { transform: translate(0,0) scale(1.05) rotate(-9deg);}
}
.bgc4 {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 13;
  animation: float4 13s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg width='95' height='95' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='88' height='88' rx='16' x='4' y='4' fill='%23110e22' opacity='0.19'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 95px 95px;
  background-position: 12vw 75vh;
  opacity: .16;
}

/* Carré 5 */
@keyframes float5 {
  0%   { transform: translate(0,0) scale(0.97) rotate(24deg);}
  27%  { transform: translate(-10vw,9vh) scale(1.09) rotate(7deg);}
  79%  { transform: translate(8vw,-8vh) scale(0.81) rotate(-9deg);}
  100% { transform: translate(0,0) scale(0.97) rotate(24deg);}
}
.bgc5 {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 14;
  animation: float5 19s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg width='65' height='65' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='49' height='49' rx='7' x='8' y='8' fill='%23110e22' opacity='0.19'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 65px 65px;
  background-position: 75vw 77vh;
  opacity: .16;
}

/* Carré 6 */
@keyframes float6 {
  0%   { transform: translate(0,0) scale(1.16) rotate(-17deg);}
  28%  { transform: translate(7vw,-8vh) scale(1.09) rotate(-4deg);}
  77%  { transform: translate(-9vw,13vh) scale(1.02) rotate(-28deg);}
  100% { transform: translate(0,0) scale(1.16) rotate(-17deg);}
}
.bgc6 {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 15;
  animation: float6 17s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg width='93' height='93' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='86' height='86' rx='13' x='4' y='4' fill='%23110e22' opacity='0.19'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 93px 93px;
  background-position: 83vw 50vh;
  opacity: .16;
}

/* Carré 7 */
@keyframes float7 {
  0%   { transform: translate(0,0) scale(1.12) rotate(33deg);}
  33%  { transform: translate(6vw,7vh) scale(1.21) rotate(17deg);}
  64%  { transform: translate(-16vw,-3vh) scale(0.99) rotate(28deg);}
  100% { transform: translate(0,0) scale(1.12) rotate(33deg);}
}
.bgc7 {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 16;
  animation: float7 15s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg width='88' height='88' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='70' height='70' rx='12' x='9' y='9' fill='%23110e22' opacity='0.19'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 88px 88px;
  background-position: 61vw 73vh;
  opacity: .16;
}

/* Carré 8 */
@keyframes float8 {
  0%   { transform: translate(0,0) scale(1.19) rotate(6deg);}
  20%  { transform: translate(-7vw,10vh) scale(0.98) rotate(18deg);}
  60%  { transform: translate(14vw,-8vh) scale(1.07) rotate(-2deg);}
  100% { transform: translate(0,0) scale(1.19) rotate(6deg);}
}
.bgc8 {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 17;
  animation: float8 21s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg width='70' height='70' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='10' x='15' y='15' fill='%23110e22' opacity='0.19'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 70px 70px;
  background-position: 27vw 84vh;
  opacity: .16;
}

/* Carré 9 */
@keyframes float9 {
  0%   { transform: translate(0,0) scale(1.01) rotate(23deg);}
  45%  { transform: translate(-14vw,-8vh) scale(1.11) rotate(37deg);}
  81%  { transform: translate(19vw,7vh) scale(0.95) rotate(24deg);}
  100% { transform: translate(0,0) scale(1.01) rotate(23deg);}
}
.bgc9 {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 18;
  animation: float9 14s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='60' height='60' rx='10' x='10' y='10' fill='%23110e22' opacity='0.19'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 80px 80px;
  background-position: 81vw 83vh;
  opacity: .16;
}

/* Carré 10 */
@keyframes float10 {
  0%   { transform: translate(0,0) scale(1.21) rotate(-19deg);}
  26%  { transform: translate(8vw,11vh) scale(0.93) rotate(-25deg);}
  75%  { transform: translate(-9vw,-7vh) scale(1.24) rotate(-7deg);}
  100% { transform: translate(0,0) scale(1.21) rotate(-19deg);}
}
.bgc10 {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 19;
  animation: float10 17s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg width='73' height='73' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='59' height='59' rx='12' x='7' y='7' fill='%23110e22' opacity='0.19'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 73px 73px;
  background-position: 55vw 44vh;
  opacity: .16;
}
/* ------ RESPONSIVE MAX : <430px ----------- */
@media (max-width: 430px) {
  html {
    font-size: 87%;
  }
  main, .order-form, .panier-inner, .computer-frame, .checkout-form-summary, .checkout-payment {
    padding: 0.59rem 0.14rem !important;
    border-radius: 0.51em !important;
    min-width: unset !important;
    max-width: 99vw !important;
  }
  .hero, .about, .card, .whiteboard, .instructions, .checkout-form-summary, .checkout-payment {
    border-radius: 0.57em !important;
    padding: 0.4em 0.12em !important;
    font-size: 1em !important;
  }
  .order-col.left label, .order-form label, .about h3, .about, .card h4, .hero h2, .hero p {
    font-size: 0.95em !important;
    margin-bottom: 0.35em !important;
  }
  h1, h2, h3 {
    font-size: 1.04em !important;
  }
  .btn-primary, .btn-payer, .import-btn, .btn-secondary {
    font-size: 0.99em !important;
    padding: 0.68em 0 !important;
    min-width: 0;
  }
  .order-grid, .checkout-grid, .pricing-layout, .checkout-grid2 {
    flex-direction: column !important;
    gap: 0.09em !important;
    padding: 0 !important;
    max-width: 99vw !important;
  }
  .pricing-cards, .card, .order-col.left, .order-col.right.panier,
  .checkout-payment, .checkout-form-summary, .panier-inner {
    max-width: 99vw !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  /* Rendu "tableaux" sous forme stackée */
  .recap-table, .recap-row {
    display: block !important;
    width: 100%;
  }
  .recap-label, .recap-value, .recap-price {
    display: block;
    text-align: left !important;
    font-size: .96em !important;
    padding: 0.14em 0;
    min-width: 0 !important;
  }
  .computer-frame, .computer-screen, .whiteboard, .whiteboard iframe {
    min-height: 90px !important;
    padding: 0 !important;
    border-radius: 0.42em !important;
  }
  nav ul.nav-menu {
    min-width: 97vw !important;
    font-size: 1em;
    left: 0 !important;
    right: 0 !important;
    top: 40px !important;
    border-radius: 0 0 0.6em 0.6em !important;
    padding: 0.7em 0 !important;
  }
  .nav-container, header, .logo {
    font-size: 1em !important;
    padding: 0.18em 0 !important;
  }
  html, body, main, .order-grid, .checkout-grid, .pricing-layout, .whiteboard, .computer-screen {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* Pour les mini-écrans extrêmes */
@media (max-width: 360px) {
  html { font-size: 76%; }
}
/* ------ MAXI MOBILE AERATION POUR <430px ----------- */
@media (max-width: 430px) {
  html {
    font-size: 100%;
  }
  body, main {
    padding: 0 !important;
    margin: 0 !important;
    background: linear-gradient(120deg, #1b1833 0%, #262347 100%);
  }
  main,
  .order-form,
  .panier-inner,
  .computer-frame,
  .checkout-form-summary,
  .checkout-payment,
  .hero,
  .about,
  .card,
  .whiteboard,
  .instructions {
    padding: 1.1em 0.9em !important;
    border-radius: 1.1em !important;
    margin-bottom: 1.12em !important;
    box-shadow: 0 3px 17px #211c4259;
  }

  .order-col.left label,
  .order-form label,
  .about h3,
  .card h4,
  .hero h2,
  .hero p,
  label,
  .recap-label {
    font-size: 1.09em !important;
    margin-bottom: 0.6em !important;
    margin-top: 0.5em !important;
    font-weight: 700;
  }

  input,
  select,
  textarea,
  .custom-select {
    padding: 1em .8em !important;
    border-radius: 0.7em !important;
    font-size: 1.06em;
    box-shadow: 0 1px 7px #0002;
    margin-bottom: 1em !important;
  }

  .order-col.left textarea,
  .order-form textarea {
    min-height: 90px !important;
    font-size: 1.04em !important;
  }

  .btn-primary, .btn-payer, .import-btn, .btn-secondary, .panier-submit, .delete-btn {
    width: 100% !important;
    margin-top: 1.1em !important;
    margin-bottom: 1.1em !important;
    padding: 1.15em .5em !important;
    font-size: 1.15em !important;
    border-radius: 1.3em !important;
    box-shadow: 0 7px 23px #a084f544;
    letter-spacing: 0.03em;
  }

  .order-grid,
  .checkout-grid,
  .pricing-layout,
  .checkout-grid2 {
    flex-direction: column !important;
    gap: 2em !important;
    padding: 0 !important;
    max-width: 100vw !important;
  }

  .pricing-cards,
  .card,
  .order-col.left,
  .order-col.right.panier,
  .checkout-payment,
  .checkout-form-summary,
  .panier-inner {
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 auto 1.4em auto !important;
  }

  /* Les lignes du panier / recap */
  .recap-table, .recap-row {
    display: block !important;
    width: 100%;
    margin-bottom: .5em;
  }
  .recap-label,
  .recap-value,
  .recap-price {
    font-size: 1em !important;
    display: block !important;
    padding: 0.18em 0.1em !important;
    text-align: left !important;
  }

  .delete-btn, #delete-cart-btn {
    margin-top: 0.7em !important;
    margin-bottom: 1.6em !important;
  }

  nav ul.nav-menu {
    min-width: 99vw !important;
    font-size: 1.06em;
    left: 0 !important;
    right: 0 !important;
    top: 44px !important;
    border-radius: 0 0 1.1em 1.1em !important;
    padding: 1.1em 0 !important;
  }
  .nav-container, header, .logo {
    font-size: 1.08em !important;
    padding: 0.38em 0 !important;
  }

  /* Whiteboard/ordi ultra-responsive */
  .computer-frame, .computer-screen, .whiteboard, .whiteboard iframe {
    min-height: 100px !important;
    padding: 0.25em !important;
    border-radius: 0.9em !important;
  }

  /* Séparations aérés */
  .order-form, .checkout-form-summary, .checkout-payment, .panier-inner, .about, .card {
    margin-bottom: 1.6em !important;
  }

  /* Empêcher les scroll H */
  html, body, main, .order-grid, .checkout-grid, .pricing-layout, .whiteboard, .computer-screen {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}
@media (max-width: 360px) {
  html { font-size: 92%; }
  main, .order-form, .panier-inner, .computer-frame, .checkout-form-summary, .checkout-payment {
    padding: 0.7em 0.18em !important;
    border-radius: 0.7em !important;
  }
}
@media (max-width: 500px) {
  .btn-primary {
    font-size: 1.01em !important;
    padding: 0.75em 0.1em !important;
    max-width: 98vw !important;
    width: 100% !important;
    border-radius: 1.1em !important;
  }
  .hero .btn-primary {
    margin-top: 0.7em !important;
    margin-bottom: 0.7em !important;
  }
}
@media (max-width: 370px) {
  .btn-primary {
    font-size: 0.96em !important;
    padding: 0.67em 0.05em !important;
    border-radius: 0.8em !important;
  }
}
@media (max-width: 500px) {
  .hero .btn-primary {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    margin-top: 2.1em !important;      /* Espace avec le texte au-dessus */
    margin-bottom: 0.9em !important;   /* Espace avec ce qu’il y a en dessous */
    font-size: 1.02em !important;
    border-radius: 1.2em !important;
    padding: 0.78em 0 !important;      /* Hauteur ok, plus large sans être mastoc */
    text-align: center !important;
  }

  /* Pour éviter bordures collées sur écrans minuscules : */
  .hero-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Pour encore mieux sur très petits téléphones : */
@media (max-width: 370px) {
  .hero .btn-primary {
    font-size: 1em !important;
    padding: 0.59em 0 !important;
    border-radius: 0.85em !important;
  }
}
@media (max-width: 900px) {
  .nav-container {
    position: relative;
    background: transparent;
    padding-right: 3em;
  }
  .menu-toggle {
    display: block;
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2002;
    background: transparent;
    color: #fff7cc;
    border-radius: 0.7em;
    border: none;
    padding: 0.45em 1em;
    font-size: 2em;
  }
  nav ul.nav-menu {
    position: fixed;
    top: 0;
    right: -100vw;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(120deg, #1b1833 0%, #262347 100%);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
    z-index: 9999;
    transition: right 0.4s ease;
    box-shadow: 0 0 40px #00000066;
    overflow-y: auto;
  }

  nav ul.nav-menu.show {
    right: 0;
  }


  nav ul.nav-menu li {
    width: 100%;
  }

  nav ul.nav-menu li a {
    font-size: 1.2rem;
    color: #edeaf5;
    font-weight: 600;
    display: block;
    width: 100%;
    padding: 0.8rem 0;
    border-bottom: 1px solid #2c2c3c;
  }

  nav ul.nav-menu li a:hover {
    color: #d1bb6f;
  }

  .menu-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    background: none;
    border: none;
    font-size: 2rem;
    color: #edeaf5;
    cursor: pointer;
  }
}
/* Pour tout ultra-mobile, ~moins de 600px */
@media (max-width: 600px) {
  .nav-container {
    padding-right: 0.3em;
  }
  .menu-toggle {
    font-size: 1.38em;
    right: 0.35em;
    padding: 0.27em 0.62em;
  }
  nav ul.nav-menu {
   /* width: 84vw; */
   /* max-width: 230px; */
    right: 0;
    left: auto;
    padding: 0.5em 0;
    font-size: 1em;
    height: 100vh;  
  }
  nav ul.nav-menu li a {
    font-size: .99em;
    min-width: 96px;
    padding: 0.31em 0.68em;
  }
}
@media (max-width: 900px) {
  nav ul.nav-menu {
    position: fixed;
    top: 0;
    left: 0;   /* PAS right: -100vw; laisse left: 0 sinon le menu ne part pas du haut-gauche */
    width: 100vw;
    height: 100vh;     /* Pour couvrir tout l'écran du haut jusqu'en bas */
    background: linear-gradient(120deg, #1b1833 0%, #262347 100%);
    margin: 0;  /* important ! */
    padding: 2rem 1.5rem 2rem 1.5rem; /* padding haut + bas */
    box-sizing: border-box; /* important aussi */
    overflow-y: auto;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    /* animation slide in/out : */
    transform: translateX(100vw);
    transition: transform 0.4s ease;
  }
  nav ul.nav-menu.show {
    /* fait apparaître le menu */
    transform: translateX(0);
  }
}
.nav-back-btn {
  display: none;
}
@media (max-width: 900px) {
  .nav-back-btn {
    display: block;
  }
}
/* CACHE le mini résumé du projet dans la table sur mobile */
@media (max-width: 799px) {
  /* On cache aussi le bloc mini résumé dans la table */
  #details-content-row {
    display: none !important;
  }

  /* On ajoute du padding sur le résumé détaillé */
  #r-details-big.checkout-details-area {
    padding-left: 1em;
    padding-right: 1em;
    /* Optionnel : augmente un peu la taille si c'est trop serré */
    font-size: 1.05em;
  }
}
@media (max-width: 500px) {
  /* Par défaut, tout est justifié */
  body, main, section, article, .pricing-cards, .card,
  h1, h2, h3, h4, h5, h6, p, ul, ol, li, div, .hero-content {
    text-align: justify;
  }

}
.footerp {
  text-align: center;
}
html, body {
  background-color: #1b1833;
  background-image: linear-gradient(120deg, #1b1833 0%, #262347 100%);
}
.bing-violet {
  background: linear-gradient(120deg, #a084f5 0%, #684fff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  font-weight: bold;
  transition: filter 0.5s, text-shadow 0.5s;
  text-shadow: 0 1px 9px #a084f544;
  cursor: pointer;
}

.bing-violet:hover, .bing-violet:focus {
  /* Effet doux : glow violet, un peu plus lumineux au hover */
  filter: brightness(1.18) saturate(1.2);
  text-shadow:
    0 0 7px #a084f5cc,
    0 2px 20px #684fff80;
}

@media (hover: none) and (pointer: coarse) {
  .bing-violet:hover, .bing-violet:focus {
    filter: none !important;
    text-shadow: 0 1px 9px #a084f544 !important;
  }
}
.bing-violet {
  background: linear-gradient(120deg, #a084f5 0%, #684fff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  font-weight: bold;
  transition: filter 0.5s, text-shadow 0.5s;
  text-shadow: 0 1px 9px #a084f544;
  cursor: pointer;
}
.bing-violet:hover, .bing-violet:focus {
  filter: brightness(1.18) saturate(1.2);
  text-shadow:
    0 0 7px #a084f5cc,
    0 2px 20px #684fff80;
}
/* Désactive l'effet hover sur mobile et tablette */
@media (hover: none) and (pointer: coarse) {
  .bing-violet:hover, .bing-violet:focus {
    filter: none !important;
    text-shadow: 0 1px 9px #a084f544 !important;
  }
}
@media (max-width:900px) {
  .reveal-screen-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 2em 0;
  }
  .phone-frame {
    margin: 0 auto;
  }
}
.phone-content {
  font-size: 0.74em;
  padding: 0.12em 0.08em;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.phone-content nav.computer-nav {
  padding: 0.13em 0 !important;
  font-size: 0.83em;
  border-radius: 0.6em;
  margin-bottom: 0.13em;
}
.phone-inner-content {
  padding: 0.38em 0.15em !important;
  font-size: 0.88em !important;
  line-height: 1.2;
}
.phone-content .computer-nav button {
  font-size: 0.95em !important;
  padding: 0.23em 0.45em !important;
  min-width: 0.1em;
}
.phone-inner-content div, .phone-inner-content ul, 
.phone-inner-content table, .phone-inner-content blockquote {
  font-size: 0.90em !important;
  word-break: break-word;
}
.phone-content * {
  line-height: 1.20 !important;
}
.phone-header-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(89deg,#231c3c 65%,#3c3173 100%);
  color: #edeaf5;
  padding: 0.37em 0.6em 0.37em 0.4em;
  border-radius: 1.1em 1.1em 0 0;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 0.5px 8px #0001;
  min-height: 2.1em;
  margin-bottom: 0.09em;
}
.phone-header-mini .logo-mini {
  height: 1.6em;
  width: auto;
  margin-right: 0.38em;
  vertical-align: middle;
  display: inline-block;
}
.phone-header-mini .brand-mini {
  color: #bbaa4d;
  font-weight: 600;
  font-size: 1.09em;
  vertical-align: middle;
  margin-right:0.7em;
}
.phone-header-mini .burger-mini {
  font-size: 1.30em;
  background: none;
  border: none;
  color: #edeaf5;
  margin-left: auto;
  padding: 0.06em 0.33em;
  border-radius: 0.5em;
  cursor: pointer;
}
.phone-header-mini .nav-mini {
  display: none;
  position: absolute;
  top: 2.4em;
  left: 0;
  width: 100%;
  background: #1e1635ee;
  box-shadow: 0 6px 22px #2c185533;
  border-radius: 0 0 0.7em 0.7em;
  padding: 0.64em 0.6em 0.7em 0.9em;
  z-index: 10;
}
.phone-header-mini .nav-mini.show {
  display: block;
}
.phone-header-mini .nav-mini a {
  display: block;
  color: #edeaf5;
  font-size: 1.06em;
  text-decoration: none;
  font-weight: 500;
  padding: 0.33em 0;
  border-radius: 7px;
  transition: background 0.19s, color 0.17s;
}
.phone-header-mini .nav-mini a.active,
.phone-header-mini .nav-mini a:hover {
  background: linear-gradient(90deg,#a084f5 0%,#d1bb6f 100%);
  color: #231b38;
}
.computer-frame {
  position: relative;
  width: 445px;
  height: 228px;
  max-width: 97vw;
  margin: 2.5rem 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
  z-index: 1;
  background: linear-gradient(133deg, #241e43 88%, #2a2450 100%);
  border-radius: 23px 23px 20px 20px / 23px 23px 18px 18px;
  box-shadow:
    0 8px 28px #16122a88,
    0 1.6px 18px #2623470e inset,
    0 5px 15px #372f502d inset;
  border: 1.3px solid #29254d;
}

.computer-screen {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  height: calc(100% - 21px);
  background: linear-gradient(120deg, #1b1833 90%, #18142f 100%);
  border-radius: 9px;
  border: 1px solid #302a57;
  box-shadow: 0 0.6px 12px #1b183335, 0 3px 10px #21203720;
  overflow: hidden;
  z-index: 3;
}
.computer-screen::before {
  content: "";
  display: block;
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 54%;
  background: linear-gradient(120deg, #402e8d10 8%, #211c4308 44%, transparent 100%);
  border-radius: 9px 9px 0 0;
  opacity: 0.06;
  pointer-events: none;
  z-index: 2;
}

.computer-base {
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  width: 30px;
  height: 6px;
  background: linear-gradient(90deg, #23203b 60%, #241e43 100%);
  border-radius: 0 0 10px 10px / 0 0 13px 13px;
  box-shadow: 0 1px 3px 0 #23203b60;
  border: none;
  z-index: 4;
}
.computer-base:after { display: none; }

.computer-keyboard {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #34315e 100%, #48457b 80%);
  border-radius: 2.5px 2.5px 7px 7px / 2.1px 2.1px 8px 8px;
  box-shadow: 0 2px 8px 0 #18162f24 inset;
  border: none;
  opacity: 0.94;
  z-index: 5;
}

.computer-camera {
  position: absolute;
  left: 50%;
  top: 1.5px;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #252142;
  border-radius: 50%;
  box-shadow: 0 0 0.8px 0.5px #ffffff;
  z-index: 10;
}
.computer-camera:after {
  content: '';
  display: block;
  margin: 1.4px auto 0;
  width: 1.8px;
  height: 1.8px;
  border-radius: 50%;
  background: #edeaf5b8;
  opacity: 0.26;
}
.computer-nav {
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  background: #232040;
  box-shadow: none !important;
}
.computer-nav button {
  border-radius: 0 !important;
}
.computer-frame {
  width: 520px;
  height: 265px;
  max-width: 99vw;
  min-height: 292px;
}

.computer-screen {
  font-size: 1.08em;
}
#mobileTriggerModal {
  position: fixed; z-index: 5000; left: 0; top: 0;
  width: 100vw; height: 100vh; display: flex;
  align-items: center; justify-content: center;
}

#mobileTriggerOverlay {
  position: absolute; left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(28,23,53, 0.88);
  z-index: 1;
}

#mobileTriggerContent {
  position: relative; z-index: 2;
  background: linear-gradient(120deg,#232040 70%,#402e8d 100%);
  box-shadow: 0 10px 32px #2a245044, 0 0 1px #0008;
  border-radius: 1.5em;
  max-width: 95vw; min-width: 260px; width: 340px;
  padding: 2.2em 1.5em 1.6em 1.5em;
  color: #edeaf5;
  text-align: center;
  font-family: 'Montserrat',sans-serif;
}

#mobileTriggerContent h3 {
  color: #d1bb6f;
  margin-bottom: 0.7em;
  font-size: 1.3em;
  font-weight: bold;
}

#mobileTriggerContent p {
  color: #f5efa7;
  font-size: 1.07em;
  margin-bottom: 1.4em;
}

.mobileTriggerBtns {
  display: flex; gap: 1.1em; justify-content: center;
}

#continueAnyway {
  background: linear-gradient(90deg,#d1bb6f 10%, #925cfb 98%);
  color: #211c41;
  font-weight: 700;
  padding: 0.85em 1.45em;
  border-radius: 1.5em;
  border: none;
  box-shadow: 0 8px 26px #a084f515, 0 0 1px #211c4264;
  cursor: pointer;
  font-size: 1em;
  transition: all 0.2s;
}

#continueAnyway:hover {
  background: linear-gradient(90deg,#925cfb 0%, #d1bb6f 100%);
  color: #402e8d;
}

#backHome {
  background: linear-gradient(90deg,#a084f5 10%, #2d2958 98%);
  color: #fffbe2;
  font-weight: 700;
  padding: 0.85em 1.45em;
  border-radius: 1.5em;
  border: none;
  box-shadow: 0 8px 18px #a084f518;
  cursor: pointer;
  font-size: 1em;
  transition: all 0.2s;
}

#backHome:hover {
  background: linear-gradient(90deg,#2d2958 10%, #a084f5 98%);
  color: #bbaa4d;
}
body.modal-open {
  position: fixed !important;
  width: 100vw !important;
  overflow: hidden !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
  top: 0 !important;
  left: 0 !important;
}
#mobileTriggerModal {
  position: fixed; z-index: 5000; left: 0; top: 0;
  width: 100vw; height: 100vh; display: flex;
  align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
  pointer-events: auto;
}
#mobileTriggerOverlay {
  position: absolute; left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(28,23,53, 0.48) !important; /* + transparent que 0.88 */
  z-index: 1;
  backdrop-filter: blur(1.5px);
  pointer-events: auto;
}
#mobileTriggerContent {
  position: relative; z-index: 2;
  background: linear-gradient(120deg,#232040 75%,#402e8d 100%);
  box-shadow: 0 4px 24px #2a24504a, 0 0 1px #0005;
  border-radius: 1.2em;
  max-width: 92vw; min-width: 220px; width: 300px;
  padding: 1.3em 1.1em 1.05em 1.1em;
  color: #edeaf5;
  text-align: center;
  font-size: 0.98em;
}

#mobileTriggerContent h3 {
  color: #d1bb6f;
  margin-bottom: 0.6em;
  font-size: 1.07em;
  font-weight: bold;
}

#mobileTriggerContent p {
  color: #f5efa7;
  font-size: 0.97em;
  margin-bottom: 1em;
}

.mobileTriggerBtns {
  display: flex; gap: 0.55em; justify-content: center;
}

#continueAnyway, #backHome {
  font-size: 0.93em !important;
  padding: 0.55em 1.1em !important;
  border-radius: 1.1em !important;
  min-width: 0;
}
#continueAnyway {
  background: linear-gradient(90deg,#d1bb6f 10%, #925cfb 98%);
  color: #211c41;
  font-weight: 700;
  border: none;
  box-shadow: 0 8px 14px #a084f515, 0 0 1px #211c4264;
  cursor: pointer;
  transition: all 0.22s;
}
#continueAnyway:hover {
  background: linear-gradient(90deg,#925cfb 0%, #d1bb6f 100%);
  color: #402e8d;
}

#backHome {
  background: linear-gradient(90deg,#a084f5 10%, #2d2958 98%);
  color: #fffbe2;
  font-weight: 700;
  border: none;
  box-shadow: 0 5px 10px #a084f518;
  cursor: pointer;
  transition: all 0.22s;
}
#backHome:hover {
  background: linear-gradient(90deg,#2d2958 10%, #a084f5 98%);
  color: #bbaa4d;
}
@media (max-width: 600px) {
  .hero-content, .about {
    font-size: 1.07em !important;
    line-height: 1.8 !important;
  }
  .hero h2, .about h3 { font-size: 1.13em !important; line-height: 1.3; }
  .hero p, .about p { margin-bottom: 1.1em !important; }
  .btn-primary .btn-secondary {
    width: 100% !important;
    padding: 1.22em 0.5em !important;
    font-size: 1.14em !important;
    border-radius: 1.5em !important;
    box-shadow: 0 8px 18px #a084f53a;
    margin-top: 2.1em !important;
    margin-bottom: 1.3em !important;
  }
  .wave-effect { height: 50px !important; }
  .bgc1, .bgc2, .bgc3, .bgc4, .bgc5, .bgc6, .bgc7, .bgc8, .bgc9, .bgc10 { opacity: 0.08 !important; }
  .footerp, footer { font-size: 0.97em !important; padding: 0.7em 0.2em !important; }
}

/* Sépare les paragraphes en bloc about */
.about p:not(:last-child) { margin-bottom: 1.3em; }