/* ==================================================
   TUNNEL DE RÉSERVATION

   Ma sélection, identification, paiement,
   confirmation. Repris de la section 5 de la maquette.
================================================== */

/* Le tunnel s'affiche par un code court, donc dans un conteneur que
   WooCommerce insère lui-même : il n'est pas le premier enfant de <main>
   et échappe à la règle qui réserve la place du logo. Il la réserve donc
   lui-même — mesuré, le cercle mordait de 92 px sur la barre d'étapes. */
.tunnel {
    padding-top: calc(var(--v-logo-debord) + 24px);
    background: var(--v-fond-page);
}

.tunnel__titre {
    margin-bottom: 28px;
}

/* --------------------------------------------------
   LA BARRE D'ÉTAPES
-------------------------------------------------- */

.tunnel-etapes {
    margin: 0 0 32px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--v-bordure);
}

.tunnel-etapes ol {
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Le chevron entre deux étapes : il porte le sens de lecture, donc il
   s'étire pour occuper l'espace au lieu de laisser les quatre pastilles
   flotter. Discret : c'est un repère, pas un élément d'interface. */
.tunnel-etapes__fleche {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 16px;
    font-size: 0.6875rem;
    color: var(--v-gris-400);
}

.tunnel-etapes__etape {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    color: var(--v-texte-meta);
}

.tunnel-etapes__numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    font-size: 0.75rem;
    font-weight: 600;
}

.tunnel-etapes__etape.est-active {
    color: var(--v-texte-titre);
    font-weight: 600;
}

.tunnel-etapes__etape.est-active .tunnel-etapes__numero {
    background: var(--v-violet-700);
    border-color: var(--v-violet-700);
    color: var(--v-blanc);
}

/* Une étape franchie se rouvre : elle est cliquable, et se signale
   comme telle — la coche seule ne dit pas qu'on peut y retourner. */
.tunnel-etapes__etape.est-faite .tunnel-etapes__numero {
    background: var(--v-turquoise-100);
    border-color: var(--v-turquoise-500);
    color: var(--v-turquoise-700);
}

.tunnel-etapes__etape a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--v-turquoise-700);
    text-decoration: none;
}

.tunnel-etapes__etape a:hover .tunnel-etapes__libelle { text-decoration: underline; }

.tunnel-etapes__etape a:hover .tunnel-etapes__numero {
    background: var(--v-turquoise-500);
    color: var(--v-blanc);
}

/* --------------------------------------------------
   LES DEUX COLONNES
-------------------------------------------------- */

.tunnel__colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
}

/* --------------------------------------------------
   UNE LIGNE DE SÉLECTION
-------------------------------------------------- */

.tunnel-ligne {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 16px;
    margin-bottom: 12px;
    padding: 18px 44px 18px 18px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
}

/* Le bloc date prend la couleur de la famille — le même repère que
   partout ailleurs sur le site. */
.tunnel-ligne__date {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    width: 54px;
    height: 54px;
    border-radius: var(--v-radius-md);
    background: var(--cat, var(--v-turquoise-500));
    color: var(--cat-texte, var(--v-blanc));
}

.tunnel-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-family: var(--v-font-corps);
    line-height: 1.1;
}

.tunnel-date__jour { font-size: 1.125rem; font-weight: 600; }
.tunnel-date__mois { font-size: 0.5625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

.tunnel-ligne__famille {
    display: inline-block;
    margin: 0 0 6px;
    padding: 3px 10px;
    border-radius: var(--v-radius-pill);
    background: var(--cat, var(--v-violet-500));
    font-family: var(--v-font-corps);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cat-texte, var(--v-blanc));
}

.tunnel-ligne__titre {
    margin: 0 0 4px;
    font-family: var(--v-font-titre);
    font-size: 1rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.tunnel-ligne__titre a { color: inherit; text-decoration: none; }
.tunnel-ligne__titre a:hover { text-decoration: underline; }

.tunnel-ligne__meta {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

.tunnel-ligne__prix {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-family: var(--v-font-corps);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--v-texte-titre);
    white-space: nowrap;
}

.tunnel-ligne__acompte {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--v-texte-meta);
}

