/*
 * Tunnel de commande à deux paiements — habillage.
 *
 * Trois principes tiennent cette feuille :
 *
 * 1. La palette suit celle du thème (themes/id/scss/_variables.scss) partout où elle rejoint les
 *    tokens de la maquette Figma « Tunnel de Commande » — soit presque partout : le jaune signal
 *    #f4bf08 est déjà $bt-more, l'encre et le rouge sont à un cheveu. Aucune police n'est
 *    déclarée : les blocs héritent du Montserrat du thème, et les titres de son Noto Serif.
 *
 * 2. Tout est préfixé par « .id-tunnel », la classe de corps posée par id_tunnel_body_class()
 *    (plugins/id/woocommerce-cart.php). Hors tunnel, aucune règle ne s'applique.
 *
 * 3. Ce préfixe n'est pas qu'une garde : il est indispensable. Le thème remet à plat tout élément
 *    de .entry-content par des sélecteurs de type — « .entry-content div » impose display, marge
 *    et padding, « .entry-content ol li » son propre padding, « .page-single-article
 *    .entry-content h2 » sa police. Une classe seule perd contre eux ; deux les battent.
 *
 * Cette feuille est chargée par le plugin, sur les pages du tunnel uniquement, parce que le
 * pipeline SCSS du thème tourne sous webpack 4 sans node_modules installés. À replier dans
 * themes/id/scss/_ecommerce.scss lors du prochain build du thème.
 */

:root {
    --id-brand: #d22e26;         /* $color-highlight */
    --id-signal: #f4bf08;        /* $bt-more — identique au token de la maquette */
    --id-signal-soft: #fff6d7;
    --id-ink: #12181f;           /* $default-color */
    --id-ink-soft: #4a697b;
    --id-ink-faint: #b4c6d9;
    --id-rule: #e5e5e5;          /* $grey-border */
    --id-surface: #ffffff;
    --id-surface-soft: #f0f2f6;  /* $bg-lightgrey */
    --id-ok: #2ba65e;
    --id-ok-soft: #defbe0;
    --id-ok-ink: #008743;
    --id-radius: 5px;

    /*
     * Deux tokens propres aux champs de saisie. Le thème borde les siens d'encre pleine
     * (#12181f) : c'est net sur un formulaire isolé, brutal sur une caisse qui en aligne
     * quinze. L'encre douce garde le contraste d'une bordure lisible (6,4:1 sur blanc, là
     * où le gris des filets plafonne à 1,3:1) sans peser autant que le noir.
     */
    --id-field-border: #4a697b; /* = --id-ink-soft */
    --id-field-ring: rgba(244, 191, 8, 0.4); /* halo de focus, --id-signal à 40 % */
}

/*
 * WooCommerce pose ses propres variables sur « :root » et s'en sert pour border les champs,
 * signaler une erreur de validation et confirmer un champ valide. Les redéfinir sur le corps
 * du tunnel les remplace partout où WooCommerce les lit — y compris là où nous n'aurions pas
 * pensé à écrire une règle — et ne change rien hors tunnel.
 */
