/*
 * Tunnel de commande Renov'2CV.
 * =============================================================================
 * AUCUNE POLICE CHARGEE, AUCUNE COULEUR PROPRE A CETTE PAGE.
 *
 * Les familles viennent du theme. Le tunnel n'en emploie qu'une, la famille de
 * texte de la charte, designee par la variable --rn-police-texte posee dans la
 * feuille de finition du theme enfant : aucune @font-face n'est declaree ici et
 * aucune requete supplementaire n'est faite. Les
 * couleurs viennent des variables de marque posees sur :root par la feuille de
 * finition du theme enfant : --rn-marine, --rn-corail, --rn-texte, --rn-gris,
 * --rn-bord, --rn-fond. Un changement de charte se fait la-bas, et cette page
 * suit sans qu'on y touche.
 *
 * Les seules variables definies ici sont des ESPACES et des RAYONS, c'est-a-dire
 * la grille de cette page. Elles portent un repli identique aux valeurs de
 * marque, pour que la feuille reste lisible si elle est ouverte seule.
 *
 * L'ECHELLE D'ESPACEMENT est volontairement courte : 4, 8, 12, 16, 20, 24. Une
 * page de paiement n'a pas besoin de respirer comme une page d'accueil ; elle a
 * besoin que le client voie d'un coup ce qu'il commande et ce qu'il paie. La
 * hierarchie se fait a la taille, a la graisse et a la couleur.
 */

/* Les jetons sont poses sur TOUS les blocs de la page, pas seulement sur le
   formulaire : l'entete, le bandeau de rappel et le formulaire des codes vivent
   en dehors du formulaire de commande. Tant qu'ils n'etaient pas cites ici,
   chacune de leurs regles appelait une variable inconnue, et une declaration
   qui appelle une variable inconnue n'est pas ignoree a moitie : elle est
   annulee. L'entete perdait ainsi son fond, sa bordure et la couleur de ses
   liens d'un seul coup. */
