/*
 * Finition Renov'2CV
 * ------------------
 * Corrections de forme appliquees par-dessus le theme. Aucune regle metier
 * n'est touchee : ni prix, ni promotions, ni Carte Club, ni cartes cadeaux,
 * ni megamenu — dont la mise en forme est volontairement laissee intacte.
 *
 * Les valeurs de marque sont regroupees en haut : marine, corail, gris de
 * texte. Toute la feuille s'y refere, de sorte qu'un changement de charte se
 * fasse en un endroit.
 */

:root {
    --rn-marine:      #1A1D3E;
    --rn-marine-doux: #2B3054;
    --rn-corail:      #FD604F;
    --rn-corail-fonce:#E5503F;
    --rn-texte:       #33374F;
    --rn-gris:        #6B7089;
    --rn-gris-clair:  #8B8FA8;
    --rn-bord:        #E4E6F0;
    --rn-fond:        #F6F7FB;
    --rn-vert:        #1C7C3C;

    --rn-rayon:       10px;
    --rn-ombre:       0 2px 10px rgba(26, 29, 62, .06);
    --rn-ombre-forte: 0 8px 28px rgba(26, 29, 62, .12);
}

/* =====================================================================
 * 1. Rien ne doit deborder de l'ecran
 *
 * Un debordement horizontal fait apparaitre une barre de defilement sur
 * toute la page et donne, sur telephone, l'impression d'un site casse.
 * ================================================================== */

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

img,
video,
iframe,
table {
    max-width: 100%;
}

img {
    height: auto;
}

/* Un tableau porte souvent plus de colonnes qu'un telephone n'a de largeur :
   il defile dans son cadre plutot que d'elargir la page. */
.entry-content table,
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 783px) {
    .entry-content table,
    .woocommerce table.shop_table,
    .woocommerce-page table.shop_table {
        display: table;
    }
}

/* Une reference de piece ou une adresse longue ne doit pas pousser la page. */
.woocommerce-product-details__short-description,
.entry-content p,
.woocommerce td.product-name,
.woocommerce-loop-product__title {
    overflow-wrap: anywhere;
}

/* =====================================================================
 * 2. Lisibilite
 *
 * Le theme descend a 10 et 11 px sur des textes de contenu. En dessous de
 * 13 px, un texte courant devient penible a lire, et davantage encore sur
 * un ecran de telephone tenu a bout de bras.
 * ================================================================== */

body {
    color: var(--rn-texte);
    -webkit-font-smoothing: antialiased;
}

.woocommerce-loop-product__title,
.product_meta,
.product_meta a,
.woocommerce-breadcrumb,
.woocommerce-result-count,
.wc-block-components-product-name,
.entry-content small,
.rn-mention,
figcaption {
    font-size: max(0.8125rem, 13px);
    line-height: 1.55;
}

.woocommerce-breadcrumb {
    color: var(--rn-gris);
}

.woocommerce-breadcrumb a {
    color: var(--rn-gris);
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    color: var(--rn-corail);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * Prix
 *
 * WooCommerce place le montant et le symbole dans deux elements distincts :
 * « 720,00 » puis « € », sans rien entre les deux. L'usage francais demande
 * une espace. On la pose ici, du cote de l'affichage : le montant enregistre
 * dans la commande et dans les exports comptables reste intact.
 * ------------------------------------------------------------------ */

.price,
.woocommerce-Price-amount,
.amount {
    white-space: nowrap; /* un montant ne se coupe jamais en fin de ligne */
}

/*
 * La boutique affiche le symbole apres le montant, partout. On pose donc
 * l'espace avant le symbole, sans condition.
 *
 * Le « !important » n'est pas une facilite : le module de tarification pose
 * ses propres regles sur ce meme element, plus specifiques que celle-ci. Il
 * ne s'agit que d'un contenu genere, sans effet sur la valeur affichee.
 */
.woocommerce-Price-currencySymbol::before {
    content: "\00a0" !important;
}

/* =====================================================================
 * 3. Le clavier doit se voir
 *
 * Le theme supprime le contour de focus. Sans lui, naviguer au clavier
 * revient a avancer les yeux fermes.
 * ================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--rn-corail);
    outline-offset: 2px;
    border-radius: 4px;
}

/* On ne retire le contour que pour la souris, jamais pour le clavier. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* Un lien d'evitement pour atteindre le contenu sans traverser tout le menu. */
.rn-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: var(--rn-marine);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--rn-rayon) 0;
    font-weight: 600;
    text-decoration: none;
}

