/*
 * bon-cadeau.css : page « Bon cadeau » (maquette 14 pour la page, maquette 34 pour le formulaire en cinq écrans), chargée sur cette page seulement.
 * Entête avec l'aperçu du bon, cartes de soin, montants libres, envoi, colonne de droite (étapes du rendez-vous, questions, idées).
 * S'appuie sur formulaire.css (champs, puces, cases, bouton), entete-page.css et rendez-vous.css (carte verte des étapes).
 * Mobile d'abord (390 px), puis paliers à 640, 960 et 1280 px.
 */

/* ---------- Entête et aperçu du bon ---------- */
.bon-entete__grille{display:flex;flex-direction:column}
.bon-accroche{margin-top:16px;font-family:var(--police-titre);font-style:italic;font-weight:500;font-size:18px;line-height:28px;color:var(--vert-titre)}
.bon-entete__visuel{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;margin-top:22px}
.bon-apercu-boite{align-self:center;width:100%;max-width:330px}
@media (min-width:640px){.bon-apercu-boite{max-width:420px}}
/* Photo du bandeau : la carte imprimée, à la place de l'aperçu dessiné (mêmes largeur et proportions que l'aperçu de la maquette 14) */
.bon-photo{width:100%;max-width:330px;aspect-ratio:330/354;margin:0;overflow:hidden;border-radius:18px;box-shadow:0 18px 40px rgba(60,50,30,.16)}
@media (min-width:640px){.bon-photo{max-width:420px;aspect-ratio:420/329}}
.bon-photo__image{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--cadrage,50% 50%)}
.bon-apercu{position:relative;display:flex;flex-direction:column;gap:12px;width:100%;box-sizing:border-box;overflow:hidden;padding:26px 28px;border-radius:18px;background:var(--blanc);box-shadow:0 18px 40px rgba(60,50,30,.16);animation:flottement 6s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.bon-apercu{animation:none}}
.bon-apercu__cercle{position:absolute;right:-70px;top:-90px;width:220px;height:220px;border-radius:50%;background:var(--vert-clair)}
.bon-apercu__marque,.bon-apercu__titre,.bon-apercu__soin,.bon-apercu__montant,.bon-apercu__reste,.bon-apercu__filet,.bon-apercu__noms,.bon-apercu__message,.bon-apercu__numero{position:relative}
.bon-apercu__marque{display:flex;align-items:center;gap:12px}
.bon-apercu__marque img{width:auto;height:46px}
.bon-apercu__nom{font-weight:600;font-size:12px;line-height:normal;letter-spacing:.26em}
.bon-apercu__titre{font-family:var(--police-titre);font-style:italic;font-weight:500;font-size:34px;line-height:40px;color:var(--vert-fonce)}
.bon-apercu__soin{font-family:var(--police-titre);font-weight:700;font-size:20px;line-height:normal;overflow-wrap:anywhere}
.bon-apercu__montant{position:relative;font-weight:600;font-size:16px;line-height:normal}
.bon-apercu__reste{position:relative;font-size:14px;line-height:normal;color:var(--encre-douce)}
.bon-apercu__filet{height:1px;background:var(--filet)}
.bon-apercu__noms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;font-size:14px;line-height:normal}
.bon-apercu__personne{display:flex;flex-direction:column;min-width:0}
.bon-apercu__etiquette{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-douce)}
.bon-apercu__prenom{font-weight:600;overflow-wrap:anywhere}
.bon-apercu__message{font-family:var(--police-titre);font-style:italic;font-size:15px;line-height:23px;color:var(--encre-douce);overflow-wrap:anywhere}
.bon-apercu__numero{align-self:flex-start;padding:6px 12px;border-radius:8px;background:var(--creme);font-size:13px;line-height:normal;letter-spacing:.14em;color:var(--vert-fonce)}
@media (min-width:640px){.bon-apercu__etiquette{font-size:11px}}
@media (min-width:960px){
	.bon-entete__grille{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center;margin-top:30px}
	/* Le titre garde sa place (y=301 à 1 280 px, maquette 14) quelle que soit la longueur du texte : bloc posé à 83 px du haut de la grille, et non centré */
	.bon-entete .entete-formulaire__tete{margin-top:0;align-self:start;padding-top:83px}
	.bon-entete .entete-formulaire__texte{max-width:520px}
	.bon-entete__visuel{align-items:stretch;width:auto;margin-top:0;padding:10px 20px 10px 0}
	.bon-apercu-boite{align-self:auto;width:auto;max-width:none}
	.bon-apercu{width:clamp(340px,36vw,420px)}
	.bon-photo{width:clamp(340px,36vw,420px);max-width:none}
}

