/* Neuf sur Neuf — identité « papier quadrillé » : bleu encre #13204A, orange crayon #FF5A1F (le coup de crayon qui
   souligne), gris graphite. Titres Bricolage Grotesque, texte Geist, chiffres Geist Mono, annotations Caveat.
   Corps ≥ 16 px, rien sous 13 px, marge mobile 20 px, zéro débordement horizontal. */

@font-face { font-family: "Bricolage Grotesque"; src: url(../fonts/bricolage-grotesque-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; 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: "Bricolage Grotesque"; src: url(../fonts/bricolage-grotesque-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; src: url(../fonts/geist-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; 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: "Geist"; src: url(../fonts/geist-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url(../fonts/geist-mono-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Caveat"; src: url(../fonts/caveat-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
	--nn-encre: #13204A;
	--nn-encre-2: #1F2F68;
	--nn-encre-3: #2C3F86;
	--nn-orange: #FF5A1F;
	--nn-orange-f: #E2440B;
	--nn-orange-pale: #FFE9DF;
	--nn-texte: #1A2340;
	--nn-gris: #5B6275;
	--nn-gris-2: #8A90A3;
	--nn-papier: #F5F7FC;
	--nn-ligne: #DDE2EE;
	--nn-quadrillage: #E7ECF6;
	--nn-vert: #1F9D63;
	--nn-titre: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--nn-police: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--nn-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
	--nn-main: "Caveat", "Segoe Print", cursive;
	--nn-gouttiere: 32px;
	--nn-largeur: 1240px;
	--nn-rayon: 12px;
	--nn-ombre: 0 1px 2px rgba(19, 32, 74, .06), 0 18px 40px -24px rgba(19, 32, 74, .45);
	--nn-ombre-forte: 0 2px 4px rgba(19, 32, 74, .08), 0 30px 60px -30px rgba(19, 32, 74, .6);
	--nn-quadri: linear-gradient(var(--nn-quadrillage) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, var(--nn-quadrillage) 1px, transparent 1px) 0 0 / 28px 28px;
	--niv-debutant: #1FB86A;
	--niv-facile: #2F7BE5;
	--niv-moyen: #FFC21A;
	--niv-difficile: #EF3B3B;
	--niv-expert: #7B3FE4;
	--theme-palette-color-1: var(--nn-encre);
	--theme-palette-color-2: var(--nn-encre-2);
	--theme-palette-color-3: var(--nn-texte);
	--theme-palette-color-4: var(--nn-encre);
	--theme-palette-color-5: var(--nn-ligne);
	--theme-palette-color-6: var(--nn-papier);
	--theme-palette-color-7: #fff;
	--theme-palette-color-8: #fff;
	--theme-text-color: var(--nn-texte);
	--theme-link-initial-color: var(--nn-encre);
	--theme-link-hover-color: var(--nn-orange-f);
	--theme-border-color: var(--nn-ligne);
	--theme-headings-color: var(--nn-encre);
	--theme-button-background-initial-color: var(--nn-encre);
	--theme-button-background-hover-color: var(--nn-encre-2);
	--theme-button-text-initial-color: #fff;
	--theme-button-text-hover-color: #fff;
	--theme-button-border-radius: var(--nn-rayon);
	--theme-form-field-border-radius: 10px;
	--theme-form-field-border-initial-color: #C8CFDF;
	--theme-form-field-border-focus-color: var(--nn-encre);
	--theme-font-family: var(--nn-police);
	--theme-normal-container-max-width: var(--nn-largeur);
}
@media (max-width: 760px) { :root { --nn-gouttiere: 20px; } }

/* ---------- base ---------- */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html { overflow-x: hidden; } }
html body.nn-site { background: #fff; color: var(--nn-texte); font-family: var(--nn-police); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; margin: 0; }
body.nn-site h1, body.nn-site h2, body.nn-site h3, body.nn-site h4 { font-family: var(--nn-titre); color: var(--nn-encre); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
body.nn-site a { color: inherit; text-underline-offset: 3px; }
body.nn-site img { max-width: 100%; height: auto; display: block; }
body.nn-site button { font-family: inherit; }
.nn-wrap { max-width: var(--nn-largeur); margin: 0 auto; padding: 0 var(--nn-gouttiere); box-sizing: border-box; }
.nn-etroit { max-width: 860px; }
.nn-main { display: block; min-height: 50vh; }
body.nn-site .nn-saut { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--nn-encre); color: #fff; padding: 10px 16px; }
body.nn-site .nn-saut:focus { left: 8px; }
html.nn-bloque { overflow: hidden; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.nn-picto { width: 22px; height: 22px; flex: none; }
.nn-picto-l { width: 34px; height: 34px; }
.nn-centre { text-align: center; }
.nn-centre .nn-section-intro { margin-left: auto; margin-right: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--nn-orange); outline-offset: 2px; }

/* titres */
.nn-titre-xxl { font-size: clamp(40px, 5.6vw, 72px); margin: 0 0 20px; }
.nn-titre-xl { font-size: clamp(32px, 4vw, 52px); margin: 0 0 16px; }
.nn-titre-l { font-size: clamp(26px, 2.7vw, 36px); margin: 0 0 12px; }
.nn-titre-m { font-family: var(--nn-titre); font-weight: 800; color: var(--nn-encre); font-size: 24px; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 8px; }
.nn-titre-m a { text-decoration: none; }
.nn-titre-s { font-family: var(--nn-titre); font-weight: 800; color: var(--nn-encre); font-size: 20px; line-height: 1.2; margin: 0 0 12px; }
.nn-surtitre { display: inline-flex; align-items: center; gap: 8px; font-family: var(--nn-mono); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--nn-orange-f); margin: 0 0 14px; }
.nn-surtitre::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.nn-section-intro { color: var(--nn-gris); margin: 4px 0 0; max-width: 700px; font-size: 18px; }
.nn-annotation { font-family: var(--nn-main); font-weight: 700; color: var(--nn-orange); font-size: 24px; line-height: 1; }

/* le coup de crayon orange sous un mot */
.nn-crayon { position: relative; white-space: nowrap; z-index: 0; }
.nn-crayon::after { content: ""; position: absolute; z-index: -1; left: -4px; right: -6px; bottom: -.04em; height: .34em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 40 6, 90 5, 197 8 M8 17 C 60 11, 120 11, 190 13' fill='none' stroke='%23FF5A1F' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.nn-section-encre .nn-crayon, .nn-final .nn-crayon { color: #fff; }

/* boutons */
.nn-bouton, body.nn-site .nn-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 2px solid var(--nn-encre); border-radius: var(--nn-rayon); background: var(--nn-encre); color: #fff; font-family: var(--nn-police); font-weight: 700; font-size: 16px; line-height: 1.15; text-decoration: none; cursor: pointer; box-sizing: border-box; transition: background .15s, border-color .15s, transform .15s; text-align: center; }
.nn-bouton:hover { background: var(--nn-encre-2); border-color: var(--nn-encre-2); color: #fff; }
.nn-bouton:active { transform: translateY(1px); }
.nn-bouton .nn-picto { width: 20px; height: 20px; }
.nn-bouton-grand, body.nn-site .nn-bouton-grand { min-height: 58px; padding: 0 30px; font-size: 17px; }
.nn-bouton-petit, body.nn-site .nn-bouton-petit { min-height: 44px; padding: 0 18px; font-size: 15px; }
.nn-bouton-orange, body.nn-site .nn-bouton-orange { background: var(--nn-orange); border-color: var(--nn-orange); color: #fff; box-shadow: 0 10px 22px -12px rgba(226, 68, 11, .8); }
.nn-bouton-orange:hover { background: var(--nn-orange-f); border-color: var(--nn-orange-f); }
.nn-bouton-clair, body.nn-site .nn-bouton-clair { background: #fff; color: var(--nn-encre); }
.nn-bouton-clair:hover { background: var(--nn-papier); color: var(--nn-encre); }
.nn-bouton-ok, body.nn-site .nn-bouton-ok { background: #E7F6EE; border-color: #E7F6EE; color: #11663F; box-shadow: none; }
.nn-bouton-ok:hover { background: #D7F0E2; border-color: #D7F0E2; color: #11663F; }
.nn-bouton.loading { opacity: .65; pointer-events: none; }
.nn-bouton.added::after, .added_to_cart { display: none !important; }
.nn-lien-fleche { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--nn-encre); text-decoration: none; border-bottom: 2px solid var(--nn-orange); padding-bottom: 2px; }
.nn-lien-fleche .nn-picto { width: 18px; height: 18px; transition: transform .15s; }
.nn-lien-fleche:hover .nn-picto { transform: translateX(3px); }

/* niveau : cinq cases */
.nn-force { display: inline-flex; gap: 3px; vertical-align: middle; }
.nn-force i { width: 11px; height: 11px; border: 1.5px solid var(--nn-encre); border-radius: 2px; box-sizing: border-box; }
.nn-force i.on { background: var(--nn-orange); border-color: var(--nn-orange); }

/* listes à coches */
.nn-coches { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.nn-coches li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.nn-coches .nn-picto { width: 22px; height: 22px; color: var(--nn-orange); margin-top: 1px; stroke-width: 2.4; }

/* puces (recherches, niveaux) */
.nn-puces { display: flex; flex-wrap: wrap; gap: 10px; }
.nn-puce { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1.5px solid var(--nn-ligne); border-radius: 999px; background: #fff; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--nn-encre); transition: border-color .15s, background .15s; }
.nn-puce:hover { border-color: var(--nn-encre); background: var(--nn-papier); }

/* ---------- bandeau et en-tête ---------- */
.nn-bandeau { background: var(--nn-encre); color: #fff; font-size: 14px; }
.nn-bandeau .nn-wrap { display: flex; justify-content: center; gap: 34px; min-height: 38px; align-items: center; }
.nn-bandeau span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nn-bandeau .nn-picto { width: 17px; height: 17px; color: var(--nn-orange); }
@media (max-width: 900px) { .nn-bandeau .nn-b-suite { display: none; } }

.nn-entete { position: sticky; top: 0; z-index: 900; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--nn-ligne); }
.admin-bar .nn-entete { top: 32px; }
@media (max-width: 782px) { .admin-bar .nn-entete { top: 0; } }
.nn-entete-ligne { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.nn-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--nn-encre); flex: none; }
.nn-symbole { width: 40px; height: 40px; flex: none; }
.nn-logo-texte { font-family: var(--nn-titre); font-weight: 800; font-size: 25px; letter-spacing: -.03em; line-height: 1; display: inline-flex; align-items: baseline; white-space: nowrap; }
.nn-logo-sur { font-family: var(--nn-main); font-weight: 700; color: var(--nn-orange); font-size: 26px; letter-spacing: 0; margin: 0 5px; transform: rotate(-7deg) translateY(-1px); display: inline-block; }
.nn-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.nn-nav-groupe { position: relative; }
.nn-nav-lien { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px; border: 0; background: none; border-radius: 10px; font-weight: 600; font-size: 16px; color: var(--nn-encre); text-decoration: none; cursor: pointer; white-space: nowrap; }
.nn-nav-lien:hover, .nn-nav-lien[aria-expanded="true"] { background: var(--nn-papier); }
.nn-nav-lien[aria-current="page"], .nn-nav-lien[data-actif] { box-shadow: inset 0 -3px 0 var(--nn-orange); border-radius: 0; }
.nn-chevron { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .15s; }
[aria-expanded="true"] > .nn-chevron { transform: rotate(180deg); }
.nn-menu-panneau { position: absolute; top: calc(100% + 10px); left: 0; z-index: 950; width: 330px; padding: 10px; background: #fff; border: 1px solid var(--nn-ligne); border-radius: 14px; box-shadow: var(--nn-ombre-forte); display: grid; gap: 2px; }
.nn-menu-panneau a, .nn-mm-groupe div a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; text-decoration: none; color: var(--nn-encre); font-weight: 600; font-size: 15px; }
.nn-menu-panneau a:hover, .nn-mm-groupe div a:hover { background: var(--nn-papier); }
.nn-menu-int, .nn-mm-int { background: var(--nn-papier); margin-bottom: 4px; }
.nn-menu-int .nn-symbole, .nn-mm-int .nn-symbole { width: 36px; height: 36px; }
.nn-menu-int span, .nn-mm-int span { display: grid; line-height: 1.25; }
.nn-menu-int em, .nn-mm-int em { font-style: normal; font-weight: 500; color: var(--nn-gris); font-size: 14px; }
.nn-menu-tous { color: var(--nn-orange-f) !important; font-weight: 700 !important; }
.nn-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nn-action { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--nn-encre); cursor: pointer; }
.nn-action:hover { background: var(--nn-papier); }
.nn-action .nn-picto { width: 24px; height: 24px; }
.nn-panier-nb, .nn-fav-nb { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--nn-orange); color: #fff; font-family: var(--nn-mono); font-size: 12px; font-weight: 700; line-height: 19px; text-align: center; box-sizing: border-box; }
.nn-entete-cta { margin-left: 8px; white-space: nowrap; }
.nn-burger { display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 6px; border: 0; background: none; color: var(--nn-encre); font-weight: 700; font-size: 15px; cursor: pointer; border-radius: 10px; }
.nn-burger .nn-picto { width: 26px; height: 26px; }
.nn-recherche { border-top: 1px solid var(--nn-ligne); background: #fff; padding: 18px 0; }
.nn-recherche form { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto; border: 2px solid var(--nn-encre); border-radius: var(--nn-rayon); padding: 4px 4px 4px 14px; background: #fff; }
.nn-recherche form .nn-picto { color: var(--nn-gris); }
.nn-recherche input[type="search"] { flex: 1; min-width: 0; border: 0 !important; outline: 0; font: inherit; font-size: 17px; height: 44px; background: none; padding: 0 !important; box-shadow: none !important; }
.nn-recherche-idees { max-width: 760px; margin: 10px auto 0; font-size: 15px; color: var(--nn-gris); }
.nn-recherche-idees a { margin-left: 10px; font-weight: 600; color: var(--nn-encre); }
.nn-menu-mobile { border-top: 1px solid var(--nn-ligne); background: #fff; max-height: calc(100vh - 120px); overflow-y: auto; padding: 14px 0 24px; }
.nn-mm-int { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; text-decoration: none; color: var(--nn-encre); font-weight: 700; }
.nn-mm-groupe { border-bottom: 1px solid var(--nn-ligne); }
.nn-mm-groupe summary { list-style: none; padding: 16px 4px; font-weight: 700; font-size: 17px; cursor: pointer; display: flex; justify-content: space-between; }
.nn-mm-groupe summary::-webkit-details-marker { display: none; }
.nn-mm-groupe summary::after { content: "+"; font-family: var(--nn-mono); color: var(--nn-orange); }
.nn-mm-groupe[open] summary::after { content: "−"; }
.nn-mm-groupe div { padding: 0 0 12px; display: grid; }
.nn-mm-lien { display: block; padding: 16px 4px; border-bottom: 1px solid var(--nn-ligne); font-weight: 700; font-size: 17px; text-decoration: none; color: var(--nn-encre); }
html.nn-menu-ouvert { overflow: hidden; }
@media (max-width: 1440px) { body.nn-site .nn-actions .nn-entete-cta { display: none; } }
@media (max-width: 1060px) {
	.nn-nav { display: none; }
	.nn-burger { display: inline-flex; }
	.nn-entete-ligne { gap: 8px; min-height: 66px; }
	.nn-logo { margin: 0 auto 0 4px; }
}
@media (max-width: 520px) {
	.nn-burger span { display: none; }
	.nn-action-compte { display: none; }
	.nn-logo-texte { font-size: 21px; }
	.nn-logo-sur { font-size: 22px; margin: 0 3px; }
	.nn-symbole { width: 34px; height: 34px; }
	.nn-action { width: 40px; }
}
@media (max-width: 360px) { .nn-logo-texte { font-size: 18px; } .nn-logo .nn-symbole { width: 30px; height: 30px; } .nn-action-fav { display: none; } }

/* ---------- sections ---------- */
.nn-section { padding: 88px 0; }
.nn-section-court { padding: 34px 0; }
.nn-papier { background: var(--nn-papier); }
.nn-section-tete { margin-bottom: 44px; }
.nn-tete-ligne { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.nn-section-encre { background: var(--nn-encre); color: #DCE3F5; position: relative; }
.nn-section-encre::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px; pointer-events: none; }
.nn-section-encre > .nn-wrap { position: relative; }
.nn-section-encre h2, .nn-section-encre h3 { color: #fff !important; }
.nn-section-encre .nn-surtitre { color: #FF8A5E; }
.nn-section-encre .nn-coches .nn-picto { color: #FF8A5E; }
@media (max-width: 760px) { .nn-section { padding: 60px 0; } .nn-section-tete { margin-bottom: 30px; } }

/* ---------- hero ---------- */
.nn-hero { background: var(--nn-quadri), #fff; border-bottom: 1px solid var(--nn-ligne); padding: 64px 0 76px; }
.nn-hero-grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.nn-hero-chapo { font-size: 20px; color: var(--nn-gris); max-width: 560px; margin: 0 0 28px; }
.nn-hero-boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.nn-hero-plus { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-weight: 600; font-size: 15px; }
.nn-hero-plus li { display: inline-flex; align-items: center; gap: 8px; }
.nn-hero-plus .nn-picto { color: var(--nn-orange); width: 20px; height: 20px; }
.nn-hero-jeu { position: relative; }
.nn-hero-annotation { position: absolute; top: -34px; right: 18px; transform: rotate(-4deg); font-size: 27px; }
.nn-jeu-carte { background: #fff; border: 1px solid var(--nn-ligne); border-radius: 18px; box-shadow: var(--nn-ombre-forte); padding: 22px 22px 18px; }
.nn-jeu-titre { font-family: var(--nn-titre); font-weight: 800; font-size: 21px; color: var(--nn-encre); margin: 0 0 4px; }
.nn-jeu-texte { font-size: 15px; color: var(--nn-gris); margin: 0 0 14px; line-height: 1.45; }
@media (max-width: 960px) {
	.nn-hero { padding: 40px 0 56px; }
	.nn-hero-grille { grid-template-columns: 1fr; gap: 48px; }
	.nn-hero-chapo { font-size: 18px; }
	.nn-hero-jeu { max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 520px) { .nn-hero-boutons .nn-bouton { width: 100%; } .nn-jeu-carte { padding: 16px 12px 12px; } }

/* ---------- le jeu (mini-grille jouable) ---------- */
.nn-jeu { --c: var(--nn-encre); user-select: none; -webkit-user-select: none; }
.nn-jeu-plateau { display: grid; grid-template-columns: repeat(9, 1fr); aspect-ratio: 1; border: 3px solid var(--c); border-radius: 8px; overflow: hidden; background: #fff; touch-action: manipulation; }
.nn-jeu-case { position: relative; display: flex; align-items: center; justify-content: center; border: 0; border-right: 1px solid #BFC7DA; border-bottom: 1px solid #BFC7DA; background: #fff; padding: 0; margin: 0; font-family: var(--nn-mono); font-weight: 600; font-size: clamp(17px, 4.6vw, 25px); color: var(--c); cursor: pointer; min-width: 0; min-height: 0; aspect-ratio: 1; }
.nn-jeu-case:nth-child(9n) { border-right: 0; }
.nn-jeu-case:nth-child(n+73) { border-bottom: 0; }
.nn-jeu-case:nth-child(3n):not(:nth-child(9n)) { border-right: 2.5px solid var(--c); }
.nn-jeu-case:nth-child(n+19):nth-child(-n+27), .nn-jeu-case:nth-child(n+46):nth-child(-n+54) { border-bottom: 2.5px solid var(--c); }
.nn-jeu-case.donne { cursor: default; }
.nn-jeu-case.joue { font-family: var(--nn-main); font-weight: 700; color: var(--nn-orange-f); font-size: clamp(22px, 6vw, 32px); }
.nn-jeu-case.zone { background: #F1F4FB; }
.nn-jeu-case.meme { background: #FFE3D6; }
.nn-jeu-case.choisie { background: #FFD2BE; box-shadow: inset 0 0 0 2px var(--nn-orange); }
.nn-jeu-case.erreur { color: #C8102E !important; background: #FDE2E6; }
.nn-jeu-clavier { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 12px; }
.nn-jeu-clavier button { min-height: 46px; border: 1.5px solid var(--nn-ligne); border-radius: 9px; background: #fff; font-family: var(--nn-mono); font-weight: 700; font-size: 19px; color: var(--nn-encre); cursor: pointer; padding: 0; }
.nn-jeu-clavier button:hover { border-color: var(--nn-encre); }
.nn-jeu-clavier button.fini { opacity: .35; }
.nn-jeu-clavier .nn-jeu-effacer { font-family: var(--nn-police); font-size: 21px; }
.nn-jeu-bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--nn-gris); }
.nn-jeu-bas button { border: 0; background: none; color: var(--nn-encre); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 14px; padding: 6px 0; }
.nn-jeu-bravo { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--nn-encre); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.nn-jeu-bravo p { margin: 0; font-family: var(--nn-main); font-size: 26px; color: #FFB08F; line-height: 1.1; }
.nn-jeu-bravo .nn-bouton { min-height: 42px; background: var(--nn-orange); border-color: var(--nn-orange); }
@media (max-width: 420px) { .nn-jeu-clavier { grid-template-columns: repeat(5, 1fr); } }

/* ---------- chiffres ---------- */
.nn-chiffres { background: var(--nn-encre); color: #fff; padding: 34px 0; }
.nn-chiffres-grille { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 28px; }
.nn-chiffre { display: flex; align-items: center; gap: 16px; }
.nn-chiffre b { font-family: var(--nn-mono); font-weight: 700; font-size: clamp(38px, 4vw, 52px); line-height: 1; color: #fff; white-space: nowrap; flex: none; letter-spacing: -.04em; }
.nn-chiffre:nth-child(odd) b { color: #FF8A5E; }
.nn-chiffre span { font-size: 15px; line-height: 1.35; color: #C9D2EA; }
@media (max-width: 900px) { .nn-chiffres-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .nn-chiffres-grille { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- pourquoi ---------- */
.nn-pourquoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--nn-encre); border-left: 1px solid var(--nn-ligne); background: #fff; }
.nn-pourquoi-item { position: relative; padding: 30px 28px 32px; border-right: 1px solid var(--nn-ligne); border-bottom: 1px solid var(--nn-ligne); }
.nn-pourquoi-num { position: absolute; top: 16px; right: 18px; font-family: var(--nn-mono); font-weight: 700; color: var(--nn-gris-2); font-size: 14px; }
.nn-pourquoi-item .nn-picto { color: var(--nn-orange); margin-bottom: 18px; }
.nn-pourquoi-item h3 { font-size: 21px; margin: 0 0 8px; }
.nn-pourquoi-item p { margin: 0; color: var(--nn-gris); font-size: 16px; }
@media (max-width: 960px) { .nn-pourquoi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .nn-pourquoi { grid-template-columns: 1fr; } .nn-pourquoi-item { padding: 24px 20px; } }

/* ---------- niveaux ---------- */
.nn-niveaux { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.nn-niveau { --niv: var(--nn-encre); display: flex; flex-direction: column; border: 1px solid var(--nn-ligne); border-top: 5px solid var(--niv); border-radius: 14px; padding: 20px 18px 18px; background: #fff; box-shadow: var(--nn-ombre); }
.nn-niv-debutant { --niv: var(--niv-debutant); } .nn-niv-facile { --niv: var(--niv-facile); } .nn-niv-moyen { --niv: var(--niv-moyen); } .nn-niv-difficile { --niv: var(--niv-difficile); } .nn-niv-expert { --niv: var(--niv-expert); }
.nn-niveau-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nn-niveau-nb { font-family: var(--nn-mono); font-size: 13px; color: var(--nn-gris); }
.nn-niveau-nom { font-size: 27px; margin: 14px 0 4px; }
.nn-niveau-indices { font-family: var(--nn-mono); font-size: 13px; color: color-mix(in srgb, var(--niv) 62%, #13204A); font-weight: 600; margin: 0 0 12px; }
.nn-niveau-texte { font-size: 15px; color: var(--nn-texte); margin: 0 0 12px; line-height: 1.5; }
.nn-niveau-tech { font-size: 15px; margin: 0 0 12px; padding: 12px 0 0; border-top: 1px dashed var(--nn-ligne); line-height: 1.45; }
.nn-niveau-tech .nn-annotation { display: block; font-size: 21px; margin-bottom: 2px; }
.nn-niveau-qui { font-size: 14px; color: var(--nn-gris); margin: 0 0 16px; font-style: italic; }
.nn-niveau-liens { margin-top: auto; display: grid; gap: 6px; }
.nn-niveau-liens a { display: flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 10px; font-weight: 700; font-size: 14px; text-decoration: none; border: 1.5px solid var(--nn-ligne); color: var(--nn-encre); text-align: center; padding: 0 8px; }
.nn-niveau-liens a:last-child { background: var(--nn-encre); border-color: var(--nn-encre); color: #fff; }
.nn-niveau-liens a:hover { border-color: var(--nn-encre); }
@media (max-width: 1160px) { .nn-niveaux { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .nn-niveaux { grid-template-columns: 1fr 1fr; gap: 12px; } .nn-niveau { padding: 16px 14px; } }
@media (max-width: 480px) { .nn-niveaux { grid-template-columns: 1fr; } }

/* ---------- aperçu : pages A4 dessinées ---------- */
.nn-apercu-grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.nn-apercu-texte p { color: #C9D2EA; font-size: 18px; }
.nn-apercu-pages { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.nn-feuille { position: relative; aspect-ratio: 910 / 1286; background: #fff; border-radius: 4px; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .55); overflow: hidden; }
.nn-feuille img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nn-feuille:nth-child(2) { transform: translateY(26px); }
.nn-feuille:nth-child(3) { transform: translateY(8px); }
.nn-apercu-fiche { max-width: 900px; margin: 0 auto; }
@media (max-width: 960px) { .nn-apercu-grille { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 560px) { .nn-apercu-pages { grid-template-columns: repeat(3, 68%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 0 30px; margin: 0 calc(-1 * var(--nn-gouttiere)); padding-left: var(--nn-gouttiere); padding-right: var(--nn-gouttiere); scrollbar-width: none; } .nn-feuille { scroll-snap-align: center; } .nn-feuille:nth-child(2), .nn-feuille:nth-child(3) { transform: none; } .nn-feuille-tete { font-size: 13px; } .nn-feuille-num, .nn-feuille-pied { font-size: 10px; } }

/* ---------- offres ---------- */
.nn-offres { display: grid; grid-template-columns: 1fr 1.12fr; gap: 24px; align-items: stretch; max-width: 900px; margin-left: auto; margin-right: auto; }
.nn-offre { position: relative; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--nn-ligne); border-radius: 18px; padding: 30px 26px 26px; box-shadow: var(--nn-ombre); }
.nn-offre-vedette { border: 3px solid var(--nn-encre); box-shadow: var(--nn-ombre-forte); padding-top: 38px; transform: translateY(-10px); }
.nn-offre-ruban { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); background: var(--nn-orange); color: #fff; font-weight: 800; font-size: 14px; padding: 7px 16px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; }
.nn-offre-nom { font-family: var(--nn-titre); font-weight: 800; font-size: 24px; color: var(--nn-encre); margin: 0; }
.nn-offre-prix { margin: 8px 0 0; }
.nn-offre-prix b { font-family: var(--nn-titre); font-weight: 800; font-size: 50px; color: var(--nn-encre); letter-spacing: -.03em; line-height: 1; }
.nn-offre-vedette .nn-offre-prix b { color: var(--nn-orange-f); font-size: 54px; }
.nn-offre-sous { margin: 8px 0 0; font-weight: 600; color: var(--nn-texte); }
.nn-offre-eco { margin: 6px 0 0; font-size: 14px; color: var(--nn-gris); }
.nn-offre .nn-coches { margin: 20px 0 22px; font-size: 16px; }
.nn-offre .nn-bouton { width: 100%; margin-top: auto; }
.nn-offre-lien { display: block; text-align: center; margin-top: 12px; font-weight: 600; font-size: 15px; color: var(--nn-gris); }
.nn-offre-choix-titre { margin: auto 0 10px; font-weight: 700; font-size: 15px; }
.nn-offre-niveaux { display: grid; gap: 6px; }
.nn-offre-niveaux a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1.5px solid var(--nn-ligne); border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 15px; color: var(--nn-encre); }
.nn-offre-niveaux a:hover { border-color: var(--nn-encre); background: var(--nn-papier); }
.nn-offre-cadeau .nn-coches .nn-picto { color: var(--nn-orange); }
.nn-offres-note { display: block; margin: 30px auto 0; color: var(--nn-gris); font-size: 15px; text-align: center; max-width: 760px; }
.nn-offres-note .nn-picto { color: var(--nn-orange); display: inline-block; vertical-align: -5px; margin-right: 6px; width: 20px; height: 20px; }
@media (max-width: 980px) { .nn-offres { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 34px; } .nn-offre-vedette { transform: none; order: -1; } }

/* ---------- comment, garanties ---------- */
.nn-etapes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: none; }
.nn-etapes li { position: relative; padding: 28px 24px; border: 1.5px dashed #C8CFDF; border-radius: 16px; background: #fff; }
.nn-etape-num { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 10px; background: var(--nn-encre); color: #fff; font-family: var(--nn-mono); font-weight: 700; font-size: 22px; margin-bottom: 16px; }
.nn-etapes h3 { font-size: 21px; margin: 0 0 8px; }
.nn-etapes p { margin: 0; color: var(--nn-gris); font-size: 16px; }
.nn-garanties { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.nn-garantie { display: flex; gap: 14px; align-items: flex-start; }
.nn-garantie .nn-picto { color: var(--nn-orange); width: 30px; height: 30px; }
.nn-garantie h3 { font-size: 17px; margin: 2px 0 4px; letter-spacing: -.01em; }
.nn-garantie p { margin: 0; color: var(--nn-gris); font-size: 15px; line-height: 1.5; }
@media (max-width: 960px) { .nn-etapes { grid-template-columns: 1fr; } .nn-garanties { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .nn-garanties { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.nn-faq { display: grid; gap: 10px; margin: 0 0 20px; }
.nn-faq > .nn-titre-m { margin-bottom: 14px; }
.nn-faq-item { border: 1.5px solid var(--nn-ligne); border-radius: 12px; background: #fff; }
.nn-faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 700; font-size: 17px; cursor: pointer; color: var(--nn-encre); line-height: 1.35; }
.nn-faq-item summary::-webkit-details-marker { display: none; }
.nn-faq-plus { position: relative; width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--nn-papier); }
.nn-faq-plus::before, .nn-faq-plus::after { content: ""; position: absolute; left: 6px; right: 6px; top: 10px; height: 2px; background: var(--nn-orange); transition: transform .2s; }
.nn-faq-plus::after { transform: rotate(90deg); }
.nn-faq-item[open] .nn-faq-plus::after { transform: rotate(0); }
.nn-faq-item[open] { border-color: var(--nn-encre); }
.nn-faq-rep { padding: 0 20px 18px; color: var(--nn-texte); }
.nn-faq-rep p { margin: 0 0 10px; }
.nn-faq-rep p:last-child { margin: 0; }

/* ---------- appel final, recherches populaires ---------- */
.nn-final { background: var(--nn-encre); color: #DCE3F5; padding: 72px 0; position: relative; }
.nn-final::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px; }
.nn-final .nn-wrap { position: relative; }
.nn-final h2 { color: #fff !important; }
.nn-final p { font-size: 18px; max-width: 620px; }
.nn-final-grille { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.nn-final-achat { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; padding: 26px; display: grid; gap: 16px; }
.nn-final-prix { margin: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.nn-final-prix b { font-family: var(--nn-titre); font-weight: 800; font-size: 54px; color: #fff; line-height: 1; }
.nn-final-prix span { font-size: 15px; color: #C9D2EA; }
.nn-final .nn-bouton { width: 100%; }
@media (max-width: 860px) { .nn-final-grille { grid-template-columns: 1fr; } }
.nn-recherches { padding: 48px 0 56px; border-bottom: 1px solid var(--nn-ligne); }

/* ---------- pages ---------- */
.nn-page-tete { padding: 40px 0 34px; background: var(--nn-quadri), #fff; border-bottom: 1px solid var(--nn-ligne); margin-bottom: 44px; }
.nn-page-tete .nn-titre-xl { margin: 0; }
.nn-page-tete .nn-section-intro { margin-top: 14px; }
.nn-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; font-size: 14px; color: var(--nn-gris); margin: 0 0 16px; }
.nn-ariane a { color: var(--nn-gris); text-decoration: none; }
.nn-ariane a:hover { color: var(--nn-encre); text-decoration: underline; }
.nn-sep { margin: 0 8px; color: var(--nn-gris-2); }
.nn-page-contenu { padding-bottom: 80px; }
.nn-prose { max-width: 760px; font-size: 18px; line-height: 1.7; }
.nn-prose h2 { font-size: clamp(25px, 2.6vw, 32px); margin: 46px 0 14px; }
.nn-prose h3 { font-size: 22px; margin: 32px 0 10px; }
.nn-prose p, .nn-prose ul, .nn-prose ol { margin: 0 0 18px; }
.nn-prose ul, .nn-prose ol { padding-left: 1.3em; }
.nn-prose li { margin: 0 0 8px; }
.nn-prose li::marker { color: var(--nn-orange); }
.nn-prose a { color: var(--nn-encre); font-weight: 600; text-decoration-color: var(--nn-orange); text-decoration-thickness: 2px; }
.nn-prose a:hover { color: var(--nn-orange-f); }
.nn-prose strong { color: var(--nn-encre); }
.nn-prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 16px; }
.nn-prose th, .nn-prose td { border: 1px solid var(--nn-ligne); padding: 10px 12px; text-align: left; vertical-align: top; }
.nn-prose th { background: var(--nn-papier); }
.nn-prose blockquote { margin: 0 0 20px; padding: 14px 20px; border-left: 4px solid var(--nn-orange); background: var(--nn-orange-pale); border-radius: 0 10px 10px 0; }
.nn-prose .nn-faq { margin-top: 40px; }
.nn-page-regles-du-sudoku .nn-page-contenu > .nn-faq, .nn-page-regles-du-sudoku .nn-fin-niveaux, .nn-page-regles-du-sudoku .nn-encart { max-width: 760px; }
.nn-intro { font-size: 19px; color: var(--nn-gris); max-width: 800px; margin-bottom: 28px; }
.nn-intro p { margin: 0 0 12px; }
@media (max-width: 760px) { .nn-page-tete { padding: 26px 0 24px; margin-bottom: 30px; } .nn-prose { font-size: 17px; } }

/* ---------- grilles gratuites ---------- */
.nn-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.nn-onglets a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--nn-ligne); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px; color: var(--nn-encre); background: #fff; }
.nn-onglets a:hover { border-color: var(--nn-encre); }
.nn-onglets a[aria-current="page"] { background: var(--nn-encre); color: #fff; border-color: var(--nn-encre); }
.nn-onglets a[aria-current="page"] .nn-force i { border-color: #fff; }
.nn-gratuites { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 48px; }
.nn-gratuite { border: 1.5px solid var(--nn-ligne); border-radius: 16px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.nn-gratuite-grille { padding: 20px; background: var(--nn-papier); border-bottom: 1px solid var(--nn-ligne); }
.nn-gratuite-grille .nn-grille-svg { width: 100%; height: auto; display: block; }
.nn-gratuite-corps { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.nn-gratuite-titre { font-size: 20px; margin: 0 0 6px; }
.nn-gratuite-info { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 14px; color: var(--nn-gris); flex-wrap: wrap; }
.nn-gratuite-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.nn-gratuite-actions .nn-bouton { padding: 0 10px; font-size: 15px; gap: 6px; white-space: nowrap; }
.nn-gratuites.nn-gratuites-1 { grid-template-columns: 1fr; max-width: none; }
.nn-gratuites-1 .nn-gratuite { flex-direction: row; align-items: stretch; }
.nn-gratuites-1 .nn-gratuite-grille { flex: 0 0 52%; border-bottom: 0; border-right: 1px solid var(--nn-ligne); box-sizing: border-box; }
.nn-gratuites-1 .nn-gratuite-corps { padding: 32px; justify-content: center; }
.nn-gratuites-1 .nn-gratuite-titre { font-size: 28px; }
.nn-gratuites-1 .nn-gratuite-actions { margin-top: 18px; grid-template-columns: 1fr; max-width: 300px; }
.nn-gratuites-1 .nn-gratuite-actions .nn-bouton { min-height: 52px; font-size: 16px; }
@media (max-width: 760px) { .nn-gratuites-1 .nn-gratuite { flex-direction: column; } .nn-gratuites-1 .nn-gratuite-grille { border-right: 0; border-bottom: 1px solid var(--nn-ligne); } .nn-gratuites-1 .nn-gratuite-corps { padding: 20px; } .nn-gratuites-1 .nn-gratuite-actions { max-width: none; } }
.nn-bientot { padding: 22px; border: 1.5px dashed var(--nn-ligne); border-radius: 14px; color: var(--nn-gris); }
.nn-niveaux-tuiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0 0 56px; }
.nn-niveau-tuile { --niv: var(--nn-encre); display: flex; flex-direction: column; border: 1.5px solid var(--nn-ligne); border-top: 5px solid var(--niv); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--nn-encre); background: #fff; transition: transform .15s, box-shadow .15s; }
.nn-niveau-tuile:hover { transform: translateY(-3px); box-shadow: var(--nn-ombre); }
.nn-niveau-tuile-grille { width: 100%; height: auto; padding: 14px; box-sizing: border-box; background: var(--nn-papier); }
.nn-niveau-tuile-corps { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.nn-niveau-tuile-corps em { margin-top: auto; }
.nn-niveau-tuile-corps strong { font-family: var(--nn-titre); font-size: 20px; }
.nn-niveau-tuile-corps span { font-size: 14px; color: var(--nn-gris); }
.nn-niveau-tuile-corps em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--nn-orange-f); }
.nn-gratuits-texte { margin: 56px 0 40px; }
@media (max-width: 1100px) { .nn-niveaux-tuiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) { .nn-gratuites { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .nn-gratuites { grid-template-columns: 1fr; } .nn-niveaux-tuiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .nn-gratuite-actions { grid-template-columns: 1fr; } }

/* fenêtre « jouer en ligne » */
.nn-modale { position: fixed; inset: 0; z-index: 99950; background: rgba(13, 21, 48, .72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.nn-modale-boite { background: #fff; border-radius: 18px; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px 18px 16px; box-sizing: border-box; box-shadow: var(--nn-ombre-forte); }
.nn-modale-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.nn-modale-tete p { margin: 0; font-family: var(--nn-titre); font-weight: 800; font-size: 20px; color: var(--nn-encre); }
.nn-modale-fermer { width: 44px; height: 44px; border: 0; background: var(--nn-papier); border-radius: 10px; font-size: 24px; cursor: pointer; color: var(--nn-encre); }

/* encarts */
.nn-encart { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; padding: 26px; border: 2px solid var(--nn-encre); border-radius: 18px; background: #fff; box-shadow: var(--nn-ombre); margin: 40px 0; }
.nn-encart-img img, .nn-encart-img .nn-couv { width: 100%; border-radius: 10px; }
.nn-encart-corps p { margin: 0 0 12px; }
.nn-encart-corps .nn-surtitre { margin-bottom: 8px; }
.nn-encart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 16px; }
.nn-encart-int { margin: 18px 0 0 !important; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--nn-gris); }
.nn-encart-int .nn-picto { color: var(--nn-orange); width: 18px; height: 18px; }
.nn-encart-int a { font-weight: 700; color: var(--nn-encre); }
@media (max-width: 640px) { .nn-encart { grid-template-columns: 1fr; padding: 20px; } .nn-encart-img { max-width: 220px; } }
.nn-fin-niveaux { margin: 40px 0; }

/* ---------- prix ---------- */
.nn-prix { font-family: var(--nn-titre); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--nn-encre); font-size: 20px; letter-spacing: -.02em; white-space: nowrap; }
.nn-prix .woocommerce-Price-amount, .nn-prix bdi { font-family: inherit; }
.nn-prix del { color: var(--nn-gris-2); font-weight: 500; font-size: .8em; margin-right: 6px; }
.nn-prix ins { text-decoration: none; }
.nn-prix-grand { font-size: 40px; }

/* ---------- cartes produit ---------- */
.nn-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.nn-cartes-1 { grid-template-columns: minmax(0, 420px); }
.nn-cartes-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.nn-cartes-5 .nn-carte-accroche { font-size: 14px; }
@media (max-width: 1160px) { .nn-cartes-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .nn-cartes-5 { grid-template-columns: 1fr 1fr; gap: 12px; } }
.nn-carte { position: relative; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--nn-ligne); border-radius: 16px; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.nn-carte:hover { box-shadow: var(--nn-ombre); border-color: #C8CFDF; }
.nn-carte-vedette { border: 2px solid var(--nn-encre); }
.nn-carte-img { display: block; aspect-ratio: 1; background: var(--nn-papier); overflow: hidden; }
.nn-carte-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.nn-carte:hover .nn-carte-img img { transform: scale(1.03); }
.nn-carte-corps { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.nn-carte-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--nn-gris); }
.nn-carte-titre { font-size: 19px !important; margin: 0 0 6px; line-height: 1.2 !important; letter-spacing: -.01em !important; }
.nn-carte-titre a { text-decoration: none; }
.nn-carte-titre a:hover { color: var(--nn-orange-f); }
.nn-carte-accroche { font-size: 15px; color: var(--nn-gris); margin: 0 0 14px; line-height: 1.45; }
.nn-carte-bas { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nn-carte-bas .nn-bouton { min-height: 44px; padding: 0 16px; font-size: 15px; }
.nn-badge { position: static; display: inline-block; align-self: flex-start; margin: 0 0 8px; background: var(--nn-orange); color: #fff; font-weight: 800; font-size: 13px; padding: 5px 11px; border-radius: 999px; letter-spacing: .02em; }
.nn-badge-statique { position: static; display: inline-block; margin: 0; align-self: center; }
.nn-coeur { position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--nn-encre); cursor: pointer; box-shadow: 0 2px 8px rgba(19, 32, 74, .15); }
.nn-coeur .nn-picto { width: 22px; height: 22px; }
.nn-coeur[aria-pressed="true"] { color: var(--nn-orange); }
.nn-coeur[aria-pressed="true"] .nn-picto { fill: var(--nn-orange); }
@media (max-width: 560px) { .nn-cartes { grid-template-columns: 1fr 1fr; gap: 12px; } .nn-carte-corps { padding: 12px; } .nn-carte-titre { font-size: 16px !important; } .nn-carte-accroche { display: none; } .nn-carte-bas .nn-bouton { width: 100%; padding: 0 8px; font-size: 14px; } .nn-carte-bas .nn-bouton .nn-picto { display: none; } .nn-prix { font-size: 18px; } }

/* couverture dessinée (produit sans image) */
.nn-couv { --niv: var(--nn-encre); position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; aspect-ratio: 1; padding: 12%; box-sizing: border-box; background: var(--nn-quadri), #fff; overflow: hidden; color: var(--nn-encre); }
.nn-couv::before { content: ""; position: absolute; left: 12%; right: 12%; top: 10%; height: 12px; background: var(--niv); border-radius: 4px; }
.nn-couv-deb { --niv: var(--niv-debutant); } .nn-couv-fac { --niv: var(--niv-facile); } .nn-couv-moy { --niv: var(--niv-moyen); } .nn-couv-dif { --niv: var(--niv-difficile); } .nn-couv-exp { --niv: var(--niv-expert); } .nn-couv-int, .nn-couv-cad { --niv: var(--nn-orange); }
.nn-couv-nb { font-family: var(--nn-mono); font-weight: 700; font-size: clamp(40px, 7vw, 84px); line-height: .9; letter-spacing: -.05em; }
.nn-couv-mot { font-family: var(--nn-titre); font-weight: 800; font-size: clamp(18px, 2.4vw, 28px); }
.nn-couv-titre { font-family: var(--nn-main); font-weight: 700; color: var(--nn-orange-f); font-size: clamp(22px, 3vw, 36px); margin-top: 4px; }
.nn-couv-symbole { position: absolute; top: 16%; right: 12%; width: 18%; height: auto; }

/* ---------- boutique ---------- */
.nn-vedette { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; padding: 30px; border: 3px solid var(--nn-encre); border-radius: 22px; background: #fff; box-shadow: var(--nn-ombre-forte); margin-bottom: 30px; }
.nn-vedette-img { display: block; border-radius: 14px; overflow: hidden; background: var(--nn-papier); }
.nn-vedette-img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.nn-vedette-corps h2 { margin-top: 12px; }
.nn-vedette-corps h2 a { text-decoration: none; }
.nn-vedette-achat { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 8px; }
.nn-vedette-achat .nn-coeur { position: static; box-shadow: 0 0 0 1.5px var(--nn-ligne); }
.nn-vedette-eco { font-size: 15px; color: var(--nn-gris); }
@media (max-width: 860px) { .nn-vedette { grid-template-columns: 1fr; padding: 18px; gap: 20px; } }
.nn-tableau-wrap { overflow-x: auto; border: 1.5px solid var(--nn-ligne); border-radius: 16px; background: #fff; }
.nn-tableau { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 16px; }
.nn-tableau th, .nn-tableau td { padding: 14px 16px; border-bottom: 1px solid var(--nn-ligne); text-align: center; }
.nn-tableau thead th { font-family: var(--nn-titre); font-size: 18px; color: var(--nn-encre); background: var(--nn-papier); }
.nn-tableau tbody th { text-align: left; font-weight: 600; }
.nn-tableau tr:last-child th, .nn-tableau tr:last-child td { border-bottom: 0; font-family: var(--nn-titre); font-weight: 800; font-size: 19px; }
.nn-tableau tr:last-child th { font-family: var(--nn-police); font-size: 16px; }
.nn-col-vedette { background: #FFF4EE; }
thead .nn-col-vedette { background: var(--nn-encre) !important; color: #fff !important; }
.nn-oui .nn-picto { color: var(--nn-vert); stroke-width: 2.6; display: inline-block; vertical-align: middle; }
.nn-non { color: var(--nn-gris-2); }

/* ---------- fiche ---------- */
.nn-fiche { padding-top: 26px; }
.nn-fiche-haut { display: grid; grid-template-columns: 1.08fr .92fr; gap: 52px; align-items: start; padding-bottom: 56px; }
.nn-galerie { position: sticky; top: 110px; }
.nn-galerie-vue { display: block; width: 100%; padding: 0; border: 1.5px solid var(--nn-ligne); border-radius: 18px; overflow: hidden; background: var(--nn-papier); cursor: zoom-in; position: relative; }
.nn-galerie-vue img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.nn-galerie-loupe { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 999px; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--nn-encre); box-shadow: 0 2px 8px rgba(19, 32, 74, .2); }
.nn-galerie-vignettes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
.nn-galerie-vignettes button { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--nn-papier); }
.nn-galerie-vignettes button[aria-selected="true"] { border-color: var(--nn-orange); }
.nn-galerie-vignettes img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.nn-galerie-vide .nn-couv { border-radius: 18px; border: 1.5px solid var(--nn-ligne); }
.nn-fiche-niveau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; color: var(--nn-gris); margin: 0 0 12px; font-size: 15px; }
.nn-fiche-niveau .nn-badge { margin-left: 4px; }
.nn-fiche-5 { display: inline-flex; gap: 3px; }
.nn-fiche-5 i { width: 11px; height: 11px; border-radius: 2px; background: var(--niv-debutant); }
.nn-fiche-5 i:nth-child(2) { background: var(--niv-facile); } .nn-fiche-5 i:nth-child(3) { background: var(--niv-moyen); } .nn-fiche-5 i:nth-child(4) { background: var(--niv-difficile); } .nn-fiche-5 i:nth-child(5) { background: var(--niv-expert); }
.nn-fiche-titre { font-size: clamp(30px, 3.4vw, 44px) !important; margin: 0 0 12px; }
.nn-fiche-accroche { font-size: 19px; color: var(--nn-gris); margin: 0 0 20px; }
.nn-fiche-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 16px 0; border-top: 1px solid var(--nn-ligne); border-bottom: 1px solid var(--nn-ligne); }
.nn-fiche-par { font-size: 15px; color: var(--nn-gris); font-weight: 600; }
.nn-fiche-eco { margin: 10px 0 0; font-size: 15px; color: var(--nn-gris); }
.nn-fiche-points { margin: 20px 0 24px; }
.nn-fiche-achat { position: relative; display: flex; gap: 10px; align-items: stretch; }
.nn-fiche-achat .nn-bouton { flex: 1; }
.nn-fiche-achat .nn-coeur { position: static; width: 58px; height: 58px; border-radius: var(--nn-rayon); box-shadow: inset 0 0 0 2px var(--nn-ligne); flex: none; }
.nn-fiche-upsell { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 14px 16px; background: var(--nn-orange-pale); border-radius: 12px; font-size: 15px; }
.nn-fiche-upsell .nn-picto { color: var(--nn-orange-f); }
.nn-fiche-upsell a { font-weight: 700; color: var(--nn-encre); }
.nn-fiche-rassurance { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; font-size: 15px; }
.nn-fiche-rassurance li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.nn-fiche-rassurance .nn-picto { color: var(--nn-encre); }
.nn-fiche-note { margin: 18px 0 0; font-size: 14px; color: var(--nn-gris); }
.nn-fiche-sommaire { position: sticky; top: 76px; z-index: 50; background: #fff; border-top: 1px solid var(--nn-ligne); border-bottom: 1px solid var(--nn-ligne); }
.admin-bar .nn-fiche-sommaire { top: 108px; }
.nn-fiche-sommaire .nn-wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.nn-fiche-sommaire a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 14px; text-decoration: none; font-weight: 600; color: var(--nn-gris); white-space: nowrap; border-bottom: 3px solid transparent; }
.nn-fiche-sommaire a.actif, .nn-fiche-sommaire a:hover { color: var(--nn-encre); border-bottom-color: var(--nn-orange); }
.nn-fiche-deux { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; }
.nn-fichiers { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.nn-fichiers li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--nn-ligne); border-radius: 12px; background: #fff; }
.nn-fichiers .nn-picto { color: var(--nn-orange); }
.nn-pour-qui { padding: 24px; border-radius: 16px; background: var(--nn-papier); }
.nn-pour-qui .nn-annotation { font-size: 28px; margin: 0 0 6px; }
.nn-pour-qui > p { font-size: 18px; margin: 0 0 18px; }
.nn-fiche-niv { display: grid; gap: 4px; margin: 0 0 18px; }
.nn-fiche-niv dt { font-family: var(--nn-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--nn-gris); }
.nn-fiche-niv dd { margin: 0 0 10px; font-weight: 600; }
.nn-fiche-5niv { display: grid; gap: 8px; }
.nn-fiche-5niv p { display: grid; grid-template-columns: 62px 84px 1fr; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; background: #fff; border-radius: 10px; font-size: 15px; }
.nn-fiche-5niv span { color: var(--nn-gris); font-size: 14px; }
.nn-barre-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; background: #fff; border-top: 1px solid var(--nn-ligne); box-shadow: 0 -10px 30px -18px rgba(19, 32, 74, .45); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.nn-barre-achat .nn-wrap { display: flex; align-items: center; gap: 12px; }
.nn-barre-nom { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nn-barre-achat .nn-bouton { min-height: 48px; padding: 0 18px; }
@media (min-width: 961px) { .nn-barre-achat { display: none !important; } }
@media (max-width: 960px) {
	.nn-fiche-haut { grid-template-columns: 1fr; gap: 26px; }
	.nn-galerie { position: static; }
	.nn-fiche-deux { grid-template-columns: 1fr; gap: 30px; }
	.nn-fiche-sommaire { top: 66px; }
}
@media (max-width: 560px) { .nn-galerie-vignettes { grid-template-columns: repeat(5, 1fr); gap: 6px; } .nn-barre-achat .nn-prix { font-size: 17px; } .nn-barre-nom { font-size: 14px; } }

/* visionneuse */
.nn-visionneuse { position: fixed; inset: 0; z-index: 99960; background: rgba(10, 16, 36, .94); display: flex; flex-direction: column; }
.nn-visionneuse-barre { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; color: #fff; font-size: 14px; }
.nn-visionneuse-barre button { border: 0; background: rgba(255, 255, 255, .15); color: #fff; min-height: 44px; padding: 0 16px; border-radius: 10px; cursor: pointer; font-weight: 700; }
.nn-visionneuse-zone { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 10px; }
.nn-visionneuse-zone img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.nn-visionneuse-zone.zoom { display: block; }
.nn-visionneuse-zone.zoom img { max-width: none; max-height: none; width: 200%; cursor: zoom-out; }
.nn-v-prec, .nn-v-suiv { position: absolute; top: 50%; width: 52px; height: 52px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .9); font-size: 30px; cursor: pointer; color: var(--nn-encre); }
.nn-v-prec { left: 12px; } .nn-v-suiv { right: 12px; }

/* ---------- articles ---------- */
.nn-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.nn-carte-article { display: flex; flex-direction: column; gap: 14px; }
.nn-carte-article-img { display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--nn-papier); border: 1px solid var(--nn-ligne); }
.nn-carte-article-img img { width: 100%; height: 100%; object-fit: cover; }
.nn-article-dessin { --niv: var(--nn-encre); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--nn-quadri), #fff; box-shadow: inset 0 5px 0 var(--niv); }
.nn-article-dessin .nn-grille-svg { height: 78%; width: auto; transform: rotate(-4deg); box-shadow: var(--nn-ombre); border-radius: 6px; }
.nn-article-symbole { width: 30%; height: auto; }
.nn-carte-article .nn-surtitre { margin: 0 0 6px; }
.nn-carte-article-titre { font-size: 21px !important; margin: 0 0 8px; letter-spacing: -.01em !important; }
.nn-carte-article-titre a { text-decoration: none; }
.nn-carte-article-titre a:hover { color: var(--nn-orange-f); }
.nn-carte-article p { margin: 0; color: var(--nn-gris); font-size: 16px; }
.nn-carte-article p.nn-surtitre { color: var(--nn-orange-f); font-size: 12px; }
.nn-article-meta { color: var(--nn-gris); font-size: 15px; margin: 12px 0 0; font-family: var(--nn-mono); }
.nn-article-chapo { font-size: 21px; line-height: 1.55; color: var(--nn-encre); font-weight: 500; margin: 0 0 30px; }
.nn-article .nn-prose { max-width: none; }
.nn-pagination { display: flex; justify-content: center; gap: 6px; margin: 44px 0 70px; flex-wrap: wrap; }
.nn-pagination .page-numbers { display: inline-flex; min-width: 44px; height: 44px; align-items: center; justify-content: center; border: 1.5px solid var(--nn-ligne); border-radius: 10px; text-decoration: none; padding: 0 12px; box-sizing: border-box; font-weight: 600; }
.nn-pagination .current { background: var(--nn-encre); color: #fff; border-color: var(--nn-encre); }
.nn-blog .nn-articles { padding-bottom: 20px; }
@media (max-width: 960px) { .nn-articles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .nn-articles { grid-template-columns: 1fr; } }

/* recherche, 404, résultats */
.nn-resultats { list-style: none; padding: 0; margin: 0 0 70px; display: grid; gap: 10px; }
.nn-resultats a { display: grid; gap: 4px; padding: 16px 18px; border: 1.5px solid var(--nn-ligne); border-radius: 12px; text-decoration: none; }
.nn-resultats a:hover { border-color: var(--nn-encre); }
.nn-resultats span { color: var(--nn-gris); font-size: 15px; }
.nn-recherche-page .nn-cartes { margin-bottom: 44px; }
.nn-404-recherche { display: flex; gap: 8px; margin-top: 20px; max-width: 480px; }
.nn-404-recherche input { flex: 1; min-width: 0; height: 44px; border: 1.5px solid #C8CFDF; border-radius: 10px; padding: 0 14px; font: inherit; }
.nn-404 { padding: 70px 0 90px; background: var(--nn-quadri), #fff; }
.nn-404-grille { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.nn-404-dessin { display: grid; grid-template-columns: repeat(3, 1fr); border: 4px solid var(--nn-encre); border-radius: 12px; overflow: hidden; background: #fff; max-width: 360px; }
.nn-404-dessin span { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: var(--nn-mono); font-weight: 700; font-size: 70px; color: var(--nn-encre); border-right: 2px solid var(--nn-encre); }
.nn-404-dessin span:last-child { border-right: 0; }
.nn-404-vide { background: var(--nn-orange-pale); }
@media (max-width: 760px) { .nn-404-grille { grid-template-columns: 1fr; } .nn-404-dessin span { font-size: 50px; } }

/* ---------- panneau panier ---------- */
.nn-tiroir { position: fixed; inset: 0; z-index: 99900; }
.nn-tiroir-fond { position: absolute; inset: 0; background: rgba(13, 21, 48, .5); opacity: 0; transition: opacity .3s; }
.nn-tiroir.ouvert .nn-tiroir-fond { opacity: 1; }
.nn-tiroir-panneau { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s ease; box-shadow: -20px 0 50px -20px rgba(0, 0, 0, .4); }
.nn-tiroir.ouvert .nn-tiroir-panneau { transform: none; }
.nn-tiroir-tete { position: relative; padding: 20px 22px 14px; border-bottom: 1px solid var(--nn-ligne); }
.nn-tiroir-tete h2 { font-size: 24px; margin: 0; }
.nn-tiroir-ok { display: none; align-items: center; gap: 6px; margin: 0 0 4px; color: var(--nn-vert); font-weight: 700; font-size: 14px; }
.nn-tiroir.ajout .nn-tiroir-ok { display: flex; }
.nn-tiroir-ok .nn-picto { width: 18px; height: 18px; stroke-width: 2.6; }
.nn-tiroir-fermer { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--nn-papier); font-size: 26px; cursor: pointer; color: var(--nn-encre); }
.nn-tiroir-contenu { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.nn-tiroir-liste { list-style: none; padding: 10px 22px; margin: 0; }
.nn-tiroir-liste li { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--nn-ligne); }
.nn-tiroir-img img, .nn-tiroir-img .nn-couv { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }
.nn-tiroir-img .nn-couv { padding: 8px; }
.nn-tiroir-img .nn-couv-nb { font-size: 22px; } .nn-tiroir-img .nn-couv-mot, .nn-tiroir-img .nn-couv-titre, .nn-tiroir-img .nn-couv-symbole, .nn-tiroir-img .nn-couv::before { display: none; }
.nn-tiroir-nom { display: block; font-weight: 700; font-size: 15px; line-height: 1.3; text-decoration: none; color: var(--nn-encre); }
.nn-tiroir-info { display: block; font-size: 13px; color: var(--nn-gris); margin-top: 3px; }
.nn-tiroir-prix { font-family: var(--nn-titre); font-weight: 800; font-size: 15px; white-space: nowrap; }
.nn-tiroir-retirer { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none; font-size: 22px; color: var(--nn-gris); }
.nn-tiroir-retirer:hover { background: var(--nn-papier); color: var(--nn-encre); }
.nn-tiroir-bas { margin-top: auto; padding: 16px 22px 18px; display: grid; gap: 10px; border-top: 1px solid var(--nn-ligne); background: #fff; }
.nn-tiroir-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-weight: 700; font-size: 18px; }
.nn-tiroir-total b { font-family: var(--nn-titre); font-weight: 800; font-size: 26px; }
.nn-tiroir-rassurance { list-style: none; padding: 0; margin: 0 0 4px; display: grid; gap: 6px; font-size: 14px; color: var(--nn-gris); }
.nn-tiroir-rassurance li { display: flex; gap: 8px; align-items: center; }
.nn-tiroir-rassurance .nn-picto { width: 18px; height: 18px; color: var(--nn-orange); }
.nn-tiroir-bas .nn-bouton { width: 100%; }
.nn-tiroir-commander { background: var(--nn-orange) !important; border-color: var(--nn-orange) !important; }
.nn-tiroir-commander:hover { background: var(--nn-orange-f) !important; border-color: var(--nn-orange-f) !important; }
.nn-tiroir-continuer { border: 0; background: none; padding: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; color: var(--nn-gris); }
.nn-tiroir-vide { padding: 30px 22px; text-align: center; }
.nn-tiroir-vide-grille { width: 150px; height: auto; margin: 0 auto 18px; opacity: .55; }
.nn-paiement-logos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.nn-paiement-logos img { width: 44px; height: 28px; object-fit: contain; background: #fff; border-radius: 4px; padding: 2px; box-sizing: border-box; box-shadow: 0 0 0 1px var(--nn-ligne); }
.nn-upsell { padding: 14px 16px; border-radius: 12px; background: var(--nn-orange-pale); border: 1.5px solid #FFC9B2; margin: 0 0 6px; }
.nn-upsell p { margin: 0 0 10px; font-size: 15px; line-height: 1.45; }
.nn-upsell-titre { display: flex; gap: 8px; align-items: center; font-weight: 800; color: var(--nn-encre); font-size: 16px !important; }
.nn-upsell-titre .nn-picto { color: var(--nn-orange-f); width: 20px; height: 20px; }
.nn-upsell .nn-bouton { width: auto !important; }
.nn-page-woo .nn-upsell { max-width: 760px; margin: 0 0 26px; }

/* ---------- WooCommerce : panier, commande, compte ---------- */
.nn-page-woo .nn-page-contenu { padding-bottom: 80px; }
.nn-rassurance-commande { list-style: none; padding: 14px 18px; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 10px 26px; background: var(--nn-papier); border-radius: 12px; font-size: 15px; }
.nn-rassurance-commande li { display: flex; gap: 8px; align-items: center; }
.nn-rassurance-commande .nn-picto { color: var(--nn-orange); width: 20px; height: 20px; }
.nn-page-woo .wc-block-components-button:not(.is-link), .nn-page-woo .wc-block-cart__submit-button, .nn-page-woo .wc-block-components-checkout-place-order-button { min-height: 58px; border-radius: var(--nn-rayon) !important; background: var(--nn-orange) !important; color: #fff !important; font-weight: 800 !important; font-size: 17px !important; border: 0 !important; }
.nn-page-woo .wc-block-components-button:not(.is-link):hover { background: var(--nn-orange-f) !important; }
.nn-page-woo .wc-block-components-product-name { font-weight: 700; font-size: 17px !important; text-decoration: none; color: var(--nn-encre); }
.nn-page-woo .wc-block-cart-items__header, .nn-page-woo .wc-block-components-title, .nn-page-woo .wc-block-cart__totals-title { font-family: var(--nn-titre) !important; font-weight: 800 !important; text-transform: none !important; color: var(--nn-encre); }
.nn-page-woo .wc-block-components-order-summary-item__quantity, .nn-page-woo .wc-block-components-quantity-selector { display: none !important; }
.nn-page-woo .wc-block-components-product-price, .nn-page-woo .wc-block-components-totals-item__value, .nn-page-woo .wc-block-components-formatted-money-amount { font-weight: 700; }
.nn-page-woo .wc-block-components-text-input input, .nn-page-woo .wc-block-components-combobox input, .nn-page-woo .wc-blocks-components-select select { border-radius: 10px !important; }
.nn-page-woo .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--nn-encre) !important; border-color: var(--nn-encre) !important; }
.nn-page-woo .wc-block-checkout__additional-fields .wc-block-components-checkbox, .nn-page-woo .wc-block-checkout__order-fields .wc-block-components-checkbox { padding: 14px 16px; background: var(--nn-orange-pale); border-radius: 10px; }
.nn-page-woo .wc-block-components-product-metadata, .nn-page-woo .wc-block-components-product-metadata__description, .nn-page-woo .wc-block-components-product-metadata p { font-size: 14px !important; line-height: 1.4; }
.nn-page-woo .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { display: none !important; }
.nn-page-woo .wc-block-cart__empty-cart__title { font-family: var(--nn-titre) !important; font-weight: 800 !important; font-size: clamp(28px, 4vw, 40px) !important; margin: 10px 0 14px !important; color: var(--nn-encre); }
.nn-page-woo .wp-block-woocommerce-empty-cart-block .wp-block-separator { display: none !important; }
.nn-page-woo .wp-block-woocommerce-empty-cart-block h2 { font-family: var(--nn-titre) !important; font-weight: 800 !important; margin-top: 56px !important; }
.nn-page-woo .wc-block-grid__product { text-align: left !important; display: flex; flex-direction: column; border: 1.5px solid var(--nn-ligne); border-radius: 14px; padding: 12px !important; }
.nn-page-woo .wc-block-grid__product-image img { border-radius: 10px; }
.nn-page-woo .wc-block-grid__product-title { font-weight: 700 !important; font-size: 16px !important; color: var(--nn-encre); margin: 12px 0 6px !important; }
.nn-page-woo .wc-block-grid__product-price { font-family: var(--nn-titre); font-weight: 700 !important; font-size: 18px !important; margin: 0 0 12px !important; }
.nn-page-woo .wc-block-grid__product-add-to-cart { margin-top: auto !important; width: 100%; }
.nn-page-woo .wc-block-grid__product-add-to-cart .wp-block-button__link { display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 0 12px !important; border-radius: 10px !important; background: var(--nn-encre) !important; color: #fff !important; font-weight: 700 !important; font-size: 15px !important; box-sizing: border-box; }
.nn-page-woo .wc-block-grid__product-add-to-cart .added_to_cart { display: none !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 24px; border-top: 1px solid var(--nn-ligne); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 13px 0; border-bottom: 1px solid var(--nn-ligne); text-decoration: none; font-weight: 600; background: none !important; color: var(--nn-encre) !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--nn-orange-pale) !important; box-shadow: inset 4px 0 0 var(--nn-orange); padding-left: 14px; }
.woocommerce-MyAccount-content > p:has(~ .nn-compte-accueil) { display: none; }
.nn-compte-liens { display: flex; flex-wrap: wrap; gap: 10px; }
.nn-site .woocommerce-message, .nn-site .woocommerce-info, .nn-site .woocommerce-error { border-top-color: var(--nn-orange) !important; background: var(--nn-papier); border-radius: 10px; }
.nn-site .woocommerce-message::before, .nn-site .woocommerce-info::before { color: var(--nn-orange-f); }
.nn-site .woocommerce a.button, .nn-site .woocommerce button.button, .nn-site .woocommerce .woocommerce-MyAccount-downloads-file, .nn-site .woocommerce-Button { background: var(--nn-encre) !important; color: #fff !important; border-radius: 10px !important; font-weight: 700 !important; }
.woocommerce-thankyou-order-received { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.nn-merci { padding: 28px; border-radius: 18px; background: var(--nn-encre); color: #DCE3F5; margin: 0 0 30px; }
.nn-merci-titre { font-family: var(--nn-titre); font-weight: 800; font-size: clamp(26px, 3vw, 34px); color: #fff; margin: 0 0 8px; line-height: 1.15; }
.nn-merci b { color: #fff; }
.nn-merci-etapes { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nn-merci-etapes li { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: rgba(255, 255, 255, .08); border-radius: 12px; font-size: 15px; }
.nn-merci-etapes b { display: inline-flex; width: 30px; height: 30px; flex: none; align-items: center; justify-content: center; border-radius: 8px; background: var(--nn-orange); color: #fff; font-family: var(--nn-mono); }
@media (max-width: 700px) { .nn-merci-etapes { grid-template-columns: 1fr; } }
.nn-retract-form { display: grid; gap: 4px; max-width: 560px; }
.nn-retract-form label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.nn-retract-form label span { font-weight: 400; color: var(--nn-gris); }
.nn-retract-form input, .nn-retract-form textarea { width: 100%; padding: 12px; border: 1.5px solid #C8CFDF; border-radius: 10px; font: inherit; box-sizing: border-box; background: #fff; }
.nn-retract .nn-bouton, .nn-retract-form .nn-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--nn-rayon); background: var(--nn-encre); color: #fff; font-weight: 800; font-size: 16px; cursor: pointer; }
.nn-retract-erreur { padding: 12px 14px; background: #FDECE8; color: #7C2A20; border-radius: 10px; }
.nn-retract-ok { padding: 24px; background: var(--nn-papier); border-radius: 12px; }
.nn-retract-legal { font-size: 15px; color: var(--nn-gris); }
.nn-favoris-vide { padding: 24px; border: 1.5px dashed var(--nn-ligne); border-radius: 14px; color: var(--nn-gris); }
.nn-favoris-bas { margin: 34px 0 0; }

/* ---------- pied ---------- */
.nn-pied { background: var(--nn-encre); color: #C9D2EA; padding: 64px 0 24px; position: relative; font-size: 15px; }
.nn-pied::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 28px 28px; pointer-events: none; }
.nn-pied .nn-wrap { position: relative; }
.nn-pied-grille { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 30px; }
.nn-logo-pied { color: #fff; }
.nn-logo-pied .nn-symbole rect:first-child { fill: #fff; }
.nn-logo-pied .nn-symbole path { stroke: #13204A; }
.nn-pied-marque p { margin: 16px 0 0; max-width: 340px; line-height: 1.55; }
.nn-pied-crayon { font-family: var(--nn-main); color: #FF8A5E; font-size: 26px; line-height: 1.1; }
.nn-pied-contact a { color: #fff; font-weight: 600; }
.nn-pied-titre { font-family: var(--nn-mono) !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .1em !important; text-transform: uppercase; color: #FF8A5E !important; margin: 6px 0 14px; }
.nn-pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.nn-pied ul + ul { margin-top: 4px; }
.nn-pied li a { color: #DCE3F5; text-decoration: none; display: inline-block; padding: 5px 0; }
.nn-pied li a:hover { color: #fff; text-decoration: underline; }
.nn-pied-bas { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; }
.nn-pied .nn-paiement-logos img { box-shadow: none; }
@media (max-width: 1060px) { .nn-pied-grille { grid-template-columns: 1fr 1fr 1fr; } .nn-pied-marque { grid-column: 1 / -1; } }
@media (max-width: 640px) { .nn-pied-grille { grid-template-columns: 1fr 1fr; gap: 26px 18px; } .nn-pied-bas { justify-content: center; text-align: center; } }

/* ---------- cookies (habillage de la barre) ---------- */
.nn-cookie { font-family: var(--nn-police) !important; border: 2px solid var(--nn-encre) !important; border-radius: 16px !important; color: var(--nn-texte) !important; }
.nn-cookie-titre { font-family: var(--nn-titre); font-weight: 800; font-size: 18px; margin: 0 0 4px; color: var(--nn-encre); }
.nn-cookie-texte { margin: 0; font-size: 15px; line-height: 1.5; }
.nn-cookie-btn { min-height: 44px; border-radius: 10px !important; font-weight: 700; border-color: var(--nn-encre) !important; color: var(--nn-encre); }
.nn-cookie-plein { background: var(--nn-encre) !important; color: #fff !important; }
.nn-cookie-lien { min-height: 44px; color: var(--nn-encre); font-weight: 600; }

/* Blocksy : rien de son en-tête / pied ne doit réapparaître */
body.nn-site > #main-container > header#header, body.nn-site > #main-container > footer.ct-footer { display: none !important; }
body.nn-site #main-container { display: block; min-height: 0; }

/* panier vide (remplace le bloc de WooCommerce) */
.nn-panier-vide { text-align: center; padding: 10px 0 20px; }
.nn-panier-vide-grille { width: 140px; height: auto; margin: 0 auto 18px; transform: rotate(-4deg); }
.nn-panier-vide .nn-titre-l { margin-bottom: 8px; }
.nn-panier-vide > p { color: var(--nn-gris); max-width: 520px; margin: 0 auto 26px; }
.nn-panier-vide .nn-offres { margin-top: 56px; text-align: left; }

/* v1.0.1 : rangées incomplètes centrées, suggestions sur 3 colonnes, carte cadeau en largeur */
.nn-cartes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .nn-cartes-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1160px) and (min-width: 481px) {
	.nn-niveaux, .nn-cartes-5, .nn-niveaux-tuiles { display: flex; flex-wrap: wrap; justify-content: center; }
	.nn-niveaux > *, .nn-cartes-5 > *, .nn-niveaux-tuiles > * { flex: 0 1 calc(33.333% - 12px); }
}
@media (max-width: 760px) and (min-width: 481px) {
	.nn-niveaux > *, .nn-cartes-5 > *, .nn-niveaux-tuiles > * { flex-basis: calc(50% - 8px); }
}
.nn-cartes-1 { grid-template-columns: 1fr; }
.nn-cartes-1 .nn-carte { flex-direction: row; }
.nn-cartes-1 .nn-carte-img { flex: 0 0 42%; }
.nn-cartes-1 .nn-carte-corps { padding: 28px; justify-content: center; }
.nn-cartes-1 .nn-carte-titre { font-size: 24px !important; }
.nn-cartes-1 .nn-carte-bas { margin-top: 18px; justify-content: flex-start; gap: 18px; }
@media (max-width: 640px) { .nn-cartes-1 .nn-carte { flex-direction: column; } .nn-cartes-1 .nn-carte-corps { padding: 16px; } }
.nn-panier-offres { margin: 40px 0 10px; }
.nn-panier-offres .nn-offres-note { margin-top: 36px; }
.nn-page-woo .wp-block-woocommerce-product-new, .nn-page-woo .wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) { display: none !important; }
.nn-page-woo .wc-block-cart__empty-cart__title { text-align: center; }
.nn-page-woo .wp-block-woocommerce-empty-cart-block p.has-text-align-center a { display: inline-flex; min-height: 50px; padding: 0 24px; align-items: center; border-radius: var(--nn-rayon); background: var(--nn-encre); color: #fff !important; font-weight: 700; text-decoration: none; }
.nn-fiche-deux > *, .nn-fiche-haut > *, .nn-apercu-grille > *, .nn-hero-grille > *, .nn-final-grille > * { min-width: 0; }
.nn-fichiers li span, .nn-coches li, .nn-prose { overflow-wrap: anywhere; }

/* v1.0.2 : à droite du titre d'accueil, L'Intégrale à acheter (plus de grille jouable) */
.nn-hero-produit { position: relative; max-width: 520px; width: 100%; justify-self: end; }
.nn-hero-carte { position: relative; background: #fff; border: 3px solid var(--nn-encre); border-radius: 20px; box-shadow: var(--nn-ombre-forte); overflow: visible; }
.nn-hero-carte .nn-offre-ruban { position: static; transform: none; justify-self: start; margin: -36px 0 -2px; background: var(--nn-encre); color: #fff; border: 3px solid #fff; box-shadow: 0 6px 14px -6px rgba(19,32,74,.6); }
.nn-hero-carte-img { display: block; border-radius: 17px 17px 0 0; overflow: hidden; background: var(--nn-papier); }
.nn-hero-carte-img img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.nn-hero-carte-corps { padding: 20px 24px 22px; display: grid; gap: 12px; }
.nn-hero-carte-nom { margin: 0; font-family: var(--nn-titre); font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.nn-hero-carte-nom a { text-decoration: none; color: var(--nn-encre); }
.nn-hero-carte-prix { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.nn-hero-carte-prix > span:last-child { font-size: 15px; color: var(--nn-gris); font-weight: 600; }
.nn-hero-carte-prix .nn-prix-grand { color: var(--nn-orange-f); }
.nn-hero-carte .nn-bouton { width: 100%; }
.nn-hero-carte-note { margin: 0; display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 14px; color: var(--nn-gris); }
.nn-hero-carte-note .nn-picto { width: 18px; height: 18px; color: var(--nn-orange); }
@media (max-width: 960px) { .nn-hero-produit { justify-self: center; margin-top: 20px; } }
@media (max-width: 520px) { .nn-hero-carte-corps { padding: 16px; } .nn-hero-annotation { right: 8px; } }

.nn-hero-carte .nn-prix.nn-prix-grand { font-size: 40px; }