.tunnel-ligne__prix .quantity input {
    width: 64px;
    padding: 4px 6px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-sm);
    font-size: 0.8125rem;
    text-align: center;
}

/* La croix de retrait, au coin de la carte : discrète mais atteignable. */
.tunnel-ligne__retirer {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--v-gris-400);
    text-decoration: none;
}

.tunnel-ligne__retirer:hover { color: var(--v-urgence); }

.tunnel__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

/* Pendant l'envoi, la sélection s'estompe et cesse de répondre : sans ce
   signal, on croit que le changement de quantité n'a rien fait et on
   clique une seconde fois. */
.woocommerce-cart-form.est-en-cours {
    opacity: 0.5;
    pointer-events: none;
}

/* --------------------------------------------------
   LES CARTES DE L'IDENTIFICATION

   WooCommerce empile ses champs sans structure : on les enferme dans les
   cartes de la maquette et on reprend l'habillage des champs, qu'il pose
   lui-même avec ses propres classes.
-------------------------------------------------- */

.tunnel-carte {
    margin-bottom: 16px;
    padding: 22px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
}

.tunnel-carte__titre,
.tunnel-carte h3,
.tunnel-carte .woocommerce-billing-fields h3 {
    margin: 0 0 16px;
    font-family: var(--v-font-titre);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

/* Les champs sur deux colonnes, comme dans la maquette. */
.tunnel-carte .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.tunnel-carte .form-row {
    margin: 0;
    padding: 0;
}

/* Adresse, société, notes : ces champs-là tiennent la pleine largeur. */
.tunnel-carte .form-row-wide,
.tunnel-carte #billing_address_1_field,
.tunnel-carte #billing_address_2_field,
.tunnel-carte #billing_company_field,
.tunnel-carte #order_comments_field {
    grid-column: 1 / -1;
}

.tunnel-carte label {
    display: block;
    margin-bottom: 5px;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.tunnel-carte .required { color: var(--v-urgence); text-decoration: none; }

/* Le tableau des totaux et les moyens de paiement, dans la carte du bas. */
.tunnel-carte--paiement .shop_table {
    width: 100%;
    margin-bottom: 18px;
    border-collapse: collapse;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
}

.tunnel-carte--paiement .shop_table th,
.tunnel-carte--paiement .shop_table td {
    padding: 9px 0;
    border-bottom: 1px solid var(--v-bordure);
    text-align: left;
}

.tunnel-carte--paiement .shop_table td { text-align: right; }

.woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.woocommerce-checkout #payment ul.payment_methods li {
    padding: 12px 14px;
    background: var(--v-fond-page);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-md);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
}

.woocommerce-checkout #payment div.payment_box {
    margin: 10px 0 0;
    padding: 12px 14px;
    background: var(--v-fond-carte);
    border-radius: var(--v-radius-sm);
    font-size: 0.8125rem;
    color: var(--v-texte-meta);
}

.woocommerce-checkout #payment div.payment_box::before { content: none; }

/* Le bouton de commande vit dans la colonne de droite : celui que
   WooCommerce pose ici ferait doublon. */
.tunnel-carte--paiement .place-order { display: none; }

/* --------------------------------------------------
   LE RÉCAPITULATIF
-------------------------------------------------- */

.tunnel-recap {
    padding: 22px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
}

.tunnel-recap__lignes {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tunnel-recap__lignes li,
.tunnel-recap__tva,
.tunnel-recap__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
}

.tunnel-recap__tva {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--v-bordure);
    color: var(--v-texte-meta);
}

/* Le sous-total, quand une réduction s'applique : le prix avant remise,
   posé au-dessus d'elle. Il n'a pas le poids du total, qui vient après
   — c'est une étape du calcul, pas le montant qu'on retient. */
.tunnel-recap__sous-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 12px 0 0;
    font-size: 0.875rem;
    color: var(--v-texte-meta);
}