/* ---------- Corps : formulaire, étapes, questions ---------- */
.bon-retour{padding-block:8px 14px;padding-inline:14px}
@media (min-width:640px){.bon-retour{padding-inline:var(--marge)}}
.bon-retour .bon-avis{margin:0}
.bon-corps{--bon-marge:14px;padding-top:8px;padding-bottom:0}
@media (min-width:640px){.bon-corps{--bon-marge:var(--marge)}}
@media (min-width:960px){
	.bon-retour{padding-block:0 20px}
	.bon-corps{gap:20px 32px;padding-top:0;padding-bottom:72px}
	.bon-formulaire{grid-column:1;grid-row:1 / span 2}
	.bon-corps{grid-template-rows:auto 1fr}
	.bon-corps>.rdv-lateral{grid-column:2;grid-row:1}
	.bon-corps>.bon-questions{grid-column:2;grid-row:2}
}
/* Largeur de la maquette 34 : colonne de droite de 360 px, 48 px d’écart (la carte du formulaire fait alors 712 px à 1 280 px) */
@media (min-width:1280px){.bon-corps{grid-template-columns:minmax(0,1fr) 360px;column-gap:48px}}

/* Message de retour du prestataire ou message neutre : même carte que la confirmation des formulaires */
.bon-avis--refus{border-left-color:var(--erreur-lisere)}
.bon-avis--refus .formulaire-confirmation__icone{background:var(--erreur)}

/* ---------- Pas à pas en cinq écrans (maquette 34) : têtes d'écran ---------- */
.pas__tete{display:flex;flex-direction:column;gap:4px}
.pas__ligne{margin:0;font-size:14px;line-height:21px;color:var(--encre-douce)}
.pas-avance__nom:empty{display:none}
.bon-formulaire .pas[data-pas="1"] .pas__actions{padding-left:12px}
@media (min-width:640px){.bon-formulaire .pas[data-pas="1"] .pas__actions{padding-left:0}}
.bon-formulaire .pas[data-pas="1"] .pas__corps,.bon-formulaire .pas[data-pas="2"] .pas__corps,.bon-formulaire .pas[data-pas="3"] .pas__corps{gap:18px}

/* ---------- Écran 1 : tuiles de soin (trois par rangée sur ordinateur, deux sur mobile) ----------
 * Chaque tuile prend la couleur de son soin dans la charte (réglée dans la grille, décision de Maxime du 18 octobre) : variables --soin-* posées par la classe de la tuile ;
 * « Je laisse choisir » reste dans le vert du site, comme la maquette 34. */
.bon-tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){.bon-tuiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
.tuile-bon{position:relative;display:flex;min-height:120px;border-radius:14px}
@media (min-width:640px){.tuile-bon{min-height:136px}}
.tuile-bon__corps{position:relative;display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;box-sizing:border-box;padding:16px;border:1.5px solid var(--bord-champ);border-radius:inherit;background:var(--blanc);pointer-events:none}
.choix__saisie:checked ~ .tuile-bon__corps{border:2px solid var(--soin-trait);background:var(--soin-teinte)}
.champ--erreur .tuile-bon__corps{border-color:var(--erreur-lisere)}
.tuile-bon__pastille{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--soin-teinte);color:var(--soin-texte)}
.tuile-bon__pastille .icone{width:30px;height:30px}
.tuile-bon__pastille .icone--tuile{--epaisseur:1.5}
.tuile-bon__euro{font-family:var(--police-titre);font-weight:700;font-size:26px;line-height:1}
.choix__saisie:checked ~ .tuile-bon__corps .tuile-bon__pastille{background:var(--soin-trait);color:var(--blanc)}
.tuile-bon__nom{font-family:var(--police-titre);font-weight:700;font-size:17px;line-height:23px;color:var(--soin-texte);overflow-wrap:anywhere}
@media (min-width:640px){.tuile-bon__nom{font-size:18px}}
.tuile-bon__prix{margin-top:auto;font-size:14px;line-height:normal;color:var(--encre-douce)}