.rn-evitement:focus {
    left: 0;
}

/* La barre d'administration occupe les premiers pixels de l'ecran : sans
   ce decalage, le lien d'evitement s'ouvre derriere elle et se lit mal. */
.admin-bar .rn-evitement { top: 32px; }

@media screen and (max-width: 782px) {
    .admin-bar .rn-evitement { top: 46px; }
}

/* =====================================================================
 * 4. Boutons
 *
 * Meme forme, meme poids, meme comportement au survol, quelle que soit
 * l'extension qui les produit.
 * ================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wp-element-button,
.rn-bouton {
    border-radius: var(--rn-rayon);
    font-weight: 600;
    letter-spacing: 0;
    transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.rn-bouton:hover {
    transform: translateY(-1px);
    box-shadow: var(--rn-ombre);
}

.woocommerce a.button:active,
.woocommerce button.button:active {
    transform: translateY(0);
}

/* Un bouton desactive doit se voir desactive. */
.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.woocommerce a.button.disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* =====================================================================
 * 5. Cibles tactiles
 *
 * Un doigt ne vise pas comme un curseur : sous 44 px, on rate.
 * ================================================================== */

@media (max-width: 782px) {

    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .quantity input.qty,
    .quantity .plus,
    .quantity .minus,
    .woocommerce-MyAccount-navigation a,
    .site-header a[class*="icon"],
    .header-icon a {
        min-height: 44px;
    }

    .quantity .plus,
    .quantity .minus {
        min-width: 44px;
    }

    .woocommerce-MyAccount-navigation a {
        display: flex;
        align-items: center;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* =====================================================================
 * 6. Formulaires
 * ================================================================== */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.wpcf7 input:not([type="submit"]),
.wpcf7 select,
.wpcf7 textarea,
.forminator-input,
.forminator-textarea {
    border: 1px solid var(--rn-bord);
    border-radius: 8px;
    padding: 11px 13px;
    font-size: max(1rem, 16px); /* sous 16 px, le telephone zoome tout seul */
    color: var(--rn-texte);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--rn-corail);
    box-shadow: 0 0 0 3px rgba(253, 96, 79, .14);
}

.woocommerce form .form-row label {
    font-weight: 600;
    color: var(--rn-texte);
    margin-bottom: 5px;
    display: block;
}

.woocommerce form .form-row .required,
.woocommerce .required {
    color: var(--rn-corail);
    text-decoration: none;
    border: 0;
}

/* Un message d'erreur doit dire ou regarder. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
    border-color: var(--rn-corail);
    background: rgba(253, 96, 79, .04);
}

/* =====================================================================
 * 7. Messages
 * ================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: var(--rn-rayon);
    border: 1px solid var(--rn-bord);
    border-left-width: 4px;
    background: #fff;
    box-shadow: var(--rn-ombre);
    line-height: 1.6;
}

.woocommerce-message { border-left-color: var(--rn-vert); }
.woocommerce-info    { border-left-color: var(--rn-marine); }
.woocommerce-error   { border-left-color: var(--rn-corail); }

/* =====================================================================
 * 8. Images du catalogue
 *
 * Toutes les vignettes ne partagent pas le meme cadrage : sans hauteur
 * commune, la grille se decale ligne apres ligne.
 * ================================================================== */

.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
}

/* =====================================================================
 * 9. Mouvement
 *
 * On respecte le reglage systeme de ceux que l'animation gene.
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
 * 10. Impression
 *
 * Une commande ou une facture s'imprime encore, en atelier.
 * ================================================================== */

@media print {

    .site-header,
    .site-footer,
    .rn-evitement,
    .woocommerce-MyAccount-navigation,
    nav,
    .breadcrumb {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }
}


/* =====================================================================
 * 11. Details releves page par page
 * ================================================================== */

/* La reference du mini-panier se collait au nom de l'article :
   « Kit insonorisant intérieur 2CV AZRéf. 003911 ». */
.rn-cart-sku,
.cart-item-wrapper .rn-cart-sku {
    display: block;
    margin-top: 2px;
    font-size: max(0.75rem, 12px);
    color: var(--rn-gris-clair);
    font-weight: 400;
}

/* Un titre vide occupe de la place et rompt la hierarchie. */
h1:empty,
h2:empty,
h3:empty,
h4:empty,
.product-title-lft h2:empty {
    display: none;
}