.rnp-entete,
.rnp-tunnel,
.rnp-resultat,
.rnp-bandeau,
#rnp-codes {
    --rnp-encre:        var(--rn-marine, #1A1D3E);
    --rnp-texte:        var(--rn-texte, #33374F);
    --rnp-sourdine:     var(--rn-gris, #6B7089);
    /* Le gris clair de la charte, #8B8FA8, ne donne que 3,2 de contraste sur
       blanc : il ne peut pas porter du texte. Les mentions en retrait prennent
       donc le gris de texte, a 4,9, et la hierarchie se fait a la taille et a la
       graisse. Le gris clair reste disponible pour ce qui n'est pas du texte. */
    --rnp-tres-sourdine:var(--rn-gris, #6B7089);
    --rnp-trait-clair:  var(--rn-gris-clair, #8B8FA8);
    --rnp-accent:       var(--rn-corail, #FD604F);
    --rnp-accent-fonce: var(--rn-corail-fonce, #E5503F);
    --rnp-accent-doux:  #FFF1EE;
    --rnp-filet:        var(--rn-bord, #E4E6F0);
    --rnp-filet-fort:   #CFD3E2;
    --rnp-encre-doux:   var(--rn-marine-doux, #2B3054);
    --rnp-fond:         #FFFFFF;
    --rnp-fond-doux:    var(--rn-fond, #F6F7FB);
    /* Un cran plus fonce que le fond doux : le survol d'un element deja pose
       sur ce fond doit se voir sans changer de famille de couleur. */
    --rnp-fond-appuye:  #EDEFF6;
    --rnp-bon:          var(--rn-vert, #1C7C3C);
    --rnp-bon-doux:     #EAF6EE;
    --rnp-alerte:       #B3261E;
    --rnp-alerte-doux:  #FDECEA;

    --rnp-rayon:        var(--rn-rayon, 10px);
    --rnp-rayon-petit:  8px;
    --rnp-ombre:        var(--rn-ombre, 0 2px 10px rgba(26, 29, 62, .06));

    --rnp-e1: 4px;
    --rnp-e2: 8px;
    --rnp-e3: 12px;
    --rnp-e4: 16px;
    --rnp-e5: 20px;
    --rnp-e6: 24px;

    color: var(--rnp-texte);
}

.rnp-entete *,
.rnp-tunnel *,
.rnp-resultat *,
.rnp-bandeau *,
#rnp-codes * { box-sizing: border-box; }

/* --------------------------------------------------------------- typographie
   UNE SEULE FAMILLE DANS TOUT LE TUNNEL.
   -----------------------------------------------------------------------------
   La page melangeait trois typographies : Fredoka pour le texte courant,
   Montserrat pour les titres et les libelles portes par un titre (la case
   « Livrer a une adresse differente » vit dans un h3), et la police d'icones
   du theme pour tout l'interieur du formulaire.

   Ce dernier cas etait un accident de nommage : la feuille Remix Icon du theme
   impose sa police a tout element dont une classe commence par « ri- », avec
   un !important. Le formulaire d'inscription posait la classe « ri-js », qui
   correspond a ce motif. Tout le tunnel heritait donc de la police d'icones.
   Le prefixe de cette extension a ete renomme « rni- », ce qui supprime la
   collision a sa racine plutot que de la contrer.

   Reste l'harmonisation : le tunnel prend la famille de texte de la charte,
   nommee une seule fois dans la feuille de finition du theme enfant. Aucune
   police n'est chargee ici, aucune @font-face n'est declaree : ces familles
   sont deja servies par le theme, on ne fait que les designer.

   Les elements qui portent une police d'icones sont exclus : leurs glyphes
   n'existent pas dans une police de texte, les remplacer afficherait des
   carres vides a la place des pictogrammes. */
.rnp-entete,
.rnp-tunnel,
.rnp-resultat,
.rnp-bandeau,
#rnp-codes {
    font-family: var(--rn-police-texte, 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.rnp-entete *:not([class*="ri-"], [class*="zi-"], [class*="fa-"], [class*="icon"], .dashicons, .dashicons-before),
.rnp-tunnel *:not([class*="ri-"], [class*="zi-"], [class*="fa-"], [class*="icon"], .dashicons, .dashicons-before),
.rnp-resultat *:not([class*="ri-"], [class*="zi-"], [class*="fa-"], [class*="icon"], .dashicons, .dashicons-before),
.rnp-bandeau *:not([class*="ri-"], [class*="zi-"], [class*="fa-"], [class*="icon"], .dashicons, .dashicons-before),
#rnp-codes *:not([class*="ri-"], [class*="zi-"], [class*="fa-"], [class*="icon"], .dashicons, .dashicons-before) {
    font-family: inherit;
}

/* Le gabarit de la page laisse un large blanc entre le titre et le formulaire,
   et un autre avant le pied de page : cent pixels avant le premier champ, et
   autant apres le bouton. Une page de paiement n'a pas ce luxe.
   -----------------------------------------------------------------------------
   Ces regles sont limitees a la page de commande. Elles ne touchent ni la
   feuille du theme, ni les reglages Elementor : le reste du site garde ses
   espaces. */
.woocommerce-checkout .post-content > .elementor,
.woocommerce-checkout .single-page-content { padding-top: 0; margin-top: 0; }

.woocommerce-checkout .single-page-content > .container > article > .elementor .e-con,
.woocommerce-checkout .single-page-content .elementor-element > .e-con-inner { padding-top: 0; }

.woocommerce-checkout .woocommerce { margin: 0; }

.woocommerce-checkout .rnp-tunnel { margin: 0 0 var(--rnp-e5); }

/* ------------------------------------------------------------------- entete */

/* Le theme rend le titre et le fil d'Ariane dans un bloc a lui, sur toute la
   largeur, avec ses propres marges. On le retire de cette seule page : le meme
   contenu est refait juste dessous, d'un seul tenant et sur un fond teinte. */
.woocommerce-checkout .nikstore-common-breadcrumbs.nikstore-page-breadcrumb { display: none; }

.rnp-entete {
    max-width: 1240px;
    margin: 0 auto var(--rnp-e4);
    padding: var(--rnp-e3) var(--rnp-e5) var(--rnp-e4);
    border: 1px solid var(--rnp-filet);
    border-radius: var(--rnp-rayon);
    /* Le fond doux de la charte, pas une couleur inventee : la meme teinte que
       les autres fonds legers de la page. */
    background: var(--rnp-fond-doux);
    text-align: center;
}

.rnp-entete__fil ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--rnp-e2);
    margin: 0 0 var(--rnp-e2);
    padding: 0;
    list-style: none;
}

.rnp-entete__fil li {
    display: inline-flex;
    align-items: center;
    gap: var(--rnp-e2);
    margin: 0;
    font-size: .88em;
    line-height: 1.4;
}

.rnp-entete__fil a {
    padding: 0;
    color: var(--rnp-sourdine);
    font-weight: 600;
    text-decoration: none;
    background: none;
    border-radius: 0;
}

.rnp-entete__fil a:hover { color: var(--rnp-accent-fonce); text-decoration: underline; text-underline-offset: 2px; }

.rnp-entete__fil [aria-current="page"] { color: var(--rnp-encre); font-weight: 700; }

/* Un chevron dessine au trait plutot qu'une icone de police : il suit la
   couleur du texte et ne depend d'aucun fichier. */
.rnp-entete__separateur {
    width: 5px;
    height: 5px;
    border-top: 1.5px solid var(--rnp-trait-clair);
    border-right: 1.5px solid var(--rnp-trait-clair);
    transform: rotate(45deg);
}

.rnp-entete__titre {
    margin: 0;
    color: var(--rnp-encre);
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}

/* ------------------------------------------------------------------ bandeau */

/* Le rappel de connexion, sur une seule ligne. Le code promo n'est plus la :
   il est descendu dans la colonne de droite, sous le total. */
.rnp-bandeau {
    max-width: 1240px;
    margin: 0 auto var(--rnp-e4);
    display: flow-root;
}

.rnp-bandeau:empty { display: none; }

.rnp-bandeau .woocommerce-form-login-toggle { float: none; width: auto; margin: 0; }

.rnp-bandeau .woocommerce-info,
.rnp-bandeau .woocommerce-message,
.rnp-bandeau .woocommerce-error {
    margin: 0 0 var(--rnp-e2);
    padding: var(--rnp-e3) var(--rnp-e4);
    border: 1px solid var(--rnp-filet);
    border-left: 3px solid var(--rnp-accent);
    border-radius: var(--rnp-rayon-petit);
    background: var(--rnp-fond-doux);
    font-size: .95em;
    line-height: 1.5;
}

.rnp-bandeau .woocommerce-error {
    border-left-color: var(--rnp-alerte);
    background: var(--rnp-alerte-doux);
    color: var(--rnp-alerte);
}

.rnp-bandeau form.login { margin-top: var(--rnp-e2); }

/* --------------------------------------------------------------------- rail */

.rnp-rail {
    max-width: 1240px;
    margin: 0 auto var(--rnp-e4);
    border-bottom: 1px solid var(--rnp-filet);
}

.rnp-tunnel .rnp-rail ol {
    display: flex;
    gap: var(--rnp-e5);
    margin: 0;
    padding: 0 0 var(--rnp-e2);
    list-style: none;
}

.rnp-tunnel .rnp-rail a {
    display: inline-flex;
    align-items: center;
    gap: var(--rnp-e2);
    padding: 0;
    color: var(--rnp-sourdine);
    font-size: .94em;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border-radius: 0;
}

.rnp-tunnel .rnp-rail__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: .82em;
    font-weight: 700;
    line-height: 1;
}

.rnp-tunnel .rnp-rail li.is-courant a { color: var(--rnp-encre); }

.rnp-tunnel .rnp-rail li.is-courant .rnp-rail__numero {
    border-color: var(--rnp-accent);
    background: var(--rnp-accent);
    color: #fff;
}

.rnp-tunnel .rnp-rail a:hover { color: var(--rnp-encre); }

/* ----------------------------------------------------------------- colonnes */

/* La colonne de droite est plus large qu'une colonne de formulaire : elle porte
   des noms de produits, des montants alignes et les moyens de paiement. */
.rnp-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: var(--rnp-e6);
    align-items: start;
    max-width: 1240px;
    margin: 0 auto;
}

/* ----------------------------------------------------------------- sections */

.rnp-section {
    margin: 0 0 var(--rnp-e4);
    border: 1px solid var(--rnp-filet);
    border-radius: var(--rnp-rayon);
    background: var(--rnp-fond);
}

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

.rnp-tunnel .rnp-section__entete {
    display: flex;
    align-items: center;
    gap: var(--rnp-e2);
    padding: var(--rnp-e3) var(--rnp-e4);
    border-bottom: 1px solid var(--rnp-filet);
}

.rnp-tunnel .rnp-section__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--rnp-encre);
    color: #fff;
    font-size: .78em;
    font-weight: 700;
    line-height: 1;
}

.rnp-tunnel .rnp-section__titre,
.rnp-tunnel .rnp-bloc__titre {
    margin: 0;
    color: var(--rnp-encre);
    font-size: 1.06em;
    font-weight: 700;
    line-height: 1.3;
}

.rnp-tunnel .rnp-section__corps { padding: var(--rnp-e4); }

/* Les titres que WooCommerce pose dans les sections : « Détails de facturation »,
   « Livrer à une autre adresse ? ». Ils ne redoublent pas le titre de section. */
.rnp-tunnel #customer_details h3:not(#ship-to-different-address),
.rnp-tunnel .woocommerce-billing-fields > h3,
.rnp-tunnel .woocommerce-additional-fields > h3 {
    margin: 0 0 var(--rnp-e3);
    color: var(--rnp-sourdine);
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.3;
}

.rnp-tunnel .woocommerce-additional-fields { margin-top: var(--rnp-e4); }

/* ------------------------------------------------------------------- champs */

.rnp-tunnel .form-row {
    margin: 0 0 var(--rnp-e3);
    padding: 0;
}

.rnp-tunnel .form-row label {
    display: block;
    margin: 0 0 var(--rnp-e1);
    color: var(--rnp-encre);
    font-size: .92em;
    font-weight: 600;
    line-height: 1.35;
}

/* L'asterisque en orange n'atteint que 3,0 de contraste sur blanc. Il n'est de
   toute facon pas la seule marque de l'obligation : les champs facultatifs le
   disent en toutes lettres, et l'attribut « required » est pose. */
.woocommerce form.rnp-tunnel .form-row .required,
.woocommerce form.rnp-tunnel .rni-champ .required,
.rnp-tunnel .form-row .required,
.rnp-tunnel .rni-champ .required {
    color: var(--rnp-sourdine);
    text-decoration: none;
    border: 0;
}

.rnp-tunnel .form-row input.input-text,
.rnp-tunnel .form-row textarea,
.rnp-tunnel .form-row select,
.rnp-tunnel .select2-container .select2-selection--single {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--rnp-filet-fort);
    border-radius: var(--rnp-rayon-petit);
    background: var(--rnp-fond);
    color: var(--rnp-encre);
    font-size: .96em;
    line-height: 1.4;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.rnp-tunnel .form-row textarea { min-height: 72px; resize: vertical; }

.rnp-tunnel .form-row input.input-text:focus,
.rnp-tunnel .form-row textarea:focus,
.rnp-tunnel .form-row select:focus {
    outline: none;
    border-color: var(--rnp-accent);
    box-shadow: 0 0 0 3px var(--rnp-accent-doux);
}

.rnp-tunnel .form-row .description,
.rnp-tunnel .rni-aide {
    display: block;
    margin: var(--rnp-e1) 0 0;
    font-size: .82em;
    line-height: 1.4;
    color: var(--rnp-sourdine);
}

/* UNE ERREUR EST ROUGE, PAS ORANGE.
   -----------------------------------------------------------------------------
   WooCommerce cerne les champs fautifs et le theme lui donne l'orange de la
   marque, celui du bouton qui valide la commande : un champ en faute avait donc
   exactement la couleur de l'action a faire. Le rouge d'alerte est reserve a
   l'erreur, l'orange a l'action. La priorite du selecteur de WooCommerce est
   reprise a l'identique, augmentee de notre classe. */
.woocommerce form.rnp-tunnel .form-row.woocommerce-invalid input.input-text,
.woocommerce form.rnp-tunnel .form-row.woocommerce-invalid select,
.woocommerce form.rnp-tunnel .form-row.woocommerce-invalid textarea,
.rnp-tunnel .form-row.woocommerce-invalid input.input-text,
.rnp-tunnel .form-row.woocommerce-invalid select {
    border-color: var(--rnp-alerte);
    background: var(--rnp-alerte-doux);
}

/* Un champ correctement rempli n'a pas besoin d'etre souligne en vert : le
   formulaire n'est pas une correction de copie. Il reprend son filet normal. */
.woocommerce form.rnp-tunnel .form-row.woocommerce-validated input.input-text,
.woocommerce form.rnp-tunnel .form-row.woocommerce-validated select,
.woocommerce form.rnp-tunnel .form-row.woocommerce-validated textarea,
.rnp-tunnel .form-row.woocommerce-validated input.input-text {
    border-color: var(--rnp-filet-fort);
    background: var(--rnp-fond);
}

/* Le releve des erreurs, en tete de formulaire. Il suivait la largeur de
   l'ecran alors que tout le reste de la page tient dans mille deux cent
   quarante pixels, et portait le fond blanc et le filet orange du theme. */
.rnp-tunnel .woocommerce-NoticeGroup {
    max-width: 1240px;
    margin: 0 auto var(--rnp-e4);
}

.woocommerce form.rnp-tunnel .woocommerce-NoticeGroup .woocommerce-error,
.rnp-tunnel .woocommerce-NoticeGroup .woocommerce-error {
    margin: 0;
    padding: var(--rnp-e3) var(--rnp-e4);
    border: 1px solid var(--rnp-alerte);
    border-left-width: 3px;
    border-radius: var(--rnp-rayon-petit);
    background: var(--rnp-alerte-doux);
    color: var(--rnp-alerte);
    font-size: .9em;
    line-height: 1.5;
    list-style: none;
}

.woocommerce form.rnp-tunnel .woocommerce-NoticeGroup .woocommerce-error li,
.rnp-tunnel .woocommerce-NoticeGroup .woocommerce-error li {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    line-height: 1.5;
    list-style: none;
}

.woocommerce form.rnp-tunnel .woocommerce-NoticeGroup .woocommerce-error li + li,
.rnp-tunnel .woocommerce-NoticeGroup .woocommerce-error li + li { margin-top: var(--rnp-e1); }

.rnp-tunnel .woocommerce-NoticeGroup .woocommerce-error strong { color: inherit; }

/* WooCommerce ecrit un champ « Region / Departement » sans contenu pour les pays
   qui n'en declarent pas, la France comprise, et le marque .hidden. Le theme ne
   connait pas cette classe : la ligne restait a l'ecran, une boite grise vide
   sous un libelle obligatoire. */
.rnp-tunnel .form-row input.hidden,
.rnp-tunnel .form-row select.hidden { display: none; }

.rnp-tunnel .form-row:has( > .woocommerce-input-wrapper > .hidden ) { display: none; }

/* Deux champs par ligne quand la place le permet.
   -----------------------------------------------------------------------------
   Une grille plutot que des flottants. L'extension de champs personnalises ne
   pose pas toujours « first » avant « last » dans le balisage : avec des
   flottants, la paire se collait sans gouttiere des que l'ordre s'inversait. */
@media (min-width: 700px) {

    .rnp-tunnel .woocommerce-billing-fields__field-wrapper,
    .rnp-tunnel .woocommerce-shipping-fields__field-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--rnp-e3);
    }

    .rnp-tunnel .woocommerce-billing-fields__field-wrapper > *,
    .rnp-tunnel .woocommerce-shipping-fields__field-wrapper > * {
        float: none;
        width: auto;
        grid-column: 1 / -1;
    }

    /* wpautop laisse un paragraphe vide en tete du bloc. Invisible, il prenait
       tout de meme une case et decalait la paire prenom / nom. */
    .rnp-tunnel .woocommerce-billing-fields__field-wrapper > p:empty,
.rnp-tunnel .woocommerce-shipping-fields__field-wrapper > p:empty { display: none; }

    .rnp-tunnel .woocommerce-billing-fields__field-wrapper > .form-row-first,
    .rnp-tunnel .woocommerce-billing-fields__field-wrapper > .form-row-last,
    .rnp-tunnel .woocommerce-shipping-fields__field-wrapper > .form-row-first,
    .rnp-tunnel .woocommerce-shipping-fields__field-wrapper > .form-row-last {
        grid-column: auto;
    }
}

/* --------------------------------------------------------------- cases */

/* La case et son libelle sur une seule ligne, alignes sur la premiere ligne du
   texte quand celui-ci passe a la ligne. */
.rnp-tunnel p.create-account > label.checkbox,
.rnp-tunnel h3 > label.checkbox,
.rnp-tunnel label.checkbox,
.rnp-tunnel .woocommerce-form__label-for-checkbox {
    display: flex;
    gap: var(--rnp-e2);
    align-items: flex-start;
    margin: 0;
    color: var(--rnp-encre);
    font-size: .95em;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
}

/* wpautop glisse des sauts de ligne entre la puce et son libelle. */
.rnp-tunnel label.checkbox > br { display: none; }

.rnp-tunnel label.checkbox input[type="checkbox"],
.rnp-tunnel .woocommerce-form__label-for-checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--rnp-accent);
}