/* La réduction, entre le sous-total et le montant total.
   Elle suit la même mise en page — même axe, même gouttière — pour
   que les trois montants s'alignent à droite et se lisent d'une colonne.
   Le turquoise plutôt que le rouge : la charte n'a pas de vert, et ce
   qui est acquis au client s'y dit en turquoise. */
.tunnel-recap__remise {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 6px 0 0;
    color: var(--v-succes-texte);
}

.tunnel-recap__total {
    padding: 12px 0;
    font-size: 0.9375rem;
    color: var(--v-texte-titre);
}

/* Ce qu'on paie aujourd'hui est détaché du reste : c'est le seul montant
   qui sera débité maintenant, et la maquette le sort du tableau pour
   qu'on ne le confonde pas avec le total. */
.tunnel-recap__aujourdhui {
    margin: 4px 0 16px;
    padding: 14px 16px;
    background: var(--v-turquoise-100);
    border-radius: var(--v-radius-md);
}

.tunnel-recap__aujourdhui > p:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.tunnel-recap__aujourdhui strong { font-size: 1.25rem; }

.tunnel-recap__solde {
    margin: 6px 0 0;
    font-size: 0.71875rem;
    line-height: 1.5;
    color: var(--v-texte-meta);
}

.tunnel-recap__promo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

/* Le sélecteur porte le conteneur et le type, et non la seule classe.

   Le champ de code promo est un champ texte dans une page « woocommerce » :
   la règle générale des champs, plus bas, le rattrapait et lui rendait la
   forme des autres. Il était donc dessiné en rectangle arrondi au milieu
   d'une colonne de pastilles, sans que la règle écrite ici pour lui n'y
   change quoi que ce soit. */
.woocommerce .tunnel-recap__promo input[type="text"],
.tunnel-recap__promo input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-pill);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    color: var(--v-texte-corps);
}

.woocommerce .tunnel-recap__promo input[type="text"]:focus,
.tunnel-recap__promo input:focus {
    outline: none;
    border-color: var(--v-violet-500);
}

.tunnel-recap__promo .v-bouton {
    flex: 0 0 auto;
    padding: 0.55rem 1.1rem;
    font-size: 0.75rem;
}

/* Repli : si une extension remet le formulaire d'origine de WooCommerce,
   il ne doit au moins pas s'étaler hors du conteneur. */
.woocommerce-form-coupon-toggle,
.checkout_coupon {
    max-width: var(--v-contenu);
    margin: 0 auto 16px;
    padding: 0 28px;
}

.tunnel-recap__suite .checkout-button,
.tunnel-recap__suite .button {
    display: block;
    width: 100%;
    padding: 0.85rem 1.5rem;
    background: var(--v-violet-700);
    border: none;
    border-radius: var(--v-radius-pill);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v-blanc);
    text-align: center;
    text-decoration: none;
}

.tunnel-facture {
    margin: 16px 0 0;
    padding: 12px 14px;
    background: var(--v-fond-page);
    border-radius: var(--v-radius-sm);
}

.tunnel-facture p:last-child {
    margin: 0;
    font-size: 0.75rem;
    color: var(--v-texte-titre);
}

.tunnel-reassurances {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.71875rem;
    color: var(--v-texte-meta);
}

.tunnel-reassurances li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.tunnel-reassurances i { color: var(--v-turquoise-500); margin-top: 2px; }