/*
 * Filet de securite sur les animations d'entree.
 *
 * Elementor masque les blocs animes puis les revele au defilement. Si ce
 * mecanisme n'aboutit pas — script bloque, defilement trop rapide, onglet
 * restaure — le contenu reste invisible. Au bout de trois secondes, on le
 * montre quoi qu'il arrive.
 */
.rn-animations-forcees .elementor-invisible {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}

/* Sur un appareil qui demande moins de mouvement, rien n'est jamais masque. */
@media (prefers-reduced-motion: reduce) {

    .elementor-invisible {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/*
 * Un texte reserve aux outils d'assistance.
 *
 * Il n'est pas « cache » : il est retire de la mise en page tout en restant
 * lisible par une synthese vocale. Le retirer avec « display: none » le
 * rendrait au contraire invisible pour tout le monde.
 */
.rn-sr-only,
.rn-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * La mention fiscale suit le prix : « 120,00 € TTC », pas « 120,00 €TTC ».
 *
 * Elle est composee dans un element distinct, sans separateur : l'espace se
 * pose donc en marge plutot qu'en texte.
 */
.tax_label,
.woocommerce-Price-taxLabel,
small.tax_label {
    margin-inline-start: .35em;
}

/*
 * Suggestions de la fiche produit : une seule piece associee laissait trois
 * colonnes vides et huit cents pixels de blanc avant le pied de page.
 * La grille se resserre alors sur ce qu'elle a reellement a montrer.
 */
.rn-associes .rn-grille {
    justify-content: start;
}

@supports selector(:has(*)) {

    .rn-associes .rn-grille:has(> :last-child:nth-child(1)) {
        grid-template-columns: minmax(0, 320px);
    }

    .rn-associes .rn-grille:has(> :last-child:nth-child(2)) {
        grid-template-columns: repeat(2, minmax(0, 320px));
    }

    .rn-associes .rn-grille:has(> :last-child:nth-child(3)) {
        grid-template-columns: repeat(3, minmax(0, 320px));
    }
}

/* ---------------------------------------------------------------------
 * Encart Carte Club du panier
 *
 * Le gain annonce s'affichait sur un fond vert plus court que la phrase :
 * la derniere ligne debordait du bandeau. Et l'appel a l'action portait la
 * classe d'un bouton sans en avoir l'apparence — un lien de la meme couleur
 * que le texte courant ne se voit pas.
 * ------------------------------------------------------------------ */

.rn-club-win {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    line-height: 1.45;
    box-sizing: border-box;
}

a.rn-club-cta,
.rn-club-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--rn-corail);
    color: var(--rn-corail);
    background: #fff;
    border-radius: var(--rn-rayon);
    padding: 10px 18px;
    font-weight: 700;
    text-decoration: none;
    min-height: 44px;
}

a.rn-club-cta:hover,
.rn-club-cta:hover {
    background: var(--rn-corail);
    color: #fff;
}

/* =====================================================================
 * 12. Espace client
 *
 * Le menu etait entierement en capitales, la deconnexion plus visible que
 * les rubriques utiles, et les liens de bas de tableau de bord colles les
 * uns aux autres.
 * ================================================================== */

/* Les capitales ralentissent la lecture : la forme des mots disparait. */
.woocommerce-MyAccount-navigation a,
.woocommerce-MyAccount-navigation li,
.myaccount-menu a,
.myaccount-menu li,
.ncs-myaccount-template-inner .myaccount-menu a,
.dashboard-nav a,
.um-account-side li a {
    text-transform: none;
    letter-spacing: 0;
    font-size: max(0.9375rem, 15px);
}

/*
 * Le gabarit du compte impose les capitales depuis un identifiant
 * (« #my-account-menu »), plus fort que n'importe quelle classe. On reprend
 * donc le meme point d'ancrage plutot que d'ajouter un « !important ».
 */
#my-account-menu .myaccount-menu li > a,
#my-account-menu .myaccount-menu li > a span {
    text-transform: none;
    letter-spacing: 0;
    font-size: max(0.9375rem, 15px);
}

#my-account-menu .myaccount-menu li.active > a,
.myaccount-menu li.active > a {
    font-weight: 700;
    color: var(--rn-corail);
}

/* La deconnexion, dans ce meme gabarit. */
#my-account-menu a[href*="customer-logout"],
#my-account-menu a[href*="deconnexion"],
.ncs-myaccount-template-inner .ncs-logout,
.ncs-logout {
    background: transparent;
    color: var(--rn-gris);
    border: 1px solid var(--rn-bord);
    border-radius: 8px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    padding: 8px 14px;
}

