:root {
  --fond: #050508;
  --txt: #f4eeee;
  /* Dégradé de la marque, relevé sur le logo : jaune-orangé en haut, rouge en bas */
  --orange: 253 108 23;
  --orange-rouge: 252 47 23;
  --degrade: linear-gradient(180deg, #fdb41b 0%, #fd8b17 42%, #fd5217 75%, #fc2f17 100%);
  /* Même dégradé calé sur la hauteur des lettres (le haut et le bas d'une ligne de texte restent vides) */
  --degrade-texte: linear-gradient(180deg, #fdb41b 20%, #fd8b17 44%, #fd5217 64%, #fc2f17 80%);
  --jaune: #ffe600;
  --vert: 46 255 113;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--txt);
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

.wrap {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 18px;
}

/* Carte : halo rouge et orange du logo qui déborde sous le bas de la carte */
.carte {
  background: #0d0d11;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 20px;
  padding: 24px;
  box-shadow:
    0 22px 50px -20px rgb(var(--orange-rouge) / 0.75),
    0 40px 110px -30px rgb(var(--orange) / 0.5);
}

/* Héro : mesures relevées sur le bon de commande Créacité (maximedeoliveira.com) */
.hero {
  padding: clamp(26px, 4.4vw, 44px) 0 clamp(18px, 3vw, 28px);
}

.alert {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  border-radius: 14px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(200, 16, 46, 0.2), rgba(200, 16, 46, 0.07));
  border: 1px solid rgba(224, 54, 74, 0.42);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

.alert .a1 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(12px, 2.5vw, 15px);
  line-height: 1.4;
  color: #fff;
}

.alert .a2 {
  margin-top: 8px;
  font-size: clamp(12px, 2.3vw, 14px);
  line-height: 1.6;
  color: #e5d5d7;
}

/* Coupures de ligne figées, retour à la ligne interdit : chaque ligne reste d'un seul tenant */
.titre {
  margin: clamp(24px, 4vw, 34px) auto 0;
  text-align: center;
  font-weight: 900;
  font-size: clamp(13px, 3.5vw, 36px);
  line-height: 1.07;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.titre .ln {
  display: block;
  white-space: nowrap;
  animation: monte 0.7s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

.titre .ln:nth-child(1) { animation-delay: 0.1s; }
.titre .ln:nth-child(2) { animation-delay: 0.19s; }
.titre .ln:nth-child(3) { animation-delay: 0.28s; }
.titre .ln:nth-child(4) { animation-delay: 0.37s; }
.titre .ln:nth-child(5) { animation-delay: 0.46s; }

.titre.mob {
  display: none;
}

/* Trait sous le titre : le dégradé de la marque couché à l'horizontale, bouts effacés comme sur la référence */
.titre::after {
  content: "";
  display: block;
  width: min(300px, 62%);
  height: 4px;
  border-radius: 4px;
  margin: clamp(16px, 2.6vw, 24px) auto 0;
  background: linear-gradient(90deg, #fc2f17, #fd5217 32%, #fd8b17 52%, #fdb41b 72%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 72%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32%, #000 72%, transparent);
  animation: trace 1.1s 0.45s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

/* Le chiffre porte le dégradé de la marque, un reflet lent passe dessus */
.titre .hl {
  white-space: nowrap;
  background:
    linear-gradient(100deg,
      transparent 0%, transparent 38%,
      rgb(255 236 222 / 0.85) 48%,
      transparent 58%, transparent 100%) 100% 0 / 300% 100% no-repeat,
    var(--degrade-texte);
  -webkit-background-clip: text;
  background-clip: text;
  color: rgb(var(--orange));
  -webkit-text-fill-color: transparent;
  animation: reflet 7s ease-in-out infinite;
}

/* Toutes les étoiles en jaune flash */
.etoile {
  color: var(--jaune);
  -webkit-text-fill-color: var(--jaune);
  text-shadow: 0 0 10px rgb(255 230 0 / 0.45);
}

/* Étoiles et avatars : bulles de la même taille que sur la référence (16 px, 14 px sur téléphone), 23 au lieu de 20 */
.preuve {
  margin-top: 22px;
  text-align: center;
}

.preuve .etoiles {
  color: var(--jaune);
  text-shadow: 0 0 10px rgb(255 230 0 / 0.45);
  font-size: clamp(17px, 3.4vw, 21px);
  letter-spacing: 0.14em;
  line-height: 1;
}

.preuve img {
  max-width: 331px;
  height: auto;
  margin: -4px auto 0;
}

.preuve .membres {
  margin-top: -4px;
  font-weight: 800;
  font-size: clamp(12px, 2.5vw, 15px);
  color: #e6dadb;
}

/* Logo : même boîte que celui de la référence (92 px, 72 px sur téléphone) */
.logo {
  max-width: 92px;
  height: auto;
  margin: clamp(20px, 3vw, 26px) auto 0;
  opacity: 0.95;
}

@keyframes monte {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* Texte rempli du dégradé de la marque */
.degrade {
  background: var(--degrade-texte);
  -webkit-background-clip: text;
  background-clip: text;
  color: rgb(var(--orange));
  -webkit-text-fill-color: transparent;
}

/* « Voici ce que tu obtiens » : mesures de la référence, accents rouges, or et verts passés aux couleurs de la marque */
.annonce {
  margin-top: clamp(26px, 4.4vw, 40px);
  text-align: center;
  color: #fff;
}

.annonce .l1,
.annonce .l2 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(12px, 4.8vw, 32px);
  line-height: 1.15;
  white-space: nowrap;
}

.carte.contenu {
  margin-top: clamp(22px, 3.6vw, 32px);
  border-radius: 18px;
  border-color: rgb(255 255 255 / 0.1);
  padding: clamp(18px, 3.2vw, 28px);
  background: linear-gradient(180deg, #131317, #0d0d11);
}

.ttl {
  margin-bottom: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(11px, 2.3vw, 13px);
  width: fit-content;
  background: var(--degrade-texte);
  -webkit-background-clip: text;
  background-clip: text;
  color: rgb(var(--orange));
  -webkit-text-fill-color: transparent;
}

.split {
  height: 1px;
  margin: 22px 0;
  background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.14), rgb(255 255 255 / 0));
}

.liste {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.028);
  border: 1px solid rgb(255 255 255 / 0.055);
  font-size: clamp(13.5px, 2.5vw, 15.5px);
  line-height: 1.6;
  color: #e8dedf;
  text-align: left;
}

.liste li:nth-child(even) {
  background: rgb(255 255 255 / 0.014);
}

.liste li i {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 7px;
  font-style: normal;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  color: rgb(var(--vert));
  background: rgb(var(--vert) / 0.16);
  border: 1px solid rgb(var(--vert) / 0.6);
  box-shadow: 0 0 10px rgb(var(--vert) / 0.28);
  text-shadow: 0 0 6px rgb(var(--vert) / 0.7);
}

/* Les valeurs portent le dégradé de la marque */
.liste li b {
  font-weight: 800;
  white-space: nowrap;
  background: var(--degrade-texte);
  -webkit-background-clip: text;
  background-clip: text;
  color: rgb(var(--orange));
  -webkit-text-fill-color: transparent;
}

/* Pack Livraison pro : carte du Pack VIP de la référence, fond et bord dans le dégradé de la marque */
.carte.pack {
  margin-top: clamp(18px, 3vw, 24px);
  text-align: center;
  border-radius: 18px;
  padding: clamp(20px, 3.4vw, 30px);
  border-color: transparent;
  /* Fond : l'orange et le rouge du dégradé, assombris pour garder les textes lisibles (le jaune assombri
     tournait au moutarde). Bord : le dégradé complet */
  background:
    linear-gradient(rgb(12 7 7 / 0.78), rgb(12 7 7 / 0.78)) padding-box,
    linear-gradient(180deg, #fd8b17, #fd5217 55%, #fc2f17) padding-box,
    var(--degrade) border-box;
}

.pack .v1 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(16px, 3.2vw, 24px);
}

.pack .v2 {
  margin-top: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: clamp(10.5px, 2.2vw, 12.5px);
  color: #f2e0c4;
}

.pack .v3 {
  margin-top: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: clamp(10px, 2.1vw, 11.5px);
  color: #b9adae;
}

.pack .v4 {
  margin-top: 6px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(16px, 3.4vw, 24px);
  color: #b9adae;
}

/* Barre du prix dans le dégradé de la marque */
.pack .v4 .barre {
  position: relative;
}

.pack .v4 .barre::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 3px;
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fc2f17, #fd8b17, #fdb41b);
}

.pack .v5 {
  margin-top: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  font-size: clamp(18px, 5.4vw, 40px);
}

/* Bloc prix : posé sans encart sur la page, comme sur la référence. Le vert du prix est celui des coches,
   le jaune de l'économie celui des étoiles */
.prix {
  margin-top: clamp(20px, 3.4vw, 28px);
  padding-top: clamp(10px, 2vw, 16px);
  text-align: center;
}

.prix .ancien {
  font-weight: 900;
  font-size: clamp(19px, 3.8vw, 28px);
  line-height: 1;
  color: #e0364a;
  text-decoration: line-through;
  opacity: 0.85;
}

.prix .nouveau {
  margin-top: 8px;
  font-weight: 900;
  font-size: clamp(46px, 10vw, 74px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgb(var(--vert));
  text-shadow: 0 8px 26px rgb(var(--vert) / 0.28);
}

.prix .economie {
  margin-top: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(12px, 2.5vw, 15px);
  color: var(--jaune);
}

.prix .rappel {
  margin-top: 16px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.45;
  font-size: clamp(11.5px, 2.4vw, 14px);
  color: #f0dede;
}

/* Formulaire de commande : règles reprises de la feuille de style de la référence pour le module Systeme.io
   (panneau de 900 px, 366 px sur téléphone, 12 px entre chaque champ). Accents passés aux couleurs de la marque. */
.carte.commande {
  margin: 72px -18px 0;
  padding: clamp(20px, 3.2vw, 32px);
  border-radius: 20px;
  border-color: rgb(255 255 255 / 0.1);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.058), rgb(255 255 255 / 0.018)), var(--fond);
}

.etape {
  margin: 20px 0 clamp(14px, 2.2vw, 20px);
  font-weight: 900;
  font-size: clamp(18px, 3.4vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--txt);
}

/* Les marges se cumulent sur la référence (12 px sous le dernier champ, 18 px sous l'upsell) : ici elles fusionneraient */
.etape:not(:first-child) {
  margin-top: calc(clamp(20px, 3.4vw, 30px) + 12px);
}

.bump + .etape {
  margin-top: calc(clamp(20px, 3.4vw, 30px) + 18px);
}

.commande .deux {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 20px;
}

.champ {
  display: block;
  width: 100%;
  height: 52px;
  margin: 0 0 12px;
  padding: 0 15px;
  border: 0;
  border-radius: 12px;
  outline: none;
  background: #0c0809;
  color: var(--txt);
  font: 600 15px/1 "Montserrat", sans-serif;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.champ::placeholder {
  color: #b9adae;
  opacity: 1;
}

.champ:focus {
  background: #140d10;
  box-shadow: 0 0 0 2px rgb(var(--orange-rouge) / 0.45);
}

select.champ {
  appearance: none;
  padding-right: 44px;
  background: #0c0809 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23f4eeee' stroke-width='2'/%3E%3C/svg%3E") right 16px center no-repeat;
}

select.champ:focus {
  background-color: #140d10;
}

.champ option {
  background: #140d10;
  color: var(--txt);
}

.statut {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.pastille,
.moyen {
  display: flex;
  align-items: center;
  color: var(--txt);
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pastille {
  display: inline-flex;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  background: #0e0a0c;
  font-size: 14px;
  line-height: normal;
}

.pastille:hover,
.moyen:hover {
  background: #140d10;
}

.pastille:has(input:checked),
.moyen:has(input:checked) {
  background: rgb(255 255 255 / 0.09);
}

.pastille input,
.moyen input {
  margin: 0;
  accent-color: #8a6f74;
}

.pastille input {
  margin: 0 6px 0 8px;
}

.si-entreprise {
  display: none;
}

.commande.entreprise .si-entreprise {
  display: block;
}

/* Panier : la ligne du pack et le total n'apparaissent que si la case du pack est cochée */
.panier {
  padding: 0;
  border-radius: 14px;
  background: #0e0a0c;
}

.ligne {
  display: flex;
  align-items: flex-start;
  min-height: 34px;
  font-size: 16px;
  line-height: 19px;
}

.ligne .produit {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 7px;
  text-transform: none;
}

.rond {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #0e0a0c 0 4px, transparent 4.6px), var(--degrade);
}

.ligne .devise {
  margin: 9px 10px 0 0;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  text-transform: uppercase;
}

.ligne .montant {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.ligne small {
  font-size: 12px;
  line-height: 15px;
}

.ligne.avec-pack {
  display: none;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 2px solid rgb(244 238 238 / 0.8);
}

.ligne.avec-pack .produit {
  padding-left: 28px;
}

.ligne.total {
  min-height: 19px;
  margin-top: 12px;
}

.ligne.total {
  align-items: center;
}

.ligne.total .produit,
.ligne.total .devise {
  padding-top: 0;
  margin-top: 0;
}

.commande.avec-le-pack .ligne.avec-pack {
  display: flex;
}

.commande.avec-le-pack .devise.seul {
  visibility: hidden;
}

/* Upsell : l'encart doré de la référence, aux couleurs de la marque */
.bump {
  margin: 38px 0 18px;
  padding: clamp(16px, 3vw, 22px);
  border: 2px dashed rgb(253 139 23 / 0.55);
  border-radius: 16px;
  background: linear-gradient(180deg, rgb(253 139 23 / 0.12), rgb(252 47 23 / 0.03));
  font-size: 18px;
  line-height: 25px;
}

.bump-case {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 59px;
  font-weight: 900;
  line-height: 1.4;
  cursor: pointer;
}

.bump-case .fleche {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}

.bump-case input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #fc2f17;
  cursor: pointer;
}

.bump-texte {
  padding: 10px;
}

.bump-texte p {
  margin: 0;
}

.bump-texte p + p {
  margin-top: 25px;
}

.bump strong {
  font-weight: 900;
  line-height: 1.4;
}

.bump s {
  color: var(--txt);
  -webkit-text-fill-color: var(--txt);
}

/* Règlement : les cases de carte sont vides pour l'instant, Stripe y posera ses champs */
.moyen {
  gap: 16px;
  margin-bottom: 9px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #0e0a0c;
  font-size: 16px;
  line-height: 19px;
}

.moyen input {
  width: 16px;
  height: 16px;
}

.moyen .logos {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.moyen .logos svg {
  width: 44px;
  height: 28px;
}

.moyen .paypal {
  width: 115px;
  height: 28px;
  margin-left: auto;
}

.champs-carte {
  padding: 38px 55px;
}

.commande.paypal .champs-carte {
  display: none;
}

.case-carte + .deux,
.champs-carte .deux .case-carte {
  margin-top: 18px;
}

.champs-carte .deux {
  margin-top: 0;
}

.libelle {
  display: block;
  margin-bottom: 10px;
  color: #b9adae;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.libelle i {
  font-style: normal;
  color: #fc2f17;
}

.boite {
  height: 45px;
  border: 1px solid rgb(0 0 0 / 0.1);
  border-radius: 12px;
  background: #f4f1f1;
}

.bouton-commande {
  display: block;
  min-height: 60px;
  margin: 10px auto 0;
  padding: 19px 18px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fd8b17 0%, #fd5217 46%, #c9230f 100%);
  box-shadow:
    0 14px 30px rgb(var(--orange-rouge) / 0.42),
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    inset 0 -2px 0 rgb(0 0 0 / 0.22);
  color: #fff;
  font: 900 clamp(14px, 3vw, 18px)/29px "Montserrat", sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.bouton-commande:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.bouton-commande:active {
  transform: translateY(0);
}

.note-paiement {
  margin: 14px 0 0;
  text-align: center;
  color: #f0dede;
  font-size: 14px;
  font-weight: 700;
}

.garanties {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
  color: #b9adae;
  font-weight: 700;
  font-size: clamp(11px, 2.3vw, 13.5px);
  line-height: 2;
  letter-spacing: 0.03em;
}

/* Témoignages : section de la référence, cartes et bouton aux couleurs de la marque */
.temoignages {
  padding: clamp(30px, 5vw, 54px) 0;
  background: radial-gradient(92% 68% at 50% 50%, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0) 64%);
}

.temoignages h2 {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-weight: 900;
  font-size: clamp(20px, 4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.regle {
  width: 58px;
  height: 4px;
  margin: 16px auto clamp(24px, 4vw, 36px);
  border-radius: 4px;
  background: linear-gradient(90deg, #fc2f17, #fd8b17, #fdb41b);
}

.grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Captures de hauteurs différentes : le contenu se centre dans la carte, sans vide sous les étoiles */
.carte.tc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(16px, 2.8vw, 22px);
  border-radius: 18px;
  border-color: rgb(255 255 255 / 0.1);
  background: linear-gradient(180deg, #131317, #0d0d11);
  text-align: center;
}

.tc img {
  width: 100%;
  height: auto;
  margin-bottom: 14px;
  border-radius: 12px;
}

.tc .etoiles {
  color: var(--jaune);
  text-shadow: 0 0 10px rgb(255 230 0 / 0.45);
  font-size: clamp(15px, 3vw, 19px);
  letter-spacing: 0.12em;
  line-height: 1;
}

.appel {
  margin-top: clamp(26px, 4vw, 38px);
}

.cta {
  display: block;
  width: 100%;
  max-width: 620px;
  min-height: 60px;
  margin: 0 auto;
  padding: 20px 18px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 14px;
  background: linear-gradient(180deg, #fd8b17 0%, #fd5217 46%, #c9230f 100%);
  box-shadow:
    0 14px 30px rgb(var(--orange-rouge) / 0.42),
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    inset 0 -2px 0 rgb(0 0 0 / 0.22);
  color: #fff;
  font-weight: 900;
  font-size: clamp(13.5px, 3vw, 19px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 38px rgb(var(--orange-rouge) / 0.52),
    inset 0 1px 0 rgb(255 255 255 / 0.34),
    inset 0 -2px 0 rgb(0 0 0 / 0.22);
}

.cta:active {
  transform: translateY(0);
}

.confiance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.confiance li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #b9adae;
  font-weight: 700;
  font-size: clamp(11px, 2.3vw, 13.5px);
  line-height: 1.6;
  letter-spacing: 0.03em;
}

.confiance li i {
  font-style: normal;
  font-size: 1.15em;
  line-height: 1;
  filter: saturate(0.9);
}

/* FAQ : accordéons de la référence, le « + » dans le dégradé de la marque */
.faq {
  padding: clamp(30px, 5vw, 54px) 0;
}

.faq h2 {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-weight: 900;
  font-size: clamp(20px, 4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.faq details {
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 14px;
  background: linear-gradient(180deg, #131317, #0d0d11);
}

.faq summary {
  position: relative;
  padding: 17px 50px 17px 18px;
  list-style: none;
  cursor: pointer;
  font-weight: 900;
  font-size: clamp(12.5px, 2.5vw, 15px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 17px;
  transform: translateY(-50%);
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  background: var(--degrade-texte);
  -webkit-background-clip: text;
  background-clip: text;
  color: rgb(var(--orange));
  -webkit-text-fill-color: transparent;
}

.faq details[open] summary::after {
  content: "–";
}

.reponse {
  padding: 0 18px 20px;
  color: #ded2d3;
  font-size: 14.5px;
  line-height: 1.75;
  text-align: left;
}

.reponse p {
  margin: 0 0 13px;
}

.reponse p:last-child {
  margin-bottom: 0;
}

/* Pied de page : celui de la référence, filet clair en haut et fond qui s'assombrit */
.pied {
  position: relative;
  padding: 36px 0 50px;
  background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / 0.45));
  text-align: center;
}

.pied::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(900px, 86%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.1), rgb(255 255 255 / 0));
}

.pied-logo {
  max-width: 104px;
  height: auto;
  margin: 0 auto 18px;
  opacity: 0.9;
}

.legal {
  margin: 0;
  color: #c6b8ba;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 2.2;
}

@keyframes trace {
  from { transform: scaleX(0.15); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes reflet {
  0% { background-position: 100% 0, 0 0; }
  45%, 100% { background-position: 0 0, 0 0; }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .wrap {
    padding: 0 15px;
  }

  .titre {
    font-size: clamp(13px, 5.2vw, 36px);
    margin-left: -14px;
    margin-right: -14px;
    line-height: 1.1;
    letter-spacing: -0.04em;
  }

  .titre.desk { display: none; }
  .titre.mob { display: block; }

  .titre::after {
    width: min(200px, 52%);
    height: 3px;
    margin-top: 14px;
  }

  .preuve img {
    max-width: 284px;
  }

  .logo {
    max-width: 72px;
    margin-top: 22px;
  }

  .annonce {
    margin-top: 22px;
  }

  .liste li {
    padding: 10px 12px;
  }

  .carte.commande {
    margin: 42px -3px 0;
    padding: 16px;
    border-radius: 16px;
  }

  .etape:first-child {
    margin-top: 39px;
  }

  .commande > .deux {
    grid-template-columns: 1fr;
  }

  .champ {
    height: 50px;
    font-size: 16px;
  }

  .pastille {
    padding: 10px 15px;
    font-size: 13.5px;
  }

  .ligne.avec-pack .produit {
    padding-right: 10px;
  }

  .bump {
    padding: 14px;
    border-radius: 14px;
    font-size: 16px;
    line-height: 22.4px;
  }

  .bump-texte p + p {
    margin-top: 22px;
  }

  .moyen {
    padding: 12px 14px;
  }

  .moyen .logos svg {
    width: 34px;
    height: 22px;
  }

  .champs-carte {
    padding: 38px 20px;
  }

  .bouton-commande {
    width: 100%;
    padding: 17px 14px;
    font-size: 15px;
    letter-spacing: 0;
  }

  .garanties {
    font-size: 12.5px;
    line-height: 2.1;
    letter-spacing: 0;
  }

  .temoignages,
  .faq {
    padding: 28px 0;
  }

  .reponse {
    font-size: 14px;
  }

  .grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .cta {
    padding: 18px 14px;
    font-size: 15px;
    letter-spacing: 0;
  }

  .confiance {
    flex-direction: column;
    gap: 6px;
  }

  .confiance li {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}