/* ---------- Écran 2 : le détail du soin choisi (un seul bloc visible), puis le montant ---------- */
.bon-details{display:flex;flex-direction:column}
.bon-detail{display:flex;flex-direction:column;gap:18px}
.bon-precision:focus{outline:none}
@supports selector(:has(a)){
	.bon-details>.bon-detail{display:none}
	.bon-formulaire:has(.bon-tuiles>.tuile-bon:nth-child(1) .choix__saisie:checked) .bon-details>.bon-detail:nth-child(1){display:flex}
	.bon-formulaire:has(.bon-tuiles>.tuile-bon:nth-child(2) .choix__saisie:checked) .bon-details>.bon-detail:nth-child(2){display:flex}
	.bon-formulaire:has(.bon-tuiles>.tuile-bon:nth-child(3) .choix__saisie:checked) .bon-details>.bon-detail:nth-child(3){display:flex}
	.bon-formulaire:has(.bon-tuiles>.tuile-bon:nth-child(4) .choix__saisie:checked) .bon-details>.bon-detail:nth-child(4){display:flex}
	.bon-formulaire:has(.bon-tuiles>.tuile-bon:nth-child(5) .choix__saisie:checked) .bon-details>.bon-detail:nth-child(5){display:flex}
	.bon-formulaire:has(.bon-tuiles>.tuile-bon:nth-child(6) .choix__saisie:checked) .bon-details>.bon-detail:nth-child(6){display:flex}
	.bon-formulaire:has(.bon-tuiles>.tuile-bon:nth-child(7) .choix__saisie:checked) .bon-details>.bon-detail:nth-child(7){display:flex}
	.bon-formulaire:has(.bon-tuiles>.tuile-bon:nth-child(8) .choix__saisie:checked) .bon-details>.bon-detail:nth-child(8){display:flex}
	.bon-formulaire:has(.bon-tuiles>.tuile-bon:nth-child(9) .choix__saisie:checked) .bon-details>.bon-detail:nth-child(9){display:flex}
	.bon-formulaire:has(.bon-tuiles>.tuile-bon:nth-child(10) .choix__saisie:checked) .bon-details>.bon-detail:nth-child(10){display:flex}
	.bon-formulaire:has(.bon-tuiles>.tuile-bon:nth-child(11) .choix__saisie:checked) .bon-details>.bon-detail:nth-child(11){display:flex}
	.bon-formulaire:has(.bon-tuiles>.tuile-bon:nth-child(12) .choix__saisie:checked) .bon-details>.bon-detail:nth-child(12){display:flex}
}

/* Une question, puis ses puces ou ses cartes ; note de 13 px dessous */
.bon-ligne{display:flex;flex-direction:column;gap:8px}
.bon-ligne[hidden],.bon-ligne__puce[hidden]{display:none}
.bon-ligne__titre{font-size:14px;font-weight:600;line-height:normal}
.bon-ligne__liste{display:flex;flex-wrap:wrap;gap:10px}
.bon-ligne__puce{max-width:100%;border-radius:22px}
.bon-ligne__puce .puce-choix__texte{height:auto;min-height:44px;padding-block:6px;white-space:normal}
.bon-ligne__puce::after{content:"";position:absolute;inset:-1px 0;pointer-events:none}
.bon-ligne__note{font-size:13px;line-height:normal;color:var(--encre-douce)}
.champ--erreur .bon-ligne__puce .puce-choix__texte{border-color:var(--erreur-lisere)}

