/**
 * Page Bon cadeau - ce qui n'appartient qu'à elle.
 *
 * Le design system (socle.css) et ce que les pages de rubrique partagent
 * (pages.css) sont chargés avant. On trouve ici la carte de commande du hero,
 * les idées de cadeau et l'aperçu du bon.
 *
 * L'essentiel du fichier habille un formulaire de paiement dont le balisage ne
 * nous appartient pas - une grille Bootstrap rendue par PayForm - et le
 * resserre assez pour qu'il tienne dans le hero.
 */

/* ---------- hero ---------- */
/* La carte est plus haute que le texte : c'est elle qui donne sa hauteur au
   hero. D'où un peu plus d'air en haut que sur les autres pages, pour qu'elle
   ne vienne pas se coller sous le menu. */
.exo2-bon .exo2-hhero-grid { grid-template-columns: minmax(0, 1fr) 460px; align-items: center; padding-top: 176px; }
.exo2-bon-arguments { display: grid; gap: 9px; margin-top: 22px; }
.exo2-bon-arguments li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.exo2 .exo2-bon-arguments .exo2-coche { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--exo2-corail); }
.exo2-bon .exo2-hhero-note { margin-top: 20px; }

/* Quatre étapes, quatre colonnes : la grille partagée en compte trois et
   laisserait la quatrième seule sur sa ligne. */