#my-account-menu a[href*="customer-logout"]:hover,
.ncs-logout:hover {
    color: var(--rn-corail);
    border-color: var(--rn-corail);
    background: #fff;
}

.woocommerce-MyAccount-navigation li.is-active > a,
.woocommerce-MyAccount-navigation li.is-active a {
    font-weight: 700;
    color: var(--rn-corail);
}

/*
 * La deconnexion est l'action la plus rare de la page : elle n'a pas a etre
 * la plus voyante. On lui retire le rouge plein pour un lien sobre.
 */
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a,
.ncs-myaccount-template-inner a[href*="customer-logout"],
.ncs-myaccount-template-inner a[href*="deconnexion"],
a.ncs-logout,
a[href*="customer-logout"],
a[href*="deconnexion"] {
    background: transparent;
    color: var(--rn-gris);
    font-weight: 500;
    text-transform: none;
    border: 1px solid var(--rn-bord);
    border-radius: 8px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a:hover,
a[href*="customer-logout"]:hover {
    color: var(--rn-corail);
    border-color: var(--rn-corail);
    background: #fff;
}

/* Les raccourcis du tableau de bord se touchaient. */
.woocommerce-MyAccount-content p a + a,
.rn-compte-liens a + a {
    margin-inline-start: 18px;
}

.woocommerce-MyAccount-content p > a {
    color: var(--rn-corail);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*
 * L'avatar reprenait le logo de la boutique : le client voyait la marque a
 * la place de lui-meme. Les initiales disent au moins de qui il s'agit.
 */
.rn-avatar-initiales {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--rn-marine);
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .02em;
}

/*
 * Un etat vide se dit, il ne se laisse pas deviner.
 *
 * La classe porte un nom distinct de « rn-vide », deja utilisee par le
 * catalogue pour ses categories sans article : deux roles differents ne
 * partagent pas un meme nom.
 */
.rn-etat-vide {
    color: var(--rn-gris-clair);
    margin: 6px 0 0;
}

/* =====================================================================
 * 13. Tailles relevees a la mesure
 *
 * Les libelles de la grille tarifaire etaient composes en 9 px. Un
 * professionnel qui verifie sa remise ne doit pas avoir a plisser les yeux
 * pour lire « Prix Pro20 -20 % ». Seule la taille change : ni le contenu,
 * ni le calcul, ni la mise en page.
 * ================================================================== */

.rp-label,
.rp-prices .rp-label {
    font-size: max(0.75rem, 12px);
    line-height: 1.5;
}

.rn-badge {
    font-size: max(0.75rem, 12px);
}

/*
 * La mention fiscale accompagne le prix : lisible, detachee, sans lui voler
 * la vedette. La marge est repetee ici car le module de tarification pose sa
 * propre regle sur ce meme element.
 */
.rp-amount .tax_label,
.rp-prices .tax_label,
.rp-prices small {
    font-size: max(0.6875rem, 11px);
    margin-inline-start: .4em;
}

/* =====================================================================
 * 14. Cibles tactiles des zones de navigation
 *
 * Sur telephone, trente-six liens de l'accueil mesuraient moins de 32 px de
 * haut. Un doigt ne vise pas comme un curseur : on les amene a la taille
 * recommandee, sans toucher aux liens qui vivent au milieu d'une phrase —
 * ceux-la doivent rester dans le fil du texte.
 * ================================================================== */

@media (max-width: 782px) {

    .site-header a,
    .elementor-location-header a,
    .elementor-location-footer a,
    .elementor-nav-menu a,
    .menu-item > a,
    .elementor-icon-list-item > a,
    .woocommerce-breadcrumb a,
    .rn-carte-actions a,
    .myaccount-menu a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* Une icone seule reste carree et cliquable. */
    .site-header a:has(> i:only-child),
    .site-header a:has(> svg:only-child),
    .elementor-location-header a:has(> i:only-child) {
        min-width: 40px;
        justify-content: center;
    }

    /* Les liens au fil du texte gardent leur place dans la phrase. */
    p a,
    li p a,
    .entry-content p a,
    .woocommerce-message a,
    .woocommerce-info a {
        min-height: 0;
        display: inline;
    }
}

/* =====================================================================
 * 15. Bandeau de titre des pages
 *
 * Le theme pose un bandeau gris pleine largeur, tout centre, avec le titre
 * au-dessus du fil d'Ariane. Trois defauts : le gris coupe la page en deux
 * sans rien dire, le centrage ne correspond a aucun autre ecran du site — ni
 * l'accueil, ni le catalogue, ni la fiche produit ne centrent leur titre — et
 * le fil d'Ariane, qui sert a remonter, arrive apres le titre.
 *
 * On garde le meme balisage : le titre reste un h1, le fil reste un fil. On
 * change l'ordre visuel, l'alignement et le fond, pour retrouver l'en-tete
 * des pages de catalogue.
 * ================================================================== */

.nikstore-common-breadcrumbs.nikstore-page-breadcrumb {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	max-width: 1604px;
	margin-inline: auto;
	padding: clamp(20px, 2.4vw, 34px) clamp(16px, 4vw, 40px) clamp(14px, 1.6vw, 22px);
	background: transparent;
	text-align: left;
}

/* Le fil d'Ariane passe devant : il sert a remonter, il se lit avant. */
.nikstore-common-breadcrumbs.nikstore-page-breadcrumb .nikstore-breadcrumb { order: -1; }

.nikstore-common-breadcrumbs.nikstore-page-breadcrumb .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	background: none;
	font-size: 13px;
	color: #5B6178;
}