/* « Livrer à une autre adresse ? » est un h3 dans WooCommerce : il ne doit pas
   peser comme un titre de section. */
.rnp-tunnel #ship-to-different-address {
    margin: 0;
    font-size: 1em;
    font-weight: 600;
}

/* Le bloc de livraison differente s'ouvre en douceur, sans sauter la page. */
.rnp-tunnel .shipping_address {
    overflow: hidden;
    transition: max-height .22s ease, opacity .18s ease;
}

.rnp-tunnel .shipping_address.is-replie {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

.rnp-tunnel .shipping_address.is-ouvert {
    max-height: 1400px;
    opacity: 1;
    margin-top: var(--rnp-e3);
}

/* ---------------------------------------------------------------- compte */

.rnp-tunnel .woocommerce-account-fields { margin-top: var(--rnp-e3); }

.rnp-tunnel .rnp-compte {
    display: flex;
    flex-direction: column;
    margin: var(--rnp-e3) 0 0;
    padding: var(--rnp-e4);
    border: 1px solid var(--rnp-filet);
    border-radius: var(--rnp-rayon-petit);
    background: var(--rnp-fond-doux);
}

/* Le mot de passe est pose par WooCommerce entre la question et les champs du
   profil. On ne deplace pas le balisage, on remet seulement l'ordre a
   l'affichage : d'abord le type de compte, puis ce qu'il demande, et le mot de
   passe en dernier, quand le visiteur sait deja quel compte il ouvre. */
.rnp-compte > .rni-choix { order: 1; }
.rnp-tunnel .rnp-compte > .rni-bloc { order: 2; }
.rnp-tunnel .rnp-compte > .create-account { order: 3; }

/* Repliee tant que la case n'est pas cochee. La classe n'est posee que par le
   script : sans lui le bloc reste visible et le serveur tranche. */
.rnp-tunnel .rnp-compte.rnp-compte--replie { display: none; }
.rnp-tunnel .rnp-compte.rnp-compte--replie.is-ouvert { display: flex; }

.rnp-tunnel .rnp-compte .rni-choix { margin-bottom: var(--rnp-e3); }

.rnp-tunnel .rnp-compte .rni-choix__legende {
    margin: 0 0 var(--rnp-e1);
    padding: 0;
    color: var(--rnp-encre);
    font-size: .95em;
    font-weight: 700;
}

.rnp-tunnel .rnp-compte .rni-choix__aide {
    margin: 0 0 var(--rnp-e3);
    font-size: .84em;
    line-height: 1.45;
    color: var(--rnp-sourdine);
}

.rnp-tunnel .rnp-compte .rni-cartes { gap: var(--rnp-e2); }
.rnp-tunnel .rnp-compte .rni-carte { padding: var(--rnp-e3); }
.rnp-tunnel .rnp-compte .rni-bloc[data-rni-pour] { margin: var(--rnp-e3) 0 0; padding: var(--rnp-e3) var(--rnp-e3) var(--rnp-e1); }
.rnp-tunnel .rnp-compte .rni-bloc__titre { margin-bottom: var(--rnp-e2); font-size: .8em; }

/* Les champs du parcours d'inscription prennent la mesure de ceux du tunnel :
   un formulaire, une seule echelle de libelles et de champs. */
.rnp-tunnel .rni-champ { margin-bottom: var(--rnp-e3); }

.rnp-tunnel .rni-champ label {
    margin-bottom: var(--rnp-e1);
    color: var(--rnp-encre);
    font-size: .92em;
    font-weight: 600;
    line-height: 1.35;
}

.rnp-tunnel .rni-champ input,
.rnp-tunnel .rni-champ select {
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--rnp-filet-fort);
    border-radius: var(--rnp-rayon-petit);
    font-size: .96em;
}