.exo2-bon .exo2-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- les idées de cadeau ---------- */
.exo2-bon-idees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.exo2-bon-idee { padding: 0; display: flex; flex-direction: column; }
.exo2-bon-idee > figure { margin: 0; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #1a1a1a; }
.exo2-bon-idee > figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exo2-bon-idee > figure .exo2-badge { position: absolute; left: 12px; top: 12px; }
.exo2-bon-idee-corps { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.exo2-bon-idee-corps p { color: var(--exo2-meta); font-size: 14.5px; line-height: 1.5; margin: 9px 0 0; }
.exo2-bon-idee-prix {
	margin-top: auto; padding-top: 14px; border-top: 1px solid var(--exo2-ligne);
	font: italic 700 20px var(--exo2-police-titre); color: #fff; letter-spacing: .8px;
}

/* Le rappel dernière minute, en bandeau sous les idées. */
.exo2-bon-minute {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	margin-top: 26px; padding: 22px 26px; background: rgba(255, 255, 255, .04); box-shadow: var(--exo2-liseret);
}
.exo2-bon-minute b { display: block; color: #fff; font: 700 17px var(--exo2-police-titre); text-transform: uppercase; letter-spacing: .3px; }
.exo2-bon-minute p { margin: 6px 0 0; color: var(--exo2-meta); font-size: 15px; max-width: 620px; }

/* ---------- l'aperçu du bon ---------- */
.exo2-bon-apercu { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.exo2-bon-apercu figure { margin: 0; }
.exo2-bon-apercu img { width: 100%; height: auto; display: block; box-shadow: var(--exo2-ombre); }
.exo2-bon-apercu p { color: var(--exo2-meta); font-size: 16px; line-height: 1.65; margin-bottom: 20px; }
.exo2 .exo2-bon-apercu .exo2-list { display: grid; gap: 11px; }
.exo2 .exo2-bon-apercu .exo2-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.exo2 .exo2-bon-apercu .exo2-coche { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--exo2-corail); }

/* =======================================================================
   La carte de commande

   Elle tient dans le hero, ce qui veut dire tenir sous la ligne de
   flottaison : chaque bloc y est compté. D'où les étiquettes au-dessus des
   champs plutôt qu'à côté (une colonne d'étiquettes coûte 180 px de largeur
   pour rien), et les champs courts appariés.
   ======================================================================= */
.exo2-bon-carte { padding: 24px 26px 26px; }
.exo2-bon-carte-titre { margin: 0 0 18px; }

/* Les montants suggérés : la réponse à « combien mettre », en un clic. */
.exo2-bon-montants-titre { margin-bottom: 9px; }
.exo2-bon-montants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.exo2-bon-montant {
	background: transparent; border: 1px solid rgba(255, 255, 255, .22); border-radius: 0;
	color: var(--exo2-texte); cursor: pointer; padding: 9px 6px 8px; text-align: center;
	transition: border-color .15s, color .15s, background-color .15s;
}
.exo2-bon-montant b { display: block; font: italic 700 19px var(--exo2-police-titre); color: #fff; letter-spacing: .6px; }
.exo2-bon-montant span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.25; color: var(--exo2-meta); }
.exo2-bon-montant:hover { border-color: #fff; }
.exo2-bon-montant.exo2-on { background: var(--exo2-accent); border-color: transparent; }
.exo2-bon-montant.exo2-on span { color: rgba(255, 255, 255, .82); }

.exo2-bon-paiement { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--exo2-meta); }
.exo2-bon-paiement b { color: var(--exo2-texte); font-weight: 600; }

/*
 * Le formulaire de paiement lui-même.
 *
 * PayForm rend une grille Bootstrap : une ligne par champ, l'étiquette dans
 * une colonne de gauche, le champ à droite. On garde son balisage et on
 * redessine par-dessus : le formulaire devient une grille à deux colonnes, où
 * chaque ligne dit combien de colonnes elle occupe et à quel rang elle passe.
 * Le rang compte, parce que l'ordre du HTML n'est pas celui qu'on veut lire :
 * le code promo arrive après le message, il remonte à côté du montant.
 */
/* Le conteneur du module porte une gouttière négative de 13 px qui ferait
   déborder tout le formulaire hors des marges de la carte, alors que les
   montants suggérés et la note de paiement s'y tiennent. */
.exo2-bon-carte .pf-container { margin-left: 0; margin-right: 0; }
.exo2-bon-carte #os_form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; padding: 0; }
/* Le formulaire se donne une gouttière (12,75 px de marge intérieure) que
   chaque ligne annule d'une marge négative. Les deux disparaissent : sans
   quoi les lignes qui ne sont pas des « row » - le bouton, le récapitulatif -
   s'alignent 13 px en dedans des autres. */
.exo2-bon-carte .form-group,
.exo2-bon-carte .form-row { display: block; grid-column: 1 / -1; margin: 0 0 13px; }

/* Les quatre champs courts, deux par deux. */
.exo2-bon-carte #field_amount { grid-column: span 1; order: 1; }
.exo2-bon-carte .form-group:has(#coupon_code) { grid-column: span 1; order: 2; }
.exo2-bon-carte #field_Pour { grid-column: span 1; order: 3; }
.exo2-bon-carte #field_Offert_par { grid-column: span 1; order: 4; }
/* Les longs gardent la largeur entière. */
.exo2-bon-carte #field_email { order: 5; }
.exo2-bon-carte #field_comment { order: 6; }
.exo2-bon-carte .form-group:has(input[readonly]) { order: 7; }
.exo2-bon-carte #field-accept-term { order: 8; }
.exo2-bon-carte .form-actions { order: 9; grid-column: 1 / -1; }

/* Les colonnes Bootstrap se donnent une largeur en pourcentage de leur ligne.
   La ligne n'est plus une grille : on leur rend leur largeur, l'empilement
   étiquette / champ s'en charge. */
.exo2-bon-carte [class*="col-md-"],
.exo2-bon-carte [class*="col-sm-"] { flex: none; max-width: none; width: auto; padding-left: 0; padding-right: 0; }

.exo2-bon-carte .form-control-label,
.exo2-bon-carte .form-control-label label {
	display: block; font: 600 10.5px/1.4 var(--exo2-police); letter-spacing: .9px;
	text-transform: uppercase; color: var(--exo2-meta); margin: 0 0 5px;
}
.exo2 .exo2-bon-carte .required { color: var(--exo2-corail); }

.exo2-bon-carte .form-control,
.exo2-bon-carte .form-select,
.exo2-bon-carte input[type="text"],
.exo2-bon-carte input[type="email"],
.exo2-bon-carte input[type="number"],
.exo2-bon-carte input[type="tel"],
.exo2-bon-carte select,
.exo2-bon-carte textarea {
	width: 100%; height: 42px; padding: 0 12px; border-radius: 0; box-shadow: none;
	background: #0d0d0d; color: #fff; border: 1px solid rgba(255, 255, 255, .22);
	font: 15px var(--exo2-police);
}
.exo2-bon-carte textarea { height: auto; min-height: 68px; padding: 10px 12px; line-height: 1.45; }
.exo2-bon-carte select,
.exo2-bon-carte .form-select {
	appearance: none; padding-right: 32px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f56d52' stroke-width='2'><path d='M5 8l5 5 5-5'/></svg>");
	background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}
.exo2-bon-carte .w-auto { width: auto; display: inline-block; }
.exo2-bon-carte input:focus-visible,
.exo2-bon-carte select:focus-visible,
.exo2-bon-carte textarea:focus-visible { outline: 2px solid var(--exo2-corail); outline-offset: 2px; }

/* Le récapitulatif : quatre montants calculés, en lecture seule. Quatre
   lignes de formulaire coûteraient 170 px ; en ticket, elles en prennent 90. */
.exo2-bon-carte .form-group:has(input[readonly]) {
	display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
	margin: 0; padding: 4px 0;
}
.exo2-bon-carte .form-group:has(input[readonly]) .form-control-label { margin: 0; }
.exo2-bon-carte .input-group { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; }
.exo2-bon-carte input[readonly] {
	/* Largeur donnée, pas « auto » : un champ texte se dimensionne alors sur
	   son attribut size et le « CHF » part à l'autre bout de la carte. */
	flex: none; width: 5.2em; min-width: 0; height: auto; text-align: right;
	background: transparent; border-color: transparent; padding: 0;
	font: italic 700 16px var(--exo2-police-titre); color: #fff; letter-spacing: .5px;
}
.exo2-bon-carte .input-group-text {
	font: 600 10.5px var(--exo2-police); letter-spacing: .9px; text-transform: uppercase;
	color: var(--exo2-meta); background: transparent; border: 0; padding: 0; min-width: 28px;
}
.exo2-bon-carte .form-group:has(#total_amount) { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--exo2-ligne); }
.exo2-bon-carte .form-group:has(#gross_amount) { margin-bottom: 14px; padding-top: 10px; border-top: 1px solid var(--exo2-ligne); }
.exo2 .exo2-bon-carte #gross_amount { color: var(--exo2-corail); font-size: 21px; }

/* Moyens de paiement, C.G.V., et le bouton. */
.exo2 .exo2-bon-carte label.d-block { display: block; font: 15px var(--exo2-police); text-transform: none; letter-spacing: 0; color: var(--exo2-texte); margin-bottom: 8px; }
.exo2-bon-carte input[type="radio"],
.exo2-bon-carte input[type="checkbox"] {
	width: auto; height: auto; accent-color: var(--exo2-accent); margin-right: 8px; vertical-align: middle;
}
.exo2-bon-carte #field-accept-term { font-size: 14px; line-height: 1.5; margin-bottom: 4px; }
.exo2 .exo2-bon-carte a { color: var(--exo2-corail); }
.exo2-bon-carte .invalid { display: block; margin-top: 5px; font-size: 12.5px; color: var(--exo2-corail); }

.exo2-bon-carte input[type="submit"],
.exo2-bon-carte button[type="submit"],
.exo2-bon-carte .btn-primary {
	background: var(--exo2-accent) var(--exo2-degrade); color: #fff;
	border: 0; border-radius: 0; box-shadow: var(--exo2-ombre);
	font: italic 700 13px/48px var(--exo2-police-titre); letter-spacing: 2px; text-transform: uppercase;
	padding: 0 28px 2px; cursor: pointer; width: 100%; height: auto;
}

/* =======================================================================
   Tablette
   ======================================================================= */
@media (max-width: 1200px) {
	.exo2-bon .exo2-hhero-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 34px; }
	.exo2-bon-idees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.exo2-bon .exo2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
	.exo2-bon-apercu { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* =======================================================================
   Smartphone
   ======================================================================= */
@media (max-width: 960px) {
	.exo2-bon .exo2-hhero-grid { display: block; padding-top: 96px; padding-bottom: 36px; }
	.exo2-bon-carte { margin-top: 30px; padding: 22px 18px 24px; }
	.exo2-bon-idees { grid-template-columns: minmax(0, 1fr); }
	.exo2-bon .exo2-steps { grid-template-columns: minmax(0, 1fr); }
	.exo2-bon-minute { display: block; }
	.exo2-bon-minute .exo2-btn { margin-top: 16px; width: 100%; }

	/* Sur un téléphone, deux colonnes donneraient des champs de 160 px :
	   « Bénéficiaire » n'y tiendrait pas. Tout repasse sur une colonne. */
	.exo2-bon-carte #os_form { grid-template-columns: minmax(0, 1fr); }
	.exo2-bon-carte #field_amount,
	.exo2-bon-carte .form-group:has(#coupon_code),
	.exo2-bon-carte #field_Pour,
	.exo2-bon-carte #field_Offert_par { grid-column: 1 / -1; }
	.exo2-bon-montants { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}