body.id-tunnel {
    --wc-red: var(--id-brand, #d22e26);
    --wc-green: var(--id-ok, #2ba65e);
    --wc-form-border-color: var(--id-field-border, #4a697b);
    --wc-form-border-radius: var(--id-radius, 5px);
    --wc-form-color-background: var(--id-surface, #ffffff);
}

/* ── Mise en page ───────────────────────────────────
 *
 * « .js .entry-content .woocommerce » est une rangée flex (_ecommerce.scss:3) dont la gouttière
 * ne vise que « > div, form ». Nos blocs annoncent l'étape en cours : ils tiennent la rangée
 * entière, sans quoi ils se rangent côte à côte au hasard de leur contenu.
 */

body.id-tunnel .entry-content .woocommerce > .id-steps,
body.id-tunnel .entry-content .woocommerce > .id-tunnel-step,
body.id-tunnel .entry-content .woocommerce > .woocommerce-order,
body.id-tunnel .entry-content .woocommerce > .woocommerce-notices-wrapper,
body.id-tunnel .entry-content .woocommerce > .woocommerce-form-login-toggle,
body.id-tunnel .entry-content .woocommerce > .woocommerce-form-coupon-toggle {
    flex: 0 0 100%;
    width: 100%;
}

/*
 * Les deux formulaires dépliables de la caisse — connexion et code promo — sont eux aussi des
 * enfants directs de la rangée flex, et sans base ils se rangent côte à côte. Le thème leur
 * donne « width: 100 % » en plus de la gouttière de 3 rem qu'il pose sur tout « form » : ils
 * débordaient donc de 6 rem à droite dès qu'on les dépliait. La carte remplace la gouttière,
 * comme pour le bandeau ci-dessous, et flex-basis en tient compte.
 *
 * Rien ici ne touche à « display » : le masquage vient d'un style en ligne posé par le
 * gabarit, que jQuery lève au dépliage.
 */
body.id-tunnel .entry-content .woocommerce > form.login,
body.id-tunnel .entry-content .woocommerce > form.checkout_coupon {
    flex: 0 0 calc(100% - 6rem);
    width: auto;
    margin: 0 3rem 1.5rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--id-rule, #e5e5e5);
    border-radius: var(--id-radius, 5px);
    background: var(--id-surface, #ffffff);
}

/* Un <ol> n'est ni div ni form : la gouttière du thème l'ignore. */
body.id-tunnel .entry-content .woocommerce > .id-steps {
    padding: 0 3rem;
}

/*
 * Le bandeau est une carte, pas un bloc de texte : sa marge remplace la gouttière du thème.
 * flex-basis ne compte pas les marges — une base de 100 % ferait déborder la carte de 6 rem
 * hors du conteneur, qui est déjà en marge négative.
 */
body.id-tunnel .entry-content .woocommerce > .id-tunnel-notice {
    flex: 0 0 calc(100% - 6rem);
    width: auto;
    padding: 0.875rem 1.125rem;
    margin: 0 3rem 1.5rem;
}

/*
 * Deux désalignements du thème, visibles sur l'étape 1 et corrigés dans le seul tunnel :
 * le bandeau « code promo » se réduit à son contenu, si bien que son filet s'arrête au milieu
 * de la page ; et le titre « Votre commande », simple bloc entre deux flottants, cale son texte
 * sur le bord du flottant de gauche au lieu de la colonne qu'il annonce.
 *
 * Les deux colonnes de l'étape 1. Le thème met « #order_review » à 33 % flottant à droite mais
 * laisse le bloc des adresses en pleine largeur : comme un flottant ne remonte jamais au-dessus
 * de sa position dans le document, le récapitulatif et le paiement tombaient *sous* les champs,
 * dans une colonne étroite, avec les deux tiers de la page vides à leur gauche. Faire flotter le
 * bloc des adresses les remet côte à côte — les adresses à gauche, le récapitulatif à droite,
 * comme sur la maquette — sans toucher au gabarit.
 *
 * Le retrait de 3 rem passe du padding du thème (des deux côtés, ce qui décalait le
 * récapitulatif du bord de la colonne) à la seule gouttière entre les deux colonnes.
 */
body.id-tunnel .entry-content form.checkout > #customer_details {
    float: left;
    width: 62%;
    padding: 0;
}

body.id-tunnel .entry-content form.checkout > #order_review_heading,
body.id-tunnel .entry-content form.checkout > #order_review {
    float: right;
    width: 38%;
    /* En longhand : le padding vertical du titre appartient à sa règle de typographie. */
    padding-right: 0;
    padding-left: 3rem;
}

/*
 * Même chose sur le panier vide : le message se réduit à son texte, si bien que son filet
 * s'arrête au milieu de la page, et son retrait gauche le décale d'une gouttière.
 */
body.id-tunnel .entry-content .woocommerce > .wc-empty-cart-message {
    flex: 0 0 100%;
    width: 100%;
}

body.id-tunnel .entry-content .wc-empty-cart-message > .cart-empty {
    padding: 1rem 0 2rem;
}

/* Paiement 2 : le gabarit réutilise #order_review, qui vaut 33 % sur le checkout. Ici, la page
   entière lui revient, recomposée en deux colonnes comme l'étape 1. */
body.id-tunnel--pay #order_review {
    float: none;
    width: 100%;
}

.id-tunnel .id-paycols {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    padding: 0;
}

.id-tunnel .id-paycols__main,
.id-tunnel .id-paycols__side {
    padding: 0;
}

/*
 * Le thème donne 3,25 rem sous tout tableau boutique ; le panier gelé n'en a pas besoin. La marge
 * lui vient désormais de l'habillage des récapitulatifs, plus bas, qui traite les tableaux des
 * deux paiements ensemble.
 */

/*
 * Le bouton de paiement de cet écran est traité avec celui de la caisse, plus bas — les deux
 * portent le même jaune, sous « body.id-tunnel ».
 */

/* ── Puces ─────────────────────────────────────────── */

.id-tunnel .id-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 5px 8px;
    border: 1px solid var(--id-signal, #f4bf08);
    border-radius: 4px;
    background: var(--id-signal-soft, #fff6d7);
    color: #8a6a00;
    white-space: nowrap;
}

.id-tunnel .id-chip--done,
.id-tunnel .id-chip--state.id-chip--done {
    border-color: var(--id-ok, #2ba65e);
    background: var(--id-ok-soft, #defbe0);
    color: var(--id-ok-ink, #008743);
}

.id-tunnel .id-chip--todo {
    border-color: var(--id-signal, #f4bf08);
    background: var(--id-signal-soft, #fff6d7);
    color: #8a6a00;
}

/* L'étape encore à venir ne mérite pas la couleur du signal : elle attend son tour. */
.id-tunnel .id-steps__item--todo .id-chip {
    border-color: var(--id-rule, #e5e5e5);
    background: var(--id-surface-soft, #f0f2f6);
    color: var(--id-ink-soft, #4a697b);
}

/* Dans un récapitulatif, la puce du paiement n'est qu'un repère : l'état porte la couleur. */
.id-tunnel .id-recap__head .id-chip--pay1,
.id-tunnel .id-recap__head .id-chip--pay2 {
    border-color: var(--id-rule, #e5e5e5);
    background: var(--id-surface-soft, #f0f2f6);
    color: var(--id-ink-soft, #4a697b);
}

/* ── Bandeaux ──────────────────────────────────────── */

.id-tunnel .id-tunnel-notice {
    border-left: 3px solid var(--id-signal, #f4bf08);
    background: var(--id-signal-soft, #fff6d7);
    border-radius: 0 var(--id-radius, 5px) var(--id-radius, 5px) 0;
    padding: 0.875rem 1.125rem;
    margin: 0 0 1.5rem;
}

.id-tunnel .id-tunnel-notice__title {
    margin: 0 0 0.25rem;
    padding: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--id-ink, #12181f);
}

.id-tunnel .id-tunnel-notice__body {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--id-ink-soft, #4a697b);
}

/*
 * Les boutons du thème sont flottants à droite : sans contexte de formatage, le bouton s'échappe
 * du bandeau et déborde sous son fond. flow-root le réintègre sans toucher à son alignement.
 */
.id-tunnel .id-tunnel-notice__actions {
    display: flow-root;
    margin: 0.75rem 0 0;
    padding: 0;
}

.id-tunnel .id-tunnel-notice--resume {
    border-left-color: var(--id-brand, #d22e26);
    background: #fdecec;
}

/* ── Fil d'ariane ──────────────────────────────────── */

.id-tunnel .id-steps {
    display: flex;
    gap: 0.75rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.id-tunnel .id-steps__item {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: start;
    gap: 0.375rem 0.5rem;
    margin: 0;
    padding: 0.75rem 0.75rem 0 0;
    border-top: 3px solid var(--id-ink-faint, #b4c6d9);
    list-style: none;
}

.id-tunnel .id-steps__item::before,
.id-tunnel .id-steps__item::marker {
    content: none;
}

.id-tunnel .id-steps__item--done {
    border-top-color: var(--id-ink, #12181f);
}

.id-tunnel .id-steps__item--current {
    border-top-color: var(--id-signal, #f4bf08);
}

.id-tunnel .id-steps__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    background: var(--id-ink-faint, #b4c6d9);
    color: #ffffff;
}

.id-tunnel .id-steps__item--done .id-steps__marker {
    background: var(--id-ink, #12181f);
}

.id-tunnel .id-steps__item--current .id-steps__marker {
    background: var(--id-signal, #f4bf08);
    color: var(--id-ink, #12181f);
}

.id-tunnel .id-steps__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    color: var(--id-ink-soft, #4a697b);
}

.id-tunnel .id-steps__item--todo .id-steps__label {
    color: var(--id-ink-faint, #b4c6d9);
}

/* La puce passe à la ligne, alignée sur la pastille. */
.id-tunnel .id-steps .id-chip {
    grid-column: 1 / -1;
    justify-self: start;
}

/* ── Panier scindé ─────────────────────────────────── */

/*
 * Le thème peint tout <th> de tableau boutique en noir sur blanc, par
 * « .js .woocommerce-cart .woocommerce table.shop_table th » — quatre classes et deux types.
 * Et comme la cellule est aussi la dernière de sa ligne, « …table.shop_table tr th:last-child »
 * l'aligne à droite — une pseudo-classe compte comme une classe, ce qui met ce sélecteur à cinq
 * lui aussi. L'en-tête de groupe n'est pas un en-tête de colonne mais un intertitre : il lui
 * faut donc six classes pour reprendre l'encre du thème, sur fond clair et aligné à gauche.
 */
.id-tunnel .entry-content .id-cart.id-cart--split .id-cart__grouphead th.id-cart__grouphead-cell {
    background: var(--id-surface, #ffffff);
    color: var(--id-ink, #12181f);
    /* 70 px : la colonne « supprimer » du thème, pour aligner l'intertitre sur les produits. */
    padding: 1.25rem 0 0.625rem 70px;
    border-bottom: 1px solid var(--id-rule, #e5e5e5);
    text-align: left;
    text-transform: none;
    font-size: 1rem;
    font-weight: 600;
}

.id-tunnel .id-cart--split .id-cart__grouptitle {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--id-ink, #12181f);
    margin-right: 0.625rem;
}

/* ── Récapitulatif par paiement ────────────────────── */

.id-tunnel .id-paysplit {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0 0 1.125rem;
    padding: 0;
}

.id-tunnel .id-paysplit__block {
    border: 1px solid var(--id-rule, #e5e5e5);
    border-radius: var(--id-radius, 5px);
    padding: 0.75rem 0.875rem;
    margin: 0;
    background: var(--id-surface, #ffffff);
}

.id-tunnel .id-paysplit__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 0.375rem;
    padding: 0;
}

.id-tunnel .id-paysplit__title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--id-ink, #12181f);
}

.id-tunnel .id-paysplit__count {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 0.75rem;
    color: var(--id-ink-soft, #4a697b);
    font-variant-numeric: tabular-nums;
}

.id-tunnel .id-paysplit__line {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    padding: 0.3125rem 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--id-ink-soft, #4a697b);
    font-variant-numeric: tabular-nums;
}

.id-tunnel .id-paysplit__line--total {
    border-top: 1px solid var(--id-rule, #e5e5e5);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--id-ink, #12181f);
}

/* ── Écrans du tunnel ──────────────────────────────── */

.id-tunnel .id-tunnel-step {
    max-width: 44rem;
    margin: 0 auto 2rem;
    text-align: center;
}

/*
 * La page porte déjà son <h1> : ce titre est celui de l'étape, il se range dessous. La famille
 * vient du thème — Noto Serif comme tous ses h2 — seule l'échelle est reprise ici, et il faut
 * trois classes pour battre « .page-single-article .entry-content h2 ».
 */
.id-tunnel .entry-content .id-tunnel-step__title {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    padding: 0 0 0.5rem;
    color: var(--id-ink, #12181f);
}

.id-tunnel .id-tunnel-step__lead {
    margin: 0;
    padding: 0 0 1.75rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--id-ink-soft, #4a697b);
}

.id-tunnel .id-tunnel-step__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 1.5rem 0 0.75rem;
}

.id-tunnel .id-tunnel-step__note {
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--id-ink-soft, #4a697b);
}

/*
 * Les boutons du thème sont noirs, posés par « .js .woocommerce-page .main a.button » — trois
 * classes et un type. Il faut donc quatre classes ici pour porter le jaune de la maquette, qui
 * est aussi celui des CTA du site, et cinq pour tenir face au survol de « .no-touch ».
 */
.id-tunnel .entry-content .id-tunnel-step a.button--primary {
    background: var(--id-signal, #f4bf08);
    border-color: var(--id-signal, #f4bf08);
    color: var(--id-ink, #12181f);
    font-weight: 600;
}

.no-touch .id-tunnel .entry-content .id-tunnel-step a.button--primary:hover,
.no-touch .id-tunnel .entry-content .id-tunnel-step a.button--primary:focus {
    background: #dcae07;
    border-color: #dcae07;
    color: var(--id-ink, #12181f);
}

.id-tunnel .entry-content .id-tunnel-step a.button--ghost {
    background: transparent;
    border-color: var(--id-ink, #12181f);
    color: var(--id-ink, #12181f);
}

.no-touch .id-tunnel .entry-content .id-tunnel-step a.button--ghost:hover,
.no-touch .id-tunnel .entry-content .id-tunnel-step a.button--ghost:focus {
    background: var(--id-ink, #12181f);
    color: #ffffff;
}

/* Paiement 2 est une page de travail : elle s'aligne sur le contenu, pas sur un axe central. */
.id-tunnel .id-tunnel-step--pay2 {
    max-width: none;
    margin: 0 0 1rem;
    text-align: left;
}

.id-tunnel .id-tunnel-step--pay2 .id-tunnel-step__lead {
    padding-bottom: 0;
}

/*
 * « Votre abonnement est réglé. » se lisait comme le reste du texte courant — trop discret
 * pour une confirmation de paiement remontée en recette (DP-717). Repris en petit bandeau de
 * succès, sur les couleurs déjà posées pour les puces « Réglé » (--id-ok*), plutôt qu'une
 * nouvelle palette.
 */
.id-tunnel .id-tunnel-step--pay2 .id-tunnel-step__lead {
    display: inline-block;
    padding: 0.625rem 1rem;
    font-weight: 600;
    color: var(--id-ok-ink, #008743);
    background: var(--id-ok-soft, #defbe0);
    border-radius: 0.5rem;
}

/* La confirmation ne demande plus rien : ses deux commandes se lisent côte à côte. */
.id-tunnel .id-tunnel-step--confirmation {
    max-width: 56rem;
}

/* ── Récapitulatifs de commande ────────────────────── */

.id-tunnel .id-recaps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    text-align: left;
}

.id-tunnel .id-tunnel-step--confirmation .id-recaps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.id-tunnel .id-recap {
    text-align: left;
    border: 1px solid var(--id-rule, #e5e5e5);
    border-radius: var(--id-radius, 5px);
    padding: 1rem 1.125rem;
    margin: 0;
    background: var(--id-surface, #ffffff);
}

.id-tunnel .id-recap--todo {
    background: var(--id-signal-soft, #fff6d7);
    border-color: var(--id-signal, #f4bf08);
}

.id-tunnel .id-recap__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 0.75rem;
    padding: 0 0 0.625rem;
    border-bottom: 1px solid var(--id-rule, #e5e5e5);
}

.id-tunnel .id-recap__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--id-ink, #12181f);
}

.id-tunnel .id-recap__lines {
    list-style: none;
    margin: 0;
    padding: 0;
}

.id-tunnel .id-recap__line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--id-ink, #12181f);
    list-style: none;
}

.id-tunnel .id-recap__line::before,
.id-tunnel .id-recap__line::marker {
    content: none;
}

.id-tunnel .id-recap__line--shipping {
    color: var(--id-ink-soft, #4a697b);
}

.id-tunnel .id-recap__line--total {
    border-top: 1px solid var(--id-rule, #e5e5e5);
    margin-top: 0.375rem;
    padding-top: 0.625rem;
    font-weight: 600;
}

.id-tunnel .id-recap__amount {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.id-tunnel .id-recap__qty {
    color: var(--id-ink-soft, #4a697b);
    font-size: 0.8125rem;
}

/*
 * Détail de ligne (accès numérique, n° et date de parution…) : wc_display_item_meta() rend un
 * <ul class="id-recap__item-meta">, repris ici comme du texte courant, pas comme une liste.
 */
.id-tunnel .id-recap__item-meta {
    display: block;
    list-style: none;
    margin: 0.1875rem 0 0;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--id-ink-soft, #4a697b);
}

.id-tunnel .id-recap__item-meta li {
    display: block;
    margin: 0;
    padding: 0;
}

/*
 * Totaux détaillés (get_order_item_totals()) : mêmes lignes que l'ancien tableau WooCommerce et
 * que checkout/form-pay.php — sous-total, port, taxe(s) par taux, puis le total, qui reprend la
 * mise en avant déjà posée pour --line--total.
 */
.id-tunnel .id-recap__totals {
    list-style: none;
    margin: 0;
    padding: 0;
}

.id-tunnel .id-recap__line-note {
    margin: 0.625rem 0 0;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--id-ink-soft, #4a697b);
}

.id-tunnel .id-recap__address {
    margin: 0.875rem 0 0;
}

.id-tunnel .id-recap__meta {
    margin: 0.75rem 0 0;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--id-ink-soft, #4a697b);
}

/* ── Paiement 2 ────────────────────────────────────── */

.id-tunnel .id-paytable__edit {
    margin: 0;
    padding: 0 0 1.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.id-tunnel .id-payaddress {
    border: 1px solid var(--id-rule, #e5e5e5);
    border-radius: var(--id-radius, 5px);
    padding: 0.875rem 1rem;
    margin: 0 0 1.5rem;
    background: var(--id-surface-soft, #f0f2f6);
}

.id-tunnel .id-payaddress__head {
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--id-ink-soft, #4a697b);
}

.id-tunnel .id-payaddress address {
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
    color: var(--id-ink, #12181f);
}

.id-tunnel .id-payaddress__note {
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--id-ink-soft, #4a697b);
}

/* ── Étape 1 : la caisse WooCommerce ───────────────
 *
 * L'étape 1 n'a ni gabarit ni balisage à nous : c'est la caisse native, à laquelle le plugin
 * n'ajoute qu'un fil d'ariane et deux libellés. Tout ce qui suit est donc de l'habillage pur, et
 * chaque règle doit passer devant trois feuilles empilées — woocommerce.css, celle du thème, et
 * ce que WooCommerce Subscriptions et Stripe posent par-dessus. Les sélecteurs sont longs pour
 * cette seule raison : ils comptent des classes, ils ne décrivent pas une arborescence.
 *
 * Rien ici n'entre dans l'élément Stripe lui-même (« .wc-stripe-upe-element ») : son intérieur
 * est une iframe, stylée par Stripe, hors de portée d'une feuille de style et hors périmètre.
 *
 * Un mot sur le préfixe. « body.id-tunnel » couvre aussi le panier et, quand un paiement 2
 * attend, l'espace client — deux pages qui portent des morceaux du tunnel sans en être des
 * écrans. Leurs formulaires (calculateur de frais de port, adresses du compte) n'ont pas à
 * changer d'allure selon qu'une commande traîne ou non. Tout ce qui touche à un champ porte
 * donc « body.id-tunnel.woocommerce-checkout » : la caisse et l'écran de paiement 2, rien
 * d'autre. Ce qui est commun au tunnel — bandeaux, récapitulatifs — garde le préfixe simple.
 */

/* ── Bandeaux de la caisse ─────────────────────────
 *
 * Le thème réduit les notices WooCommerce à un filet supérieur et supprime leur icône ; il en
 * reste un texte flottant, sans bord ni fond, que rien ne rattache au reste. On leur donne la
 * forme du bandeau du tunnel — filet à gauche, fond tenu, coins adoucis — en gardant le jaune
 * signal pour le seul « .id-tunnel-notice » : sur la caisse, « Déjà client ? » et « Vous avez un
 * code promo ? » sont deux commodités, pas l'information qui fait l'écran. Elles restent grises ;
 * la couleur est réservée à ce qui l'appelle vraiment, l'erreur et la confirmation.
 */

body.id-tunnel .entry-content .woocommerce-info,
body.id-tunnel .entry-content .woocommerce-message,
body.id-tunnel .entry-content .woocommerce-error {
    border: 0;
    border-left: 3px solid var(--id-ink-faint, #b4c6d9);
    border-radius: 0 var(--id-radius, 5px) var(--id-radius, 5px) 0;
    background: var(--id-surface-soft, #f0f2f6);
    color: var(--id-ink, #12181f);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1.5rem;
    padding: 0.875rem 1.125rem;
    list-style: none;
}

body.id-tunnel .entry-content .woocommerce-message {
    border-left-color: var(--id-ok, #2ba65e);
    background: var(--id-ok-soft, #defbe0);
}

body.id-tunnel .entry-content .woocommerce-error {
    border-left-color: var(--id-brand, #d22e26);
    background: #fdecec;
}

/*
 * Les erreurs de validation reviennent en AJAX dans un « .woocommerce-NoticeGroup » glissé en
 * tête du formulaire, que le thème décale de 3 rem — la gouttière que le formulaire porte déjà.
 * Une classe de plus la lui reprend, sans quoi l'erreur s'affiche en retrait de tout le reste.
 */
body.id-tunnel .entry-content .woocommerce-NoticeGroup .woocommerce-error {
    margin: 0 0 1.5rem;
}

/*
 * Chaque message y est un élément de liste, que le thème peint en rose vif avec un padding en
 * « !important » — d'où le « !important » ici, qui ne sert qu'à défaire l'autre : le fond
 * appartient au bandeau, les lignes n'en portent pas. (Le second, et dernier, est sur la largeur
 * du champ de quantité du panier, pour la même raison.)
 */
body.id-tunnel .entry-content .woocommerce-error li {
    background: none;
    color: var(--id-ink, #12181f);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
    padding: 0.125rem 0 !important;
    list-style: none;
}

body.id-tunnel .entry-content .woocommerce-error li::before,
body.id-tunnel .entry-content .woocommerce-error li::marker {
    content: none;
}

/*
 * Deux notices distinctes (champ requis, produit indisponible…) s'affichaient collées l'une à
 * l'autre, sans le moindre repère entre les deux — illisible sur petit écran, où l'œil n'a pas
 * la largeur d'une page pour les distinguer (DP-717, #3224883262). Marge et filet suffisent :
 * ni l'un ni l'autre ne touche au padding, pas la peine de rouvrir son « !important ».
 */
body.id-tunnel .entry-content .woocommerce-error li + li {
    margin-top: 0.625rem;
    border-top: 1px solid rgba(18, 24, 31, 0.08);
}

/* Le lien d'une notice est son action : il porte la couleur de la marque. */
body.id-tunnel .entry-content .woocommerce-info a,
body.id-tunnel .entry-content .woocommerce-message a {
    color: var(--id-brand, #d22e26);
    font-weight: 600;
}

/* ── Titres de section ─────────────────────────────
 *
 * Le thème donne 1,625 rem à tout h3 de contenu : c'est l'échelle d'un titre d'article, pas
 * celle des quatre intertitres qui découpent un formulaire. On les ramène sous le titre d'étape
 * (1,375 rem), avec le filet des cartes du tunnel.
 */
body.id-tunnel .entry-content form.checkout h3 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 1.125rem;
    padding: 0 0 0.625rem;
    border-bottom: 1px solid var(--id-rule, #e5e5e5);
    color: var(--id-ink, #12181f);
}

/* Le titre du récapitulatif garde la gouttière que lui donne sa colonne. */
body.id-tunnel .entry-content form.checkout > #order_review_heading {
    padding-top: 0;
    padding-bottom: 0.625rem;
}

/* « Expédier à une adresse différente ? » est un titre qui porte une case : pas de filet. */
body.id-tunnel .entry-content form.checkout h3#ship-to-different-address {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0.75rem;
}

body.id-tunnel .entry-content form.checkout h3#ship-to-different-address label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

/* Le bloc de livraison respire quand il vient après celui de facturation. */
body.id-tunnel .entry-content form.checkout .woocommerce-shipping-fields,
body.id-tunnel .entry-content form.checkout .woocommerce-additional-fields {
    padding: 1.5rem 0 0;
}

/*
 * Le thème donne 1 rem de retrait bas à tout div de contenu. La caisse en empile quatre — la
 * colonne, le bloc de champs, son enveloppe, l'adresse de livraison — soit 4 rem de blanc qui
 * ne veulent rien dire. L'espacement d'un formulaire vient de ses rangées, pas de ses boîtes.
 */
body.id-tunnel .entry-content form.checkout .col2-set,
body.id-tunnel .entry-content form.checkout .col-1,
body.id-tunnel .entry-content form.checkout .col-2,
body.id-tunnel .entry-content form.checkout .woocommerce-billing-fields,
body.id-tunnel .entry-content form.checkout .woocommerce-account-fields,
body.id-tunnel .entry-content form.checkout .shipping_address,
body.id-tunnel .entry-content form.checkout .woocommerce-billing-fields__field-wrapper,
body.id-tunnel .entry-content form.checkout .woocommerce-shipping-fields__field-wrapper,
body.id-tunnel .entry-content form.checkout .woocommerce-additional-fields__field-wrapper {
    padding: 0;
}

/* ── Champs ────────────────────────────────────────
 *
 * Trois feuilles se disputent chaque champ : WooCommerce pose la bordure et le rayon par ses
 * variables, le thème impose l'encre pleine et une hauteur de 2,5 rem, et rien ne dessine l'état
 * de focus — le thème va jusqu'à écrire « outline: 0 ». On reprend l'ensemble : bordure d'encre
 * douce, rayon du tunnel, 2,75 rem de hauteur (44 px, la cible tactile confortable), et un halo
 * jaune au focus, qui manquait.
 *
 * La taille de police ne descend pas sous 1 rem : en dessous de 16 px, Safari iOS zoome sur le
 * champ actif et l'écran se déplace sous le doigt.
 */

body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row .input-text,
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row select,
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row textarea {
    /* background-color et non background : la flèche du select est une image de fond. */
    background-color: var(--id-surface, #ffffff);
    border: 1px solid var(--id-field-border, #4a697b);
    border-radius: var(--id-radius, 5px);
    box-shadow: none;
    color: var(--id-ink, #12181f);
    font-size: 1rem;
    line-height: 1.4;
    padding: 0.625rem 0.875rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row input.input-text,
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row select {
    height: 2.75rem;
}

/*
 * La flèche d'une liste déroulante est une image de fond posée à droite : le texte doit s'arrêter
 * avant elle. WooCommerce réservait 3 em, que le padding uniforme ci-dessus vient d'effacer — un
 * nom de pays long passerait sous la flèche.
 */
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row select {
    padding-right: 2.5rem;
}

body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row textarea {
    height: auto;
    min-height: 6.5rem;
}

body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row .input-text:focus,
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row select:focus,
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row textarea:focus {
    border-color: var(--id-ink, #12181f);
    box-shadow: 0 0 0 3px var(--id-field-ring, rgba(244, 191, 8, 0.4));
    /* Transparent ici, visible en contraste forcé, où l'ombre ne s'affiche pas. */
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/*
 * Le thème peint le texte indicatif de la même encre que la valeur saisie : on ne distingue plus
 * un champ rempli d'un champ vide. Deux règles, jamais groupées — un navigateur qui ne connaît
 * pas un de ces pseudo-éléments jette la règle entière.
 */
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row .input-text::placeholder,
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row textarea::placeholder {
    color: var(--id-ink-soft, #4a697b);
    opacity: 1;
}

body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row .input-text::-webkit-input-placeholder,
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row textarea::-webkit-input-placeholder {
    color: var(--id-ink-soft, #4a697b);
    opacity: 1;
}

/*
 * WooCommerce serre ses rangées à 3 px de padding et 6 px de marge ; le thème, lui, pousse tout
 * bloc de contenu à 1 rem de padding bas. Ni l'un ni l'autre ne donne un formulaire lisible :
 * la rangée ne porte plus que sa marge basse.
 */
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row {
    margin: 0 0 1rem;
    padding: 0;
}

/*
 * Deux exceptions écartées : l'étiquette réservée aux lecteurs d'écran, qui doit rester hors
 * champ, et celle d'une case à cocher, qui se range à côté de sa case — elles sont traitées
 * plus bas, et sans ces exclusions cette règle-ci, plus forte, les rattraperait.
 *
 * Chaque « :not() » pèse autant qu'une classe : avec cinq classes et trois exclusions, ce
 * sélecteur en compte huit, plus que la règle du libellé refusé qui n'en a que sept. La couleur
 * est donc sortie d'ici — voir la règle suivante.
 */
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row > label:not(.screen-reader-text):not(.checkbox):not(.woocommerce-form__label-for-checkbox) {
    display: block;
    margin: 0 0 0.375rem;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
}

/*
 * La couleur d'un libellé est un état — encre au repos, rouge quand le champ est refusé — et la
 * forme n'en est pas un. Les séparer garde la couleur sur un sélecteur volontairement court, que
 * toute règle d'état bat d'une classe. Sans quoi il faudrait reporter les trois exclusions
 * ci-dessus sur chaque état, et se souvenir de le faire au prochain.
 *
 * Sans exclusion : colorer une étiquette de case ne change rien — elle porte déjà la même encre —
 * et colorer une étiquette hors champ ne se voit par définition pas.
 */
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row > label {
    color: var(--id-ink, #12181f);
}

/*
 * « (facultatif) » est une précision, pas une étiquette : elle s'efface d'un ton. C'est la seule
 * marque affichée — depuis la 9.x, WooCommerce masque l'astérisque des champs obligatoires et
 * signale l'inverse. Rien à reprendre pour « .required », qu'aucun œil ne voit.
 */
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row label .optional {
    color: var(--id-ink-soft, #4a697b);
    font-size: 0.75rem;
    font-weight: 400;
}

/* ── États de validation ───────────────────────────
 *
 * Les règles de champ ci-dessus sont plus fortes que celles de WooCommerce : sans ce bloc, elles
 * effaceraient la bordure rouge d'un champ refusé. Une classe de plus les laisse passer.
 *
 * Chaque règle d'état n'ajoute qu'une classe — « .woocommerce-invalid » — à la règle qu'elle
 * doit battre. C'est assez tant que celle-ci reste courte : les exclusions en « :not() » de
 * l'habillage des libellés comptent, elles, comme des classes, et c'est pourquoi la couleur
 * au repos leur est retirée plus haut.
 */
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row.woocommerce-invalid .input-text,
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row.woocommerce-invalid select,
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row.woocommerce-invalid textarea {
    border-color: var(--id-brand, #d22e26);
}

body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row.woocommerce-invalid > label {
    color: var(--id-brand, #d22e26);
}

body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row.woocommerce-validated .input-text,
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row.woocommerce-validated select {
    border-color: var(--id-ok, #2ba65e);
}

/* ── Cases et boutons radio ────────────────────────
 *
 * Le thème dessine déjà des cases sur mesure, mais dans le seul bloc « webinar » — ailleurs il
 * laisse celles du navigateur. On reprend son dessin, sa coche et son geste, à la palette du
 * tunnel : la coche encrée sur le jaune signal, comme les pastilles du fil d'ariane.
 */
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form input[type="checkbox"],
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0 0.5rem 0 0;
    padding: 0;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid var(--id-field-border, #4a697b);
    border-radius: 3px;
    background: var(--id-surface, #ffffff);
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form input[type="radio"] {
    border-radius: 50%;
}

body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form input[type="checkbox"]:checked {
    border-color: var(--id-signal, #f4bf08);
    background: var(--id-signal, #f4bf08) url(/wp-content/themes/id/images/icons/icon-check.svg) 50% 50% no-repeat;
    background-size: 60% 60%;
}

/* Le point du radio est creusé dans la pastille : une ombre interne blanche fait le disque. */
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form input[type="radio"]:checked {
    border-color: var(--id-ink, #12181f);
    background: var(--id-ink, #12181f);
    box-shadow: inset 0 0 0 3px var(--id-surface, #ffffff);
}

body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form input[type="checkbox"]:focus,
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form input[type="radio"]:focus {
    box-shadow: 0 0 0 3px var(--id-field-ring, rgba(244, 191, 8, 0.4));
    outline: 2px solid transparent;
    outline-offset: 2px;
}

body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form input[type="radio"]:checked:focus {
    box-shadow: inset 0 0 0 3px var(--id-surface, #ffffff), 0 0 0 3px var(--id-field-ring, rgba(244, 191, 8, 0.4));
}

/* Un libellé de case tient sur une ligne avec elle, et n'a pas la graisse d'une étiquette. */
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row > label.checkbox,
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--id-ink, #12181f);
    cursor: pointer;
}

body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .woocommerce-form__label-for-checkbox input {
    margin: 0;
}

/* ── Listes déroulantes (select2) ──────────────────
 *
 * WooCommerce remplace le choix du pays par select2. Le champ vit dans le formulaire, mais son
 * menu est déplacé en fin de « body » : d'où le préfixe « body.id-tunnel » plutôt que le chemin
 * par « .entry-content », qui ne l'atteindrait pas. Les mesures suivent celles des champs, sans
 * quoi le pays serait deux crans plus court que la ville.
 */
body.id-tunnel.woocommerce-checkout .select2-container--default .select2-selection--single {
    height: 2.75rem;
    border: 1px solid var(--id-field-border, #4a697b);
    border-radius: var(--id-radius, 5px);
    background: var(--id-surface, #ffffff);
}

/*
 * WooCommerce pose lui-même 8 px de padding haut et bas sur ce span (woocommerce.css) — pensé
 * pour SA hauteur de champ, pas la nôtre. « line-height: 2,75 rem » ci-dessous centre déjà le
 * texte tout seul (c'est la même technique qu'un bouton rond à une seule ligne) ; les deux
 * combinés demandent 60 px de haut à un span logé dans une pastille de 44 px, qui le rogne
 * et désaligne le texte du pays par rapport à tous les autres champs — mineur remonté en
 * recette (DP-717, #3224879855), plus visible sur mobile où le doigt cadre moins bien l'œil
 * qu'une souris. Les deux réglages sont concurrents, pas cumulables : à zéro, la hauteur ne
 * revient qu'au seul line-height.
 */
body.id-tunnel.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.75rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0.875rem;
    color: var(--id-ink, #12181f);
}

body.id-tunnel.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.75rem;
}

body.id-tunnel.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--id-ink, #12181f);
    box-shadow: 0 0 0 3px var(--id-field-ring, rgba(244, 191, 8, 0.4));
}

body.id-tunnel.woocommerce-checkout .select2-dropdown {
    border-color: var(--id-ink, #12181f);
    border-radius: var(--id-radius, 5px);
}

body.id-tunnel.woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--id-field-border, #4a697b);
    border-radius: var(--id-radius, 5px);
    /* 1 rem ici aussi : le champ de recherche du menu est un champ de saisie comme un autre. */
    font-size: 1rem;
    padding: 0.5rem 0.625rem;
}

body.id-tunnel.woocommerce-checkout .select2-container--default .select2-results__option {
    font-size: 0.9375rem;
    padding: 0.5rem 0.875rem;
}

/* ── Récapitulatif de commande ─────────────────────
 *
 * Le même tableau sert l'étape 1 (« #order_review » est un bloc) et le paiement 2 (« #order_review »
 * est le formulaire) : une seule règle habille les deux, et le tunnel garde un seul récapitulatif.
 * Le tableau du panier, lui, n'est pas dans « #order_review » — il ne bouge pas.
 *
 * Le thème peint tout en-tête de tableau boutique en blanc sur noir. Un bandeau noir plein au
 * sommet d'une colonne de 38 % pèse plus que ce qu'il annonce : l'en-tête passe sur le gris doux
 * des cartes du tunnel, et les filets d'encre deviennent les filets clairs des mêmes cartes.
 */
body.id-tunnel .entry-content #order_review table.shop_table {
    margin: 0 0 1.5rem;
    border: 1px solid var(--id-rule, #e5e5e5);
    border-radius: var(--id-radius, 5px);
    /* Le rayon suppose des bordures séparées ; « overflow » coupe alors proprement les angles. */
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--id-surface, #ffffff);
    table-layout: auto;
}

body.id-tunnel .entry-content #order_review table.shop_table thead th {
    background: var(--id-surface-soft, #f0f2f6);
    color: var(--id-ink-soft, #4a697b);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--id-rule, #e5e5e5);
}

body.id-tunnel .entry-content #order_review table.shop_table td,
body.id-tunnel .entry-content #order_review table.shop_table tbody th,
body.id-tunnel .entry-content #order_review table.shop_table tfoot th {
    background: none;
    color: var(--id-ink, #12181f);
    font-size: 0.875rem;
    line-height: 1.45;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    padding: 0.75rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--id-rule, #e5e5e5);
    vertical-align: top;
}

body.id-tunnel .entry-content #order_review table.shop_table tfoot th {
    font-weight: 600;
}

/* Les montants se lisent en colonne : même chasse pour tous les chiffres. */
body.id-tunnel .entry-content #order_review table.shop_table td {
    font-variant-numeric: tabular-nums;
}

/* Le total ferme le tableau : pas de filet sous lui, et l'encre pleine. */
body.id-tunnel .entry-content #order_review table.shop_table tfoot tr:last-child th,
body.id-tunnel .entry-content #order_review table.shop_table tfoot tr:last-child td {
    border-bottom: 0;
}

body.id-tunnel .entry-content #order_review table.shop_table tfoot tr.order-total th,
body.id-tunnel .entry-content #order_review table.shop_table tfoot tr.order-total td {
    font-size: 1rem;
    font-weight: 600;
    color: var(--id-ink, #12181f);
}

/*
 * La quantité et le détail d'abonnement sont des précisions sous le nom du produit. Ciblé sur le
 * « strong » et non sur la classe seule : au paiement 2, la quantité a sa propre colonne, et une
 * colonne garde la taille de ses voisines.
 */
body.id-tunnel .entry-content #order_review table.shop_table strong.product-quantity,
body.id-tunnel .entry-content #order_review table.shop_table .subscription-details,
body.id-tunnel .entry-content #order_review table.shop_table small,
body.id-tunnel .entry-content #order_review .first-payment-date {
    color: var(--id-ink-soft, #4a697b);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.45;
}

body.id-tunnel .entry-content #order_review .first-payment-date {
    display: block;
    margin: 0 0 1.25rem;
    padding: 0;
}

/* ── Bloc de paiement ──────────────────────────────
 *
 * WooCommerce livre ce bloc en mauve — fond « rgba(129,110,153,.14) », encart « #dcd7e2 » et sa
 * flèche assortie — que le thème ne reprend qu'à moitié. C'est la tache la plus étrangère de
 * l'écran, juste sous le récapitulatif. Il devient une carte, comme les autres.
 */
body.id-tunnel .entry-content #payment {
    background: var(--id-surface, #ffffff);
    border: 1px solid var(--id-rule, #e5e5e5);
    border-radius: var(--id-radius, 5px);
}

body.id-tunnel .entry-content #payment ul.payment_methods {
    margin: 0;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--id-rule, #e5e5e5);
    list-style: none;
}

body.id-tunnel .entry-content #payment ul.payment_methods li {
    margin: 0;
    padding: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    list-style: none;
}

body.id-tunnel .entry-content #payment ul.payment_methods li::before,
body.id-tunnel .entry-content #payment ul.payment_methods li::marker {
    content: none;
}

body.id-tunnel .entry-content #payment ul.payment_methods li label {
    font-weight: 600;
    color: var(--id-ink, #12181f);
    cursor: pointer;
}

/*
 * WooCommerce écarte le bouton radio de son libellé de 1 em, par un sélecteur à identifiant que
 * la règle générale des radios ne franchit pas. Celui-ci le franchit, et rend au bouton l'écart
 * des cases du reste du formulaire.
 */
body.id-tunnel .entry-content #payment ul.payment_methods li input[type="radio"] {
    margin: 0 0.5rem 0 0;
}

body.id-tunnel .entry-content #payment div.payment_box {
    /* background-color plutôt que le raccourci : c'est la longhand que pose WooCommerce. */
    background-color: var(--id-surface-soft, #f0f2f6);
    color: var(--id-ink, #12181f);
    border-radius: var(--id-radius, 5px);
    font-size: 0.875rem;
    line-height: 1.5;
    /*
     * WooCommerce donne « width: 100 % » à cet encart, en box-sizing: border-box. Une largeur
     * fixée ainsi ne déduit pas les marges : la marge latérale ci-dessous le décalait vers la
     * droite sans le rétrécir, et il sortait de sa liste d'exactement cette marge — 16 px de
     * débordement, remonté en recette (DP-717, #3224794293), d'autant plus visible que la
     * colonne de paiement est étroite. « width: auto » rend la largeur au calcul normal d'un
     * bloc, qui, lui, tient compte des marges.
     */
    width: auto;
    margin: 0.875rem 1rem;
    padding: 1rem;
}

/* La flèche de l'encart est une bordure : seule celle du bas porte la couleur. */
body.id-tunnel .entry-content #payment div.payment_box::before {
    border-bottom-color: var(--id-surface-soft, #f0f2f6);
}

body.id-tunnel .entry-content #payment div.payment_box p {
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0;
}

body.id-tunnel .entry-content #payment div.form-row.place-order {
    margin: 0;
    padding: 1rem;
}

body.id-tunnel .entry-content #payment .woocommerce-privacy-policy-text,
body.id-tunnel .entry-content #payment .woocommerce-terms-and-conditions-wrapper {
    color: var(--id-ink-soft, #4a697b);
    font-size: 0.75rem;
    line-height: 1.5;
}

body.id-tunnel .entry-content #payment .woocommerce-privacy-policy-text p {
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 0 0 0.75rem;
}

/* ── Boutons de la caisse ──────────────────────────
 *
 * Les boutons du thème restent noirs et capitales — c'est le geste du site, on le garde — mais
 * ils prennent le rayon du tunnel et la hauteur des champs, pour que « Appliquer » ne dépasse
 * pas du champ qu'il accompagne.
 */
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce button.button,
body.id-tunnel.woocommerce-checkout .entry-content .woocommerce input.button {
    height: auto;
    min-height: 2.75rem;
    border-radius: var(--id-radius, 5px);
}

/*
 * Le bouton qui engage le paiement porte le jaune du tunnel, sur les deux étapes : c'est le même
 * geste que « Payer mes achats » sur l'écran intermédiaire. Ciblé par identifiant, donc sans
 * effet hors caisse. Deux identifiants dans le second sélecteur : « .woocommerce #payment
 * #place_order » le fait flotter à droite, et un CTA de colonne se tient sur toute sa largeur.
 */
body.id-tunnel #place_order {
    background: var(--id-signal, #f4bf08);
    border-color: var(--id-signal, #f4bf08);
    color: var(--id-ink, #12181f);
    font-weight: 600;
}

body.id-tunnel #payment #place_order {
    float: none;
    width: 100%;
    margin: 0;
}

body.id-tunnel #place_order:hover,
body.id-tunnel #place_order:focus {
    background: #dcae07;
    border-color: #dcae07;
    color: var(--id-ink, #12181f);
}

body.id-tunnel #place_order:focus {
    box-shadow: 0 0 0 3px var(--id-field-ring, rgba(244, 191, 8, 0.4));
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* ── Le panier ──────────────────────────────────────
 *
 * Le panier était hors du premier habillage : la carte visait « la première étape du tunnel »,
 * c'est-à-dire la caisse WooCommerce. Vu du client, l'étape 1 est pourtant le panier, et la
 * rupture se voyait — bandeaux d'en-tête noirs, angles vifs, quantité en pavé plein, et un bouton
 * d'engagement rouge là où la caisse en a un jaune.
 *
 * RIEN N'EST INVENTÉ ICI. Chaque règle reprend un motif déjà posé plus haut, pour « #order_review »
 * ou pour les champs de la caisse : le panier ne reçoit pas un habillage de plus, il reçoit le
 * même. Les valeurs ne sont donc pas à ajuster séparément — les changer ici sans les changer
 * là-bas rouvrirait l'écart que cette section referme.
 *
 * LE GABARIT N'EST PAS TOUCHÉ. Le thème donne déjà 62 % au formulaire et 38 % aux totaux, soit
 * exactement la proportion de la caisse (mesuré : 810 px et 405 px). Il n'y a que la matière à
 * reprendre.
 */

body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart {
    margin: 0;
    border: 1px solid var(--id-rule, #e5e5e5);
    border-radius: var(--id-radius, 5px);
    /* Le rayon suppose des bordures séparées. */
    border-collapse: separate;
    border-spacing: 0;
    background: var(--id-surface, #ffffff);
}

/*
 * PAS D'« OVERFLOW: HIDDEN » ICI, contrairement au récapitulatif de la caisse. Le thème sort le
 * bloc du code promo de sa cellule en le positionnant en absolu sous le tableau ; une coupe aux
 * angles le ferait disparaître entièrement. Les quatre coins sont donc arrondis cellule par
 * cellule. La cellule d'actions porte un colspan : elle est à la fois première et dernière de sa
 * ligne, et reçoit les deux rayons du bas.
 */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart thead tr:first-child th:first-child {
    border-top-left-radius: var(--id-radius, 5px);
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart thead tr:first-child th:last-child {
    border-top-right-radius: var(--id-radius, 5px);
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart tbody:last-of-type tr:last-child > *:first-child {
    border-bottom-left-radius: var(--id-radius, 5px);
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart tbody:last-of-type tr:last-child > *:last-child {
    border-bottom-right-radius: var(--id-radius, 5px);
}

/*
 * Le thème peint l'en-tête en blanc sur noir. Un bandeau noir en tête du panier annonce plus
 * fort que ce qu'il dit — et surtout il ne ressemble en rien à l'en-tête du récapitulatif de la
 * caisse, que le client voit trois secondes plus tard. Même gris doux, même encre douce.
 */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart thead th {
    background: var(--id-surface-soft, #f0f2f6);
    color: var(--id-ink-soft, #4a697b);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--id-rule, #e5e5e5);
}

/*
 * « :not(.id-cart__grouphead-cell) » n'est pas une précaution de style, c'est une nécessité :
 * l'intertitre de groupe d'un panier scindé est lui aussi un <th> de tbody, et sa règle plus haut
 * ne compte qu'un type quand celle-ci en compte trois. Sans l'exclusion, elle la reprendrait.
 */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart tbody th:not(.id-cart__grouphead-cell) {
    background: none;
    color: var(--id-ink, #12181f);
    font-size: 0.875rem;
    line-height: 1.45;
    padding: 1rem;
    border: 0;
    border-bottom: 1px solid var(--id-rule, #e5e5e5);
    vertical-align: middle;
}

/* Les montants se lisent en colonne : même chasse pour tous les chiffres, comme au récapitulatif. */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.product-price,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.product-subtotal {
    font-variant-numeric: tabular-nums;
}

/*
 * La quantité était un pavé d'encre pleine de 32 px, sans bordure — le seul champ du parcours à
 * ne pas ressembler à un champ. Il prend la forme de ceux de la caisse : fond blanc, bordure
 * d'encre douce, même hauteur, même halo de focus.
 */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.product-quantity .quantity input.qty {
    background-color: var(--id-surface, #ffffff);
    border: 1px solid var(--id-field-border, #4a697b);
    border-radius: var(--id-radius, 5px);
    box-shadow: none;
    color: var(--id-ink, #12181f);
    /* Pas moins de 1 rem : en dessous de 16 px, Safari iOS zoome sur le champ actif. */
    font-size: 1rem;
    height: 2.75rem;
    /*
     * PREMIER DE TROIS « !important » DE CETTE FEUILLE, faute d'alternative : le thème pose
     * « .js .woocommerce table.shop_table td .quantity input { width: 2rem !important } », qu'aucune
     * spécificité ne peut battre. À 32 px, bordure et retrait compris, le compteur d'un champ
     * « number » mange toute la place et le chiffre saisi devient invisible — c'est ce qui se
     * passait après la première passe d'habillage.
     */
    width: 4rem !important;
    padding: 0 0.375rem;
    text-align: center;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.product-quantity .quantity input.qty:focus {
    border-color: var(--id-ink, #12181f);
    box-shadow: 0 0 0 3px var(--id-field-ring, rgba(244, 191, 8, 0.4));
    /* Transparent ici, visible en contraste forcé, où l'ombre ne s'affiche pas. */
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/*
 * Sur la fiche produit, la quantité se règle avec deux boutons +/- (customProductQuantity(),
 * js/main.js) ; le panier, lui, se contentait du seul champ « number » nu. Aucun navigateur
 * mobile n'en dessine les flèches d'incrémentation (contrairement à certains navigateurs de
 * bureau) : rien n'indiquait au doigt que le nombre s'éditait, ni comment le faire varier — un
 * champ qu'on ne « peut pas ajuster » sur smartphone en recette (DP-717, #3225623647). Le
 * script du plugin (woocommerce-cart.php) pose désormais les deux mêmes boutons sur le panier,
 * mêmes classes qu'en fiche produit pour ne pas inventer un second habillage.
 *
 * Restent deux « !important » à rouvrir : le thème vise le champ ET tout bouton du même
 * conteneur dans la même règle (« .quantity button, .quantity input { width: 2rem !important } »)
 * — sortir l'un sans l'autre les aurait laissés à deux largeurs différentes, un champ à 4 rem
 * entre deux pastilles de 32 px, plus étroites qu'un doigt ne peut viser sûrement.
 */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.product-quantity .quantity {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/*
 * ET LE RANG DOIT TENIR DANS LA CELLULE. Défaut remonté en recette le 16 septembre 2026
 * (#3227525916) : sur le panier de bureau, le chiffre de la quantité devenait illisible et ses
 * flèches inutilisables. Mesuré : la colonne ne fait que 107 px — WooCommerce ne lui demande que
 * « min-width: 80px », et le tableau est en « table-layout: fixed », où min-width n'est même pas
 * regardé — quand le rang en réclamait 164 (deux boutons de 44 px, le champ de 64, deux gouttières
 * de 6). Des trois éléments, seul le champ pouvait rétrécir, avec son « flex-shrink: 1 » par
 * défaut : il tombait à 14 px, soit deux pixels de texte entre ses bordures.
 *
 * LES BOUTONS NE PARAISSENT DONC QUE LÀ OÙ ILS SERVENT ET OÙ ILS TIENNENT : le panier empilé,
 * sous 768 px, où la cellule occupe toute la largeur — et où aucun navigateur ne dessine le
 * compteur d'un champ « number », ce qui était la raison même de les ajouter. Dès que le tableau
 * reprend ses colonnes, le compteur natif est là, et c'est lui que la recette cherchait à viser.
 *
 * L'essai intermédiaire est instructif : élargir la colonne pour faire tenir les boutons (9,5 rem)
 * marchait sur un grand écran mais prenait la place sur « Prix » et « Sous-total », tombés à 52 px
 * à 1024 — les montants s'y coupaient. Le tableau du panier n'a pas cette place à donner.
 *
 * Reste le champ, qui ne se laisse plus écraser dans les deux dispositions.
 */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.product-quantity .quantity input.qty {
    flex: 0 0 auto;
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.product-quantity .quantity .quantity-button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    /* DEUXIÈME ET TROISIÈME « !important » DE CETTE FEUILLE : voir la note ci-dessus. */
    width: 2.75rem !important;
    padding: 0;
    border-radius: var(--id-radius, 5px);
    font-size: 1.125rem;
    line-height: 1;
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.product-quantity .quantity .quantity-button:focus {
    box-shadow: 0 0 0 3px var(--id-field-ring, rgba(244, 191, 8, 0.4));
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/*
 * APRÈS la règle qui les dessine, jamais avant : à spécificité égale, c'est l'ordre de la feuille
 * qui tranche, et un « display: none » placé plus haut serait repris par le « display: flex »
 * ci-dessus.
 */
@media (min-width: 768px) {
    body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.product-quantity .quantity .quantity-button {
        display: none;
    }
}

/*
 * Le « × » de suppression : le disque garde sa forme et sa place, mais se pose sur un filet clair
 * plutôt que sur l'encre. Il ne prend le rouge qu'au survol — supprimer une ligne est une action
 * destructrice, elle s'annonce au moment où la main s'en approche, pas en permanence.
 */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.product-remove a.remove {
    background: var(--id-surface, #ffffff);
    border: 1px solid var(--id-rule, #e5e5e5);
    color: var(--id-ink-soft, #4a697b);
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.no-touch body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.product-remove a.remove:hover,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.product-remove a.remove:focus {
    background: var(--id-brand, #d22e26);
    border-color: var(--id-brand, #d22e26);
    color: var(--id-surface, #ffffff);
}

/* La dernière ligne ferme le tableau : pas de filet sous elle, et le gris doux de l'en-tête. */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.actions {
    background: var(--id-surface-soft, #f0f2f6);
    border-bottom: 0;
    border-top: 1px solid var(--id-rule, #e5e5e5);
    padding: 1rem;
}

/*
 * Le code promo est sorti de sa cellule par le thème (« position: absolute », décalé de 80 px) et
 * posé sous le tableau. Or ce tableau vit dans un conteneur Bootstrap « .table-responsive » en
 * « overflow-x: auto; overflow-y: hidden », qui le rogne : mesuré, le bloc dépasse de 63 px et
 * n'en laissait voir qu'un filet d'un pixel.
 *
 * On ne touche pas à l'overflow — il sert au défilement horizontal du tableau sur petit écran, et
 * une valeur « visible » sur un axe force l'autre à « auto ». On réserve la hauteur qui manque :
 * le code promo occupe exactement ce retrait, ce n'est donc pas du vide ajouté.
 */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .table-responsive {
    padding-bottom: 5rem;
}

/*
 * Champ et bouton sont soudés par le thème. On garde ce geste — c'est un seul contrôle — en
 * n'arrondissant que les angles extérieurs : le rayon habille l'ensemble sans le disloquer.
 *
 * Le champ est ciblé par IDENTIFIANT, et il le faut : le thème l'atteint par
 * « .js .woocommerce-page .main .shop_table .actions #coupon_code », qu'aucun empilement de
 * classes ne peut battre.
 */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.actions .coupon input#coupon_code {
    background-color: var(--id-surface, #ffffff);
    border: 1px solid var(--id-field-border, #4a697b);
    border-radius: var(--id-radius, 5px) 0 0 var(--id-radius, 5px);
    box-shadow: none;
    color: var(--id-ink, #12181f);
    font-size: 1rem;
    height: 2.75rem;
    padding: 0 0.875rem;
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.actions .coupon input#coupon_code::placeholder {
    color: var(--id-ink-soft, #4a697b);
    opacity: 1;
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.actions .coupon input#coupon_code:focus {
    border-color: var(--id-ink, #12181f);
    box-shadow: 0 0 0 3px var(--id-field-ring, rgba(244, 191, 8, 0.4));
    outline: 2px solid transparent;
    outline-offset: 2px;
    /* Le halo doit passer au-dessus du bouton collé, sinon il est coupé net. */
    position: relative;
    z-index: 1;
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.actions .coupon button.button {
    border-radius: 0 var(--id-radius, 5px) var(--id-radius, 5px) 0;
    height: 2.75rem;
    min-height: 2.75rem;
}

/*
 * « Mettre à jour le panier » reste le bouton fantôme du thème — noir sur blanc, capitales : c'est
 * le geste du site, et la caisse le garde aussi. Il prend seulement le rayon et la hauteur des
 * champs, pour ne plus dépasser de ce qu'il accompagne.
 */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.actions button.button {
    border-radius: var(--id-radius, 5px);
    height: auto;
    min-height: 2.75rem;
}

/* ── Le panier : colonne des totaux ─────────────────
 *
 * La colonne de droite est le même objet que « Votre commande » à la caisse : elle doit se lire
 * comme lui. Le bandeau noir de « TOTAL PANIER » devient un titre de colonne, et le tableau des
 * totaux prend la carte blanche du récapitulatif.
 */

body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals h2 {
    background: none;
    color: var(--id-ink, #12181f);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    padding: 0 0 0.625rem;
    margin: 0;
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table {
    margin: 0 0 1.5rem;
    border: 1px solid var(--id-rule, #e5e5e5);
    border-radius: var(--id-radius, 5px);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--id-surface, #ffffff);
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table th,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table td {
    background: none;
    color: var(--id-ink, #12181f);
    font-size: 0.875rem;
    line-height: 1.45;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    padding: 0.75rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--id-rule, #e5e5e5);
    vertical-align: top;
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table th {
    font-weight: 600;
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table td {
    font-variant-numeric: tabular-nums;
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table tr:last-child th,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table tr:last-child td {
    border-bottom: 0;
}

/*
 * Le total passait en rouge et en 18 px, quand celui de la caisse est en encre pleine et en 1 rem.
 * Deux écrans qui affichent le même montant à trente secondes d'intervalle ne peuvent pas le
 * porter de deux façons : c'est l'écart le plus visible des deux pages. L'accent de la page est
 * désormais le bouton, comme à la caisse.
 */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table tr.order-total th,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table tr.order-total td {
    font-size: 1rem;
    font-weight: 600;
    color: var(--id-ink, #12181f);
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table small,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table .includes_tax,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table .first-payment-date {
    color: var(--id-ink-soft, #4a697b);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.45;
}

/*
 * Le bouton qui engage la commande. Il était rouge et à angles vifs ; celui de la caisse est jaune
 * et arrondi. Le jaune est le signal du tunnel — c'est le même geste, sur la page d'avant.
 */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart-collaterals .wc-proceed-to-checkout a.button.checkout-button {
    background: var(--id-signal, #f4bf08);
    border-color: var(--id-signal, #f4bf08);
    color: var(--id-ink, #12181f);
    border-radius: var(--id-radius, 5px);
    font-weight: 600;
    min-height: 2.75rem;
}

.no-touch body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart-collaterals .wc-proceed-to-checkout a.button.checkout-button:hover,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart-collaterals .wc-proceed-to-checkout a.button.checkout-button:focus {
    background: #dcae07;
    border-color: #dcae07;
    color: var(--id-ink, #12181f);
}

body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart-collaterals .wc-proceed-to-checkout a.button.checkout-button:focus {
    box-shadow: 0 0 0 3px var(--id-field-ring, rgba(244, 191, 8, 0.4));
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Les encarts de réassurance sous les totaux prennent le rayon des cartes du tunnel. */
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart-collaterals .sidebar-block {
    border-radius: var(--id-radius, 5px);
}

/* ── DP-717, recette (2026-09-15) ──────────────────────
 *
 * Ajouts groupés pour les tickets du groupe « Recette » du tableau Monday « Migration Gsab >
 * Ediis » : #3222803514, #3225626919, #3225680078, #3225626049, #3223782030. Chaque règle référence
 * son ticket, pour retrouver facilement pourquoi elle existe.
 */

/*
 * #3222803514 tâche 6 : le message qui annonce que le paiement 1 vient d'être réglé, en tête de
 * l'écran « Paiement 2 », était un simple paragraphe d'intro — même traitement qu'un texte
 * neutre. On lui donne le habillage déjà réservé au « Réglé » vert ailleurs dans le tunnel
 * (id-chip--done, id-recap__line--total), pour qu'il se lise sans ambiguïté comme une bannière
 * de succès, pas comme une simple phrase de contexte.
 */
.id-tunnel .id-tunnel-banner-success {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border: 0;
    border-left: 3px solid var(--id-ok, #2ba65e);
    border-radius: 0 var(--id-radius, 5px) var(--id-radius, 5px) 0;
    background: var(--id-ok-soft, #defbe0);
    color: var(--id-ok-ink, #008743);
    font-weight: 600;
    padding: 0.875rem 1.125rem;
    margin: 0 0 1.5rem;
}

.id-tunnel .id-tunnel-banner-success::before {
    content: '\2713';
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--id-ok, #2ba65e);
    color: #fff;
    font-size: 0.8125rem;
    line-height: 1;
}

/* #3222803514 tâche 4 : lien de retour au panier, étape 1 seulement (voir woocommerce-cart.php). */
.id-tunnel .id-tunnel-back {
    margin: 0 0 1rem;
    padding: 0;
    font-size: 0.875rem;
}

.id-tunnel .id-tunnel-back a {
    color: var(--id-ink-soft, #4a697b);
    text-decoration: none;
}

.id-tunnel .id-tunnel-back a:hover,
.id-tunnel .id-tunnel-back a:focus {
    color: var(--id-brand, #d22e26);
    text-decoration: underline;
}

/*
 * #3222803514 tâche 3 : les totaux récurrents de WooCommerce Subscriptions (checkout/recurring-
 * totals.php, classes « recurring-totals » et « recurring-total » posées par WCS lui-même) sont
 * de simples <tr> ajoutées à la suite du tableau des totaux — sur le panier comme sur la caisse
 * (#order_review, l'écran « Paiement 1 »). Sans traitement, ils se fondaient dans les lignes
 * ordinaires du paiement en cours. On leur donne un fond et un repère de tête, pour qu'ils se
 * lisent comme un bloc à part — ce qui sera prélevé plus tard — et non comme mélangés au
 * paiement d'aujourd'hui.
 */
/*
 * Spécificité : le fond « none » posé plus haut sur les cellules ordinaires de #order_review et
 * de .cart_totals (deux sélecteurs à six classes) l'emporterait sur un sélecteur générique ici —
 * ces règles reprennent donc les mêmes préfixes qu'eux, plutôt que « !important ».
 */
body.id-tunnel .entry-content #order_review table.shop_table tr.recurring-totals th,
body.id-tunnel .entry-content #order_review table.shop_table tr.recurring-total th,
body.id-tunnel .entry-content #order_review table.shop_table tr.recurring-total td,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table tr.recurring-totals th,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table tr.recurring-total th,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table tr.recurring-total td {
    background: var(--id-signal-soft, #fff6d7);
}

body.id-tunnel .entry-content #order_review table.shop_table tr.recurring-totals th,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table tr.recurring-totals th {
    border-top: 2px solid var(--id-signal, #f4bf08);
    padding-top: 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--id-ink-soft, #4a697b);
}

body.id-tunnel .entry-content #order_review table.shop_table tr.recurring-total:last-of-type th,
body.id-tunnel .entry-content #order_review table.shop_table tr.recurring-total:last-of-type td,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table tr.recurring-total:last-of-type th,
body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table tr.recurring-total:last-of-type td {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--id-rule, #e5e5e5);
}

/*
 * #3225680078 tâche 2 : l'adresse de livraison éditable de l'écran « Paiement 2»
 * (id_tunnel_render_deferred_shipping_form(), plugins/id/checkout-tunnel.php) réutilise
 * woocommerce_form_field() — même balisage « .form-row » que la caisse, déjà stylé plus haut
 * sous « body.id-tunnel.woocommerce-checkout ». Il ne manque que l'espacement propre à sa boîte
 * grisée « .id-payaddress », plus étroite qu'un formulaire de caisse pleine largeur.
 */
.id-tunnel .id-payaddress--editable .id-payaddress__fields {
    margin: 0 0 0.5rem;
}

.id-tunnel .id-payaddress--editable .form-row {
    margin: 0 0 0.75rem;
    padding: 0;
}

.id-tunnel .id-payaddress--editable .form-row:last-child {
    margin-bottom: 0;
}

/*
 * #3225680078 tâche 2 (retest du 16/09) : l'écran porte désormais DEUX boîtes d'adresse —
 * facturation, puis livraison quand ces achats s'expédient — suivies du rappel de l'e-mail de
 * commande. Cette dernière ligne est hors boîte : elle vaut pour les deux, et elle ne doit pas
 * coller au dernier champ de la seconde. Elle reprend la graisse et la couleur de
 * « .id-payaddress__note », posées plus haut sur la classe elle-même, et n'ajoute que son
 * espacement propre.
 */
.id-tunnel .id-payaddress__contact {
    margin: 0 0 1.5rem;
}

/*
 * #3223782030 : checkout.js (cœur WooCommerce, show_inline_errors()) place déjà, pour chaque
 * champ en défaut portant un « data-id » dans la réponse d'erreur, un
 * <p class="checkout-inline-error-message"> juste après ce champ — EN PLUS du bloc d'erreur
 * générique en tête de page (submit_error()). Le mécanisme existe donc déjà des deux côtés ;
 * seul le message sous le champ n'était pas stylé — texte de navigateur nu, invisible à côté du
 * bandeau rouge bien mis en forme en haut de page. D'où l'impression de deux systèmes d'erreur
 * déconnectés : une carte refusée tout en haut, un champ de facturation manquant « plus bas »,
 * sans rien qui les relie. Même couleur, même famille que « .woocommerce-error » ci-dessus : les
 * deux sont désormais la même famille d'erreurs, à deux endroits complémentaires — la liste
 * d'ensemble en tête, le détail au bon endroit pour chaque champ.
 */
body.id-tunnel .entry-content .woocommerce form .checkout-inline-error-message {
    margin: 0.375rem 0 0;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--id-brand, #d22e26);
}

body.id-tunnel .entry-content .woocommerce form .form-row:has(.checkout-inline-error-message) .input-text,
body.id-tunnel .entry-content .woocommerce form .form-row:has(.checkout-inline-error-message) select {
    border-color: var(--id-brand, #d22e26);
}

/* ── Points de rupture ─────────────────────────────── */

@media (max-width: 991px) {
    .id-tunnel .id-paycols {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .id-tunnel .id-tunnel-step--confirmation .id-recaps {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * 991,98 px n'est ici non plus pas un choix : c'est le point où le thème empile le code promo
 * du panier en colonne (simple.css, « .actions .coupon { flex-direction: column } »), champ
 * au-dessus du bouton plutôt que côte à côte. Le champ, lui, garde de la règle de rangée
 * plus haut un « flex: 1 1 0 % » : une base nulle qui, en colonne, porte sur la HAUTEUR — il
 * ignore alors les 2,75 rem déclarés et se cale sur l'espace que lui laisse le bouton dans le
 * conteneur. Mesuré : 22 px de haut, un texte qui touche le bord du champ, et le bouton soudé
 * juste en dessous sans le moindre espace — le chevauchement remonté en recette (DP-717,
 * #3224583874). Le bouton n'a pas ce problème : sans « flex » concurrent, il garde sa base
 * automatique et sa hauteur déclarée (voir plus haut, « Le panier »).
 */
@media (max-width: 991.98px) {
    body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.actions .coupon input#coupon_code {
        flex: 0 0 auto;
        margin-bottom: 0.625rem;
    }
}

/*
 * 767,98 px n'est pas un choix : c'est le point où le thème retire la marge négative de
 * « .woocommerce » et la gouttière de 3 rem de ses enfants, et où WooCommerce remet
 * « #order_review » en pleine largeur. Tout ce qui compense cette gouttière doit tomber au même
 * pixel, sinon un bloc reste en retrait quand ses voisins n'y sont plus. Le bloc de 640 px qui
 * suit ne traite que ce qui relève du confort de lecture.
 */
@media (max-width: 767.98px) {
    body.id-tunnel .entry-content .woocommerce > .id-steps {
        padding: 0;
    }

    body.id-tunnel .entry-content .woocommerce > .id-tunnel-notice {
        flex-basis: 100%;
        margin: 0 0 1.5rem;
    }

    body.id-tunnel .entry-content .woocommerce > form.login,
    body.id-tunnel .entry-content .woocommerce > form.checkout_coupon {
        flex-basis: 100%;
        width: 100%;
        margin: 0 0 1.5rem;
    }

    /* Les deux colonnes de la caisse s'empilent : adresses, puis récapitulatif et paiement. */
    body.id-tunnel .entry-content form.checkout > #customer_details,
    body.id-tunnel .entry-content form.checkout > #order_review_heading,
    body.id-tunnel .entry-content form.checkout > #order_review {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    body.id-tunnel .entry-content form.checkout > #order_review_heading {
        padding-top: 1.5rem;
    }

    /*
     * Sous cette largeur, le thème empile les lignes du tableau (« shop_table_responsive » et ses
     * « data-title ») : les filets horizontaux suffisent, et le gris doux de la ligne d'actions
     * ferait une bande pleine largeur au milieu du flux.
     */
    body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.actions {
        background: none;
    }

    body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals h2 {
        font-size: 1.25rem;
    }
}

@media (max-width: 640px) {
    /* Le champ de quantité tient la moitié de sa cellule plutôt qu'une largeur fixe. */
    body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td.product-quantity .quantity input.qty {
        width: 3.5rem;
    }

    body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart td,
    body.id-tunnel.woocommerce-cart .entry-content .woocommerce table.shop_table.cart tbody th:not(.id-cart__grouphead-cell),
    body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table th,
    body.id-tunnel.woocommerce-cart .entry-content .woocommerce .cart_totals table.shop_table td {
        padding: 0.625rem 0.75rem;
    }

    .id-tunnel .id-steps {
        flex-direction: column;
        gap: 0.75rem;
    }

    /*
     * « flex: 1 1 0 » (plus haut) partage la RANGÉE en trois largeurs égales — le bon calcul
     * tant que « .id-steps » est une rangée. Une fois empilé en colonne ci-dessus, ce même
     * « 0 » devient une base de HAUTEUR nulle : chaque étape ne se dimensionne plus sur son
     * contenu mais sur une part de la hauteur totale de la liste, calculée sans compter la
     * puce « Paiement 1/2 » qu'elle porte. Résultat mesuré : une étape réduite à 15 px quand
     * sa puce en mesure 23, qui déborde alors sur l'étape suivante — le chevauchement
     * bloquant remonté en recette (DP-717, #3224677452). La base automatique rend à chaque
     * étape la hauteur de son propre contenu, puce comprise.
     */
    .id-tunnel .id-steps__item {
        flex: 0 0 auto;
    }

    .id-tunnel .entry-content .id-tunnel-step__title {
        font-size: 1.25rem;
    }

    body.id-tunnel .entry-content .wc-empty-cart-message > .cart-empty {
        padding: 1rem 0;
    }

    .id-tunnel .entry-content .id-cart.id-cart--split .id-cart__grouphead th.id-cart__grouphead-cell {
        padding-left: 0;
    }

    /*
     * Prénom et nom tiennent côte à côte sur 47 % jusqu'ici ; en dessous, deux champs de 170 px
     * ne se remplissent plus au pouce. WooCommerce les empile pour le formulaire de connexion
     * seulement — la caisse, elle, les laisse flotter à toute largeur.
     */
    body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row-first,
    body.id-tunnel.woocommerce-checkout .entry-content .woocommerce form .form-row-last {
        float: none;
        width: 100%;
    }

    /* Le tableau du récapitulatif respire moins : les montants restent lisibles, pas le padding. */
    body.id-tunnel .entry-content #order_review table.shop_table thead th,
    body.id-tunnel .entry-content #order_review table.shop_table td,
    body.id-tunnel .entry-content #order_review table.shop_table tbody th,
    body.id-tunnel .entry-content #order_review table.shop_table tfoot th {
        padding: 0.625rem 0.75rem;
    }

    body.id-tunnel .entry-content #payment ul.payment_methods,
    body.id-tunnel .entry-content #payment div.form-row.place-order {
        padding: 0.875rem;
    }

    body.id-tunnel .entry-content #payment div.payment_box {
        margin: 0.75rem 0.875rem;
        padding: 0.875rem;
    }
}

/* ── Mon compte, hors tunnel ────────────────────────
 *
 * Trois bugs mobile remontés en recette (DP-717) sur l'espace client : #3224937933, #3225597631.
 * Aucun des deux ne relève du tunnel à deux paiements — ils touchent « Mes commandes », « Mes
 * abonnements », « Mon profil », « Adresses » et « Mes documents numériques » quel que soit
 * l'état de la commande en cours, donc en dehors des pages où id_tunnel_body_class() pose
 * « .id-tunnel » (voir plugins/id/woocommerce-cart.php : sur l'espace client, cette classe ne
 * s'ajoute que si un paiement 2 reste dû). Le repère est donc « body.woocommerce-account »,
 * posé par WooCommerce lui-même sur tout gabarit de l'espace client, sans condition. La feuille
 * reste néanmoins le seul endroit praticable pour ce correctif : le pipeline SCSS du thème est
 * hors service (voir l'en-tête de ce fichier), et c'est elle qu'id_tunnel_enqueue_styles()
 * charge déjà, sans condition non plus, sur is_account_page().
 */

/*
 * Le thème redonne à « .woocommerce-MyAccount-content » un padding-right de 2 rem sous 991,98 px
 * (build/scss, cascade éclatée entre trois points de rupture) — pensé pour la mise en page à
 * deux colonnes du bureau, où ce retrait sépare le contenu du menu de gauche. Sous 767,98 px, le
 * thème repasse le menu ET le contenu en pleine largeur (l'un et l'autre empilés), mais son
 * sélecteur pour l'annuler ne compte que deux classes quand celui du palier au-dessus en compte
 * quatre : le retrait de 2 rem survit, à droite seulement, et le contenu n'atteint plus la marge
 * — quatre pages sur cinq lues « justifiées à gauche » en recette (#3225597631). Trois classes de
 * plus, et le type « div » ou « form » du gabarit ciblé (deux variantes selon l'écran : simple
 * bloc partout, ou formulaire lui-même sur « Mon profil »), suffisent à passer devant.
 */
@media (max-width: 767.98px) {
    body.woocommerce-account .entry-content .woocommerce div.woocommerce-MyAccount-content,
    body.woocommerce-account .entry-content .woocommerce form.woocommerce-MyAccount-content {
        padding: 0;
    }
}

/*
 * Les lignes de « Mes commandes » et « Mes abonnements » (tableaux « shop_table_responsive »,
 * WooCommerce et WooCommerce Subscriptions) s'empilent sous 768 px en blocs verticaux — mais
 * restent des <tr> ordinaires, sans le moindre filet ni la moindre marge entre deux commandes :
 * seule une teinte alternée à peine visible (woocommerce.css, une ligne sur deux) les distingue.
 * Sur mobile, où chaque ligne prend la largeur de l'écran, l'ensemble se lit comme un flux
 * continu plutôt que comme des commandes distinctes — remonté en recette (#3225597631). La carte
 * reprend le rayon et le filet déjà posés partout ailleurs dans le tunnel (--id-rule, --id-radius),
 * bien que ces pages n'en portent pas la classe : les deux jetons sont déclarés sur « :root »,
 * en tête de cette feuille, sans condition.
 */
@media (max-width: 767.98px) {
    body.woocommerce-account .entry-content .woocommerce table.shop_table_responsive tbody tr {
        display: block;
        margin: 0 0 0.875rem;
        padding: 0.25rem 1rem;
        border: 1px solid var(--id-rule, #e5e5e5);
        border-radius: var(--id-radius, 5px);
    }

    body.woocommerce-account .entry-content .woocommerce table.shop_table_responsive tbody tr:last-child {
        margin-bottom: 0;
    }
}

/*
 * « Mes commandes » n'affichait, sur mobile, ni Date ni État ni Total ni Voir — mais jamais le
 * numéro de commande (#3224937933). Cause : woocommerce-smallscreen.css (WooCommerce, chargé
 * uniquement sous 768 px) masque tout <th> de tbody dans un « shop_table_responsive » :
 * « table.shop_table_responsive tbody th { display: none } ». Une règle pensée pour un en-tête
 * de ligne décoratif — mais orders.php rend justement la colonne « order-number » en <th
 * scope="row">, seule colonne du tableau à ne pas être un <td> (voir wc_get_account_orders_
 * columns()). Elle est donc la seule que cette règle générique masque, alors qu'elle est la
 * seule information qui ne figure nulle part ailleurs dans la ligne. Idem côté WooCommerce
 * Subscriptions, qui rend sa colonne « numéro d'abonnement » de la même façon.
 *
 * Corrigé en deux temps : rendre le <th> visible et l'aligner comme un <td> du même tableau
 * (même alignement, même « ::before » tiré du data-title — que seuls les <td> reçoivent de
 * woocommerce-smallscreen.css, un <th> n'en hérite pas).
 */
@media (max-width: 767.98px) {
    body.woocommerce-account .entry-content .woocommerce table.shop_table_responsive tbody th {
        display: block;
        text-align: right;
    }

    body.woocommerce-account .entry-content .woocommerce table.shop_table_responsive tbody th::before {
        content: attr(data-title) ": ";
        float: left;
        font-weight: 700;
    }
}

/*
 * #3224794293 — « Les champs du formulaire dépassent du cadre de la page »
 *
 * Mesuré sur la recette, à 768, 1024 et 1280 px : le conteneur « .woocommerce » de la page de
 * validation porte « margin: 0 -48px » et son formulaire de commande autant, soit 96 px de plus
 * que « .entry-content » à chaque niveau — 192 px au total. C'est une sortie de cadre
 * (« full-bleed ») dont la contrepartie n'existe nulle part : aucun parent ne porte les 48 px de
 * retrait qui la rattraperaient, à aucune largeur. Le formulaire déborde donc des DEUX côtés à
 * TOUTES les résolutions, et non sur la seule tablette — c'est simplement là que ça se voit, le
 * bord gauche passant alors sous le bord de l'écran et rognant le début des libellés
 * (« rénom », « om », « ays/région »), comme le montrent les captures du ticket.
 *
 * Neutraliser les deux marges rend au bloc la largeur de « .entry-content », exactement celle du
 * reste de la page (vérifié : bords alignés au pixel). Restreint à la page de validation, seul
 * périmètre du ticket : le panier et l'espace client gardent leur mise en page.
 */
body.woocommerce-checkout .entry-content .woocommerce,
body.woocommerce-checkout .entry-content .woocommerce form.checkout {
    margin-left: 0;
    margin-right: 0;
}

/*
 * #3225651267 — la vignette produit du récap de paiement 2 (voir checkout/form-pay.php).
 * Flottante à gauche du nom plutôt qu'en colonne : le tableau garde ses trois colonnes et sa
 * largeur, y compris une fois empilé sur mobile.
 */
.id-tunnel .id-paytable .id-paytable__thumb {
    float: left;
    margin: 0 0.75rem 0.25rem 0;
    line-height: 0;
}

.id-tunnel .id-paytable .id-paytable__thumb img {
    display: block;
    width: 3rem;
    height: auto;
    border-radius: var(--id-radius, 5px);
}

/*
 * #3226034338 — « Colonne "Votre commande" trop étroite sur tablette, texte tronqué mot par mot »
 *
 * Les deux colonnes de la caisse s'empilent déjà, mais seulement sous 767,98 px (voir plus haut) :
 * entre 768 et 991 px, le récapitulatif garde ses 38 % — mesuré à 222 px de large sur un iPad,
 * dont 76 px pour la colonne « Produit ». À cette largeur, « hyphens: auto » (hérité du thème)
 * fait son travail et coupe DANS les mots : « PRO-DUIT », « SOUS-TOTAL », « Infor-mation
 * Den-taire ». Ce n'est pas la césure qui est en cause, c'est la place qu'on lui laisse.
 *
 * Le palier d'empilement est donc porté à 991,98 px pour ces trois blocs — et pour eux seuls : le
 * bloc @media 767,98 px plus haut reste à son point, qui suit une bascule du thème (marge négative)
 * sans rapport avec cette colonne. Mêmes sélecteurs qu'en haut, donc même spécificité ; c'est
 * l'ordre dans la feuille qui tranche.
 *
 * La césure intra-mot est en outre ramenée à « manual » dans ce tableau : même à pleine largeur,
 * une colonne étroite ne doit pas couper « Information » en deux. Les mots trop longs passent par
 * « overflow-wrap », qui ne coupe qu'en dernier recours.
 */
@media (max-width: 991.98px) {
    body.id-tunnel .entry-content form.checkout > #customer_details,
    body.id-tunnel .entry-content form.checkout > #order_review_heading,
    body.id-tunnel .entry-content form.checkout > #order_review {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    body.id-tunnel .entry-content form.checkout > #order_review_heading {
        padding-top: 1.5rem;
    }
}

body.id-tunnel .entry-content #order_review table.shop_table th,
body.id-tunnel .entry-content #order_review table.shop_table td {
    hyphens: manual;
    overflow-wrap: break-word;
}