.rnp-tunnel .rni-champ input:focus,
.rnp-tunnel .rni-champ select:focus {
    border-color: var(--rnp-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--rnp-accent-doux);
}

.rnp-tunnel .rni-carte__titre { font-size: .95em; }
.rnp-tunnel .rni-carte__resume,
.rnp-tunnel .rni-carte__detail { font-size: .82em; line-height: 1.4; }
.rnp-tunnel .rni-avis { margin: var(--rnp-e1) 0 var(--rnp-e3); padding: var(--rnp-e2) var(--rnp-e3); font-size: .82em; }

/* ------------------------------------------------------------------- blocs */

.rnp-bloc {
    margin: 0 0 var(--rnp-e3);
    border: 1px solid var(--rnp-filet);
    border-radius: var(--rnp-rayon);
    background: var(--rnp-fond);
    box-shadow: var(--rnp-ombre);
}

.rnp-tunnel .rnp-bloc__entete {
    display: flex;
    align-items: center;
    gap: var(--rnp-e2);
    padding: var(--rnp-e3) var(--rnp-e4);
    border-bottom: 1px solid var(--rnp-filet);
}

.rnp-tunnel .rnp-bloc__titre { flex: 0 1 auto; width: auto; }

.rnp-tunnel .rnp-bloc__meta {
    display: flex;
    align-items: center;
    gap: var(--rnp-e3);
    margin-left: auto;
}

.rnp-tunnel .rnp-bloc__compte {
    color: var(--rnp-sourdine);
    font-size: .85em;
    white-space: nowrap;
}

.rnp-tunnel .rnp-bloc__lien {
    color: var(--rnp-sourdine);
    font-size: .85em;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
}

.rnp-tunnel .rnp-bloc__lien:hover { color: var(--rnp-accent); }

.rnp-tunnel .rnp-bloc__replier {
    display: none;
    flex: 0 0 auto;
    padding: 4px;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--rnp-sourdine);
}

.rnp-tunnel .rnp-bloc--paiement .rnp-section__entete { border-bottom: 1px solid var(--rnp-filet); }

/* -------------------------------------------------------- lignes du panier */

.rnp-panier__corps { padding: var(--rnp-e3) var(--rnp-e4); }

.rnp-tunnel .rnp-lignes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rnp-tunnel .rnp-ligne {
    display: flex;
    align-items: flex-start;
    gap: var(--rnp-e3);
    padding: var(--rnp-e3) 0;
    border-bottom: 1px solid var(--rnp-filet);
}

.rnp-tunnel .rnp-lignes > .rnp-ligne:first-child { padding-top: 0; }

.rnp-tunnel .rnp-ligne__visuel {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border: 1px solid var(--rnp-filet);
    border-radius: var(--rnp-rayon-petit);
    background: var(--rnp-fond-doux);
    overflow: hidden;
}

.rnp-tunnel .rnp-ligne__visuel img,
.rnp-tunnel .rnp-ligne__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    margin: 0;
}

/* La quantite se lit sur la vignette, comme dans un panier de tete : elle ne
   prend pas une ligne de texte pour un seul chiffre. */
/* Rien sous douze pixels : le suffixe de taxe reste lisible. */
.rnp-tunnel .tax_label,
.rnp-tunnel small.tax_label,
.rnp-tunnel .woocommerce-Price-taxLabel { font-size: .82em; }

.rnp-tunnel .rnp-ligne__pastille {
    position: absolute;
    top: -1px;
    right: -1px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--rnp-encre);
    color: #fff;
    font-size: .68em;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.rnp-tunnel .rnp-ligne__texte {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

.rnp-tunnel .rnp-ligne__nom {
    display: block;
    color: var(--rnp-encre);
    font-size: .95em;
    font-weight: 600;
    line-height: 1.35;
}

.rnp-tunnel .rnp-ligne__options,
.rnp-tunnel .rnp-ligne__detail {
    display: block;
    margin-top: 2px;
    font-size: .82em;
    line-height: 1.4;
    color: var(--rnp-sourdine);
}

.rnp-tunnel .rnp-ligne__options p { margin: 0; }
.rnp-tunnel .rnp-ligne__options dl { margin: 0; font-size: 1em; }
.rnp-tunnel .rnp-ligne__options dt,
.rnp-tunnel .rnp-ligne__options dd { display: inline; margin: 0; font-weight: inherit; }
.rnp-tunnel .rnp-ligne__options dd + dt::before { content: ' · '; }

.rnp-tunnel .rnp-ligne__prix {
    flex: 0 0 auto;
    padding-left: var(--rnp-e2);
    color: var(--rnp-encre);
    font-size: .95em;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

/* Un composant de lot n'a pas de prix : il est compris dans celui du lot. */
.rnp-ligne--composant {
    padding: var(--rnp-e1) 0 var(--rnp-e1) 64px;
    border-bottom: 0;
}

.rnp-tunnel .rnp-ligne--composant .rnp-ligne__nom {
    font-size: .84em;
    font-weight: 500;
    color: var(--rnp-sourdine);
}

.rnp-tunnel .rnp-ligne--composant .rnp-ligne__prix { font-size: .82em; font-weight: 500; }

/* ------------------------------------------------------------------ totaux */

.rnp-totaux {
    margin: var(--rnp-e3) 0 0;
    padding: var(--rnp-e3) 0 0;
    border-top: 1px solid var(--rnp-filet);
}

.rnp-tunnel .rnp-totaux > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rnp-e3);
    padding: 3px 0;
}

.rnp-tunnel .rnp-totaux dt,
.rnp-tunnel .rnp-totaux dd {
    margin: 0;
    font-size: .92em;
    line-height: 1.45;
}

.rnp-tunnel .rnp-totaux dt { color: var(--rnp-sourdine); font-weight: 500; }
.rnp-tunnel .rnp-totaux dd { color: var(--rnp-texte); font-weight: 600; text-align: right; white-space: nowrap; }

.rnp-tunnel .rnp-totaux__remise dt,
.rnp-tunnel .rnp-totaux__remise dd { color: var(--rnp-bon); }

.rnp-tunnel .rnp-totaux__taxe dt,
.rnp-tunnel .rnp-totaux__taxe dd,
.rnp-tunnel .rnp-totaux__rappel dt,
.rnp-tunnel .rnp-totaux__rappel dd,
.rnp-tunnel .rnp-totaux__consigne dt,
.rnp-tunnel .rnp-totaux__consigne dd { font-size: .85em; color: var(--rnp-tres-sourdine); font-weight: 500; }

/* La part consignee est un rappel, pas un montant a ajouter : elle se lit
   comme la ligne de TVA, en retrait, jamais en gras. Elle est deja comprise
   dans le sous-total au-dessus ; c'est meme la seule raison de l'ecrire, pour
   expliquer l'ecart entre le prix de la piece et la somme a payer. */
.rnp-tunnel .rnp-totaux__consigne { border-bottom: 1px dashed var(--rnp-filet); padding-bottom: var(--rnp-e2); }

/* La mention posee par le module des consignes, sous le nom de l'article. */
.rnp-tunnel .rnp-ligne .rcs-mention {
    display: block;
    margin-top: 2px;
    font-size: .8em;
    line-height: 1.4;
    color: var(--rnp-sourdine);
}

/* wc_cart_totals_shipping_html rend le nom du colis, la liste des methodes et
   le rappel de destination. Sur une ligne de total, tout cela doit tenir a
   droite, en une ou deux lignes, sans centrage ni gros caracteres. */
.rnp-tunnel .rnp-totaux__livraison dd { text-align: right; white-space: normal; }
.rnp-tunnel .rnp-totaux__livraison ul,
.rnp-tunnel .rnp-totaux__livraison li { margin: 0; padding: 0; list-style: none; }