/* --------------------------------------------------
   LES CHAMPS RENDUS PAR WOOCOMMERCE

   Adresse, pays, code postal : ces champs-là sont écrits
   par woocommerce_form_field(), avec ses classes à lui.
   On ne peut pas leur donner les nôtres, seulement les
   habiller là où ils passent.

   Les sélecteurs sont lourds — trois classes et deux
   éléments — parce qu'ils ont été écrits pour l'emporter
   sur la feuille de l'extension. Elle n'est plus chargée
   (voir css/include-styles.php) : ce ne sont plus des
   surcharges, ce sont les seules règles qui habillent ces
   champs. Les alléger reviendrait à les réécrire sans
   rien y gagner, et à les voir perdre le jour où
   l'extension reviendrait.
-------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="password"],
.woocommerce form input[type="number"] {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 11px 14px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-md);
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--v-texte-corps);
    box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce form input[type="text"]:focus,
.woocommerce form input[type="email"]:focus,
.woocommerce form input[type="tel"]:focus,
.woocommerce form input[type="password"]:focus {
    outline: none;
    border-color: var(--v-violet-500);
    box-shadow: none;
}

.woocommerce form .form-row label {
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

/* Le champ qui n'a pas passé la validation : le liseré le dit, la
   couleur du texte reste lisible. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
    border-color: var(--v-urgence);
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
    border-color: var(--v-turquoise-500);
}

/* Select2, que WooCommerce utilise pour les pays : il faut l'aligner
   sur les autres champs, sinon un seul détonne au milieu du formulaire. */
.woocommerce .select2-container .select2-selection--single {
    height: auto;
    padding: 6px 4px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-md);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 10px;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--v-texte-corps);
}

/* Le champ nombre de places, plus court que les autres. */
.woocommerce .quantity input.qty {
    width: 64px;
    padding: 8px 6px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-sm);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    text-align: center;
}

/* --------------------------------------------------
   LES BOUTONS RENDUS PAR WOOCOMMERCE

   Ceux que l'extension pose elle-même, sans passer par
   nos gabarits : « Ajouter un moyen de paiement », les
   actions d'une ligne de commande, les boutons glissés
   dans un message. Ils portent .button, pas .v-bouton,
   et on les habille partout où ils peuvent apparaître —
   panier, commande, compte — plutôt qu'au cas par cas.
-------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit {
    padding: 0.75rem 1.5rem;
    background: var(--v-action);
    border: none;
    border-radius: var(--v-radius-pill);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--v-texte-inverse);
    text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--v-action);
    opacity: 0.88;
    color: var(--v-texte-inverse);
}

/* Le bouton de passage à l'identification occupe toute la colonne.

   La classe .tunnel-recap__bouton est la nôtre : elle vaut quel que soit
   le conteneur, là où les sélecteurs bâtis sur les classes de
   WooCommerce dépendaient d'un enveloppement « woocommerce » qui n'est
   pas toujours là. Les deux autres restent pour les boutons que
   l'extension pose elle-même. */
.tunnel-recap__bouton,
.tunnel-recap__suite a.button,
.tunnel-recap__suite .checkout-button,
.tunnel-recap__suite .v-bouton {
    display: block;
    width: 100%;
    background: var(--v-violet-700);
    font-size: 0.875rem;
    text-align: center;
}

/* --------------------------------------------------
   LES MESSAGES DE WOOCOMMERCE

   Retrait d'une ligne, sélection mise à jour, code promo refusé,
   session complète : autant de messages qui arrivaient avec l'habillage
   d'origine — bandeau gris, filet bleu, bouton carré.
-------------------------------------------------- */

/* WooCommerce imprime ses messages AVANT le contenu, donc hors de notre
   conteneur : sans cela ils s'étalaient sur toute la largeur de l'écran,
   collés au bord. On leur donne la largeur du site. */
/* Les notifications s'impriment hors du tunnel, entre l'en-tête et lui.
   Sans fond, elles ouvraient une bande blanche au milieu du beige. Le
   fond est posé sur toute la zone de contenu plutôt que sur le bandeau
   lui-même : sa largeur est limitée au conteneur, un fond dessus
   laisserait deux marges blanches de part et d'autre. */
body.woocommerce-cart main,
body.woocommerce-checkout main {
    background: var(--v-fond-page);
}

.woocommerce-notices-wrapper {
    max-width: var(--v-contenu);
    margin: 0 auto;
    padding: calc(var(--v-logo-debord) + 24px) 28px 0;
}

.woocommerce-notices-wrapper:empty { padding: 0; }

