/**
 * Parcours multi-étapes « Demande d'intervention » (v2) — design de la maquette 1918.
 *
 * Chargée PAR-DESSUS demande-intervention.css (socle : flatpickr thémé, accordéons,
 * cartes d'options par data-field-name, palette couleurs, sélecteur matériel).
 * Tout est scopé .gacct-v2 : la classe est posée sur un wrapper autour du formulaire
 * (page de test) ou sur le conteneur Elementor (page finale).
 *
 * Correspondance maquette → prod : .mq-card → .gacct-v2-step, .mq-nav → wrap des
 * boutons de page JFB, .mq-btn-next → .jet-form-builder__next-page, etc.
 */

/* Registre de couleurs du parcours : chaque token passe par la variable
   white-label --gacct-* correspondante, avec pour repli la valeur du site de
   référence. Un site qui pose ses propres tokens (pack de charte) habille donc
   tout le parcours sans toucher à cette feuille. */
.gacct-v2 {
	--v2-teal: var(--gacct-accent, #20c4c3);
	--v2-teal-dark: var(--gacct-accent-dark, #17a3a2);
	--v2-teal-soft: var(--gacct-accent-soft, #e6f8f8);
	--v2-yellow: var(--gacct-cta, #ffbd20);
	--v2-ink: var(--gacct-text, #1f2d3d);
	--v2-ink2: var(--gacct-text-muted, #51606f);
	--v2-line: var(--gacct-border-soft, #e3e8ee);
	--v2-bg: var(--gacct-surface-alt, #f6f8fa);
	--v2-red: var(--gacct-danger, #c0392b);
	--v2-red-soft: var(--gacct-danger-soft, #fdeeec);
	--v2-r: var(--gacct-radius-lg, 14px);
}

.gacct-v2 .jet-form-builder {
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 0 64px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--v2-ink);
	scroll-margin-top: 96px;
}

.gacct-v2 .jet-form-builder *,
.gacct-v2 .jet-form-builder *::before,
.gacct-v2 .jet-form-builder *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Barre de progression : « Étape X sur 4 — nom » + 4 segments
   ========================================================================== */

.gacct-v2-progress-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--v2-ink2);
	margin: 0 0 10px;
}

.gacct-v2-progress-label strong {
	color: var(--v2-ink);
}

.gacct-v2 .jet-form-builder-progress-pages {
	display: flex;
	gap: 6px;
	margin: 0 0 26px;
}

.gacct-v2 .jet-form-builder-progress-pages > div {
	flex: 1;
	height: 8px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 99px;
	background: var(--v2-line);
	transition: background 0.25s;
	overflow: hidden;
}

/* Segments faits (pages passées + page courante). */
.gacct-v2 .jet-form-builder-progress-pages > div.passed-page,
.gacct-v2 .jet-form-builder-progress-pages > div.active-page {
	background: var(--v2-teal);
}

/* Le contenu natif (rond numéroté, libellé, séparateur) est masqué :
   le libellé vit dans .gacct-v2-progress-label. !important : la CSS de
   JetFormBuilder, chargée après sur la page Elementor, re-force leur
   display:flex (les chiffres transparaissaient dans les segments). */
.gacct-v2 .jet-form-builder-progress-pages__item,
.gacct-v2 .jet-form-builder-progress-pages__separator {
	display: none !important;
}

/* ==========================================================================
   Étapes : cartes
   ========================================================================== */

.gacct-v2 .gacct-v2-step {
	background: #fff;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r);
	padding: 26px 24px;
	box-shadow: 0 2px 10px rgba(31, 45, 61, 0.05);
}

.gacct-v2 .gacct-v2-titre {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 6px;
	color: var(--v2-ink);
}

.gacct-v2 .gacct-v2-sous-titre {
	margin: 0 0 22px;
	color: var(--v2-ink2);
}

/* Grille 2 colonnes (taille / PTV). */
.gacct-v2 .gacct-v2-grille-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

/* ==========================================================================
   Champs
   ========================================================================== */

.gacct-v2 .jet-form-builder-row {
	margin: 0 0 18px;
}

.gacct-v2 .jet-form-builder__label {
	font-weight: 700;
	font-size: 15.5px;
	margin-bottom: 7px;
	color: var(--v2-ink);
}

/* Obligatoire / facultatif.
   L'étoile de JFB est un « * » gris de la taille du texte : illisible pour un
   néophyte. On la détache du libellé et on la peint en accent. Les champs
   facultatifs, eux, sont marqués en toutes lettres (pastille posée par
   demande-v2.js d'après v2.facultatifs). */
.gacct-v2 .jet-form-builder__label .jet-form-builder__required,
.gacct-v2 .jet-form-builder__label-text .jet-form-builder__required {
	color: var(--v2-teal);
	font-size: 18px;
	line-height: 1;
	margin-inline-start: 4px;
	vertical-align: -2px;
}

.gacct-v2 .gacct-v2-optionnel {
	display: inline-block;
	margin-inline-start: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--v2-bg);
	color: var(--v2-ink2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
	vertical-align: 1px;
}

/* Paire Taille / P.T.V. : un « ou » entre les deux champs, pour que la règle
   « l'un OU l'autre » se lise d'un coup d'œil. La colonne du milieu (et la
   pastille) sont posées par demande-v2.js — la classe .gacct-v2-grille-2 sert
   AUSSI au mode manuel de la recherche, d'où le modificateur. */
.gacct-v2 .gacct-v2-grille-2--ou {
	grid-template-columns: 1fr auto 1fr;
	gap: 0 12px;
}

.gacct-v2 .gacct-v2-ou {
	align-self: center;
	margin-bottom: 18px; /* compense le margin-bottom des .jet-form-builder-row */
	color: var(--v2-ink2);
	font-size: 14px;
	font-weight: 700;
	text-transform: lowercase;
	white-space: nowrap;
}

/* Bandeau « demande retrouvée » (brouillon local restauré). */
.gacct-v2 .gacct-v2-brouillon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 22px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--v2-teal-soft);
	color: var(--v2-ink);
	font-size: 15px;
	font-weight: 600;
}

.gacct-v2 .gacct-v2-brouillon-reset {
	flex-shrink: 0;
	border: 0;
	background: none;
	padding: 0;
	color: var(--v2-teal-dark);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Aperçu des couleurs : masqué tant que rien n'est choisi (le socle v1 se
   contentait de l'estomper, ce qui laissait un carré gris orphelin à droite).
   `.has-selection` est posée sur la palette par demande-v2.js. */
.gacct-v2 .gacct-couleurs:not( .has-selection ) .gacct-couleurs__apercu {
	display: none;
}

/* Note commune à la paire Taille / P.T.V. (« au moins l'un des deux »). */
.gacct-v2 .gacct-v2-note-champ {
	margin: -10px 0 0;
	font-size: 14px;
	color: var(--v2-ink2);
}

.gacct-v2 .jet-form-builder__desc,
.gacct-v2 .gacct-v2-aide {
	font-size: 14px;
	color: var(--v2-ink2);
	margin-top: 6px;
}

.gacct-v2 input.jet-form-builder__field[type="text"],
.gacct-v2 input.jet-form-builder__field[type="number"],
.gacct-v2 input.jet-form-builder__field[type="email"],
.gacct-v2 input.jet-form-builder__field[type="tel"],
.gacct-v2 select.jet-form-builder__field,
.gacct-v2 textarea.jet-form-builder__field,
.gacct-v2 .jet-form-builder input.flatpickr-input ~ input.form-control {
	width: 100%;
	border: 2px solid var(--v2-line);
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 17px;
	color: var(--v2-ink);
	background: #fff;
	transition: border-color 0.15s;
}

.gacct-v2 input.jet-form-builder__field:focus,
.gacct-v2 select.jet-form-builder__field:focus,
.gacct-v2 textarea.jet-form-builder__field:focus,
.gacct-v2 .jet-form-builder input.form-control:focus {
	border-color: var(--v2-teal);
	outline: none;
}

/* Messages de validation JFB : composant erreur de la maquette.
   ⚠ Adversaire mesuré : le Custom CSS du kit (post 4) pose
   `.jet-form-builder-row .error-message { font-size: 12px !important;
   color: #dc3545 !important }` — le !important bat notre spécificité
   supérieure. Les erreurs JFB s'affichaient donc en 12 px à côté des nôtres
   en 15 px. On ré-asserte ces deux seules propriétés en !important, pour que
   TOUS les messages du parcours aient la même tête. */
.gacct-v2 .jet-form-builder-row .error-message {
	font-size: 15px !important;
	color: var(--v2-red) !important;
}

.gacct-v2 .jet-form-builder-row .error-message,
.gacct-v2 .gacct-v2-err {
	background: var(--v2-red-soft);
	border-left: 4px solid var(--v2-red);
	color: var(--v2-red);
	font-weight: 600;
	font-size: 15px;
	border-radius: 8px;
	padding: 10px 14px;
	margin-top: 10px;
}

/* Nos erreurs d'étape sont des blocs autonomes, insérés ENTRE deux champs :
   sans marge basse elles se collaient au champ suivant (les erreurs de JFB,
   elles, vivent dans la .jet-form-builder-row et profitent de ses 18 px). */
.gacct-v2 .gacct-v2-err {
	display: none;
	margin: 14px 0 18px;
}

.gacct-v2 .gacct-v2-err.is-on {
	display: block;
}

/* ==========================================================================
   Recherche de voile (étape 1)
   ========================================================================== */

/* Champs de stockage marque/modèle : cachés, l'UI de recherche les alimente.
   (class_name JFB atterrit sur l'input, pas sur la row.) !important : la CSS
   de JetFormBuilder (chargée après sur la page Elementor) re-force
   display:flex sur les rows. */
.gacct-v2 .jet-form-builder-row:has( input.gacct-v2-cache ) {
	display: none !important;
}

/* Détails de la voile (taille, P.T.V., n° de série, couleurs) : masqués tant
   qu'aucune voile n'est choisie (comportement de la maquette 1918, §2.5) —
   classes posées et basculées par demande-v2.js. */
.gacct-v2 .gacct-v2-detail.is-off {
	display: none !important;
}

/* Filet pointillé au-dessus du bloc détails, comme sur la maquette. */
.gacct-v2 .gacct-v2-detail--premier {
	border-top: 1px dashed var(--v2-line);
	margin-top: 22px;
	padding-top: 22px;
}

.gacct-v2-voile {
	margin: 0 0 18px;
}

.gacct-v2-combo {
	position: relative;
	margin: 0 0 14px;
}

.gacct-v2-combo-label,
.gacct-v2-champ label {
	display: block;
	font-weight: 700;
	font-size: 15.5px;
	margin-bottom: 7px;
	color: var(--v2-ink);
}

.gacct-v2 .gacct-v2-combo input,
.gacct-v2 .gacct-v2-manual input,
.gacct-v2 .gacct-v2-manual select {
	width: 100%;
	border: 2px solid var(--v2-line);
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 17px;
	color: var(--v2-ink);
	background: #fff;
	transition: border-color 0.15s;
}

.gacct-v2 .gacct-v2-combo input:focus,
.gacct-v2 .gacct-v2-manual input:focus,
.gacct-v2 .gacct-v2-manual select:focus {
	border-color: var(--v2-teal);
	outline: none;
}

/* Panneau de suggestions. */
.gacct-v2-sugg {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	background: #fff;
	border: 1px solid var(--v2-line);
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(31, 45, 61, 0.18);
	overflow: hidden;
}

.gacct-v2-sugg.is-open {
	display: block;
}

.gacct-v2 button.gacct-v2-s-item,
.gacct-v2 button.gacct-v2-s-other {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 0;
	padding: 12px 16px;
	font-size: 16px;
	cursor: pointer;
	color: var(--v2-ink);
}

.gacct-v2 button.gacct-v2-s-item:hover,
.gacct-v2 button.gacct-v2-s-item:focus,
.gacct-v2 button.gacct-v2-s-other:hover {
	background: var(--v2-teal-soft);
}

.gacct-v2-s-txt {
	flex: 1;
	min-width: 0;
}

.gacct-v2-s-txt strong {
	display: block;
}

.gacct-v2-s-brand {
	display: block;
	font-size: 14px;
	color: var(--v2-ink2);
}

.gacct-v2-s-year {
	background: var(--v2-bg);
	border-radius: 99px;
	padding: 3px 10px;
	font-size: 13.5px;
	color: var(--v2-ink2);
	flex-shrink: 0;
}

.gacct-v2-s-empty {
	padding: 12px 16px;
	color: var(--v2-ink2);
	font-size: 15px;
}

.gacct-v2 button.gacct-v2-s-other {
	border-top: 1px solid var(--v2-line);
	font-weight: 700;
	color: var(--v2-teal-dark);
}

/* Bouton « Ma voile n'est pas dans la liste » (hors panneau). */
.gacct-v2 button.gacct-v2-notfound {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: #fff;
	border: 2px dashed var(--v2-teal);
	border-radius: 12px;
	padding: 13px 16px;
	font-size: 16px;
	font-weight: 700;
	color: var(--v2-teal-dark);
	cursor: pointer;
	transition: background 0.15s;
}

.gacct-v2 button.gacct-v2-notfound:hover {
	background: var(--v2-teal-soft);
	border-style: dashed;
}

/* Carte de confirmation. */
.gacct-v2-chosen {
	display: none;
	align-items: center;
	gap: 12px;
	background: var(--v2-teal-soft);
	border: 2px solid var(--v2-teal);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 0 0 14px;
}

.gacct-v2-chosen.is-on {
	display: flex;
}

.gacct-v2-c-check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--v2-teal);
	color: #fff;
	font-weight: 800;
	flex-shrink: 0;
}

.gacct-v2-c-infos {
	flex: 1;
	min-width: 0;
}

.gacct-v2-c-infos strong {
	display: block;
}

.gacct-v2-c-infos small {
	display: block;
	color: var(--v2-ink2);
	font-size: 14px;
}

.gacct-v2 button.gacct-v2-c-edit,
.gacct-v2 button.gacct-v2-c-edit:hover {
	background: none;
	border: 0 solid transparent;
	padding: 0;
	color: var(--v2-teal-dark);
	text-decoration: underline;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

/* Mode manuel. */
.gacct-v2-manual {
	display: none;
	border-top: 1px dashed var(--v2-line);
	margin-top: 18px;
	padding-top: 18px;
}

.gacct-v2-manual.is-on {
	display: block;
}

.gacct-v2-manual-intro {
	margin: 0 0 14px;
	color: var(--v2-ink2);
}

.gacct-v2-manual-intro strong {
	color: var(--v2-ink);
}

.gacct-v2-champ {
	margin: 0 0 14px;
}

/* ==========================================================================
   Navigation Retour / Continuer / Envoyer
   ========================================================================== */

.gacct-v2 .jet-form-builder__next-page-wrap {
	display: flex;
	gap: 14px;
	margin-top: 26px;
}

/* (0,2,1) : bat le `.elementor-kit-4 button` (0,2,0) du kit quel que soit l'ordre. */
.gacct-v2 button.jet-form-builder__next-page,
.gacct-v2 button.jet-form-builder__prev-page,
.gacct-v2 button.jet-form-builder__submit {
	font-size: 18px;
	font-weight: 800;
	border-radius: 12px;
	padding: 16px 26px;
	min-height: 56px;
	border: 0;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.gacct-v2 button.jet-form-builder__next-page,
.gacct-v2 button.jet-form-builder__next-page:focus {
	flex: 1;
	order: 2;
	background: var(--v2-teal);
	color: #fff;
}

.gacct-v2 button.jet-form-builder__next-page:hover {
	background: var(--v2-teal-dark);
}

.gacct-v2 button.jet-form-builder__prev-page,
.gacct-v2 button.jet-form-builder__prev-page:focus {
	order: 1;
	background: #fff;
	border: 2px solid var(--v2-line);
	color: var(--v2-ink2);
}

.gacct-v2 button.jet-form-builder__prev-page:hover {
	border-color: var(--v2-ink2);
}

/* Dernière page : « Envoyer la demande » en jaune + Retour à sa gauche. */
.gacct-v2 .jet-form-builder__submit-wrap {
	display: flex;
	gap: 14px;
	margin-top: 26px;
}

.gacct-v2 button.jet-form-builder__submit,
.gacct-v2 button.jet-form-builder__submit:focus {
	flex: 1;
	order: 2;
	background: var(--v2-yellow);
	color: var(--v2-ink);
}

.gacct-v2 button.jet-form-builder__submit:hover {
	filter: brightness(0.96);
}

/* Alignement de la paire « Retour » / bouton d action.
   JetFormBuilder rend les deux boutons dans le MEME wrapper
   (.jet-form-builder__action-button-wrapper), mais ce wrapper ne porte pas
   toujours la classe ...__submit-wrap sur laquelle notre flex etait accroche :
   les boutons retombaient alors en ligne, cales sur la baseline du texte, d ou
   le decalage vertical. On vise donc le wrapper generique. On donne au passage
   aux boutons pleins une bordure transparente de meme epaisseur que celle du
   bouton « Retour », pour que les deux boites soient identiques quel que soit
   le box-sizing herite. */
.gacct-v2 .jet-form-builder__action-button-wrapper {
	display: flex;
	align-items: stretch;
	gap: 14px;
	margin-top: 26px;
}

.gacct-v2 button.jet-form-builder__next-page,
.gacct-v2 button.jet-form-builder__submit {
	border: 2px solid transparent;
}

.gacct-v2 .jet-form-builder__action-button-wrapper button {
	margin: 0;
	align-self: stretch;
}

/* ==========================================================================
   Étape 2 : lignes de prestation (template 196 dans les accordéons)
   ========================================================================== */

/* Ligne cochable : carte discrète, survol teal-soft, sélection marquée. */
.gacct-v2 .gacct-accordion__body .jet-form-builder__field-wrap {
	border-radius: 10px;
	padding: 12px 14px;
	transition: background 0.15s;
	cursor: pointer;
}

/* ⚠ La ligne de la carte « réparation » n'est PAS listée ici : c'est la carte
   entière qui se colore quand sa case est cochée (voir .gacct-v2-repair). */
.gacct-v2 .gacct-accordion__body .jet-form-builder__field-wrap:hover,
.gacct-v2 .gacct-accordion__body .jet-form-builder__field-wrap:has( input.checkradio-field:checked ) {
	background: var(--v2-teal-soft);
}

/* Nom, description, prix : typo de la maquette. */
.gacct-v2 .service-item-name .elementor-heading-title {
	font-weight: 700;
	font-size: 16.5px;
	color: var(--v2-ink);
}

.gacct-v2 .service-item-detail .elementor-heading-title {
	font-size: 14.5px;
	color: var(--v2-ink2);
	font-weight: 400;
}

/* Le prix ne se coupe JAMAIS (« 110 € » passait à la ligne : sa colonne
   Elementor est étroite). Taille/graisse : celles du listing — le JS écrit
   dans le span Woo intérieur pour ne pas les perdre. */
.gacct-v2 .service-item-price,
.gacct-v2 .service-item-price .elementor-heading-title {
	white-space: nowrap;
	flex-shrink: 0;
	width: auto;
}

/* Prix majoré par la bascule Biplace : couleur accent, MÊME taille. */
.gacct-v2 .service-item-price.gacct-v2-prix-biplace .elementor-heading-title,
.gacct-v2 .service-item-price.gacct-v2-prix-biplace .woocommerce-Price-amount {
	color: var(--v2-teal-dark) !important;
}

/* La description s'aligne sur le titre (elle partait 6 px trop à gauche
   dans le gabarit du listing 196). */
.gacct-v2 .gacct-accordion__body .service-item-detail .elementor-heading-title,
.gacct-v2 .gacct-v2-repair .service-item-detail .elementor-heading-title {
	display: block;
	margin-left: 6px;
}

/* Suspentes : nom/description, prix et stepper sur LA MÊME ligne. */
.gacct-v2 [data-gacct-accordion="suspentes_travaux"] .jet-form-builder__field-wrap {
	display: flex !important;
	align-items: center;
	gap: 14px;
}

.gacct-v2 [data-gacct-accordion="suspentes_travaux"] .jet-form-builder__field-wrap > .jet-form-builder__field-template {
	flex: 1;
	min-width: 0;
}

.gacct-v2 [data-gacct-accordion="suspentes_travaux"] .gacct-v2-qty {
	margin-top: 0;
}

/* Le prix du gabarit est calé en haut de sa colonne : tout le contenu du
   template s'aligne verticalement au centre, comme le stepper. */
.gacct-v2 [data-gacct-accordion="suspentes_travaux"] .jet-form-builder__field-template .e-con.e-parent,
.gacct-v2 [data-gacct-accordion="suspentes_travaux"] .jet-form-builder__field-template .e-con.e-parent > .e-con {
	align-items: center !important;
	align-content: center !important;
}

/* Cases : le visuel du widget check-mark est le ::before de son span (l'input
   est un calque invisible en opacity 0) — c'est LUI qu'on redessine. */
/* !important : la CSS générée du listing 196 (post-196.css, sélecteurs par
   widget à (0,4,1), chargée après nous) impose sa propre case 18px/radius 4. */
.gacct-v2 .jet-fb-check-mark span::before {
	content: "";
	display: block;
	width: 24px !important;
	height: 24px !important;
	box-sizing: border-box;
	border: 2px solid var(--gacct-border, #cfd8e0) !important;
	border-radius: 6px !important;
	background: #fff center / 15px no-repeat !important;
	transition: border-color 0.15s, background-color 0.15s;
}

.gacct-v2 .jet-fb-check-mark input:checked + span::before,
.gacct-v2 .jet-fb-check-mark input:checked ~ span::before {
	border-color: var(--v2-teal) !important;
	background-color: var(--v2-teal) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}

/* Révision et pliage = choix unique : la case prend la forme d'un bouton
   radio (rond, point central), en cohérence avec son comportement. */
.gacct-v2 [data-gacct-accordion="revisions_controle"] .jet-fb-check-mark span::before,
.gacct-v2 [data-gacct-accordion="pliages_secours"] .jet-fb-check-mark span::before {
	border-radius: 50% !important;
}

.gacct-v2 [data-gacct-accordion="revisions_controle"] .jet-fb-check-mark input:checked + span::before,
.gacct-v2 [data-gacct-accordion="pliages_secours"] .jet-fb-check-mark input:checked + span::before,
.gacct-v2 [data-gacct-accordion="revisions_controle"] .jet-fb-check-mark input:checked ~ span::before,
.gacct-v2 [data-gacct-accordion="pliages_secours"] .jet-fb-check-mark input:checked ~ span::before {
	background-color: #fff !important;
	background-image: radial-gradient(circle, var(--v2-teal) 0 5px, transparent 6px) !important;
}

/* ==========================================================================
   Étape 2 : bascule Solo/Biplace, quantités, carte devis
   ========================================================================== */

.gacct-v2-seg {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 14px 4px;
}

.gacct-v2-seg-label {
	font-weight: 700;
	font-size: 15px;
}

.gacct-v2-seg-btns {
	display: inline-flex;
	border: 2px solid var(--v2-line);
	border-radius: 99px;
	overflow: hidden;
}

.gacct-v2 button.gacct-v2-seg-btn,
.gacct-v2 button.gacct-v2-seg-btn:hover {
	background: #fff;
	border: 0 solid transparent;
	padding: 8px 16px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--v2-ink2);
	cursor: pointer;
	white-space: nowrap;
}

.gacct-v2 button.gacct-v2-seg-btn.is-sel,
.gacct-v2 button.gacct-v2-seg-btn.is-sel:hover {
	background: var(--v2-teal);
	color: #fff;
}

/* Stepper de quantité (suspentes cochées). */
.gacct-v2-qty {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
}

/* Centrage en flex + icône SVG : un « − » texte n'est jamais centré
   optiquement (baseline dépendante de la police, retour de recette). */
.gacct-v2 button.gacct-v2-qty-btn,
.gacct-v2 button.gacct-v2-qty-btn:hover,
.gacct-v2 button.gacct-v2-qty-btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 2px solid var(--v2-line);
	border-radius: 10px;
	background: #fff;
	color: var(--v2-ink);
	cursor: pointer;
	line-height: 1;
}

.gacct-v2 button.gacct-v2-qty-btn svg {
	display: block;
	flex-shrink: 0;
}

.gacct-v2 button.gacct-v2-qty-btn:hover {
	border-color: var(--v2-teal);
}

.gacct-v2-qty b {
	min-width: 18px;
	text-align: center;
	font-size: 17px;
}

/* Carte « Besoin d'une réparation ? ».
   Au repos elle est NEUTRE (filet gris) : bordée d'accent, elle avait l'air
   déjà sélectionnée. C'est la case cochée qui colore la carte ENTIÈRE. */
.gacct-v2-repair {
	border: 2px solid var(--v2-line);
	border-radius: 12px;
	padding: 18px 18px 8px;
	margin-top: 18px;
	background: #fff;
	transition: border-color 0.15s, background 0.15s;
}

.gacct-v2-repair:has( input.checkradio-field:checked ) {
	border-color: var(--v2-teal);
	background: var(--v2-teal-soft);
}

.gacct-v2-repair-titre {
	font-weight: 800;
	font-size: 18px;
	margin: 0 0 6px;
}

.gacct-v2-repair-desc {
	margin: 0 0 10px;
	font-size: 14.5px;
	color: var(--v2-ink2);
}

.gacct-v2-repair.is-dim {
	opacity: 0.45;
	pointer-events: none;
}

/* Accordéon suspentes verrouillé par le devis. */
.gacct-v2 .gacct-accordion__body.is-locked .jet-form-builder__field-wrap {
	opacity: 0.45;
	pointer-events: none;
}

.gacct-v2-repair-note {
	margin: 0 0 10px;
	padding: 10px 14px;
	background: var(--v2-teal-soft);
	border-radius: 8px;
	font-size: 14.5px;
	color: var(--v2-ink);
}

/* ==========================================================================
   Étape 3 : calendrier affiché en permanence (flatpickr inline) + retour
   ========================================================================== */

/* Les inputs du champ date sont masqués : le calendrier EST le contrôle. */
.gacct-v2 .jet-form-builder-row:has( input[name="date_intervention"] ) input.jet-form-builder__field,
.gacct-v2 .jet-form-builder-row:has( input[name="date_intervention"] ) input.form-control {
	display: none !important;
}

/* Calendrier étiré sur toute la carte, façon maquette. */
.gacct-v2 .flatpickr-calendar.inline {
	width: 100% !important;
	max-width: none;
	box-shadow: none;
	border: 1px solid var(--v2-line);
	border-radius: 12px;
	padding: 10px 12px 14px;
	margin-top: 6px;
}

.gacct-v2 .flatpickr-calendar.inline .flatpickr-months,
.gacct-v2 .flatpickr-calendar.inline .flatpickr-rContainer,
.gacct-v2 .flatpickr-calendar.inline .flatpickr-weekdays,
.gacct-v2 .flatpickr-calendar.inline .flatpickr-days {
	width: 100% !important;
	max-width: none !important;
}

.gacct-v2 .flatpickr-calendar.inline .dayContainer {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	justify-content: flex-start;
}

/* !important : le socle v1 fige les jours à 40px (max-width/height
   !important, pensé pour le popup) — l'inline pleine largeur doit gagner. */
.gacct-v2 .flatpickr-calendar.inline .flatpickr-day {
	flex: 0 0 13.5% !important;
	width: auto !important;
	max-width: none !important;
	height: 52px !important;
	line-height: 50px !important;
	margin: 3px 0 !important;
	border-radius: 10px !important;
	font-size: 15px !important;
}

/* Libellé du champ date : le calendrier se suffit (maquette). */
.gacct-v2 .jet-form-builder-row:has( input[name="date_intervention"] ) .jet-form-builder__label {
	display: none;
}

/* Légende : regroupée à gauche, comme la maquette. */
.gacct-v2 .flatpickr-calendar.inline .dp-legend {
	justify-content: flex-start !important;
	gap: 18px !important;
}

/* Options de retour : ce sont des radios — pastilles RONDES avec point. */
.gacct-v2 .jet-form-builder-row:has( input[data-field-name="frais_de_ports"] ) .jet-fb-check-mark span::before {
	border-radius: 50% !important;
}

.gacct-v2 .jet-form-builder-row:has( input[data-field-name="frais_de_ports"] ) .jet-fb-check-mark input:checked + span::before,
.gacct-v2 .jet-form-builder-row:has( input[data-field-name="frais_de_ports"] ) .jet-fb-check-mark input:checked ~ span::before {
	background-color: #fff !important;
	background-image: radial-gradient(circle, var(--v2-teal) 0 5px, transparent 6px) !important;
}

/* ==========================================================================
   Récapitulatif (étape 4, construit en JS)
   ========================================================================== */

.gacct-v2-recap {
	margin: 0 0 20px;
}

.gacct-v2-recap-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 0;
	border-bottom: 1px solid var(--v2-line);
}

.gacct-v2-recap-row:first-child {
	padding-top: 0;
}

.gacct-v2-r-label {
	flex: 0 0 110px;
	color: var(--v2-ink2);
	font-size: 15px;
}

.gacct-v2-r-body {
	flex: 1;
	min-width: 0;
}

.gacct-v2-r-body small {
	display: block;
	color: var(--v2-ink2);
	font-size: 14px;
}

/* (0,2,1) + border-style explicite : le kit Elementor pose `.elementor-kit-4 button`
   (0,2,0, fond jaune) et `button:hover { border-style: none }` — chargé après nous. */
.gacct-v2 button.gacct-v2-r-edit,
.gacct-v2 button.gacct-v2-r-edit:hover {
	background: none;
	border: 0 solid transparent;
	padding: 0;
	color: var(--v2-teal-dark);
	text-decoration: underline;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.gacct-v2-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--v2-teal-soft);
	border-radius: 12px;
	padding: 14px 18px;
	font-weight: 800;
	margin-top: 18px;
}

.gacct-v2-total--acompte {
	background: var(--gacct-warn-soft, #fff8e6);
	margin-top: 10px;
}

.gacct-v2-total-note {
	font-size: 14px;
	color: var(--v2-ink2);
	margin-top: 8px;
}

/* Total courant de l'étape 2 (sous les prestations). */
.gacct-v2-total--etape2 {
	margin-top: 18px;
}

/* ==========================================================================
   Neutralisation d'héritages du socle v1 (demande-intervention.css)
   ========================================================================== */

/* La v1 masque la row submit en mobile au profit de sa barre fixe ; la v2 n'a
   pas de barre fixe, son bouton « Envoyer la demande » doit rester visible. */
@media ( max-width: 781px ) {
	.gacct-v2 .jet-form-builder .jet-form-builder-row.field-type-submit-field {
		display: block;
	}
}

/* ==========================================================================
   Responsive (breakpoint unique de la maquette)
   ========================================================================== */

/* Gouttières mobiles : la colonne Elementor de la page 467 est à 0 de padding
   en mobile, les cartes du formulaire touchaient les bords de l'écran. */
@media (max-width: 767px) {
	.elementor-widget.gacct-v2 {
		padding-inline: 10px;
	}
}

@media (max-width: 520px) {
	.gacct-v2 .jet-form-builder {
		font-size: 16px;
	}

	.gacct-v2 .gacct-v2-step {
		padding: 20px 16px;
	}

	.gacct-v2 .gacct-v2-titre {
		font-size: 22px;
	}

	.gacct-v2 .gacct-v2-grille-2,
	.gacct-v2 .gacct-v2-grille-2--ou {
		grid-template-columns: 1fr;
	}

	/* Champs empilés : le « ou » prend sa propre ligne, centré, et ne compense
	   plus la marge des rows (il est entre deux champs, pas à côté). */
	.gacct-v2 .gacct-v2-ou {
		justify-self: center;
		margin: -6px 0 12px;
	}
}

/* Champs sellette / secours (08/09/2026) : masqués tant qu'aucun Contrôle
   complet Équipement ni pliage de secours n'est coché. La règle `.gacct-v2
   .jet-form-builder-row { display: … }` ci-dessus écrasait l'attribut
   `hidden` posé par demande-v2.js : on le rend prioritaire. */
.gacct-v2 .jet-form-builder-row[hidden],
.gacct-v2 .gacct-v2-equip-titre[hidden] {
	display: none !important;
}
.gacct-v2 .gacct-v2-equip-titre {
	margin: 18px 0 6px;
	font-weight: 800;
}

/* Bloc sellette / secours sous la carte cochée (08/09/2026). */
.gacct-v2 .gacct-v2-equip-bloc {
	margin: 6px 0 14px;
	padding: 0;
}
.gacct-v2 .gacct-v2-equip-groupe {
	margin-top: 10px;
	padding: 14px 16px 4px;
	border: 1.5px solid var(--v2-line);
	border-radius: 12px;
	background: #fff;
}
.gacct-v2 .gacct-v2-step--voile [hidden] {
	display: none !important;
}
.gacct-v2 .gacct-v2-equip-intro {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--v2-ink2);
}
.gacct-v2 .gacct-v2-equip-groupe[hidden] {
	display: none !important;
}
.gacct-v2 .gacct-v2-equip-titre {
	margin: 6px 0 8px;
	font-size: 15px;
	font-weight: 800;
	color: var(--v2-ink);
}
.gacct-v2 .gacct-v2-equip-grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 12px;
}
/* Sous-écrans de l'étape matériel (09/09/2026). */
.gacct-v2 .gacct-v2-mat-compteur {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--v2-teal);
}
.gacct-v2 .gacct-v2-mat-compteur[hidden],
.gacct-v2 .gacct-v2-mat-done[hidden] {
	display: none !important;
}
.gacct-v2 .gacct-v2-mat-done {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 16px;
}
.gacct-v2 .gacct-v2-mat-card {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--v2-teal-soft);
	border: 1.5px solid var(--v2-teal);
	border-radius: 12px;
	padding: 10px 14px;
}
.gacct-v2 .gacct-v2-mat-card .gacct-v2-c-infos small {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--v2-teal);
}
.gacct-v2 .gacct-v2-mat-card .gacct-v2-c-infos strong {
	display: block;
	font-size: 14px;
}
.gacct-v2 .gacct-v2-equip-bloc[hidden],
.gacct-v2 .gacct-v2-equip-groupe[hidden] {
	display: none !important;
}