/* Cartes à deux lignes : durée, « séances ou montant » (prix en grand), remise du bon (texte) */
.bon-cartes{display:flex;gap:12px}
.carte-bon-choix{position:relative;display:flex;flex:1;min-width:0;border-radius:12px}
.carte-bon-choix__corps{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;gap:4px;min-width:0;box-sizing:border-box;padding:14px 12px;border:1.5px solid var(--bord-champ);border-radius:inherit;background:var(--blanc);pointer-events:none}
.choix__saisie:checked ~ .carte-bon-choix__corps{border:2px solid var(--vert);background:var(--vert-clair)}
.champ--erreur .carte-bon-choix__corps{border-color:var(--erreur-lisere)}
.carte-bon-choix__nom{font-size:15px;font-weight:600;line-height:normal;color:var(--encre)}
.carte-bon-choix__prix{font-family:var(--police-titre);font-weight:700;font-size:22px;line-height:28px;color:var(--vert-fonce)}
.choix__saisie:disabled{cursor:not-allowed}
.choix__saisie:disabled ~ .carte-bon-choix__corps{border-color:var(--filet);background:var(--creme);opacity:.55}
.bon-cartes--texte{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.bon-cartes--texte{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bon-cartes--texte .carte-bon-choix__corps{align-items:flex-start;padding:14px 16px}
.bon-cartes--texte .carte-bon-choix__nom{font-size:16px}
.carte-bon-choix__texte{font-size:14px;line-height:21px;color:var(--encre-douce)}

/* Bouton « Retour » : le signe et le mot sont séparés par une espace, comme dans la maquette 34 */
.bon-formulaire .pas__retour{gap:4px}

/* Nombre de séances : moins, nombre, plus */
.bon-ligne--compteur{flex-direction:row;align-items:center;gap:12px}
@media (max-width:359px){.bon-ligne--compteur{flex-wrap:wrap}}
.bon-compteur{display:inline-flex;align-items:center;overflow:hidden;border:1.5px solid var(--bord-champ);border-radius:10px;background:var(--blanc)}
.bon-compteur:focus-within{outline:3px solid var(--vert-fonce);outline-offset:2px}
.bon-compteur__bouton{display:flex;align-items:center;justify-content:center;width:44px;height:48px;margin:0;padding:0;border:0;background:none;font:400 20px/normal var(--police-texte);color:var(--vert-fonce);cursor:pointer}
.bon-compteur__bouton[hidden]{display:none}
.bon-compteur__bouton:focus-visible{outline:3px solid var(--vert-fonce);outline-offset:-3px}
.bon-compteur__saisie{width:48px;height:48px;margin:0;padding:0;border:0;border-radius:0;background:transparent;font:600 18px/normal var(--police-texte);text-align:center;color:var(--encre);-moz-appearance:textfield;appearance:textfield}
.bon-compteur__saisie:focus{outline:none}
.bon-compteur__saisie::-webkit-outer-spin-button,.bon-compteur__saisie::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}

/* Montant offert (décision de Maxime du 19 octobre) : le champ en grand, centré, avec « € » à côté ; l'étiquette et la ligne d'aide centrées dessous ; le récapitulatif sur fond vert pâle sous le tout */
.bon-montant{display:flex;flex-direction:column;gap:10px}
.bon-montant__champ{align-items:center;gap:10px;text-align:center}
.bon-montant__ligne{display:flex;align-items:center;justify-content:center;gap:12px}
.bon-montant__zone{display:flex;align-items:center;width:168px;max-width:100%;height:68px;box-sizing:border-box;padding:0 16px;border:1.5px solid var(--bord-champ);border-radius:12px;background:var(--blanc)}
.bon-montant__zone:focus-within{outline:3px solid var(--vert-fonce);outline-offset:2px}
.champ--erreur .bon-montant__zone{border-color:var(--erreur-lisere)}
.bon-montant__champ .bon-montant__saisie{width:100%;min-width:0;height:100%;padding:0;border:0;background:transparent;font:600 32px/normal var(--police-texte);text-align:center;color:var(--encre)}
.bon-montant__champ .bon-montant__saisie:focus{outline:none}
.bon-montant__euro{font-size:32px;font-weight:600;line-height:normal;color:var(--encre-douce)}
.bon-montant__etiquette{text-align:center}
.bon-montant__champ .champ__erreur{justify-content:center}
.bon-montant__aide{max-width:420px;margin:0;font-size:14px;line-height:21px;text-align:center;color:var(--encre-douce)}
.bon-recap{margin:0;padding:12px 16px;border-radius:12px;background:var(--vert-clair);font-size:15px;font-weight:400;line-height:23px;color:var(--encre)}
.bon-recap strong{font-weight:600;color:var(--vert-fonce)}
.bon-montant__champ .champ__saisie[readonly]{cursor:default}

/* ---------- Écran 3 : la remise (au cabinet ou par courriel) ---------- */
.bon-remise{display:flex;flex-direction:column;gap:18px}
.bon-remise__choix{gap:0}
.bon-remise__cabinet,.bon-remise__courriel{display:flex;flex-direction:column;gap:18px}
.bon-remise__ligne{margin:0}
@supports selector(:has(a)){
	.bon-remise:not(.bon-remise--seule) .bon-remise__cabinet,.bon-remise:not(.bon-remise--seule) .bon-remise__courriel{display:none}
	.bon-remise:has(input[name="remise"][value="cabinet"]:checked) .bon-remise__cabinet,.bon-remise:has(input[name="remise"][value="courriel"]:checked) .bon-remise__courriel{display:flex}
	.bon-destinataire{display:none}
	.bon-envoi:has(input[value="personne"]:checked)+.bon-destinataire,.bon-destinataire:has(.champ--erreur){display:grid}
}

/* ---------- Écran 5 : le cabinet d'utilisation ne se demande que pour la remise par courriel ---------- */
.bon-cabinet-usage{display:flex;flex-direction:column;gap:6px}
@supports selector(:has(a)){
	.bon-formulaire:has(input[name="remise"][value="cabinet"]:checked) .bon-cabinet-usage{display:none}
}

/* ---------- Écran 4 : pour qui ---------- */
.bon-message.champ .champ__saisie--zone{height:88px}

/* ---------- Colonne de droite : questions et idées ---------- */
.bon-questions{margin:10px calc(-1 * var(--bon-marge)) 0;padding:24px var(--marge);background:var(--blanc)}
/* Sur ordinateur le titre n'est lu que par les lecteurs d'écran (classe sr-only) ; sur mobile il est visible */
@media (max-width:959px){.bon-questions .bon-questions__titre.sr-only{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal}}
.bon-questions__titre .titre-section{gap:14px}
.bon-questions__titre .titre-section__trait{width:28px}
.bon-questions__titre .titre-section__titre{font-size:26px;line-height:33px}
.bon-questions .questions{margin-top:12px}
.bon-questions__titre+.questions{margin-top:12px}
.bon-idees{margin-top:20px}
.bon-idees__texte{margin-bottom:12px;font-size:15px;line-height:26px;color:var(--texte-courant)}
@media (min-width:960px){
	.bon-questions{margin:0;padding:8px 24px;border-radius:18px}
	.bon-questions .questions{margin-top:0}
	.bon-questions .questions__item{padding:20px 0}
	.bon-questions .questions__item:first-child{padding-block:14px;border-top:0}
	.bon-questions .questions__texte{font-size:16px;line-height:23px}
	.bon-questions .questions__reponse{max-width:640px}
	.bon-idees{margin-top:0;padding:20px 0 16px}
	.bon-questions .questions+.bon-idees{border-top:0}
}

/* Colonne de droite : ligne « Une question ? » sous les étapes */
.rdv-etapes__aide{position:relative;margin:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.25);font-size:14px;line-height:21px;color:var(--blanc)}
.rdv-etapes__tel{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- Mode « demande au cabinet » : téléphones en second choix, sous le bouton ---------- */
.bon-appel{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.bon-appel__texte{font-size:14px;line-height:20px;text-align:center;color:var(--encre-douce)}
.bon-appel .appels__lien:last-child{border-bottom:1px solid var(--filet)}

/* ---------- Écran de confirmation (retrait au cabinet, paiement accepté) ----------
 * Même carte que le formulaire en cinq écrans (filet beige, 18 px), à sa place dans la grille ; récapitulatif sur fond vert pâle comme le récapitulatif du montant ;
 * suite dans la carte verte à étapes numérotées de la colonne « Comment ça marche ». */
.bon-retour[hidden]{display:none}
.bon-confirmation{display:flex;flex-direction:column;gap:20px;min-width:0;box-sizing:border-box;padding:20px 18px;border:1.5px solid var(--filet);border-radius:18px;background:var(--blanc)}
@media (min-width:640px){.bon-confirmation{padding:24px 28px 28px}}
@media (min-width:960px){.bon-confirmation{grid-column:1;grid-row:1 / span 2;padding:28px 36px 34px}}
.bon-confirmation__tete{display:flex;align-items:center;gap:14px}
.bon-confirmation__titre{margin:0;font-family:var(--police-titre);font-weight:600;font-size:22px;line-height:30px;color:var(--vert-fonce)}
@media (min-width:640px){.bon-confirmation__titre{font-size:26px;line-height:34px}}
.bon-confirmation__titre:focus{outline:none}
.bon-confirmation__titre:focus-visible{outline:3px solid var(--vert-fonce);outline-offset:4px}
.bon-confirmation__accueil{margin:0;font-size:16px;line-height:26px;color:var(--texte-courant)}
.bon-confirmation__recap{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:12px;background:var(--vert-clair)}
.bon-confirmation__recap[hidden]{display:none}
.bon-confirmation__sous-titre{margin:0;font-family:var(--police-titre);font-weight:700;font-size:18px;line-height:24px;color:var(--vert-fonce)}
.bon-confirmation__liste{margin:0}
.bon-confirmation__ligne{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--filet)}
.bon-confirmation__ligne:first-child{border-top:0}
.bon-confirmation__ligne[hidden]{display:none}
.bon-confirmation__etiquette{font-size:14px;line-height:21px;color:var(--encre-douce)}
.bon-confirmation__valeur{margin:0;font-size:15px;font-weight:600;line-height:23px;color:var(--encre);overflow-wrap:anywhere}
@media (min-width:640px){
	.bon-confirmation__ligne{flex-direction:row;align-items:baseline;justify-content:space-between;gap:24px}
	.bon-confirmation__etiquette{flex:none}
	.bon-confirmation__valeur{text-align:right}
}
.bon-confirmation .rdv-etapes{order:0}
.bon-confirmation__etape{font-size:15px;line-height:23px}
.bon-confirmation__bouton{align-self:stretch}
@media (min-width:640px){.bon-confirmation__bouton{align-self:flex-start}}