.rnp-tunnel .rnp-totaux__livraison label,
.rnp-tunnel .rnp-totaux__livraison .woocommerce-Price-amount {
    font-size: 1em;
    font-weight: 600;
    color: var(--rnp-texte);
}

.rnp-tunnel .rnp-totaux__livraison input[type="radio"] { margin-right: var(--rnp-e1); accent-color: var(--rnp-accent); }

.rnp-tunnel .rnp-totaux__livraison p,
.rnp-tunnel .woocommerce-shipping-destination {
    margin: 2px 0 0;
    font-size: .82em;
    font-weight: 500;
    color: var(--rnp-tres-sourdine);
}

/* Le titre du colis, quand il n'y en a qu'un, ne dit rien de plus que
   « Livraison » : il est deja annonce par le libelle de la ligne. Il reste
   ecrit pour les lecteurs d'ecran des qu'il y a plusieurs colis. */
.rnp-tunnel .rnp-totaux__livraison h4,
.rnp-tunnel .rnp-totaux__livraison th { display: none; }

.rnp-tunnel .rnp-totaux__livraison dd:has( ul li + li ) h4 {
    display: block;
    margin: 0 0 2px;
    font-size: .8em;
    font-weight: 700;
    color: var(--rnp-tres-sourdine);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rnp-tunnel .rnp-totaux__livraison li + li { margin-top: 2px; }

/* Le total a payer est l'information financiere la plus visible de la page.
   Il le devient par la taille, la graisse et la couleur, pas par une police
   differente ni par un encadre. */
.rnp-totaux__final {
    margin-top: var(--rnp-e2);
    padding-top: var(--rnp-e3);
    border-top: 1px solid var(--rnp-filet);
}

.rnp-tunnel .rnp-totaux__final dt {
    color: var(--rnp-encre);
    font-size: 1em;
    font-weight: 700;
}

/* Le corail de la charte, blanc ou blanc dessus, ne passe le contraste que sur
   du grand texte : au moins 18,66 px en gras. Le total et le bouton sont donc
   ecrits assez grand pour cela, et prennent le corail fonce, qui laisse une
   marge au lieu de fraiser la limite. C'est aussi ce que veut la page : le
   montant a payer et l'action finale doivent etre les deux choses qu'on voit. */
.rnp-tunnel .rnp-totaux__final dd {
    color: var(--rnp-accent-fonce);
    font-size: 1.38em;
    font-weight: 800;
    line-height: 1.2;
}

.rnp-tunnel .rnp-totaux__mention {
    margin: var(--rnp-e2) 0 0;
    font-size: .82em;
    color: var(--rnp-sourdine);
}

/* --------------------------------------------------------- codes replies */

.rnp-bloc__codes {
    padding: 0 var(--rnp-e4) var(--rnp-e3);
    border-top: 1px solid var(--rnp-filet);
}

.rnp-tunnel .rnp-code { padding-top: var(--rnp-e2); }
.rnp-tunnel .rnp-code + .rnp-code { border-top: 1px dashed var(--rnp-filet); }

/* L'ENTETE D'UN REPLI N'EST PAS UNE ACTION PRINCIPALE.
   -----------------------------------------------------------------------------
   Le theme peint en orange le fond de tout bouton, y compris au survol. Cet
   entete etant un bouton, il devenait un aplat orange sur lequel le texte, lui
   aussi orange, disparaissait, et le chevron avec. L'orange est reserve au
   bouton qui valide la commande ; ouvrir un repli se signale par un fond
   legerement teinte et rien d'autre.
   Les trois etats sont poses explicitement, fond compris, pour qu'aucune regle
   de bouton du theme ne vienne les remplir. Aucun ne deplace quoi que ce soit :
   ni bordure qui apparait, ni epaisseur qui change. */
.rnp-tunnel .rnp-code__bascule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rnp-e2);
    width: calc( 100% + var(--rnp-e2) * 2 );
    padding: var(--rnp-e2);
    margin: 0 calc( var(--rnp-e2) * -1 );
    border: 0;
    border-radius: var(--rnp-rayon-petit);
    background: none;
    color: var(--rnp-encre);
    font-size: .9em;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}

.rnp-tunnel .rnp-code__bascule:hover,
.rnp-tunnel .rnp-code__bascule:focus,
.rnp-tunnel .rnp-code__bascule:focus-visible,
.rnp-tunnel .rnp-code__bascule:active,
.rnp-tunnel .rnp-code__bascule[aria-expanded="true"] {
    background: var(--rnp-fond-doux);
    color: var(--rnp-encre);
}

/* Ouvert n'est pas survole : le repli ouvert garde son fond teinte, et son
   chevron pointe vers le haut. Le survol, lui, fonce d'un cran. */
.rnp-tunnel .rnp-code__bascule:hover { background: var(--rnp-fond-appuye); }

.rnp-tunnel .rnp-code__bascule:focus { outline: none; }

.rnp-tunnel .rnp-code__bascule:focus-visible {
    outline: 2px solid var(--rnp-encre);
    outline-offset: 1px;
}

.rnp-tunnel .rnp-code__chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: 65% 65%;
    transition: transform .16s ease;
}

.rnp-tunnel .rnp-code__bascule[aria-expanded="true"] .rnp-code__chevron,
.rnp-tunnel .rnp-bloc__replier[aria-expanded="true"] .rnp-code__chevron { transform: rotate(-135deg); }

.rnp-tunnel .rnp-code__corps { padding: var(--rnp-e1) 0 var(--rnp-e2); }
.rnp-tunnel .rnp-code__corps[hidden] { display: none; }

.rnp-tunnel .rnp-code__ligne { display: flex; gap: var(--rnp-e2); }

.rnp-tunnel .rnp-code__champ {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--rnp-filet-fort);
    border-radius: var(--rnp-rayon-petit);
    background: var(--rnp-fond);
    color: var(--rnp-encre);
    font-size: .92em;
}

.rnp-tunnel .rnp-code__champ:focus {
    outline: none;
    border-color: var(--rnp-accent);
    box-shadow: 0 0 0 3px var(--rnp-accent-doux);
}

.rnp-tunnel .rnp-code__valider {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 var(--rnp-e4);
    border: 1px solid var(--rnp-encre);
    border-radius: var(--rnp-rayon-petit);
    background: var(--rnp-encre);
    color: #fff;
    font-size: .9em;
    font-weight: 700;
    cursor: pointer;
    transition: filter .12s ease;
}

.rnp-tunnel .rnp-code__valider:hover,
.rnp-tunnel .rnp-code__valider:focus,
.rnp-tunnel .rnp-code__valider:active {
    background: var(--rnp-encre-doux);
    border-color: var(--rnp-encre-doux);
    color: #fff;
}

.rnp-tunnel .rnp-code__valider:focus { outline: none; }

.rnp-tunnel .rnp-code__valider:focus-visible {
    outline: 2px solid var(--rnp-encre);
    outline-offset: 2px;
}

.rnp-tunnel .rnp-code__valider[disabled] { opacity: .55; cursor: progress; }

.rnp-tunnel .rnp-code__aide {
    margin: var(--rnp-e2) 0 0;
    font-size: .8em;
    line-height: 1.4;
    color: var(--rnp-sourdine);
}

.rnp-tunnel .rnp-code__message:empty { display: none; }

.rnp-tunnel .rnp-code__message {
    margin-top: var(--rnp-e2);
    padding: var(--rnp-e2) var(--rnp-e3);
    border-radius: var(--rnp-rayon-petit);
    font-size: .85em;
    line-height: 1.45;
}

.rnp-tunnel .rnp-code__message--erreur { background: var(--rnp-alerte-doux); color: var(--rnp-alerte); }
.rnp-tunnel .rnp-code__message--bon { background: var(--rnp-bon-doux); color: var(--rnp-bon); }
/* Le serveur renvoie le message dans la liste d'erreurs de WooCommerce, que le
   theme habille d'un fond blanc et d'un filet orange. Pose dans un encadre qui
   porte deja sa couleur, cela faisait un bloc blanc dans un bloc rouge. La
   liste redevient une simple suite de lignes. */
.woocommerce form.rnp-tunnel .rnp-code__message ul,
.woocommerce form.rnp-tunnel .rnp-code__message li,
.rnp-tunnel .rnp-code__message ul,
.rnp-tunnel .rnp-code__message li {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    list-style: none;
}