/* Quand un message occupe le haut de page, c'est lui qui réserve la
   place du logo : le tunnel n'a plus à le faire deux fois.

   Frère général et non adjacent : WooCommerce imprime deux conteneurs de
   notifications, dont un vide, si bien que le tunnel n'est jamais le
   voisin immédiat du bandeau rempli. */
.woocommerce-notices-wrapper:not(:empty) ~ .tunnel,
.woocommerce-notices-wrapper:not(:empty) ~ .woocommerce .tunnel {
    padding-top: var(--v-section-y);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 20px;
    padding: 14px 18px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-md);
    background: var(--v-fond-carte);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--v-texte-corps);
    list-style: none;
}

/* Le liseré de gauche porte le sens : acquis, information, refus. */
.woocommerce-message { border-left: 4px solid var(--v-turquoise-500); }
.woocommerce-info    { border-left: 4px solid var(--v-violet-500); }
.woocommerce-error   { border-left: 4px solid var(--v-urgence); background: var(--v-urgence-fond); }

.woocommerce-error li { list-style: none; }

/* WooCommerce collait une icône en pseudo-élément — elle jurait avec le
   liseré et doublait le message. Sa feuille n'est plus chargée, donc
   l'icône ne vient plus ; la règle reste en garde-fou, pour le jour où
   une extension rechargerait cette feuille. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    content: none;
}

/* Le lien « Annuler ? » du retrait est un bouton chez WooCommerce : ici
   c'est une action secondaire, pas l'action principale de l'écran. */
.woocommerce-message .button,
.woocommerce-info .button {
    margin-left: auto;
    padding: 0.5rem 1.1rem;
    background: transparent;
    border: 1.25px solid var(--v-violet-500);
    color: var(--v-violet-500);
    font-size: 0.75rem;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
    background: var(--v-violet-500);
    color: var(--v-blanc);
    opacity: 1;
}

/* --------------------------------------------------
   SÉLECTION VIDE
-------------------------------------------------- */

.tunnel-vide {
    padding: 48px 24px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
    font-family: var(--v-font-corps);
    text-align: center;
}

.tunnel-vide__titre {
    margin: 0 0 6px;
    font-family: var(--v-font-titre);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.tunnel-vide__texte {
    margin: 0 0 20px;
    font-size: 0.875rem;
    color: var(--v-texte-meta);
}

.tunnel-vide .v-bouton + .v-bouton { margin-left: 10px; }

/* Le message d'origine de WooCommerce, si une extension le remet. */
.woocommerce .cart-empty,
.woocommerce .wc-empty-cart-message {
    margin: 0 0 18px;
    font-family: var(--v-font-titre);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

/* --------------------------------------------------
   ÉTAPES 2 ET 3 — CARTES ET RAPPELS
-------------------------------------------------- */

/* Les champs de WooCommerce en deux colonnes dans une carte. */
.tunnel-carte__champs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.tunnel-carte__champs .form-row { margin: 0; padding: 0; }
.tunnel-carte__champs .form-row-wide { grid-column: 1 / -1; }

.woocommerce .tunnel-carte__champs .form-row label {
    display: block;
    margin-bottom: 6px;
    line-height: 1.3;
}

.tunnel-carte__note {
    margin: 0 0 16px;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--v-texte-meta);
}

.tunnel-carte__note:last-child { margin-bottom: 0; }

/* Particulier ou organisation, assujettie ou non : trois pavés cliquables
   plutôt que trois petits ronds, parce que le choix commande la suite de
   la carte. */
.tunnel-type {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    border: none;
}

.tunnel-type__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-md);
    background: var(--v-fond-carte);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--v-texte-corps);
    cursor: pointer;
}

.tunnel-type__option:has(input:checked) {
    border-color: var(--v-violet-700);
    background: var(--v-turquoise-100);
    color: var(--v-texte-titre);
    font-weight: 600;
}

.tunnel-type__option input { flex: 0 0 auto; margin: 0; }

.tunnel-organisation { margin-bottom: 14px; }
.tunnel-organisation[hidden],
.tunnel-organisation [data-identifiant][hidden] { display: none; }