.nikstore-common-breadcrumbs.nikstore-page-breadcrumb .breadcrumb a { color: #5B6178; }
.nikstore-common-breadcrumbs.nikstore-page-breadcrumb .breadcrumb a:hover { color: #CA4A3C; text-decoration: underline; }
.nikstore-common-breadcrumbs.nikstore-page-breadcrumb .breadcrumb .active { color: #1A1D3E; font-weight: 500; }
.nikstore-common-breadcrumbs.nikstore-page-breadcrumb .bredcrumb-separator { color: #CBD1DC; }

.nikstore-common-breadcrumbs.nikstore-page-breadcrumb .post-title {
	margin: 0;
	/* Le theme mettait une capitale a chaque mot : « Qui Sommes-Nous »,
	   « Avantages Professionnels ». En francais, seul le premier mot d'un
	   titre en prend une. */
	text-transform: none;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: #1A1D3E;
	text-wrap: balance;
}

/* Un filet remplace le pave gris : il separe sans peser. */
.nikstore-common-breadcrumbs.nikstore-page-breadcrumb::after {
	content: "";
	order: 99;
	width: 100%;
	height: 1px;
	margin-top: clamp(12px, 1.4vw, 18px);
	background: #E4E7EE;
}

/* =====================================================================
 * 16. Formulaires Forminator
 *
 * Aucune feuille de style de Forminator n'est chargee sur le site : les
 * formulaires de contact et de retour SAV sortaient donc sans mise en
 * forme — un bouton radio bleu de navigateur pose au-dessus de son
 * libelle, des champs sans bordure, un bouton d'envoi generique.
 *
 * On ne recharge pas la feuille de l'extension, qui apporterait son propre
 * langage visuel : on habille les formulaires avec celui du site.
 * ================================================================== */

.forminator-ui .forminator-row { margin-bottom: 18px; }

.forminator-ui .forminator-label,
.forminator-ui label.forminator-label {
	display: block;
	margin: 0 0 6px;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: #1A1D3E;
}

.forminator-ui .forminator-required { color: #CA4A3C; }

.forminator-ui .forminator-description {
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.45;
	color: #5B6178;
}

/* -- Champs ------------------------------------------------------------ */

.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui select.forminator-select2,
.forminator-ui .forminator-field select {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	background: #FFFFFF;
	border: 1px solid #CBD1DC;
	border-radius: 8px;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.45;
	color: #1A1D3E;
	transition: border-color 160ms, box-shadow 160ms;
}

.forminator-ui .forminator-textarea { min-height: 140px; resize: vertical; }

.forminator-ui .forminator-input:hover,
.forminator-ui .forminator-textarea:hover { border-color: #5B6178; }

.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus,
.forminator-ui .forminator-field select:focus {
	outline: 2px solid #1A1D3E;
	outline-offset: 1px;
	border-color: #1A1D3E;
}

.forminator-ui .forminator-input::placeholder,
.forminator-ui .forminator-textarea::placeholder { color: #8A90A5; }

/* -- Cases et boutons radio -------------------------------------------- */

.forminator-ui [role="radiogroup"],
.forminator-ui .forminator-checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

/* Le libelle du groupe occupe sa propre ligne : sans cela, il se retrouvait
   sur la meme ligne que les options, colle a la premiere. */
.forminator-ui [role="radiogroup"] > .forminator-label { flex: 0 0 100%; }

.forminator-ui label.forminator-radio,
.forminator-ui label.forminator-checkbox {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.3;
	color: #1A1D3E;
	cursor: pointer;
}

/* Forminator reduit le bouton natif a un pixel et dessine son propre repere.
   Ce pixel restait peint au centre du repere, en bleu de navigateur. On le
   rend invisible sans le retirer du parcours au clavier. */
/*
 * Repere de choix.
 *
 * Forminator reduit le bouton natif a un pixel — avec !important — et dessine
 * son propre repere a cote, dans le bleu de sa palette par defaut. On reprend
 * ce repere plutot que de lutter contre : cercle pour un choix unique, carre
 * pour une case, corail quand il est retenu.
 *
 * La portee reprend celle de l'extension, un cran plus haut, pour passer
 * devant ses propres declarations.
 */
.forminator-ui.forminator-custom-form label.forminator-radio .forminator-radio-bullet,
.forminator-ui.forminator-custom-form label.forminator-checkbox .forminator-checkbox-box {
	flex: 0 0 auto;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0;
	background: #FFFFFF;
	border: 1px solid #8A90A5;
	box-shadow: none;
	transition: border-color 160ms, background-color 160ms, box-shadow 160ms;
}

.forminator-ui.forminator-custom-form label.forminator-radio .forminator-radio-bullet { border-radius: 50%; }
.forminator-ui.forminator-custom-form label.forminator-checkbox .forminator-checkbox-box { border-radius: 4px; }

.forminator-ui.forminator-custom-form label.forminator-radio:hover .forminator-radio-bullet,
.forminator-ui.forminator-custom-form label.forminator-checkbox:hover .forminator-checkbox-box { border-color: #1A1D3E; }

/*
 * Forminator genere une feuille par formulaire, avec un selecteur d'identifiant
 * — #forminator-module-6852 — qui passe devant n'importe quelle classe. Les
 * quelques declarations qui portent la couleur sont donc marquees, faute de
 * quoi le repere reste bleu.
 */
.forminator-ui.forminator-custom-form label.forminator-radio .forminator-radio-bullet,
.forminator-ui.forminator-custom-form label.forminator-checkbox .forminator-checkbox-box {
	background: #FFFFFF !important;
	border-color: #8A90A5 !important;
}

.forminator-ui.forminator-custom-form label.forminator-radio input[type="radio"]:checked + .forminator-radio-bullet {
	border-color: #E45444 !important;
	background: #E45444 !important;
	box-shadow: inset 0 0 0 3px #FFFFFF !important;
}

.forminator-ui.forminator-custom-form label.forminator-radio .forminator-radio-bullet::before,
.forminator-ui.forminator-custom-form label.forminator-radio .forminator-radio-bullet::after {
	display: none !important;
}

.forminator-ui.forminator-custom-form label.forminator-checkbox input[type="checkbox"]:checked + .forminator-checkbox-box {
	border-color: #E45444 !important;
	background: #E45444 !important;
}

/* Le bouton natif porte le focus ; c'est le repere qui doit le montrer. */
.forminator-ui.forminator-custom-form label.forminator-radio input[type="radio"]:focus-visible + .forminator-radio-bullet,
.forminator-ui.forminator-custom-form label.forminator-checkbox input[type="checkbox"]:focus-visible + .forminator-checkbox-box {
	outline: 2px solid #1A1D3E;
	outline-offset: 2px;
}

/* -- Bouton d'envoi ----------------------------------------------------- */

.forminator-ui button.forminator-button,
.forminator-ui .forminator-button-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	background: #FD604F;
	border: 1px solid #E45444;
	border-radius: 8px;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #1A1D3E;
	cursor: pointer;
	transition: background-color 160ms, border-color 160ms;
}

.forminator-ui button.forminator-button:hover,
.forminator-ui .forminator-button-submit:hover {
	background: #E45444;
	border-color: #CA4A3C;
	color: #1A1D3E;
}

/* -- Messages ----------------------------------------------------------- */

.forminator-ui .forminator-error-message {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: #B03225;
}

.forminator-ui .forminator-input.forminator-has_error,
.forminator-ui .forminator-textarea.forminator-has_error { border-color: #B03225; }

/* Le conteneur du message existe toujours, meme vide : sans cela, chaque
   formulaire s'ouvrait sur un bandeau colore sans texte. */
.forminator-ui .forminator-response-message:empty { display: none; }

.forminator-ui .forminator-response-message {
	margin-bottom: 16px;
	padding: 12px 14px;
	border-radius: 8px;
	border-left: 3px solid #CBD1DC;
	background: #F5F5F7;
	font-size: 15px;
	line-height: 1.5;
	color: #1A1D3E;
}

.forminator-ui .forminator-response-message.forminator-error {
	border-left-color: #B03225;
	background: #FDF0EE;
}

.forminator-ui .forminator-response-message.forminator-success {
	border-left-color: #1D6B41;
	background: #ECF5EF;
}

/* =====================================================================
 * 17. En-tete
 * ---------------------------------------------------------------------
 * Releve du 23/08/2026, a 1440 px, sur une page d'information :
 *
 *   bandeau de service        64 px
 *   bloc principal           159 px, dicte par un logo de 129 px de haut
 *   total                    223 px avant le premier mot de la page
 *
 * Trois defauts en decoulent, tous corriges ici.
 *
 *   1. Le logo fixe la hauteur. Rien d'autre dans l'en-tete ne depasse
 *      55 px : la recherche, les icones et la navigation tiennent
 *      largement sous cette barre. Le logo redescend a 88 px, ce qui
 *      ramene l'en-tete a environ 180 px sans rien perdre de lisible.
 *
 *   2. Le bloc « Devenir membre » porte une animation d'entree Elementor.
 *      Dans un en-tete, rien ne descend jamais dans le champ de vision :
 *      l'animation part au chargement, parfois trop tard, et laisse un
 *      rectangle vide a la place du bloc. Les animations d'entree sont
 *      donc neutralisees dans l'en-tete, et seulement la.
 *
 *   3. Le nom du compte etait pose en pastille flottante, decalee de
 *      treize pixels au-dessus de l'icone, sans lien visuel avec elle.
 *      Il redevient une etiquette posee a cote de l'icone.
 *
 * Les compteurs de favoris et de panier passent en marine sur corail :
 * du blanc sur corail donne un contraste de 3,02, insuffisant ; le marine
 * sur ce meme fond monte a 5,15 et garde la couleur de la marque.
 * ================================================================== */

/* — 1. Hauteur — */

/*
 * Le logo est un carre : 203 sur 209 pixels a la source. Elementor lui
 * impose une largeur de 125 pixels dans sa feuille de page, avec une
 * hauteur libre — les proportions sont donc justes tant qu'on ne touche
 * qu'a la largeur. Contraindre la hauteur, comme je l'avais fait dans un
 * premier temps, ecrasait l'image : 125 sur 88 au lieu de 86 sur 88.
 *
 * Mesure faite : ce n'est pas le logo qui fixe la hauteur de l'en-tete.
 * La colonne de droite — recherche, icones, navigation — mesure 147
 * pixels a elle seule. Le logo garde donc sa taille d'origine, et seule
 * la barre resserree le reduit.
 *
 * Le selecteur porte quatre classes pour passer devant celui d'Elementor,
 * qui en compte trois.
 */

.elementor-location-header .elementor-element.mylogo .site-main-logo-elementor img{
	width: 125px;
	height: auto;
	max-height: none;
	object-fit: contain;
}

@media (min-width: 1025px){
	.elementor-location-header .mylogo{ display: flex; align-items: center; }

	/* Le logo se cale au milieu de la hauteur reelle du bloc, plutot que
	   de laisser un vide sous lui. */
	.elementor-location-header .elementor-element-53fd974{ justify-content: center; }
}

@media (min-width: 768px) and (max-width: 1024px){
	.elementor-location-header .elementor-element.mylogo .site-main-logo-elementor img{ width: 96px; }
}

/* — 2. Animations d'entree — */

.elementor-location-header .elementor-invisible{
	opacity: 1;
	animation: none;
}

/* — 3. Nom du compte — */

.nikstore-account-nav-dropdown{ position: relative; }

.nikstore-header_icon_set .user-badge-loginname{
	position: static;
	display: block;
	max-width: 11ch;
	margin: 0;
	padding: 2px 9px;
	overflow: hidden;
	border-radius: 999px;
	background: #FFF1EE;
	color: #1A1D3E;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

.nikstore-header_icon_set .nikstore-account-nav-dropdown{
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	width: auto;
	min-width: 0;
}

.nikstore-header_icon_set .nikstore-account-nav-dropdown > .nikstore-login-dp-d-mini{
	flex: 0 0 auto;
}

/* — 4. Compteurs — */

.nikstore-header_icon_set .yith-wcwl-items-count,
.nikstore-header_icon_set .nikstore-count-tooltip{
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	color: #1A1D3E;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* — 5. Cibles tactiles — */

.nikstore-header_icon_set a,
.nikstore-header_icon_set button{
	min-height: 40px;
}

/* — 6. Bandeau de service — */

.elementor-location-header .elementor-top-section a{
	text-transform: none;
}

/* =====================================================================
 * 18. En-tete collant
 * ---------------------------------------------------------------------
 * Releve : au premier defilement, l'en-tete disparait entierement. Sur un
 * catalogue de trois cents categories, il faut remonter en haut de page
 * pour chercher une piece ou changer de rubrique.
 *
 * Le bloc principal de l'en-tete revient donc se poser en haut de l'ecran
 * des que la page a defile de deux cent quarante pixels, et il s'y montre
 * resserre : logo de 40 pixels au lieu de 88, bloc « Devenir membre » et
 * second logo retires, marges reduites. La barre passe de 157 a environ
 * 96 pixels.
 *
 * Le collage se fait en position fixe et non en position collante :
 * l'en-tete Elementor est un conteneur de la hauteur de l'en-tete, dans
 * lequel un enfant collant n'aurait aucune course. Comme la bascule n'a
 * lieu qu'apres la sortie de l'en-tete du champ de vision, aucune cale
 * n'est necessaire et la page ne saute pas.
 *
 * Aucun balisage n'est duplique : c'est le meme en-tete qui se resserre.
 * ================================================================== */

.elementor-location-header,
.elementor-location-header > div{ overflow: visible; }

body.rn-entete-serree .elementor-location-header .elementor-element-c341164{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 120;
	width: 100%;
	background: #FFFFFF;
	box-shadow: 0 2px 4px rgba(26, 29, 62, .07), 0 1px 2px rgba(26, 29, 62, .05);
	animation: rn-entete-descend 180ms cubic-bezier(.4, 0, .2, 1);
}

@keyframes rn-entete-descend{
	from{ transform: translateY(-100%); }
	to{ transform: translateY(0); }
}

.admin-bar.rn-entete-serree .elementor-location-header .elementor-element-c341164{ top: 32px; }

@media (max-width: 782px){
	.admin-bar.rn-entete-serree .elementor-location-header .elementor-element-c341164{ top: 46px; }
}

body.rn-entete-serree .elementor-location-header .elementor-element.mylogo .site-main-logo-elementor img{
	width: 80px;
	height: auto;
}

body.rn-entete-serree .elementor-location-header .elementor-element-53fd974{
	padding-top: 4px;
	padding-bottom: 4px;
}

body.rn-entete-serree .elementor-location-header .elementor-element-11215a3{ display: none; }

body.rn-entete-serree .elementor-location-header .elementor-element-c341164 .e-con-inner{
	padding-top: 2px;
	padding-bottom: 2px;
}

/* Un visiteur qui a demande moins d'animation n'en subit aucune. */
@media (prefers-reduced-motion: reduce){
	body.rn-entete-serree .elementor-location-header .elementor-element-c341164{ animation: none; }
}

/* — Tablette : le bouton du menu se cale a gauche, sous le logo, plutot
     que de flotter au milieu d'une rangee vide. — */

@media (max-width: 1024px){
	.elementor-location-header .elementor-element-f736462{ justify-content: flex-start; }
}

/* — Telephone : le bandeau du haut se colle aussi, resserre. Sur mobile,
     l'en-tete ne porte que le logo, le bouton de menu et le panier : il
     tient sous 70 pixels une fois resserre. — */

body.rn-entete-serree .elementor-location-header .elementor-element-4e9ddbc{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 120;
	width: 100%;
	background: #FFFFFF;
	box-shadow: 0 2px 4px rgba(26, 29, 62, .07), 0 1px 2px rgba(26, 29, 62, .05);
	animation: rn-entete-descend 180ms cubic-bezier(.4, 0, .2, 1);
}

.admin-bar.rn-entete-serree .elementor-location-header .elementor-element-4e9ddbc{ top: 46px; }

body.rn-entete-serree .elementor-location-header .elementor-element-4e9ddbc .elementor-element.mylogo .site-main-logo-elementor img{
	width: 62px;
	height: auto;
}

@media (prefers-reduced-motion: reduce){
	body.rn-entete-serree .elementor-location-header .elementor-element-4e9ddbc{ animation: none; }
}