/*
 * Näkö Design — refonte 2026-10-27, sur le modèle de lunettespourtous.com : blanc, noir, rouge #9a0d0d de l'ancien site, Manrope.
 * Couleurs, tailles, boutons et menus : variables LESS du Customizer (style UIkit compilé dans css/theme.12.css).
 * Ici : la police hébergée localement et les composants propres au site (classes « nako- » posées dans le Builder).
 */

/* Manrope (variable 200-800), hébergée dans le thème : aucun appel à Google Fonts */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url('../fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root { --nako-rouge: #9a0d0d; --nako-rouge-survol: #6b0909; --nako-rouge-clair: #e06666; --nako-rouge-teinte: #f6e9e9; --nako-noir: #111111; --nako-gris: #f4f5f6; --nako-filet: #e4e4e4; --nako-rayon: 12px; }

/* Les ancres (#actualites, #rendez-vous, #representants) ne passent pas sous l'en-tête collant */
html { scroll-padding-top: 150px; }
@media (max-width: 959px) { html { scroll-padding-top: 80px; } }

/* Libellés bilingues des blocs communs (pied de page) : la langue de la page seule */
html:not([lang|="fr"]) .nako-lg-fr,
html[lang|="fr"] .nako-lg-en { display: none !important; }

/* ================================================================================== en-tête (bureau) */
/* Tout l'en-tête reste visible au défilement, comme sur lunettespourtous.com */
.tm-header { position: sticky; top: 0; z-index: 980; background: #ffffff; border-bottom: 1px solid var(--nako-filet); }
.tm-header .tm-headerbar-top { padding-top: 14px; padding-bottom: 6px; }
.tm-header .uk-logo img { display: block; }

/* Recherche élargie en pilule entre le logo et les actions */
.tm-header .tm-header-search-expand .uk-search { max-width: 760px; }
.tm-header .uk-search-navbar .uk-search-input {
    height: 42px; padding: 0 48px 0 20px; border: 1px solid #c9c9c9; border-radius: 500px; background: #ffffff;
    font-size: 15px; color: var(--nako-noir); }
.tm-header .uk-search-navbar .uk-search-input::placeholder { color: #6f6f6f; }
.tm-header .uk-search-navbar .uk-search-input:focus { border-color: var(--nako-noir); outline: none; }
.tm-header .uk-search-navbar .uk-search-icon-flip { right: 8px; width: 34px; color: var(--nako-noir); }

/* Téléphone + bouton noir « Prendre rendez-vous » */
.nako-entete-actions .uk-button-text { font-weight: 600; color: var(--nako-noir); white-space: nowrap; }
.nako-entete-actions .uk-button-text::before { display: none; }
.nako-entete-actions .uk-button-text:hover { color: var(--nako-rouge); }
.nako-entete-actions .uk-button-secondary, .nako-mobile-actions .uk-button-secondary { white-space: nowrap; padding: 0 24px; line-height: 44px; }

/* Langues en texte : FR / EN */
.tm-header .mod-languages .uk-subnav, .tm-header-mobile .mod-languages .uk-subnav { flex-wrap: nowrap; margin-left: -10px; }
.tm-header .mod-languages .uk-subnav > *, .tm-header-mobile .mod-languages .uk-subnav > * { padding-left: 10px; }
.tm-header .mod-languages .uk-subnav > * > a, .tm-header-mobile .mod-languages .uk-subnav > * > a {
    font-size: 13px; font-weight: 700; color: #6f6f6f; text-transform: uppercase; }  /* #6f6f6f : contraste 5:1 sur blanc (#8a8a8a : 3,45) */
.tm-header .mod-languages .uk-subnav > .uk-active > a, .tm-header .mod-languages .uk-subnav > * > a:hover { color: var(--nako-noir); }

/* Menu centré sous la recherche */
.tm-header .uk-navbar-container { background: #ffffff; }
.tm-header .uk-navbar-left { justify-content: center; }
.tm-header .uk-navbar-nav > li > a { font-weight: 500; }
.tm-header .uk-navbar-nav > li > a [uk-navbar-parent-icon] { margin-left: 5px; }
.tm-header .uk-navbar-nav > li.uk-active > a { color: var(--nako-noir); }
.tm-header .uk-navbar-nav > li > a:hover, .tm-header .uk-navbar-nav > li > a[aria-expanded="true"] { color: var(--nako-rouge); }

/* Méga menus (Tendances, Collection) : liste à gauche, quatre vignettes portrait à droite */
.tm-header .uk-navbar-dropdown-large { border-top: 1px solid var(--nako-filet); }
.nako-megamenu-titre { font-weight: 700; color: var(--nako-noir); }
/* étiquette à côté du titre (« Tendances 2026 ») : pastille rouge posée de biais, façon autocollant */
.nako-etiquette { display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: 500px; background: var(--nako-rouge); color: #ffffff;
    font-size: 11px; font-weight: 800; line-height: 1.4; letter-spacing: .06em; vertical-align: 2px; transform: rotate(-5deg); }
.nako-megamenu-nav .uk-nav > li > a { padding: 9px 0; font-size: 15px; color: #4a4a4a; display: flex; justify-content: space-between; align-items: center; }
.nako-megamenu-nav .uk-nav > li > a::after { content: "›"; font-size: 18px; line-height: 1; color: #b0b0b0; }
.nako-megamenu-nav .uk-nav > li > a:hover { color: var(--nako-rouge); }
.nako-megamenu-nav .uk-nav > li > a:hover::after { color: var(--nako-rouge); }
.nako-megamenu-cartes .el-item > a { border-radius: 10px; }
.nako-megamenu-cartes .el-image { aspect-ratio: 6 / 7; object-fit: cover; width: 100%; background: #ffffff; }
.nako-megamenu-cartes .uk-overlay-default { background: rgba(255, 255, 255, .92); }
.nako-megamenu-cartes .el-title { font-weight: 700; }
.nako-megamenu-cartes .uk-overlay .uk-margin-top { margin-top: 2px !important; }
.nako-megamenu-cartes .el-link { font-size: 14px; font-weight: 500; color: #4a4a4a; }
.nako-megamenu-cartes .el-link::before { display: none; }
.nako-megamenu-cartes .el-link::after { content: " ›"; }

/* ================================================================================== en-tête (mobile) */
.tm-header-mobile { position: sticky; top: 0; z-index: 980; background: #ffffff; border-bottom: 1px solid var(--nako-filet); }
.tm-header-mobile .uk-navbar-container { background: #ffffff; }
.tm-header-mobile .uk-logo img { display: block; }
.tm-header-mobile .uk-navbar-item, .tm-header-mobile .uk-navbar-toggle { min-height: 68px; }
#tm-dialog-mobile .uk-offcanvas-bar { border-left: 1px solid var(--nako-filet); }
.tm-header-mobile .mod-languages { margin-right: 6px; }
#tm-dialog-mobile .uk-nav-default > li > a { font-size: 17px; font-weight: 600; color: var(--nako-noir); padding: 9px 0; }
#tm-dialog-mobile .uk-search-input { border-radius: 500px; }

/* ================================================================================== boutons et typographie */
.uk-button { font-weight: 600; }
.uk-button-default { border-color: var(--nako-noir); color: var(--nako-noir); }
.uk-button-default:hover { background: var(--nako-noir); border-color: var(--nako-noir); color: #ffffff; }
.uk-button-text { text-transform: none; }
.nako-surtitre { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nako-rouge); }
.uk-section-secondary .nako-surtitre { color: var(--nako-rouge-clair); }
.nako-titre { margin-bottom: 0; }
.nako-texte p:last-child { margin-bottom: 0; }

/* Bandeau d'annonce rouge au-dessus du diaporama : 40 px de haut, texte à 5 px du haut (retouche de préprod du 2026-10-28,
   passée des réglages Builder, écrits en style= dans la page, à ce fichier le 2026-10-29) */
.nako-annonce { min-height: 40px; }
.nako-annonce p { position: relative; top: 5px; font-size: 14px; font-weight: 600; }
.nako-annonce a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.nako-annonce a:hover { text-decoration: none; color: #ffffff; }

/* En-tête des pages intérieures */
.nako-bandeau-page .uk-breadcrumb { margin-bottom: 0; }
.nako-bandeau-page .nako-titre { margin-top: 18px !important; }
/* Pages légales (éléments Pixim, H1 dans un bloc et non juste après le fil) : même écart fil → H1 ; le H1 porte
   padding-top: 50px en style=, la marge de l'élément varie (0, 20, 70 px) */
.nako-ariane + :has(> h1) { margin-top: 18px !important; }
.nako-ariane + * > h1 { padding-top: 0 !important; }
/* Pages légales EN (titre en élément standard, juste après le fil) : même écart */
.nako-ariane + .nako-titre { margin-top: 18px !important; }

/* ================================================================================== accueil */
/* Diaporama sur la vue de Paris (fond de section voulu par le client, 2026-10-29) : voile en vignette sur la photo pour
   calmer les lumières, diaporama dans un cadre blanc arrondi (liseré translucide, ombre portée), nom du modèle en pastille
   noire, flèches en pastilles blanches. Photos de l'ancien site, sans pastilles de navigation (préprod, 2026-10-28) */
.nako-hero > .uk-background-cover { position: relative; }
.nako-hero > .uk-background-cover::before { content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(10, 10, 10, .2) 0%, rgba(10, 10, 10, .62) 100%); }
.nako-hero > .uk-background-cover > * { position: relative; }
.nako-diaporama { max-width: 900px; margin-inline: auto; border-radius: 18px; overflow: hidden; background: #ffffff;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .2), 0 40px 70px -28px rgba(0, 0, 0, .85); }
.nako-diaporama .el-title { display: inline-block; margin: 0; padding: 7px 14px; border-radius: 500px; background: var(--nako-noir);
    color: #ffffff; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; }
.nako-diaporama .uk-slidenav { padding: 11px 13px; border-radius: 50%; background: #ffffff; color: var(--nako-noir);
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .55); transition: color .2s; }
.nako-diaporama .uk-slidenav:hover { color: var(--nako-rouge); }
@media (max-width: 639px) {
    .nako-diaporama { border-radius: 12px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .2), 0 24px 40px -20px rgba(0, 0, 0, .85); }
    /* cadre de 150 px de haut rempli par la monture : où qu'elle soit, la pastille du nom couvre un verre */
    .nako-diaporama .el-overlay { display: none; }
}

/* Dernières sorties : trois cartes statiques (Builder). Photo détourée par fondu (multiply) sur un fond qui rougit au survol,
   mois en pastille sur la photo (rouge pour la plus récente), modèles en pastilles (sans lien depuis le 2026-10-28) */
.nako-sorties .uk-grid > * > .el-item { height: 100%; }
.nako-sorties .el-item { display: flex; flex-direction: column; box-shadow: none; border: 1px solid var(--nako-filet); border-radius: var(--nako-rayon);
    overflow: hidden; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s; }
.nako-sorties .el-item:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 24px 44px -26px rgba(17, 17, 17, .45); }
.nako-sorties .uk-card-media-top { background: #f4f5f6; transition: background-color .35s; }
.nako-sorties .el-item:hover .uk-card-media-top { background: var(--nako-rouge-teinte); }
.nako-sorties .el-image { mix-blend-mode: multiply; object-fit: contain; width: 100%; transform: scale(.9); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.nako-sorties .el-item:hover .el-image { transform: rotate(-4deg) scale(.98); }
.nako-sorties .el-meta { position: absolute; top: 16px; left: 16px; z-index: 2; margin: 0; padding: 6px 12px; border-radius: 500px;
    background: var(--nako-noir); color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nako-sorties .el-meta *, .nako-sorties .el-meta .uk-subnav { margin: 0; padding: 0; color: inherit; font: inherit; }
.nako-sorties .uk-grid > :first-child .el-meta { background: var(--nako-rouge); }
.nako-sorties .uk-card-body { flex: 1; }
.nako-sorties .el-title { font-weight: 700; }
.nako-sortie-modeles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nako-sortie-modeles li { margin: 0; padding: 4px 11px; border: 1px solid var(--nako-filet); border-radius: 500px;
    font-size: 13px; font-weight: 600; color: var(--nako-noir); }

/* À propos : paysage 4:3 (vignette 700×525 cadrée en haut dans le Builder) pour ne pas dépasser le texte */
.nako-apropos-photo img { border-radius: var(--nako-rayon); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }

/* Référencer Näkö (ex-« Pourquoi choisir ») : section rouge, croquis de lunettes du logo en filigrane derrière le titre,
   pictogramme rouge dans une pastille blanche, filet au-dessus de chaque argument */
.nako-pourquoi { position: relative; overflow: hidden; }
.nako-pourquoi::before { content: ""; position: absolute; top: 24px; right: -90px; width: min(900px, 70vw); aspect-ratio: 533 / 300;
    background: url(../../../images/illustrations/nako-croquis-lunettes.svg) no-repeat center / contain;
    opacity: .16; transform: rotate(-7deg); pointer-events: none; }
.nako-pourquoi > .uk-container { position: relative; z-index: 1; }
.nako-pourquoi .nako-surtitre, .nako-pourquoi .nako-surtitre p { color: rgba(255, 255, 255, .78) !important; }
.nako-pourquoi-intro .uk-heading-medium { max-width: 11em; }
.nako-pourquoi-liste .el-item { border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 24px; }
.nako-pourquoi-liste .el-image { box-sizing: content-box; width: 28px; height: 28px; padding: 14px; border-radius: 50%;
    background: #ffffff; transition: transform .25s ease; }
/* le thème force .uk-text-emphasis en blanc dans une section rouge (.uk-section-primary:not(.uk-preserve-color) …, !important) */
.nako-pourquoi.uk-section-primary .nako-pourquoi-liste .el-image.uk-text-emphasis { color: var(--nako-rouge) !important; }
.nako-pourquoi-liste .el-item:hover .el-image { transform: rotate(-8deg) scale(1.06); }
.nako-pourquoi-liste .el-title { color: #ffffff; }
.nako-pourquoi-liste .el-content { color: rgba(255, 255, 255, .85); }
@media (max-width: 959px) { .nako-pourquoi::before { top: auto; bottom: -30px; right: -60px; width: 120vw; opacity: .12; } }

/* Instagram : titre centré, fil sous le titre (le code HTML fourni remplace le paragraphe de l'emplacement) */
.nako-instagram-titre a { color: inherit; }
.nako-instagram-titre a:hover { color: var(--nako-rouge); text-decoration: none; }
.nako-instagram-fil:has(> p:only-child) { min-height: 240px; border-radius: var(--nako-rayon); border: 1px dashed #cfcfcf;
    display: flex; align-items: center; justify-content: center; }
.nako-instagram-fil > p:only-child { margin: 0; color: #8a8a8a; font-size: 14px; }

/* ================================================================================== contact */
.nako-contact-infos .el-item { padding-top: 0; }
.nako-contact-infos [uk-icon], .nako-contact-infos .uk-icon { color: var(--nako-rouge); width: 40px; height: 40px; border-radius: 50%; background: var(--nako-rouge-teinte);
    display: inline-flex; align-items: center; justify-content: center; }
.nako-contact-infos strong { color: var(--nako-noir); }
.nako-contact-carte, .nako-contact-carte .uk-position-cover { border-radius: var(--nako-rayon); overflow: hidden; }
.nako-contact-formulaire.uk-card-default, .nako-contact-formulaire .uk-card-default { box-shadow: none; border: 1px solid var(--nako-filet); border-radius: var(--nako-rayon); }
.nako-formulaire .formRed { color: #b3261e; }
/* Case de consentement (RSForm 4, champ Consentement) : le libellé du groupe (« Confidentialité ») reste pour les lecteurs
   d'écran (aria-labelledby), la case porte le texte visible et le lien vers la politique de confidentialité */
.nako-formulaire .rsform-block-consentement > .formControlLabel { position: absolute !important; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nako-formulaire .rsform-block-consentement a { text-decoration: underline; }
/* ================================================================================== nos représentants */
.nako-representants-cartes .el-item { box-shadow: none; border: 1px solid var(--nako-filet); border-radius: var(--nako-rayon);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s; }
.nako-representants-cartes .el-item:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 20px 36px -24px rgba(17, 17, 17, .45); }
.nako-representants-cartes .el-image { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
    background: var(--nako-rouge-teinte); color: var(--nako-rouge); transition: background-color .3s, color .3s; }
/* l'icône porte .uk-text-emphasis, dont la couleur est en !important */
.nako-representants-cartes .el-image.uk-text-emphasis { color: var(--nako-rouge) !important; }
.nako-representants-cartes .el-item:hover .el-image { background: var(--nako-rouge); }
.nako-representants-cartes .el-item:hover .el-image.uk-text-emphasis { color: #ffffff !important; }
.nako-representants-cartes .el-meta { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nako-rouge); }
.nako-deps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.nako-deps li { padding: 2px 8px; border-radius: 500px; background: #f4f5f6; font-size: 12px; font-weight: 600; color: #4a4a4a;
    font-variant-numeric: tabular-nums; }
.nako-deps-texte { margin: 0; font-size: 14px; color: #6f6f6f; }
.nako-representants-cartes .el-link { border-radius: 500px; }
.nako-representants-cartes .el-link::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
    background: currentColor; -webkit-mask: var(--nako-tel) no-repeat center / contain; mask: var(--nako-tel) no-repeat center / contain; }
.nako-representants-cartes { --nako-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M6.2 1.5 8.4 5c.3.5.2 1.1-.2 1.5L7 7.6c.9 1.9 2.4 3.4 4.3 4.3l1.1-1.2c.4-.4 1-.5 1.5-.2l3.5 2.2c.5.3.7 1 .4 1.5-.9 1.6-2.6 2.6-4.4 2.3C7.5 15.6 3.4 11.5 2.6 5.6c-.3-1.8.7-3.5 2.3-4.4.5-.3 1.1-.1 1.3.3Z'/%3E%3C/svg%3E"); }
.nako-representants-appel .uk-button { margin-bottom: 4px; }

/* ================================================================================== recherche */
/* page de résultats : cartes photo (fiches modèles) ; une page sans image prend le croquis du logo en gris */
.nako-recherche-champ { max-width: 560px; }
.nako-recherche-champ .uk-search-input { border-radius: 500px; background: #ffffff; }
/* la carte est le lien (a.uk-card) dans .el-item */
.nako-recherche-cartes .uk-card { box-shadow: none; border: 1px solid var(--nako-filet); border-radius: 10px; overflow: hidden;
    transition: border-color .2s, transform .25s; }
.nako-recherche-cartes .uk-card:hover { border-color: var(--nako-noir); transform: translateY(-3px); }
.nako-recherche-cartes .el-image { width: 100%; object-fit: contain; background: #ffffff; }
.nako-recherche-cartes .uk-card:not(:has(.el-image))::before { content: ""; display: block; aspect-ratio: 3 / 2; margin: -20px -20px 16px; border-bottom: 1px solid var(--nako-filet);
    background: #f4f5f6 url(../../../images/illustrations/nako-croquis-lunettes-gris.svg) no-repeat center / 62%; }
.nako-recherche-cartes .el-meta { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nako-rouge); }
.nako-recherche-cartes .el-title { font-weight: 700; }
/* résultats en direct sous le champ de l'en-tête */
.nako-recherche-direct .el-item { padding: 6px 8px; border-radius: 8px; transition: background-color .15s; }
.nako-recherche-direct .el-item:hover { background: #f4f5f6; }
.nako-recherche-direct .el-image { width: 72px; height: 48px; object-fit: contain; background: #ffffff; border: 1px solid var(--nako-filet); border-radius: 6px; }
.nako-recherche-direct .el-title { font-weight: 700; color: var(--nako-noir); }
.nako-recherche-direct .el-meta { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--nako-rouge); }
.nako-confidentialite .uk-text-small { color: #6f6f6f; }

/* ================================================================================== plan du site (JSitemap) */
/* listes simples (arbre et icônes de JSitemap désactivés) ; chaque bloc est un menu Joomla dont le titre est masqué */
#jmap_sitemap .jmap_filetree, #jmap_sitemap .jmap_filetree ul { list-style: none; margin: 0; padding: 0; }
#jmap_sitemap .jmap_filetree > li > .folder { display: none; }
#jmap_sitemap .jmap_filetree li li + li { margin-top: 12px; }
#jmap_sitemap .jmapcolumn + .jmapcolumn { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--nako-filet); }
#jmap_sitemap .jmap_filetree a { font-size: 1.1rem; color: var(--nako-noir); }
#jmap_sitemap .jmap_filetree a:hover { color: var(--nako-rouge); text-decoration: none; }

/* ================================================================================== collection, fiches, galeries */
.nako-modeles .uk-card-default { box-shadow: none; border: 1px solid var(--nako-filet); border-radius: var(--nako-rayon); overflow: hidden; transition: border-color .2s; }
.nako-modeles .uk-card-default:hover { border-color: var(--nako-noir); }
.nako-modeles .el-image { object-fit: contain; background: #ffffff; }
.nako-sous-menu { margin-bottom: 0; }

/* Fiche modèle (2026-10-28, d'après l'ancien site) : à gauche le titre, les étiquettes en pastilles et les caractéristiques
   en lignes libellé / valeur ; à droite la photo encadrée et, dessous, les vignettes des coloris (visionneuse) */
.nako-fiche-etiquettes a { display: inline-block; padding: 4px 14px; border-radius: 500px; background: var(--nako-rouge-teinte);
    color: var(--nako-rouge); font-size: 13px; font-weight: 700; line-height: 1.5; transition: background-color .2s, color .2s; }
.nako-fiche-etiquettes a:hover { background: var(--nako-rouge); color: #ffffff; text-decoration: none; }
.nako-carac-titre { margin-bottom: 0; padding-bottom: 12px; border-bottom: 1px solid var(--nako-noir);
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nako-carac { display: flex; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--nako-filet); color: var(--nako-noir); }
.nako-carac > .nako-carac-nom,
.nako-carac-coloris > .el-item:first-child { flex: 0 0 8em; }
.nako-carac-nom { color: #6f6f6f; }
.nako-carac-coloris > .el-item + .el-item + .el-item::before { content: ", "; }  /* numéros à la suite : 12, 3 */
/* photo bord à bord dans son cadre : le ruban « Nouveauté » dessiné dans le coin haut droit des photos tombe dans le coin
   du cadre (2026-10-29 ; avant : marge de 24 px et photo centrée à 700 px) */
.nako-fiche-photo { overflow: hidden; border: 1px solid var(--nako-filet); border-radius: var(--nako-rayon); background: #ffffff; }
.nako-fiche-photo img { display: block; width: 100%; height: auto; }
.nako-fiche-coloris .uk-card-default { box-shadow: none; border: 1px solid var(--nako-filet); border-radius: 10px; overflow: hidden; transition: border-color .2s; }
.nako-fiche-coloris .uk-card-default:hover { border-color: var(--nako-noir); }
.nako-fiche-coloris .el-image { object-fit: contain; background: #ffffff; }
.nako-fiche-coloris .el-title { font-size: 14px; color: #444444; }
@media (max-width: 639px) {
    .nako-fiche-coloris .el-title { font-size: 12px; }
}

/* Tendances, PLV, presse : vignettes arrondies avec léger zoom ; la vignette entière ouvre la visionneuse. Au survol
   (overlay « primary » du Builder en fondu), voile sombre léger et bouton « Agrandir » (libellé du lien de la galerie) */
.nako-galerie .el-item { border-radius: 10px; overflow: hidden; border: 1px solid #eeeeee; }
.nako-presse .el-image { object-fit: contain; background: #ffffff; }
.nako-galerie .uk-overlay-primary { background: rgba(17, 17, 17, .3); }

/* Bouton « Agrandir » : pilule blanche, loupe rouge, monte de quelques pixels en apparaissant. Galeries : le lien du
   Builder. Photo de la fiche modèle (sans champ de libellé) : le même bouton en ::after, texte selon la langue.
   Vignettes des coloris, trop petites pour le libellé : la loupe seule, en pastille */
.nako-galerie .el-link,
.nako-fiche-photo > a::after {
    display: inline-block; height: 40px; padding: 0 18px 0 42px; border: 0; border-radius: 500px; box-sizing: border-box;
    background: #ffffff var(--nako-loupe) no-repeat 16px center / 17px; color: var(--nako-noir);
    font-size: 14px; font-weight: 700; line-height: 40px; text-transform: none; letter-spacing: 0;
    box-shadow: 0 12px 26px -12px rgba(17, 17, 17, .6); transform: translateY(8px); transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.nako-galerie .uk-transition-toggle:is(:hover, :focus-within) .el-link { transform: none; }
:root { --nako-loupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%239a0d0d' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='6.5'/%3E%3Cpath d='m13.3 13.3 5.2 5.2M8.5 5.6v5.8M5.6 8.5h5.8'/%3E%3C/g%3E%3C/svg%3E"); }
.nako-fiche-photo > a { display: block; position: relative; }
.nako-fiche-photo > a::after { content: "Agrandir"; position: absolute; inset: 0; z-index: 2; width: max-content; margin: auto; opacity: 0; }
html:not([lang|="fr"]) .nako-fiche-photo > a::after { content: "Enlarge"; }
.nako-fiche-photo > a:is(:hover, :focus-visible)::after { opacity: 1; transform: none; }
.nako-fiche-coloris .uk-card-media-top { position: relative; }
.nako-fiche-coloris .uk-card-media-top::after {
    content: ""; position: absolute; inset: 0; width: 38px; height: 38px; margin: auto; border-radius: 50%;
    background: #ffffff var(--nako-loupe) no-repeat center / 17px; box-shadow: 0 10px 22px -10px rgba(17, 17, 17, .6);
    opacity: 0; transform: translateY(6px); transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.nako-fiche-coloris .el-item:is(:hover, :focus-visible) .uk-card-media-top::after { opacity: 1; transform: none; }

/* ================================================================================== pied de page */
.nako-pied-logo img { display: block; }
.nako-pied-titre { font-weight: 500; letter-spacing: -.01em; }
.nako-pied-liste .uk-list > * > a, .nako-pied-liste a.el-link { color: var(--nako-noir); }
.nako-pied-liste .uk-list > * > a:hover, .nako-pied-liste a.el-link:hover { color: var(--nako-rouge); text-decoration: none; }
.nako-pied-adresse { color: #6f6f6f; }
.nako-pied-adresse a, .nako-pied a[href^="tel:"] { color: inherit; }
.nako-pied a.nako-pied-tel { font-size: 1.25rem; font-weight: 700; color: var(--nako-noir); }
.nako-pied a.nako-pied-tel:hover { color: var(--nako-rouge); text-decoration: none; }
.nako-pied-bas { border-top: 1px solid var(--nako-filet); }
.nako-pied-copyright p { font-size: 14px; color: var(--nako-noir); }
.nako-pied-legal .uk-subnav { margin-bottom: 0; }
.nako-pied-legal .uk-subnav > * > a { font-size: 14px; text-transform: none; color: #6f6f6f; }
.nako-pied-legal .uk-subnav > * > a:hover { color: var(--nako-rouge); }
.nako-pied-legal .uk-subnav > :last-child > a { color: var(--nako-noir); font-weight: 600; }
@media (min-width: 960px) { .nako-pied-legal .uk-subnav { justify-content: flex-end; } }

/* ================================================================================== retouches après capture */
.nako-pourquoi.uk-section .uk-button.uk-button-primary { background: #ffffff; color: var(--nako-rouge); }
.nako-pourquoi.uk-section .uk-button.uk-button-primary:hover { background: var(--nako-noir); color: #ffffff; }
.nako-pied .uk-icon-link, .nako-pied .el-link[uk-icon], .nako-pied .uk-icon-button { color: var(--nako-noir); }
.nako-pied .uk-icon-link:hover { color: var(--nako-rouge); }

/* Méga menus en pleine largeur (UIkit les arrête à 15 px des bords), contenu aligné sur le conteneur de 1440 px */
@media (min-width: 960px) {
    .tm-header .uk-navbar-dropdown-large[stretch] { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important;
        padding-left: max(40px, calc((100% - 1440px) / 2 + 40px)); padding-right: max(40px, calc((100% - 1440px) / 2 + 40px)); }
}
.uk-text-lead { font-size: 1.15rem; line-height: 1.6; font-weight: 400; color: #4a4a4a; }
.nako-contact-carte .uk-position-cover, .nako-contact-carte .leaflet-container { border-radius: var(--nako-rayon); }
/* Méga menu Collection : photos produit entières, sur fond blanc, au-dessus du bandeau de titre */
.nako-megamenu-produits .el-item > a { border: 1px solid var(--nako-filet); }
.nako-megamenu-produits .el-image { object-fit: contain; padding: 20px 14px 84px; box-sizing: border-box; }
/* pictogrammes au trait : UIkit remplit les SVG intégrés (.uk-svg { fill: currentcolor }) */
.nako-pourquoi-liste svg.el-image, .nako-pourquoi-liste svg.el-image * { fill: none !important; }

/* ================================================================================== formulaires de compte */
/* « Afficher le mot de passe » (connexion, mot de passe oublié, profil) : l'œil venait de Font Awesome, retiré du site
   (100 Ko préchargés sur chaque page pour ce seul bouton). Mêmes glyphes eye / eye-slash de Font Awesome Free 6
   (CC BY 4.0, fontawesome.com), à la même taille, en masque SVG : le bouton change de classe, le JS de Joomla ne bouge pas. */
.input-password-toggle [class*="icon-eye"] { display: inline-block; width: 1.25em; line-height: 1; text-align: center; }
.input-password-toggle [class*="icon-eye"]::before { content: ""; display: inline-block; width: 1.125em; height: 1em; vertical-align: -.125em;
    background-color: currentColor; -webkit-mask: var(--nako-oeil) center / contain no-repeat; mask: var(--nako-oeil) center / contain no-repeat; }
.input-password-toggle .icon-eye-slash::before { width: 1.25em; --nako-oeil: var(--nako-oeil-barre); }
:root { --nako-oeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 32Q227 33 179 56Q131 79 95 113Q60 146 37 181Q14 216 3 244Q-2 256 3 268Q14 296 37 331Q60 366 95 399Q131 433 179 456Q227 479 288 480Q349 479 397 456Q445 433 481 399Q516 366 539 331Q562 296 574 268Q579 256 574 244Q562 216 539 181Q516 146 481 113Q445 79 397 56Q349 33 288 32ZM144 256Q144 217 163 184Q182 151 216 131Q250 112 288 112Q326 112 360 131Q394 151 413 184Q432 217 432 256Q432 295 413 328Q394 361 360 381Q326 400 288 400Q250 400 216 381Q182 361 163 328Q144 295 144 256ZM288 192Q287 219 269 237Q251 255 224 256Q213 256 204 253Q194 251 192 260Q192 270 195 281Q207 320 240 339Q273 358 313 349Q352 337 371 304Q390 271 381 231Q372 200 348 181Q323 162 292 160Q283 162 285 172Q288 181 288 192Z'/%3E%3C/svg%3E");
    --nako-oeil-barre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M39 5Q20 -7 5 9Q-7 28 9 43L601 507Q620 519 635 503Q647 484 631 469L526 387Q555 356 575 324Q595 293 606 268Q610 256 606 244Q594 216 571 181Q548 146 513 113Q477 79 429 56Q381 33 320 32Q269 33 226 49Q184 66 151 93L39 5ZM223 150Q263 113 320 112Q381 114 422 154Q462 195 464 256Q464 294 447 325L408 295Q421 265 413 231Q404 200 380 181Q355 162 324 160Q315 162 317 172Q320 181 320 192Q320 208 313 220L223 150ZM373 390Q348 400 320 400Q259 398 218 358Q178 317 176 256Q176 246 177 236L83 162Q49 208 35 244Q30 256 35 268Q46 296 69 331Q92 366 128 399Q163 433 211 456Q259 479 320 480Q392 478 446 448L373 390Z'/%3E%3C/svg%3E"); }