/* La mention RGPD, sous les cartes : elle se lit, elle ne se remplit pas. */
.tunnel__mention {
    margin: 4px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    line-height: 1.6;
    color: var(--v-texte-meta);
}

.tunnel__mention a { color: var(--v-violet-700); }

/* Étape 3 : ce qui a été saisi à l'étape précédente, en lecture seule.
   Le lien de correction est juste dessous — sans lui, la seule issue
   serait le bouton « précédent » du navigateur. */
.tunnel-rappel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 14px 20px;
    margin: 0;
}

.tunnel-rappel dt {
    margin-bottom: 3px;
    font-family: var(--v-font-corps);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v-texte-meta);
}

.tunnel-rappel dd {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--v-texte-titre);
}

.tunnel-rappel__retour {
    margin: 16px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    font-weight: 600;
}

.tunnel-rappel__retour a { color: var(--v-violet-700); text-decoration: none; }
.tunnel-rappel__retour a:hover { text-decoration: underline; }

.tunnel-societe__nom {
    margin: 0 0 6px;
    font-family: var(--v-font-titre);
    font-size: 1rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.tunnel-financements { background: var(--v-turquoise-100); border-color: var(--v-turquoise-500); }

.tunnel-financements__lien {
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-turquoise-700);
    text-decoration: none;
}

.tunnel-financements__lien:hover { text-decoration: underline; }

/* --------------------------------------------------
   ÉTAPE 4 — CONFIRMATION
-------------------------------------------------- */

.tunnel-confirmation {
    max-width: 760px;
    margin: 0 auto 20px;
    text-align: center;
}

/* La pastille de succès : la couleur dit l'issue avant la lecture. */
.tunnel-confirmation__pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--v-turquoise-100);
    font-size: 1.25rem;
    color: var(--v-turquoise-700);
}

.tunnel-confirmation--echec .tunnel-confirmation__pastille {
    background: var(--v-urgence-fond);
    color: var(--v-urgence);
}

.tunnel-confirmation__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 26px;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    color: var(--v-texte-meta);
}

/* Les quatre informations qu'on cherche en premier : quoi, pour qui,
   combien payé, combien reste. En colonnes plutôt qu'en phrases. */
.tunnel-confirmation__recap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 20px;
    margin: 0;
    padding: 22px 0;
    border-top: 1px solid var(--v-bordure);
    border-bottom: 1px solid var(--v-bordure);
    text-align: left;
}

.tunnel-confirmation__recap dt {
    margin-bottom: 6px;
    font-family: var(--v-font-corps);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v-texte-meta);
}

.tunnel-confirmation__recap dd {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--v-texte-corps);
}

.tunnel-confirmation__recap dd strong,
.tunnel-confirmation__recap dd span { display: block; }
.tunnel-confirmation__recap dd strong { color: var(--v-texte-titre); }
.tunnel-confirmation__recap dd span { color: var(--v-texte-meta); }

.tunnel-confirmation__boutons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 26px 0 0;
}

/* --------------------------------------------------
   RÉTRACTATION ET SUITE
-------------------------------------------------- */

.tunnel-retractation {
    max-width: 760px;
    margin: 0 auto 20px;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--v-texte-corps);
}

.tunnel-retractation p { margin: 0 0 12px; }
.tunnel-retractation p:last-child { margin-bottom: 0; }

.tunnel-retractation__precision {
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

.tunnel-retractation__lien {
    font-weight: 600;
    color: var(--v-violet-700);
    text-decoration: none;
}

.tunnel-retractation__lien:hover { text-decoration: underline; }

.tunnel-suite {
    max-width: 760px;
    margin: 32px auto 0;
}

.tunnel-suite h2 { margin: 0 0 20px; text-align: center; }

.tunnel-suite__etapes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    counter-reset: suite;
}

.tunnel-suite__etapes li {
    position: relative;
    list-style: none;
    padding: 20px 20px 20px 22px;
    background: var(--v-fond-carte);
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-lg);
}

/* Le numéro est porté par le compteur : la suite se renumérote toute
   seule si une étape est ajoutée ou retirée. */
