/* Tunnel de paiement — Le Bootcamp IA.
   Structure : le paiement occupe le premier écran, la réassurance suit.
   Tokens, typos et couleurs viennent de webflow.css et de design-system/TYPE-SCALE.md :
   rien n'est inventé ici, on ne fait que composer. */

/* ---------- rythme vertical ---------- */
.co_section{padding-top:64px;padding-bottom:64px}
/* Après une bande noire, la coupure est nette : la section suivante a besoin
   de plus d'air que deux sections posées sur le même dégradé. */
.co_section.is-noir + .co_section{padding-top:92px}
/* La section reprise de /a-propos arrive avec 100 px : on l'aligne. */
.section_for{padding-top:64px!important;padding-bottom:64px!important}
.co_section.is-noir{background-color:var(--colors--black);color:var(--colors--off-white)}
.co_section.is-noir .text-mono,.co_section.is-noir p,.co_section.is-noir h2{color:var(--colors--off-white)}
.co_head{max-width:640px}
.co_head p{color:var(--colors--black-alpha);margin-top:16px;margin-bottom:0}

/* ---------- en-tête et pied réduits ----------
   Le tunnel ne porte plus la navbar ni le pied de page du site : c'étaient
   56 liens de sortie sur l'écran où il n'y a qu'une chose à faire. Il reste ce
   qui rassure — la marque, le paiement sécurisé, une adresse pour écrire — et
   ce qui est obligatoire. Fond blanc, comme la section de paiement : le premier
   écran est blanc de bout en bout. */