/* Selecteur du secours (09/09/2026) : reprend le combo de la voile. */
.gacct-v2 .gacct-v2-secours-sel {
	margin: 0 0 12px;
}
.gacct-v2 .gacct-v2-secours-sel .gacct-v2-chosen {
	margin-bottom: 12px;
}
.gacct-v2 .gacct-v2-secours-sel .gacct-v2-notwrap {
	margin-bottom: 4px;
}
.gacct-v2 .gacct-v2-equip-grille .jet-form-builder-row[hidden] {
	display: none !important;
}
.gacct-v2 .gacct-v2-equip-grille select.gacct-v2-secours-taille {
	width: 100%;
	min-height: 46px;
	border: 1.5px solid var(--v2-line, #d7dde3);
	border-radius: 10px;
	padding: 0 12px;
	font: inherit;
	background: #fff;
}
.gacct-v2 .gacct-v2-equip-grille select.gacct-v2-secours-taille[hidden],
.gacct-v2 .gacct-v2-equip-grille input[hidden] {
	display: none !important;
}

.gacct-v2 .gacct-v2-equip-grille .jet-form-builder-row {
	margin-bottom: 12px;
}
@media (max-width: 600px) {
	.gacct-v2 .gacct-v2-equip-groupe {
		padding: 12px 12px 2px;
	}
	.gacct-v2 .gacct-v2-equip-grille {
		grid-template-columns: 1fr;
	}
}

/* Frais de retour (08/09/2026, retour Bastien) : espace entre la pastille et
   le libellé, prix centré verticalement sur le libellé. La pastille dessinée
   fait 24 px alors que le widget check-mark n'en réserve que 18. */
.gacct-v2 .jet-form-builder-row:has( input[data-field-name="frais_de_ports"] ) .jet-fb-check-mark {
	flex: 0 0 24px;
	width: 24px;
	margin-right: 12px;
}
.gacct-v2 .jet-form-builder-row:has( input[data-field-name="frais_de_ports"] ) .jet-fb-check-mark span {
	display: block;
	width: 24px;
	height: 24px;
}
.gacct-v2 .jet-form-builder-row:has( input[data-field-name="frais_de_ports"] ) .jet-form-builder__field-template .e-con.e-parent,
.gacct-v2 .jet-form-builder-row:has( input[data-field-name="frais_de_ports"] ) .jet-form-builder__field-template .e-con.e-parent > .e-con {
	align-items: center !important;
	align-content: center !important;
}
.gacct-v2 .jet-form-builder-row:has( input[data-field-name="frais_de_ports"] ) .service-item-price .elementor-heading-title,
.gacct-v2 .jet-form-builder-row:has( input[data-field-name="frais_de_ports"] ) .service-item-name .elementor-heading-title {
	margin: 0;
	line-height: 1.25;
}