.woocommerce form.rnp-tunnel .rnp-code__message ul::before,
.rnp-tunnel .rnp-code__message ul::before,
.rnp-tunnel .rnp-code__message li::before { content: none; }

.rnp-tunnel .rnp-code__poses { margin: 0; padding: 0; list-style: none; }

.rnp-tunnel .rnp-code__poses li {
    display: flex;
    align-items: center;
    gap: var(--rnp-e2);
    padding: var(--rnp-e2) var(--rnp-e3);
    margin-bottom: var(--rnp-e2);
    border-radius: var(--rnp-rayon-petit);
    background: var(--rnp-bon-doux);
    font-size: .88em;
}

/* Une coche dessinee au trait : pas de caractere decoratif, pas d'image. */
.rnp-code__marque {
    flex: 0 0 auto;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--rnp-bon);
    border-bottom: 2px solid var(--rnp-bon);
    transform: rotate(-45deg);
    margin-bottom: 3px;
}

.rnp-tunnel .rnp-code__nom {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--rnp-bon);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.rnp-tunnel .rnp-code__montant {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--rnp-e2);
    color: var(--rnp-bon);
    font-weight: 700;
    white-space: nowrap;
}

.rnp-tunnel .rnp-code__montant a,
.rnp-tunnel .rnp-code__retirer {
    color: var(--rnp-sourdine);
    font-size: .88em;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
}

.rnp-tunnel .rnp-code__montant a:hover,
.rnp-tunnel .rnp-code__retirer:hover { color: var(--rnp-alerte); }

/* Le formulaire hors du tunnel ne se voit pas : il ne porte que les jetons. */
.rnp-codes { display: contents; }

/* --------------------------------------------------------------- paiement */

.rnp-tunnel #payment { padding: var(--rnp-e4); background: none; border-radius: 0; }

.rnp-tunnel .wc_payment_methods {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Une ligne : le bouton radio, le nom, le logo. La description du moyen retenu
   passe dessous, sur toute la largeur. */
.rnp-tunnel .wc_payment_method {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    /* L'espace entre le bord de la carte et le bouton radio est pose ici, sur
       la carte, et non en marge du bouton : la feuille du theme remet a zero
       la marge de tout champ du tunnel avec un !important. Une regle de plus
       forte priorite l'emporterait, mais une bataille de priorites se perd au
       premier changement de theme ; un remplissage ne se fait pas ecraser. */
    padding-left: var(--rnp-e3);
    margin: 0 0 var(--rnp-e2);
    border: 1px solid var(--rnp-filet-fort);
    border-radius: var(--rnp-rayon-petit);
    background: var(--rnp-fond);
    transition: border-color .12s ease, background .12s ease;
}

/* La feuille de WooCommerce du theme dessine un rond en caractere devant le
   libelle, pour remplacer le bouton radio qu'elle cache. Maintenant que le vrai
   bouton est de nouveau a l'ecran, ce rond ferait double emploi. Le selecteur
   reprend le sien, precede du notre, pour l'emporter sans forcer. */
.rnp-tunnel.woocommerce-checkout .woocommerce-checkout-payment input[type="radio"] + label::before,
.woocommerce-checkout .rnp-tunnel .woocommerce-checkout-payment input[type="radio"] + label::before,
.rnp-tunnel .wc_payment_method > label::before { content: none; }

/* TOUTE LA CARTE EST CLIQUABLE, pas seulement le petit rond.
   Le libelle s'etend en calque au-dessus de la carte entiere : cliquer
   n'importe ou coche le bouton. La description du moyen retenu est remontee
   au-dessus de ce calque, sinon un lien ou un champ qu'elle contiendrait
   deviendrait inatteignable. */
.rnp-tunnel .wc_payment_method > label::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--rnp-rayon-petit);
    cursor: pointer;
}

.rnp-tunnel .wc_payment_method:hover {
    border-color: var(--rnp-filet-fort);
    background: var(--rnp-fond-doux);
}

.rnp-tunnel .wc_payment_method:hover > label { color: var(--rnp-encre); }

.rnp-tunnel .wc_payment_method > label {
    /* Le libelle doit rester non positionne : c'est la carte qui sert de
       repere au calque cliquable ci-dessous. Positionne, le libelle devenait
       lui-meme ce repere et la bande qui separe le bord du bouton radio
       restait morte au clic. */
    position: static;
    display: flex;
    align-items: center;
    gap: var(--rnp-e2);
    grid-column: 2;
    margin: 0;
    padding: var(--rnp-e3) var(--rnp-e3) var(--rnp-e3) var(--rnp-e2);
    color: var(--rnp-encre);
    font-size: .95em;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
}

/* Le theme cache ces boutons radio et dessine des ronds a leur place. Un
   dessin ne se coche pas au clavier : la touche de tabulation les sautait, et
   personne ne pouvait choisir son moyen de paiement sans souris. On les remet
   donc a l'ecran, a leur taille, avec la couleur de la maison. */
.rnp-tunnel .wc_payment_method > input[type="radio"],
.rnp-tunnel ul.wc_payment_methods li > input[type="radio"] {
    display: inline-block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    opacity: 1;
    position: static;
    accent-color: var(--rnp-accent);
    cursor: pointer;
}

.rnp-tunnel .wc_payment_method > label img {
    max-height: 22px;
    width: auto;
    margin: 0 0 0 auto;
    padding-left: var(--rnp-e2);
}

/* Retenu : c'est le seul etat qui prend la couleur de marque. */
.rnp-tunnel .wc_payment_method:has( > input:checked ),
.rnp-tunnel .wc_payment_method:has( > input:checked ):hover {
    border-color: var(--rnp-accent);
    background: var(--rnp-accent-doux);
}

/* Indisponible : la carte reste lisible, mais ne repond plus au survol. */
.rnp-tunnel .wc_payment_method:has( > input:disabled ) {
    background: var(--rnp-fond-doux);
    border-color: var(--rnp-filet);
    color: var(--rnp-sourdine);
}

.rnp-tunnel .wc_payment_method:has( > input:disabled ) > label,
.rnp-tunnel .wc_payment_method:has( > input:disabled ) > label::after { cursor: not-allowed; }

.rnp-tunnel .wc_payment_method:has( > input:disabled ) > label { color: var(--rnp-sourdine); }

/* Au clavier : un cerne net, visible sur les deux fonds. */
.rnp-tunnel .wc_payment_method:has( > input:focus-visible ) {
    outline: 2px solid var(--rnp-encre);
    outline-offset: 2px;
}

.rnp-tunnel .payment_box {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    margin: 0;
    /* Aligne sur le libelle : 20 px de bouton radio plus l'ecart de huit. Le
       remplissage de douze de la carte s'ajoute par-dessus. */
    padding: 0 var(--rnp-e3) var(--rnp-e3) 28px;
    border: 0;
    border-radius: 0;
    background: none;
    /* Le gris de retrait passe sous le seuil de lisibilite sur le fond rose
       pale de la carte retenue : 4,43 pour 4,5 exiges. La description prend
       donc la couleur de texte courante, et la hierarchie se fait a la taille. */
    color: var(--rnp-texte);
    font-size: .86em;
    line-height: 1.5;
}

.rnp-tunnel .payment_box::before { display: none; }

/* Le gabarit impose aux paragraphes de la page une taille fixe, une couleur
   marine et un interligne de vingt-huit pixels, pense pour un article de blog.
   Dans une description de moyen de paiement large de trois cent cinquante
   pixels, cela donnait six lignes tres aerees sous un titre de deux mots. Les
   paragraphes reprennent ici les valeurs de leur bloc. */
.woocommerce form.rnp-tunnel .payment_box p,
.rnp-tunnel .payment_box p {
    margin: 0 0 var(--rnp-e2);
    font-size: inherit;
    line-height: 1.5;
    color: inherit;
}

.woocommerce form.rnp-tunnel .payment_box p:last-child,
.rnp-tunnel .payment_box p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- conditions et validation */

.rnp-tunnel .woocommerce-privacy-policy-text {
    margin: var(--rnp-e3) 0 0;
    font-size: .8em;
    color: var(--rnp-sourdine);
}