.co_entete{background-color:#fff}
.co_entete-in{display:flex;align-items:center;justify-content:space-between;grid-column-gap:24px;
  padding:20px 0 18px}
.co_entete-marque{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.1px}
.co_entete-droite{display:flex;align-items:center;grid-column-gap:26px;
  color:var(--colors--black-alpha)}
.co_entete-sr{display:flex;align-items:center;grid-column-gap:7px}
.co_entete-droite a{color:var(--colors--black-alpha);text-decoration:underline;
  text-underline-offset:3px}
.co_entete-droite a:hover{color:var(--colors--black)}

.co_pied{background-color:#fff;border-top:1px solid #1211171a;padding:22px 0}
.co_pied-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  grid-column-gap:24px;grid-row-gap:10px;color:var(--colors--black-alpha)}
.co_pied-liens{display:flex;flex-wrap:wrap;grid-column-gap:22px;grid-row-gap:8px}
.co_pied a{color:var(--colors--black-alpha)}
.co_pied a:hover{color:var(--colors--black)}

/* ---------- le bloc paiement ----------
   Bande blanche pleine largeur, formulaire à gauche, récapitulatif à droite :
   la disposition que les gens ont déjà vue ailleurs. Le dégradé du site reprend
   la main à la section suivante. */
.co_section-paiement{background-color:#fff;padding-top:44px;padding-bottom:76px}
.co_pay{display:grid;grid-template-columns:minmax(0,1fr) 372px;grid-column-gap:56px;
  align-items:start;max-width:1088px;margin:0 auto}
/* L'Embedded Checkout est une iframe servie par Stripe : elle occupe bien 100 %
   de sa colonne, mais Stripe cale son propre contenu autour de 660 px et le
   centre dedans. Dans une colonne de 928 px, ça laissait 270 px de blanc autour
   du formulaire. On ne peut pas élargir le contenu de l'iframe — alors on ramène
   la colonne à sa largeur : 1088 − 372 − 56 = 660. */
.co_pay-main{min-width:0}
.co_pay-aside{position:sticky;top:24px}
.co_h1{font-size:44px;line-height:52px;letter-spacing:.6px;margin:14px 0 0}
.co_pay-sous{margin:14px 0 0}
.co_pas{margin-top:32px}

.co_recap{background-color:var(--colors--black);color:var(--colors--off-white);
  border-radius:10px;padding:26px 24px}
.co_recap .text-grey,.co_recap .text-mono{color:#f8f9ecb3}
.co_recap .co_prix-unite{color:#f8f9ecb3}
.co_recap .co_liste div{color:var(--colors--off-white)}
/* TYPE-SCALE.md : VCNudge ne s'emploie que sur le H1. Dans ce panneau, le seul
   VCNudge est le montant — c'est lui qu'on doit lire en premier. Le nom de
   l'offre et le titre de la garantie passent en SwissNow 600, d'un cran en
   dessous (26 → 24, 22 → 19), selon la correspondance du document. */
.co_recap-nom{font-family:Swissnow,Arial,sans-serif;font-size:24px;line-height:30px;font-weight:600;
  letter-spacing:0;margin-top:10px}
.co_recap-meta{margin-top:7px}
.co_recap-prix{margin-top:20px;padding-top:20px;border-top:1px solid #f8f9ec2e}
.co_recap-prix .co_prix-ligne{margin-top:0}
.co_recap-echeances{font-size:16px;line-height:23px;margin-top:12px}
.co_recap-ht{margin-top:10px;display:flex;flex-direction:column;grid-row-gap:3px}
.co_recap-inclus,.co_recap-garantie{margin-top:20px;padding-top:20px;border-top:1px solid #f8f9ec2e}
.co_recap-garantie-t{display:flex;align-items:center;grid-column-gap:10px;
  font-family:Swissnow,Arial,sans-serif;font-size:19px;line-height:26px;font-weight:600;
  letter-spacing:0}
.co_recap-garantie .text-mono{margin-top:8px}
.co_recap-garantie p{margin:12px 0 0;font-size:15px;line-height:22px;color:#f8f9ecd9}

/* Note et nombre d'avis, à côté du prix : la preuve sociale au point de décision
   et non à 2 900 px plus bas. */
.co_note{display:flex;align-items:center;grid-column-gap:9px;margin-top:20px;padding-top:18px;
  border-top:1px solid #f8f9ec2e}
.co_note .text-mono{color:#f8f9ecb3}

/* Récapitulatif replié — sous 992 px, il tient en une ligne au-dessus du
   formulaire au lieu de le repousser de deux écrans. */
.co_recapm{display:none;background-color:var(--colors--black);color:var(--colors--off-white);
  border-radius:10px;margin-bottom:26px}
.co_recapm .co_liste div{color:var(--colors--off-white)}
.co_recapm-head{display:flex;align-items:center;justify-content:space-between;grid-column-gap:14px;
  width:100%;padding:15px 17px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;color:inherit}
.co_recapm-head:focus-visible{outline:2px solid var(--colors--black);outline-offset:2px;
  border-radius:10px}
.co_recapm-body{color:var(--colors--off-white)}
.co_recapm-gauche{display:flex;flex-direction:column;grid-row-gap:5px;min-width:0}
.co_recapm-gauche .text-mono{color:#f8f9ecb3}
.co_recapm-voir{text-decoration:underline;text-underline-offset:3px}
.co_recapm-droite{display:flex;flex-direction:column;align-items:flex-end;grid-row-gap:2px;flex:none}
.co_recapm-droite strong{font-family:Vcnudge,Arial,sans-serif;font-size:28px;line-height:32px;
  font-weight:600;letter-spacing:.4px}
.co_recapm-droite .text-mono{color:#f8f9ecb3}
.co_recapm-body{height:0;overflow:hidden;transition:height .25s ease}
.co_recapm-in{padding:18px 17px 20px;border-top:1px solid #f8f9ec2e}
.co_recapm-totaux{margin-top:16px;padding-top:14px;border-top:1px solid #f8f9ec2e;
  font-size:15px;line-height:22px}
.co_recapm-totaux .text-grey{color:#f8f9ecb3}
.co_recapm-in .co_note{margin-top:14px;padding-top:14px}

.co_prix{font-family:Vcnudge,Arial,sans-serif;font-size:55px;line-height:60px;font-weight:600;letter-spacing:.6px}
.co_prix-ligne{display:flex;align-items:flex-end;grid-column-gap:12px;margin-top:14px}
.co_prix-unite{font-family:Abcfavoritmono Book,Arial,sans-serif;font-size:12px;line-height:16px;
  letter-spacing:.4px;text-transform:uppercase;color:var(--colors--black-alpha);padding-bottom:9px;
  white-space:pre-line}
.co_liste{display:flex;flex-direction:column;grid-row-gap:9px}
.co_liste div{display:flex;grid-column-gap:10px;align-items:flex-start;font-size:16px;line-height:23px}
.co_liste svg{flex:none;margin-top:4px}

.co_options{display:flex;flex-direction:column;grid-row-gap:10px;margin-top:12px}
.co_option{display:flex;grid-column-gap:14px;align-items:center;background-color:#fff;
  border:1px solid var(--colors--black-alpha);border-radius:6px;padding:16px 18px;cursor:pointer;
  transition:border-color .15s,box-shadow .15s}
.co_option:hover{border-color:var(--colors--black)}
.co_option.is-selected{border-color:var(--colors--black);box-shadow:0 0 0 1px var(--colors--black)}
.co_option input{flex:none;width:18px;height:18px;margin:0;accent-color:#121117}
.co_option input:focus-visible{outline:2px solid #121117;outline-offset:2px}
.co_option-body{flex:1;min-width:0}
.co_option-title{display:block;font-size:18px;line-height:23px}
.co_option-tag{display:inline-block;margin-left:9px;vertical-align:1px;background-color:var(--colors--black);
  color:var(--colors--off-white);border-radius:3px;padding:3px 7px;
  font-family:Abcfavoritmono Book,Arial,sans-serif;font-size:11px;line-height:14px;letter-spacing:.4px;
  text-transform:uppercase}
.co_option-note{display:block;color:var(--colors--black-alpha);font-size:15px;line-height:20px;margin-top:3px}
.co_option-price{white-space:nowrap;text-align:right;font-family:Vcnudge,Arial,sans-serif;
  font-size:26px;line-height:30px;font-weight:600;letter-spacing:.4px}
.co_option-price span{display:block;font-family:Abcfavoritmono Book,Arial,sans-serif;font-size:12px;
  line-height:16px;letter-spacing:.4px;text-transform:uppercase;color:var(--colors--black-alpha);margin-top:4px}

/* Le retour au paiement vise le cadre Stripe : la marge de défilement garde
   l'intitulé « 2 · Vos coordonnées » à l'écran, sinon on atterrit sur un
   formulaire sans savoir de quelle étape il s'agit. */
.co_frame{min-height:430px;margin-top:14px;scroll-margin-top:90px}
.co_loader{display:flex;align-items:center;justify-content:center;min-height:430px;
  color:var(--colors--black-alpha);font-size:16px}
.co_error{display:none;margin-top:14px;border:1px solid #b0342a;border-radius:6px;padding:14px 16px;
  font-size:16px;line-height:22px;color:#b0342a;background-color:#fff}
.co_trust{display:flex;flex-wrap:wrap;grid-column-gap:20px;grid-row-gap:8px;margin-top:20px;
  color:var(--colors--black-alpha)}
.co_trust div{display:flex;align-items:center;grid-column-gap:7px}

/* ---------- garantie ---------- */
.co_garantie{display:grid;grid-template-columns:520px minmax(0,1fr);grid-column-gap:56px;align-items:center}

/* Encart vidéo : façade cliquable, l'iframe Wistia n'est chargée qu'au clic. */
.co_video{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background-color:#fff}
.co_video img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block}
.co_video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.co_video-play{position:absolute;inset:0;margin:auto;width:68px;height:68px;padding:0;border:0;
  background:none;display:block;cursor:pointer;transition:transform .2s}
.co_video-play svg{width:68px;height:68px;display:block;filter:drop-shadow(0 6px 20px #12111759)}
.co_video-play:focus-visible{outline:2px solid #f8f9ec;outline-offset:6px;border-radius:50%}
.co_video:not(.is-vide) .co_video-play:hover{transform:scale(1.06)}
.co_video.is-vide .co_video-play{cursor:default;opacity:.55}
.co_video-legende{position:absolute;left:14px;bottom:14px;background-color:#121117cc;
  color:var(--colors--off-white);border-radius:4px;padding:6px 10px}
.co_video.is-playing .co_video-play,.co_video.is-playing .co_video-legende,
.co_video.is-playing img{display:none}
.co_garantie blockquote{margin:18px 0 0;font-family:Vcnudge,Arial,sans-serif;font-weight:600;
  letter-spacing:.4px;font-size:30px;line-height:40px}

/* ---------- programme ---------- */
/* Modules dépliables, dans l'esprit de /programme : vignette, numéro, titre, et le
   détail qui s'ouvre. Le premier est ouvert pour montrer ce qu'il y a dessous. */
.co_module{border-top:1px solid var(--colors--black-alpha)}
.co_module:last-child{border-bottom:1px solid var(--colors--black-alpha)}
.co_module-head{display:grid;grid-template-columns:132px minmax(0,1fr) 24px;grid-column-gap:28px;
  align-items:center;width:100%;padding:18px 0;background:none;border:0;cursor:pointer;
  font-family:inherit;text-align:left;color:inherit}
.co_module-vignette{display:block;width:132px;height:99px;object-fit:cover;border-radius:6px;
  background-color:#12111714}
.co_module-titrecell{display:flex;flex-direction:column;grid-row-gap:6px;min-width:0}
.co_module-titre{font-family:Vcnudge,Arial,sans-serif;font-weight:600;letter-spacing:.5px;
  font-size:26px;line-height:32px}
.co_module-plus{display:flex;align-items:center;justify-content:center;color:var(--colors--black);
  transition:transform .2s}
.co_module.is-open .co_module-plus{transform:rotate(45deg)}
.co_module-body{overflow:hidden;height:0}
.co_module.is-open .co_module-body{height:auto}
.co_module-body-in{padding:0 0 24px 160px;max-width:900px}
.co_module-head:focus-visible{outline:2px solid var(--colors--black);outline-offset:3px}
.co_module .co_liste div{font-size:16px}

/* ---------- après le paiement ----------
   Sous le formulaire : ce qui arrive une fois la carte saisie. Les trois étapes
   étaient écrites dans le générateur depuis le début, sans être posées nulle part. */
.co_apres{margin-top:34px;padding-top:26px;border-top:1px solid #12111721}
.co_etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-column-gap:22px;
  grid-row-gap:22px;margin-top:18px}
.co_etape{border-top:1px solid #12111721;padding-top:16px}
.co_etape .text-mono{color:var(--colors--black-alpha)}
.co_etape-h{font-size:17px;line-height:23px;font-weight:600;margin-top:8px}

/* Deux témoignages nominatifs sous le bouton de paiement, là où le doute est
   le plus fort — pas seulement dans le bandeau défilant plus bas. */
.co_preuve{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-column-gap:18px;
  grid-row-gap:18px;margin-top:26px}
.co_mini{margin:0;background-color:var(--colors--black);color:var(--colors--off-white);
  border-radius:8px;padding:18px 18px 16px}
.co_mini-titre{margin:10px 0 0;font-size:17px;line-height:24px;font-weight:600}
.co_mini-qui{display:flex;align-items:center;grid-column-gap:9px;margin-top:14px;font-size:15px;
  color:#f8f9ecb3}
.co_mini-qui img{width:30px;height:30px;border-radius:50%;object-fit:cover;filter:saturate(0)}

/* ---------- avis en bandeau défilant ---------- */
.co_avis-section{overflow:hidden}
.co_avis{display:flex;margin-top:52px;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent)}
.co_avis-piste{display:flex;flex:none;animation:co-defile 28s linear infinite}
.co_avis:hover .co_avis-piste,.co_avis:focus-within .co_avis-piste{animation-play-state:paused}
@keyframes co-defile{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.co_avis-item{flex:none;width:420px;padding-left:12px;padding-right:12px}
.co_avis-carte{margin:0;background-color:#fff;border-radius:8px;padding:26px 24px;
  display:flex;flex-direction:column;grid-row-gap:12px;height:100%}
.co_avis-titre{margin:0;font-family:Vcnudge,Arial,sans-serif;font-weight:600;letter-spacing:.4px;
  font-size:20px;line-height:26px}
.co_avis-cit{margin:0;font-size:15px;line-height:22px}
.co_avis-qui{display:flex;align-items:center;grid-column-gap:10px;margin-top:auto;padding-top:4px;
  font-size:16px}
.co_avis-qui img{width:34px;height:34px;border-radius:50%;object-fit:cover;filter:saturate(0)}
@media(prefers-reduced-motion:reduce){
  .co_avis{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .co_avis-piste{animation:none}
  .co_avis-piste[aria-hidden="true"]{display:none}
}

/* ---------- sur scène & au micro ---------- */
.co_scene-row{display:grid;grid-template-columns:1.3fr 1fr;grid-column-gap:22px;margin-top:38px;
  align-items:stretch}
/* La colonne de droite s'étire sur la hauteur de la grande carte : sinon elle
   laissait un vide sous le troisième item. */
.co_scene-liste{display:flex;flex-direction:column;grid-row-gap:12px}
.co_scene-liste .co_media{flex:1}

.co_media{display:block;background-color:#fff;border-radius:10px;overflow:hidden;text-decoration:none;
  color:var(--colors--black);transition:transform .2s}
.co_media:hover{transform:translateY(-2px);color:var(--colors--black)}
.co_media-vue{display:block;position:relative}
.co_media-vue img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;
  background-color:#12111714}
.co_media-play{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;
  background-color:#f8f9ec;color:var(--colors--black);display:flex;align-items:center;
  justify-content:center;box-shadow:0 10px 30px #12111747}
.co_media-play svg{width:24px;height:24px;margin-left:2px}
.co_media-corps{display:flex;flex-direction:column;grid-row-gap:9px;padding:26px 28px 28px}
.co_media-titre{font-family:Vcnudge,Arial,sans-serif;font-weight:600;letter-spacing:.5px;
  font-size:26px;line-height:32px}
.co_media-sous{font-size:16px;line-height:23px}

.co_media.is-petit{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:stretch}
.co_media.is-petit .co_media-play{width:34px;height:34px;box-shadow:0 6px 18px #12111740}
.co_media.is-petit .co_media-play svg{width:16px;height:16px}
.co_media.is-petit .co_media-corps{padding:16px 20px;justify-content:center;grid-row-gap:6px}
.co_media.is-petit .co_media-titre{font-size:19px;line-height:25px}

.co_scene-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  grid-column-gap:40px;grid-row-gap:24px;margin-top:44px;padding-top:32px;
  border-top:1px solid var(--colors--black-alpha)}
.co_scene-logos img{height:26px;width:auto;filter:saturate(0);opacity:.55}

/* ---------- cartes ---------- */
.co_cards{display:grid;grid-column-gap:16px;grid-row-gap:16px}
.co_cards.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.co_cards.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.co_cards.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.co_card{background-color:#fff;border-radius:8px;padding:28px 26px;display:flex;flex-direction:column;
  grid-row-gap:13px}
.co_card p{margin:0}
.co_card-foot{display:flex;align-items:center;grid-column-gap:11px;margin-top:auto;padding-top:4px}
.co_card-foot img{width:38px;height:38px;border-radius:50%;object-fit:cover;filter:saturate(0)}
.co_stars{display:inline-flex;grid-column-gap:2px}

.co_chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-column-gap:16px;grid-row-gap:16px;
  margin-top:34px}
.co_chiffre .text-mono{margin-top:8px}
.co_chiffre{background-color:#fff;border-radius:8px;padding:24px 22px}
.co_chiffre strong{display:block;font-family:Vcnudge,Arial,sans-serif;font-weight:600;letter-spacing:.5px;
  font-size:26px;line-height:32px}

/* Section « Qui vous forme » — rythme du hero de /a-propos. */
.co_mg{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-column-gap:56px;align-items:center}
/* Même réglage que les autres titres de section du tunnel : le -0.015em repris
   de /a-propos rendait ce titre plus serré que tous les autres. */
/* Les h2 du site sont en VCNudge 600 (NormalSemiBold). Ce titre était en 800
   (CondensedExtraBold) : il ne ressemblait à aucun autre titre de la page. */
.co_mg-titre{margin:14px 0 0;font-family:Vcnudge,Arial,sans-serif;font-weight:600;font-size:42px;
  line-height:50px;letter-spacing:.6px;text-wrap:pretty;max-width:18ch}
.co_mg-accroche{margin:20px 0 0;font-size:22px;line-height:32px;max-width:34ch}
.co_mg-bio{margin:18px 0 0;font-size:18px;line-height:27px;max-width:52ch;opacity:.7}
.co_mg img.co_portrait{width:100%;max-width:420px;height:auto;display:block;margin:0 0 0 auto}

.co_split{display:grid;grid-template-columns:340px minmax(0,1fr);grid-column-gap:48px;align-items:start}
.co_split img{display:block;width:100%;height:auto;border-radius:8px;background-color:#fff}
/* Portrait détouré : posé sur le dégradé, sans carte ni arrondi, comme sur /a-propos. */
.co_split img.co_portrait{background:none;border-radius:0}
.co_split-inclus{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-column-gap:48px;align-items:start}

/* ---------- objections ---------- */
.co_faq .faq_item{border-top:1px solid var(--colors--black-alpha);padding:24px 0}
.co_faq .faq_item:last-child{border-bottom:1px solid var(--colors--black-alpha)}
.co_faq .faq_question{cursor:pointer;padding-right:50px;position:relative}
/* Même traitement que la FAQ du site : Swissnow en 26/30, sans gras. */
.co_faq .faq_question h3{margin:0;font-family:Swissnow,Arial,sans-serif;font-weight:400;letter-spacing:0;
  font-size:26px;line-height:30px}
.co_faq .faq_question-cross{position:absolute;inset:8px 0 auto auto;transition:transform .2s}
.co_faq .faq_item.is-open .faq_question-cross{transform:rotate(45deg)}
.co_faq .faq_reponse-wrapper{overflow:hidden;height:0;max-width:720px}
.co_faq .faq_reponse{padding-top:12px}
.co_faq .faq_reponse p{margin:0;color:var(--colors--black-alpha)}

/* ---------- dirigeants ----------
   Quatre retours, sur bande noire, avec les entreprises qui l'ont fait venir.
   Ils dormaient dans le générateur sans être rendus. */
.co_dirs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-column-gap:24px;
  grid-row-gap:24px;margin-top:34px}
.co_dir{margin:0;border:1px solid #f8f9ec33;border-radius:8px;background-color:#f8f9ec0f;
  padding:26px 24px}
.co_dir blockquote{margin:0;font-size:18px;line-height:27px;color:var(--colors--off-white)}
.co_dir figcaption{display:flex;align-items:center;grid-column-gap:12px;margin-top:18px}
.co_dir figcaption img{width:42px;height:42px;border-radius:50%;object-fit:cover;filter:saturate(0)}
.co_dir figcaption>span{display:flex;flex-direction:column;grid-row-gap:3px;min-width:0}
.co_dir figcaption strong{font-size:16px;font-weight:600;color:var(--colors--off-white)}
.co_dir figcaption .text-mono{color:#f8f9ecb3}

/* ---------- la ligne au-dessus du formulaire ----------
   Stripe écrit « par mois » sur un prix récurrent, sans date de fin. Cette ligne
   dit combien d'échéances, et qu'après la dernière il n'y a plus rien. Elle se lit
   avant la carte (relecture de Marjolaine, 04/09/2026). */
.co_avant-form{margin:0 0 12px;padding:11px 14px;border:1px solid #12111726;border-radius:10px;
  background-color:#f8f9ec;font-size:15px;line-height:22px;color:var(--colors--black)}
.co_avant-form:empty{display:none}

/* ---------- passerelle ----------
   Une ligne en fin de FAQ, pas un bloc avec son prix et son bouton. C'est une
   sortie de secours vers l'autre formule : elle doit exister, pas concurrencer
   le formulaire. */
.co_section:last-of-type{padding-bottom:104px}
.co_passerelle-ligne{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  grid-column-gap:24px;grid-row-gap:8px;margin-top:30px;padding-top:22px;
  border-top:1px solid #12111726;font-size:16px;line-height:23px;color:var(--colors--black-alpha)}
.co_passerelle-ligne a{color:var(--colors--black);text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap}
/* Sur /checkout/live, la passerelle est passée sous le rappel final : proposer la
   formule à 984 € au milieu de la page, c'était inviter à descendre en gamme à
   l'endroit où l'hésitation est la plus forte. */
.co_passerelle-bas,.co_section.is-noir + .co_section.co_passerelle-bas,
.co_section.co_passerelle-bas:last-of-type{padding-top:26px;padding-bottom:46px}
.co_passerelle-bas .co_passerelle-ligne{margin-top:0;padding-top:0;border-top:0}

/* ---------- rappel final ----------
   Dernière section de la page. Avant, c'était la passerelle : le seul bouton
   disponible en bas de page faisait sortir vers l'offre la moins chère. */
.co_rappel{text-align:center;max-width:660px;margin:0 auto}
.co_rappel .text-mono{color:#f8f9ecb3}
.co_rappel-h{font-size:42px;line-height:50px;letter-spacing:.6px;margin:14px 0 0}
.co_rappel .co_prix-ligne{justify-content:center;margin-top:24px}
.co_rappel .co_prix-unite{color:#f8f9ecb3;text-align:left}
.co_rappel-sous{margin-top:10px;color:#f8f9ecd9;font-size:16px;line-height:23px}
.co_rappel-bouton{margin-top:28px}
.co_rappel .co_trust{justify-content:center;color:#f8f9ecb3;margin-top:28px}

/* ---------- détails ---------- */
.co_signature{margin-top:20px;color:#f8f9ec99}
.co_card-note{padding-top:16px;border-top:1px solid var(--colors--black-alpha)}
.co_card-titre{margin:0;font-size:20px;line-height:26px}
.co_etape-p{margin:8px 0 0;font-size:15px;line-height:22px;color:var(--colors--black-alpha)}


/* ---------- aperçu inerte du formulaire Stripe ----------
   Uniquement en local ou avec ?apercu=1. Champs désactivés : rien ne se saisit,
   rien ne s'envoie. Le bandeau du haut doit rester lisible en permanence. */
.co_fake{border:1px solid var(--colors--black-alpha);border-radius:8px;padding:0 0 20px;
  background-color:#fff;font-size:15px;line-height:21px}
.co_fake-flag{background-color:#fff3d6;border-bottom:1px solid #e6c98a;color:#7a5a12;
  font-family:Abcfavoritmono Book,Arial,sans-serif;font-size:11px;line-height:15px;letter-spacing:.4px;
  text-transform:uppercase;padding:9px 18px;border-radius:7px 7px 0 0}
.co_fake-tabs{display:flex;grid-column-gap:8px;padding:18px 18px 6px}
.co_fake-tabs span{flex:1;text-align:center;border:1px solid var(--colors--black-alpha);border-radius:6px;
  padding:11px 6px;font-size:14px;color:var(--colors--black-alpha)}
.co_fake-tabs span.is-on{border-color:#635bff;box-shadow:0 0 0 1px #635bff;color:var(--colors--black)}
.co_fake-field{display:block;padding:10px 18px 0}
.co_fake-label{display:block;font-size:13px;line-height:18px;color:#3d3b45;margin-bottom:5px}
.co_fake-field input{width:100%;height:44px;border:1px solid #d5d3dc;border-radius:6px;padding:0 12px;
  font-family:inherit;font-size:15px;color:#12111759;background-color:#fff}
.co_fake-field input:disabled{cursor:default;-webkit-text-fill-color:#12111759;opacity:1}
.co_fake-card{padding:14px 18px 0}
.co_fake-card-row,.co_fake-card-split{display:flex;align-items:center;border:1px solid #d5d3dc;
  color:#12111759;min-height:44px;padding:0 12px}
.co_fake-card-row{border-radius:6px 6px 0 0;justify-content:space-between;grid-column-gap:10px}
.co_fake-card-split{border-top:0;border-radius:0 0 6px 6px;padding:0}
.co_fake-card-split span{flex:1;padding:0 12px;line-height:42px}
.co_fake-card-split span + span{border-left:1px solid #d5d3dc}
.co_fake-brands{display:flex;grid-column-gap:4px;flex:none}
.co_fake-brands i{width:24px;height:16px;border-radius:2px;display:block}
.co_fake-pay{margin:20px 18px 0;height:46px;border-radius:6px;background-color:#635bff;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px}
.co_fake-foot{display:flex;justify-content:space-between;grid-column-gap:12px;padding:14px 18px 0;
  font-size:12px;color:var(--colors--black-alpha)}
.co_fake-foot strong{font-weight:600;letter-spacing:-.3px}

/* ---------- barre mobile ---------- */
.co_stickybar{display:none;position:fixed;inset:auto 0 0;z-index:30;align-items:center;
  justify-content:space-between;grid-column-gap:14px;background-color:var(--colors--black);
  color:var(--colors--off-white);padding:12px 15px}
.co_stickybar .text-mono{color:#f8f9ecb3}
.co_stickybar-prix{min-width:0}
.co_stickybar-prix>span{display:flex;align-items:baseline;grid-column-gap:8px;margin-top:2px}
.co_stickybar strong{font-family:Vcnudge,Arial,sans-serif;font-size:24px;line-height:28px;
  font-weight:600;letter-spacing:.4px}

/* ---------- responsive ---------- */
@media(max-width:991px){
  .co_section{padding-top:48px;padding-bottom:48px}
  .co_section.is-noir + .co_section{padding-top:68px}
  .section_for{padding-top:48px!important;padding-bottom:48px!important}
  /* Le récapitulatif ne passe plus au-dessus du formulaire : il se replie en
     une ligne. Le panneau de droite, lui, disparaît — son contenu est repris
     dans le repli, puis développé par les sections qui suivent. */
  .co_pay{grid-template-columns:minmax(0,1fr)}
  .co_pay-aside{display:none}
  .co_recapm{display:block}
  .co_dirs{grid-template-columns:minmax(0,1fr)}
  .co_cards.is-4,.co_cards.is-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co_split,.co_split-inclus,.co_mg{grid-template-columns:minmax(0,1fr);grid-row-gap:30px}
  .co_scene-row{grid-template-columns:minmax(0,1fr);grid-row-gap:12px}
  .co_mg img.co_portrait{max-width:360px;margin:0}
  .co_split img{max-width:340px}
  .co_module-head{grid-template-columns:92px minmax(0,1fr) 20px;grid-column-gap:16px}
  .co_module-vignette{width:92px;height:69px}
  .co_module-titre{font-size:20px;line-height:26px}
  .co_module-body-in{padding-left:0}
  .co_garantie{grid-template-columns:minmax(0,1fr);grid-row-gap:26px}
  .co_video-play,.co_video-play svg{width:56px;height:56px}
  .co_passerelle{grid-template-columns:minmax(0,1fr);grid-row-gap:24px}
  /* .text-align-right vient de webflow.css : en colonne, le prix doit revenir à gauche. */
  .co_passerelle .text-align-right{text-align:left}
}
@media(max-width:767px){
  .co_section-paiement{padding-top:28px;padding-bottom:52px}
  .co_h1{font-size:34px;line-height:40px}
  .co_section h2,.co_rappel-h{font-size:32px !important;line-height:38px !important}
  .co_etapes,.co_preuve{grid-template-columns:minmax(0,1fr)}
  /* « Paiement sécurisé par Stripe » tiendrait sur deux lignes dans l'en-tête ;
     il est répété sous le formulaire, à l'endroit où le doute arrive. */
  .co_entete-sr{display:none}
  .co_entete-in{padding:16px 0 14px}
  /* Deux liens au lieu d'un depuis que le rendez-vous a rejoint l'email : chacun
     garde sa ligne entière, sinon les deux se cassent en quatre. */
  .co_entete-droite{flex-wrap:wrap;justify-content:flex-end;column-gap:16px;row-gap:2px}
  .co_entete-droite a{white-space:nowrap}
  .co_recapm-droite strong{font-size:24px;line-height:28px}
  .co_pied-in{flex-direction:column;align-items:flex-start;grid-row-gap:12px}
  /* Sous 390 px, la colonne de gauche d'une option tombe à ~200 px : le libellé
     du 3× partait sur quatre lignes. Le prix passe sous le texte, en pleine
     largeur, et chacun retrouve sa ligne. */
  .co_option{flex-wrap:wrap;grid-row-gap:10px}
  .co_option-price{flex:1 1 100%;display:flex;align-items:baseline;grid-column-gap:9px;
    text-align:left;padding-left:32px}
  .co_option-price span{margin-top:0}
  .co_cards.is-4,.co_cards.is-3,.co_cards.is-2,.co_chiffres{grid-template-columns:minmax(0,1fr)}
  .co_media.is-petit{grid-template-columns:112px minmax(0,1fr)}
  .co_media-titre{font-size:20px;line-height:26px}
  .co_scene-logos{justify-content:flex-start;grid-column-gap:28px}
  .co_scene-logos img{height:20px}
  .co_garantie blockquote{font-size:24px;line-height:32px}
  .co_option{padding:14px 15px}
  .co_option-price{font-size:22px;line-height:26px}
  .co_stickybar{display:flex}
  .co_stickybar.is-hidden{display:none}
  /* Hauteur de la barre : le pied de page reste atteignable sous elle. */
  body{padding-bottom:74px}
}

/* ---------- code promo ----------
   Visible sans clic (demande de Marjolaine, 25/09/2026) : chez Stripe, le champ se
   cachait derrière « Ajouter un code promotionnel ». Même cadre que les options de
   paiement juste au-dessus ; champ à 16 px, sinon Safari iOS zoome à la saisie. */
.co_code{margin:12px 0 12px}
.co_code-label{display:block;margin-bottom:6px;font-size:15px;line-height:20px;font-weight:400}
.co_code-ligne{display:flex;grid-column-gap:8px}
.co_code-champ{flex:1;min-width:0;height:48px;margin:0;padding:0 14px;background-color:#fff;
  border:1px solid var(--colors--black-alpha);border-radius:6px;font-size:16px;line-height:20px;
  color:var(--colors--black);text-transform:uppercase;letter-spacing:.4px}
.co_code-champ:focus{outline:none;border-color:var(--colors--black);box-shadow:0 0 0 1px var(--colors--black)}
.co_code-champ[aria-invalid="true"]{border-color:#b0342a}
.co_code-bouton{flex:none;height:48px;padding:0 20px;font-size:16px;cursor:pointer}
.co_code-bouton:disabled{opacity:.5;cursor:default}
.co_code-msg{margin:6px 0 0;font-size:15px;line-height:20px}
.co_code-msg:empty{display:none}
.co_code-msg.is-erreur{color:#b0342a}
.co_code-retirer{margin-left:8px;padding:0;background:none;border:0;font:inherit;
  color:var(--colors--black-alpha);text-decoration:underline;cursor:pointer}
/* Montant long (« 3 × 552,50 € » avec un code promo) : un cran en dessous, et
   l'unité passe à la ligne plutôt que de sortir du panneau. */
.co_prix-ligne{flex-wrap:wrap;grid-row-gap:4px}
.co_prix.is-long{font-size:42px;line-height:48px}
/* Barre mobile : « 3 × 650 € » puis « 1 950 € au total » dessous, sans rognure. */
.co_stickybar-prix>span{flex-wrap:wrap;grid-row-gap:0}