.tunnel-suite__etapes li::before {
    counter-increment: suite;
    content: counter(suite);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--v-turquoise-100);
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--v-turquoise-700);
}

.tunnel-suite__etapes h3 {
    margin: 0 0 4px;
    font-family: var(--v-font-corps);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.tunnel-suite__etapes p {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--v-texte-meta);
}

/* --------------------------------------------------
   ADAPTATIONS
-------------------------------------------------- */

@media (max-width: 767px) {
    /* Les champs de facturation de WooCommerce restaient sur deux
       colonnes jusqu'au bout : « Code postal » et « Ville » à 155 px
       chacun, sur l'écran où l'on tape son adresse au pouce. C'est
       l'étape où l'on abandonne une commande, pas celle où l'on
       économise de la hauteur. */
    .tunnel-carte__champs,
    .tunnel-carte .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 991px) {
    .tunnel__colonnes { grid-template-columns: minmax(0, 1fr); }

    .tunnel-etapes ol { flex-wrap: wrap; gap: 10px 18px; }
    .tunnel-etapes__libelle { font-size: 0.8125rem; }
}

@media (max-width: 575px) {
    .tunnel-ligne {
        grid-template-columns: 44px minmax(0, 1fr);
        padding-right: 18px;
    }

    .tunnel-ligne__prix {
        grid-column: 2;
        align-items: flex-start;
    }

    /* Sur mobile, seul le numéro d'étape tient : les libellés déborderaient. */
    .tunnel-etapes__libelle { display: none; }
    .tunnel-etapes ol { justify-content: flex-start; gap: 12px; }
    .tunnel-etapes__fleche { flex: 0 0 auto; }
}

@media (max-width: 575px) {
    /* 48 px de marge pour annoncer un panier vide : le message tenait
       sur deux lignes au centre d'un cadre haut comme la moitié de
       l'écran. */
    .tunnel-vide {
        padding: 28px 20px;
    }
}

@media (max-width: 575px) {
    /* Les deux boutons du tunnel prennent la largeur, l'un sous
       l'autre. Côte à côte sur 350 px, « Continuer vers le paiement »
       se coupait en trois lignes dans une moitié d'écran — juste à
       côté d'un « Retour » de sept lettres qui, lui, avait la place. */
    .tunnel__actions > .v-bouton,
    .tunnel__actions > button {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* Le champ de code promo et son bouton : le champ garde la ligne,
       le bouton passe dessous. Partagés en deux, il ne restait pas la
       place d'y lire le code qu'on vient de taper — et c'est par là
       qu'entrent les codes offerts aux membres. */
    .tunnel-recap__promo input {
        flex: 1 1 100%;
        min-width: 0;
    }

    .tunnel-recap__promo button {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* --------------------------------------------------
   QUAND RECEVOIR LA FACTURE DE SOLDE

   Deux options empilées plutôt que côte à côte : leurs
   libellés sont des phrases, pas des étiquettes, et
   une grille de deux colonnes les couperait en trois
   lignes chacune sur un écran ordinaire.
-------------------------------------------------- */

.tunnel-moment {
    margin: 18px 0 0;
    padding: 0;
    border: none;
}

.tunnel-moment__titre {
    margin: 0 0 10px;
    padding: 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--v-texte-titre);
}

.tunnel-moment__option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 13px 16px;
    border: 1px solid var(--v-bordure);
    border-radius: var(--v-radius-md);
    background: var(--v-fond-carte);
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--v-texte-corps);
    cursor: pointer;
}

.tunnel-moment__option input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: var(--v-action);
}

.tunnel-moment__option:has(input:checked) {
    border-color: var(--v-turquoise-500);
    background: var(--v-turquoise-100);
}

/* L'exception, dite une fois : une inscription tardive est facturée
   tout de suite quoi qu'on ait coché. Mieux vaut l'annoncer que de
   laisser quelqu'un s'étonner de recevoir sa facture le lendemain. */
.tunnel-moment__aide {
    margin: 8px 0 0;
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--v-texte-meta);
}