/* Styles gardés dans le code : états (sélection, ouverture...), animations, éléments créés par le script. Le reste est dans les classes Webflow. */
:root{--ink: #15161c; --ink-soft: #5b5e6b; --muted: #8a8d99; --line: #e6e7ec; --bg: #f2f2f4; --surface: #ffffff; --accent: #2f5bff; --accent-deep: #1f45e0; --accent-tint: #eaf0ff; --green: #0d7a4f;}
*{margin: 0px; padding: 0px; box-sizing: border-box;}
html{-webkit-font-smoothing: antialiased;}
body::before{content: ""; position: fixed; inset: 0px; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: 0.18;}
button{font: inherit; cursor: pointer; border: none; background: none;}
select{font: inherit;}
.polaroid{position: absolute; z-index: 0; background: rgb(255, 255, 255); padding: 7px 7px 24px; border-radius: 10px; box-shadow: rgba(21, 22, 28, 0.34) 0px 18px 40px -14px; animation: 9s ease-in-out 0s infinite alternate none running drift;}
.polaroid img{display: block; width: 120px; height: 160px; object-fit: cover; border-radius: 5px;}
.polaroid .tag{position: absolute; left: 0px; right: 0px; bottom: 6px; text-align: center; font-size: 10px; color: rgb(138, 141, 153); font-weight: 500;}
.po-1{top: 9%; left: 8%; transform: rotate(-7deg); animation-delay: 0s;}
.po-2{bottom: 12%; left: 13%; transform: rotate(5deg); animation-delay: -3s;}
.po-3{top: 11%; right: 9%; transform: rotate(6deg); animation-delay: -5s;}
.po-4{bottom: 14%; right: 13%; transform: rotate(-5deg); animation-delay: -7s;}
@keyframes drift { 
  0% { translate: 0px -6px; }
  100% { translate: 0px 6px; }
}
.card-logo img{height: 20px; width: auto; display: block; margin-bottom: 22px;}
.cc-item{display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; text-align: left; font-size: 14px; color: rgb(21, 22, 28);}
.cc-item:hover{background: rgb(234, 240, 255);}
.cc-item.active{background: rgb(234, 240, 255);}
.cc-item .flag{font-size: 17px; line-height: 1; flex-shrink: 0;}
.cc-item .nm{flex: 1 1 0%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.cc-item .dc{color: rgb(138, 141, 153); font-size: 13px;}
.field select{width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid rgb(230, 231, 236); background: rgb(252, 252, 253); font-size: 16px; font-family: inherit; color: rgb(21, 22, 28); outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; appearance: none;}
.field select:focus{border-color: rgb(47, 91, 255); background: rgb(255, 255, 255); box-shadow: rgb(234, 240, 255) 0px 0px 0px 3px;}
.field input.invalid{border-color: rgb(192, 57, 43); box-shadow: rgb(251, 238, 237) 0px 0px 0px 3px;}
.field .err.show{display: block;}
.field.select{position: relative;}
.field.select::after{content: ""; position: absolute; right: 16px; bottom: 23px; width: 8px; height: 8px; border-right: 1.6px solid rgb(138, 141, 153); border-bottom: 1.6px solid rgb(138, 141, 153); transform: rotate(45deg); pointer-events: none;}
.field select{cursor: pointer;}
.field select:invalid{color: rgb(179, 182, 192);}
.go:hover svg{transform: translateX(3px);}
.proof{position: absolute; left: 0px; right: 0px; bottom: -64px; display: flex; align-items: center; justify-content: center; gap: 14px;}
.proof .lbl{font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(138, 141, 153); white-space: nowrap;}
.proof img{display: block; width: auto; filter: grayscale(1); opacity: 0.45; transition: opacity 0.2s, filter 0.2s;}
.proof img:hover{filter: grayscale(0); opacity: 1;}
.proof .h14{height: 13px;}
.proof .h16{height: 15px;}
.proof .dot{width: 3px; height: 3px; border-radius: 50%; background: rgb(207, 209, 217);}
@keyframes fadeUp { 
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes settle { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.proof{animation: 0.6s ease 0.35s 1 normal both running settle;}
.polaroid{opacity: 0; animation: 0.8s ease 0s 1 normal both running settle, 9s ease-in-out 0s infinite alternate none running drift;}
.po-1{animation-delay: 0.25s, 0s;}
.po-2{animation-delay: 0.4s, -3s;}
.po-3{animation-delay: 0.3s, -5s;}
.po-4{animation-delay: 0.5s, -7s;}
@media (max-width: 1080px){
.po-2{display: none;}
.po-1{left: 3%;}
.po-3{right: 4%;}
.po-4{right: 5%;}
}
@media (max-width: 820px){
.polaroid{display: none;}
.proof{flex-wrap: wrap; gap: 10px 14px; padding: 0px 12px;}
}
@media (prefers-reduced-motion: reduce){
*{animation: auto ease 0s 1 normal none running none !important; transition: none !important;}
.polaroid{opacity: 1;}
.float-quote{opacity: 1;}
}
.pkg-change select{position: absolute; inset: 0px; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px;}
.field.reveal{grid-template-rows: 0fr; opacity: 0; transform: translateY(-6px); pointer-events: none;}   /* replié sur le site, visible dans le Designer */
.field.reveal.show{grid-template-rows: 1fr; opacity: 1; transform: none; pointer-events: auto;}
.field.reveal.settled > .reveal-inner{overflow: visible;}
.cc-panel[hidden]{display: none;}
.cc-empty{padding: 10px; font-size: 14px; color: rgb(138, 141, 153);}
@media (prefers-reduced-motion: reduce){
.field.reveal{transition: none;}
}
#bly-root h2{margin-top: 0px;}
#bly-root ul{margin-top: 0px;}
#bly-root figure{margin-top: 0px;}
.wordmark-logo.wm-22{height: 22px; width: 115.5px;}
#bly-root .topbar-bar{position: static; z-index: auto; top: auto; left: auto; padding-top: 0px; padding-bottom: 0px;}