.woocommerce form.rnp-tunnel .woocommerce-privacy-policy-text p,
.woocommerce form.rnp-tunnel .woocommerce-terms-and-conditions-wrapper p,
.rnp-tunnel .woocommerce-privacy-policy-text p,
.rnp-tunnel .woocommerce-terms-and-conditions-wrapper p {
    margin: 0;
    font-size: inherit;
    line-height: 1.45;
    color: inherit;
}

/* Une case a cocher et son libelle forment une seule cible : au moins
   vingt-quatre pixels de haut, doigt ou souris. */
.rnp-tunnel label.checkbox,
.rnp-tunnel .woocommerce-form__label-for-checkbox { min-height: 24px; padding: 3px 0; }

.rnp-tunnel .woocommerce-privacy-policy-link {
    display: inline-block;
    min-height: 24px;
    color: var(--rnp-sourdine);
    text-decoration: underline;
}

.rnp-tunnel .woocommerce-terms-and-conditions-wrapper { margin-top: var(--rnp-e3); }

.rnp-tunnel .woocommerce-terms-and-conditions {
    max-height: 150px;
    margin: var(--rnp-e2) 0 0;
    padding: var(--rnp-e3);
    overflow-y: auto;
    border: 1px solid var(--rnp-filet);
    border-radius: var(--rnp-rayon-petit);
    background: var(--rnp-fond-doux);
    font-size: .82em;
    line-height: 1.5;
}

.woocommerce form.rnp-tunnel .woocommerce-terms-and-conditions-link,
.rnp-tunnel .woocommerce-terms-and-conditions-link {
    color: var(--rnp-encre);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rnp-tunnel .validate-required label.checkbox { font-size: .88em; font-weight: 500; }
.rnp-tunnel .woocommerce-terms-and-conditions-checkbox-text { font-weight: 500; }

.rnp-tunnel .form-row.place-order { margin: var(--rnp-e3) 0 0; }

.rnp-tunnel #place_order,
.rnp-bouton--principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rnp-e2);
    width: 100%;
    min-height: 52px;
    padding: 14px var(--rnp-e5);
    border: 0;
    border-radius: var(--rnp-rayon-petit);
    background: var(--rnp-accent-fonce);
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .12s ease, transform .08s ease;
}

.rnp-tunnel #place_order:hover,
.rnp-bouton--principal:hover { background: var(--rnp-accent); color: #fff; }

.rnp-tunnel #place_order:active { transform: translateY(1px); }
.rnp-tunnel #place_order:disabled { opacity: .55; cursor: not-allowed; }

.rnp-tunnel .woocommerce-noscript,
.rnp-tunnel noscript { font-size: .8em; color: var(--rnp-sourdine); }

/* --------------------------------------------------------- recapitulatif */

.rnp-recapitulatif__collant { position: static; }

/* La colonne ne suit le defilement que si elle tient dans l'ecran. Le script
   pose cette classe apres avoir mesure ; sans lui, rien ne colle et rien ne se
   cache. Une colonne collante plus haute que la fenetre masque sa propre fin,
   donc le bouton de commande. */
.rnp-recapitulatif__collant.is-collant {
    position: sticky;
    top: var(--rnp-e4);
}

/* ------------------------------------------------------------ reassurance */

/* QUATRE PROMESSES, PAS QUATRE PANNEAUX.
   -----------------------------------------------------------------------------
   Chaque point porte un pictogramme, un titre lisible et une phrase courte qui
   dit ce que le titre promet. Deux colonnes sur un ecran d'ordinateur, une
   seule en dessous de la largeur d'une tablette : quatre grands blocs empiles
   rallongeraient la colonne de droite au moment precis ou le client doit
   valider. Le pictogramme reste aligne sur la premiere ligne du titre, jamais
   centre sur la hauteur du bloc, sinon il flotte des que la phrase passe a la
   ligne. */
.rnp-reassurance {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rnp-e3) var(--rnp-e5);
    margin: 0;
    padding: var(--rnp-e4);
    border: 1px solid var(--rnp-filet);
    border-radius: var(--rnp-rayon-petit);
    background: var(--rnp-fond-doux);
    list-style: none;
}

.rnp-tunnel .rnp-reassurance li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: var(--rnp-e2);
    margin: 0;
    color: var(--rnp-texte);
}

.rnp-tunnel .rnp-reassurance svg {
    width: 18px;
    height: 18px;
    /* Cale le dessin sur la hauteur de la premiere ligne du titre. */
    margin-top: 1px;
    fill: none;
    stroke: var(--rnp-accent);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rnp-tunnel .rnp-reassurance__texte { display: block; min-width: 0; }

.rnp-tunnel .rnp-reassurance__texte strong {
    display: block;
    color: var(--rnp-encre);
    font-size: .84em;
    font-weight: 600;
    line-height: 1.3;
}

.rnp-tunnel .rnp-reassurance__texte > span {
    display: block;
    margin-top: 2px;
    color: var(--rnp-sourdine);
    font-size: .78em;
    line-height: 1.4;
}

.rnp-tunnel .rnp-reassurance__texte a {
    color: var(--rnp-encre);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rnp-tunnel .rnp-reassurance__texte a:hover { color: var(--rnp-accent-fonce); }

/* -------------------------------------------- mentions posees par les modules */

/* Deux textes viennent d'ailleurs et portent le gris clair de la charte : la
   reference sous le nom d'un article, posee par le module de parcours, et le
   rappel de conservation du panier, pose par le module de paniers abandonnes.
   Sur blanc, ce gris ne donne que 3,2 de contraste pour 4,5 exiges. On le
   corrige ici pour la page de paiement ; le meme gris sert ailleurs sur le
   site et merite la meme correction a la source. */
.rnp-tunnel .rn-cart-sku,
.rnp-tunnel .ra-rgpd,
.rnp-tunnel p.ra-rgpd,
.woocommerce form.rnp-tunnel .ra-rgpd { color: var(--rnp-sourdine); }

/* Le meme interligne d'article de blog s'appliquait a ce rappel de trois
   lignes, juste au-dessus du bouton qui valide la commande. */
.woocommerce form.rnp-tunnel p.ra-rgpd,
.rnp-tunnel p.ra-rgpd { line-height: 1.45; }

/* -------------------------------------------------------------- carte cadeau */

/* Le formulaire d'origine de l'extension, quand il est rendu ailleurs. */
.rnp-tunnel .rg-paiement { margin: 0; }
.rnp-tunnel .rg-form-code label { font-size: .9em; }
.rnp-tunnel .rg-ligne { display: flex; gap: var(--rnp-e2); }

/* ------------------------------------------------------------------ mobile */

/* La barre du bas n'existe que sur les petits ecrans. Declaree avant la regle
   qui la montre, sans quoi elle la contredirait. */
.rnp-barre { display: none; }

@media (max-width: 1024px) {

    .rnp-tunnel .rnp-colonnes {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--rnp-e4);
    }

    /* L'ordre reste celui du balisage : coordonnees, livraison, recapitulatif,
       codes, paiement, conditions, bouton. C'est deja l'ordre demande. */
    .rnp-recapitulatif__collant.is-collant { position: static; }

    /* Les trois etapes tiennent sur la largeur d'un telephone plutot que de
       defiler : une etape que l'on ne voit pas ne renseigne sur rien. */
    .rnp-tunnel .rnp-rail ol {
        gap: var(--rnp-e2);
        justify-content: space-between;
        padding-bottom: var(--rnp-e2);
    }

    .rnp-tunnel .rnp-rail a { gap: 6px; font-size: .8em; }
    .rnp-tunnel .rnp-rail__numero { width: 20px; height: 20px; }
    .rnp-tunnel .rnp-rail__titre { white-space: nowrap; }

    .rnp-tunnel .rnp-bloc__replier { display: inline-flex; }

    .rnp-tunnel .rnp-bloc--panier.is-replie .woocommerce-checkout-review-order { display: none; }

    /* Replie, le bloc garde son total sous les yeux. */
    .rnp-bloc--panier.is-replie .rnp-bloc__entete { border-bottom: 0; }

    .rnp-tunnel .rnp-bloc--panier.is-replie .rnp-bloc__total {
        display: flex;
        justify-content: space-between;
        padding: var(--rnp-e3) var(--rnp-e4);
        border-top: 1px solid var(--rnp-filet);
        font-weight: 700;
        color: var(--rnp-encre);
    }

    .rnp-tunnel .rnp-barre {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        align-items: center;
        gap: var(--rnp-e3);
        padding: var(--rnp-e2) var(--rnp-e4) calc(var(--rnp-e2) + env(safe-area-inset-bottom));
        background: var(--rnp-fond);
        border-top: 1px solid var(--rnp-filet);
        box-shadow: 0 -6px 22px -14px rgba(26, 29, 62, .4);
    }

    .rnp-tunnel .rnp-barre__total { font-weight: 800; font-size: 1.05em; color: var(--rnp-accent); }

    .rnp-tunnel .rnp-barre__action {
        margin-left: auto;
        min-height: 42px;
        padding: 10px var(--rnp-e5);
        border: 0;
        border-radius: var(--rnp-rayon-petit);
        background: var(--rnp-accent);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
    }

    .rnp-tunnel { padding-bottom: 72px; }
    .rnp-tunnel .rnp-barre.is-cache { display: none; }
}

@media (max-width: 560px) {
    .rnp-tunnel .rnp-section__corps,
    .rnp-tunnel .rnp-panier__corps,
    .rnp-tunnel .rnp-bloc__entete,
    .rnp-tunnel .rnp-bloc__codes,
    .rnp-tunnel #payment { padding-left: var(--rnp-e3); padding-right: var(--rnp-e3); }

    /* Sous cette largeur, les trois etapes ne tiennent plus a la taille de la
       tablette : on descend d'un cran, et le retour a la ligne reste possible
       en dernier recours plutot que de couper la troisieme etape. */
    .rnp-tunnel .rnp-rail ol { flex-wrap: wrap; row-gap: var(--rnp-e2); }
    .rnp-tunnel .rnp-rail a { gap: 5px; font-size: .74em; }
    .rnp-tunnel .rnp-rail__numero { width: 18px; height: 18px; }

    .rnp-tunnel .rnp-reassurance { grid-template-columns: 1fr; }
    .rnp-tunnel .rnp-ligne--composant { padding-left: var(--rnp-e5); }
}

/* ---------------------------------------------------------------- confort */

@media (prefers-reduced-motion: reduce) {
    .rnp-tunnel *,
    .rnp-resultat * { transition: none !important; scroll-behavior: auto !important; }
}

.rnp-tunnel a:focus-visible,
.rnp-tunnel button:focus-visible,
.rnp-tunnel input:focus-visible,
.rnp-tunnel select:focus-visible,
.rnp-tunnel textarea:focus-visible,
.rnp-resultat a:focus-visible,
.rnp-resultat button:focus-visible {
    outline: 2px solid var(--rnp-accent);
    outline-offset: 2px;
}
/* ---------------------------------------------------------------- resultat */

.rnp-resultat {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 0 40px;
}

.rnp-resultat__tete {
    text-align: center;
    padding: 8px 0 26px;
}

.rnp-resultat__marque {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 0 14px;
    background: var(--rnp-bon-doux);
}

.rnp-resultat--echec .rnp-resultat__marque { background: var(--rnp-alerte-doux); }

.rnp-resultat__picto { width: 32px; height: 32px; fill: var(--rnp-bon); }
.rnp-resultat--echec .rnp-resultat__picto { fill: var(--rnp-alerte); }

.rnp-resultat__titre {
    margin: 0 0 8px;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.rnp-resultat__chapeau {
    margin: 0 auto;
    max-width: 56ch;
    color: var(--rnp-sourdine);
    font-size: 1.02em;
}

/* Quatre valeurs courtes sur une ligne, l'adresse de courriel sur la sienne :
   avec un remplissage automatique, elle laissait une case grise a cote d'elle. */
.rnp-resume {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 24px;
    background: var(--rnp-filet);
    border: 1px solid var(--rnp-filet);
    border-radius: var(--rnp-rayon);
    overflow: hidden;
}

.rnp-resume > div { background: var(--rnp-fond); padding: 14px 16px; }
.rnp-resume dt { margin: 0 0 3px; font-size: .76em; text-transform: uppercase; letter-spacing: .06em; color: var(--rnp-tres-sourdine); }
.rnp-resume dd { margin: 0; font-weight: 700; font-size: .98em; overflow-wrap: anywhere; }

.rnp-resume__long dd { font-size: .88em; }

.rnp-resume__long { grid-column: 1 / -1; }

@media (min-width: 700px) {
    .rnp-resume { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rnp-resultat__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 30px;
}

.rnp-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 24px;
    border-radius: 10px;
    border: 1px solid var(--rnp-filet-fort);
    background: var(--rnp-fond);
    color: var(--rnp-encre);
    font-weight: 700;
    text-decoration: none;
    flex: 1 1 200px;
}

.rnp-bouton:hover { border-color: var(--rnp-encre); color: var(--rnp-encre); }

/* Le bouton principal reprend la couleur d'accent. La declaration est reposee
   ici, apres .rnp-bouton : a specificite egale, c'est la derniere qui gagne, et
   le bouton d'action ressortait blanc comme le bouton secondaire. */
.rnp-bouton--principal {
    flex: 1 1 240px;
    border: 0;
    background: var(--rnp-accent);
    color: #fff;
}

.rnp-bouton--principal:hover { filter: brightness(.94); color: #fff; }

.rnp-etapes {
    list-style: none;
    counter-reset: none;
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--rnp-filet);
    border: 1px solid var(--rnp-filet);
    border-radius: var(--rnp-rayon);
    overflow: hidden;
}

.rnp-etapes li {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    background: var(--rnp-fond);
}

.rnp-etapes__numero {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rnp-fond-doux);
    border: 1px solid var(--rnp-filet-fort);
    font-size: .82em;
    font-weight: 700;
    color: var(--rnp-sourdine);
}

.rnp-etapes li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.rnp-etapes strong { font-size: .95em; }
.rnp-etapes li span span { font-size: .87em; color: var(--rnp-sourdine); }

.rnp-resultat__detail { margin: 0 0 26px; }

/* Le titre vient du gabarit de WooCommerce, aligne a gauche comme le reste de
   la page : le theme le centrait, seul au milieu d'une colonne de texte. */
.rnp-resultat__detail h2,
.rnp-resultat__detail .woocommerce-order-details__title,
.rnp-resultat__detail .woocommerce-column__title {
    font-size: 1.1em;
    font-weight: 700;
    text-align: left;
    margin: 0 0 12px;
}

.rnp-resultat__detail .woocommerce-customer-details,
.rnp-resultat__detail .woocommerce-columns { margin-top: 24px; }

.rnp-resultat__detail address {
    font-style: normal;
    line-height: 1.6;
    padding: 14px 16px;
    border: 1px solid var(--rnp-filet);
    border-radius: var(--rnp-rayon);
    background: var(--rnp-fond-doux);
}

.rnp-resultat__detail .woocommerce-table { width: 100%; }

.rnp-resultat__detail table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92em;
}

.rnp-resultat__detail th,
.rnp-resultat__detail td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--rnp-filet);
    text-align: left;
}

.rnp-resultat__detail tfoot th { font-weight: 600; color: var(--rnp-sourdine); }
.rnp-resultat__detail tfoot tr:last-child th,
.rnp-resultat__detail tfoot tr:last-child td { font-weight: 800; color: var(--rnp-encre); border-bottom: 0; }

.rnp-secours {
    padding: 16px 18px;
    background: var(--rnp-fond-doux);
    border: 1px solid var(--rnp-filet);
    border-radius: var(--rnp-rayon);
}

.rnp-secours__titre { margin: 0 0 4px; font-weight: 700; font-size: .95em; }
.rnp-secours__corps { margin: 0; font-size: .9em; color: var(--rnp-sourdine); }
.rnp-secours__corps a { color: var(--rnp-accent); font-weight: 600; }

/* ------------------------------------------------- resultat, petits ecrans */

/* Le gabarit de la page ne pose aucune marge laterale : le texte et les
   tableaux touchaient les bords de l'ecran. */
@media (max-width: 860px) {
    .rnp-resultat { padding-left: var(--rnp-e4); padding-right: var(--rnp-e4); }
}

@media (max-width: 560px) {
    .rnp-resultat__actions .rnp-bouton { flex: 1 1 100%; }
}