/* Page d'accueil Ouaf, version 2 (aperçu) : grandes bandes pleine largeur, visuels larges.
   Mêmes jetons que app.css (navy, crème, mangue, menthe ; Bricolage Grotesque, Nunito, Caveat).
   Tout est préfixé n- pour ne jamais toucher aux styles de l'application. */

html.vue-vitrine body { overflow-x: hidden; }
.n-page { --ombre: 0 6px 0 var(--navy); --bord: 3px solid var(--navy); --rayon: 26px; --large: 1180px; color: var(--navy); }
/* :where() garde une spécificité nulle, pour que les marges des classes n- s'appliquent. */
.n-page :where(h1, h2, h3, h4) { font-family: var(--titre); font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.n-page :where(p, figure) { margin: 0; }
.n-int { max-width: var(--large); margin: 0 auto; padding: 0 20px; }
.n-bande { padding: 72px 0; position: relative; }
.n-bande-navy { background: var(--navy); color: var(--creme); background-image: radial-gradient(rgba(255,243,217,0.07) 1.5px, transparent 1.5px); background-size: 18px 18px; }
.n-bande-mangue { background: var(--mangue); background-image: radial-gradient(rgba(28,31,74,0.10) 1.5px, transparent 1.5px); background-size: 18px 18px; }
.n-bande-menthe { background: var(--menthe-2); }
.n-bande-papier { background: var(--papier); border-top: var(--bord); border-bottom: var(--bord); }

.n-surtitre { font-family: var(--texte); font-weight: 900; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.n-bande-navy .n-surtitre { color: var(--menthe); }
.n-titre { font-size: 36px; line-height: 1.04; margin-top: 10px; }
.n-chapo { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--gris); margin-top: 16px; max-width: 640px; }
.n-bande-navy .n-chapo { color: #C9CBEA; }
.n-tete { text-align: center; } .n-tete .n-chapo { margin-left: auto; margin-right: auto; }
.n-souligne { background: linear-gradient(transparent 62%, var(--mangue) 62%, var(--mangue) 92%, transparent 92%); padding: 0 4px; }
.n-bande-mangue .n-souligne { background: linear-gradient(transparent 62%, var(--creme) 62%, var(--creme) 92%, transparent 92%); }
.n-orange { color: var(--mangue); -webkit-text-stroke: 1.5px var(--navy); }
.n-bande-navy .n-orange { -webkit-text-stroke: 0; }

.n-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; padding: 0 30px; border-radius: 22px; border: var(--bord); background: var(--mangue); color: var(--navy); font-family: var(--titre); font-weight: 800; font-size: 20px; box-shadow: var(--ombre); text-decoration: none; cursor: pointer; transition: transform .08s, box-shadow .08s; }
.n-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--navy); }
.n-btn-menthe { background: var(--menthe); }
.n-btn-creme { background: var(--creme); }
.n-btn .n-fleche { font-size: 24px; line-height: 1; }
.n-note { font-size: 14px; font-weight: 700; color: var(--gris); margin-top: 14px; }
.n-bande-navy .n-note { color: #C9CBEA; }
.n-cta-bloc { margin-top: 44px; text-align: center; }

/* Autocollants (style de la marque) */
.n-sticker { display: inline-grid; place-items: center; border: var(--bord); border-radius: 24px; box-shadow: var(--ombre); background: var(--papier); }
.n-emoji { font-size: 44px; line-height: 1; }
.n-etoile { position: absolute; pointer-events: none; animation: twinkle 2.6s ease-in-out infinite; }

/* En-tête */
.n-entete { max-width: var(--large); margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.n-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--titre); font-weight: 800; font-size: 30px; color: var(--navy); text-decoration: none; letter-spacing: -1px; }
.n-logo .v-logo-patte { width: 44px; height: 44px; border-radius: 13px; box-shadow: 0 3px 0 var(--navy); transform: rotate(-6deg); }
.n-entete-droite { display: flex; align-items: center; gap: 8px; }
.n-connexion { font-weight: 800; font-size: 15px; color: var(--navy); text-decoration: none; padding: 10px 8px; white-space: nowrap; }
.n-entete .n-btn { min-height: 46px; padding: 0 18px; font-size: 16px; border-radius: 16px; box-shadow: 0 4px 0 var(--navy); white-space: nowrap; }

/* 1. Haut de page */
.n-hero { padding: 28px 0 64px; overflow: hidden; }
.n-hero-grille { display: grid; gap: 40px; }
.n-hero h1 { font-size: 44px; line-height: 1.0; letter-spacing: -0.035em; margin-top: 12px; }
.n-hero .n-chapo { font-size: 19px; color: var(--navy); opacity: .82; }
.n-piliers-mini { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.n-piliers-mini li { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 17px; }
.n-piliers-mini .n-sticker { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 3px 0 var(--navy); flex: none; }
.n-piliers-mini .n-emoji { font-size: 24px; }
.n-hero .n-cta-bloc { text-align: left; margin-top: 30px; }
.n-hero-visuel { position: relative; min-height: 520px; display: grid; place-items: center; }
.n-rond { position: absolute; border-radius: 50%; border: var(--bord); }
.n-rond-1 { width: 420px; height: 420px; background: var(--menthe); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.n-rond-2 { width: 120px; height: 120px; background: var(--mangue); right: 4%; top: 4%; }
.n-tel { position: relative; width: 250px; border: 4px solid var(--navy); border-radius: 38px; background: var(--navy); padding: 9px; box-shadow: 0 10px 0 var(--navy-3); }
.n-tel img { display: block; width: 100%; height: auto; border-radius: 29px; }
.n-tel::before { content: ''; position: absolute; top: 15px; left: 50%; width: 70px; height: 7px; margin-left: -35px; border-radius: 9px; background: var(--navy-3); z-index: 1; }
.n-hero .n-tel { transform: rotate(4deg); z-index: 2; }
.n-flottant { position: absolute; z-index: 3; background: var(--papier); border: var(--bord); border-radius: 18px; box-shadow: 0 5px 0 var(--navy); padding: 10px 14px; font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 10px; animation: bob 3.2s ease-in-out infinite; max-width: 230px; line-height: 1.25; }
.n-flottant .n-emoji { font-size: 26px; }
.n-flottant small { display: block; font-weight: 700; color: var(--gris); font-size: 12px; }
.n-f1 { left: 0; top: 14%; transform: rotate(-4deg); }
.n-f2 { right: 0; top: 46%; animation-delay: .8s; }
.n-f3 { left: 4%; bottom: 6%; animation-delay: 1.6s; background: var(--mangue-2); }
.n-polaroid-hero { position: absolute; z-index: 1; right: 6%; bottom: 0; width: 150px; background: #fff; border: var(--bord); border-radius: 8px; padding: 9px 9px 0; box-shadow: 0 5px 0 var(--navy); transform: rotate(8deg); }
.n-polaroid-hero .n-photo { height: 110px; border-radius: 4px; background: var(--mangue-2); display: grid; place-items: center; font-size: 54px; }
.n-polaroid-hero figcaption { font-family: var(--main); font-size: 20px; text-align: center; padding: 6px 0 8px; }

/* 2. Les trois promesses */
.n-promesses { display: grid; gap: 22px; margin-top: 48px; }
.n-promesse { border: var(--bord); border-radius: 30px; padding: 30px 26px 32px; box-shadow: 0 8px 0 var(--navy-3); color: var(--navy); position: relative; overflow: hidden; }
.n-promesse:nth-child(1) { background: var(--menthe); }
.n-promesse:nth-child(2) { background: var(--mangue); }
.n-promesse:nth-child(3) { background: var(--creme); }
.n-promesse .n-sticker { width: 92px; height: 92px; border-radius: 28px; transform: rotate(-6deg); }
.n-promesse:nth-child(2) .n-sticker { transform: rotate(5deg); }
.n-promesse .n-emoji { font-size: 50px; }
.n-promesse .n-num { position: absolute; right: 22px; top: 6px; font-family: var(--titre); font-weight: 800; font-size: 120px; line-height: 1; color: rgba(28,31,74,0.10); }
.n-promesse h3 { font-size: 28px; line-height: 1.08; margin-top: 22px; }
.n-promesse p { font-size: 17px; font-weight: 700; line-height: 1.5; margin-top: 12px; }
.n-promesse ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.n-promesse li { font-weight: 800; font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.n-promesse li::before { content: '✓'; font-weight: 900; }

/* 3. Problèmes de comportement */
.n-problemes { display: grid; gap: 18px; margin-top: 46px; }
.n-probleme { background: var(--papier); border: var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 22px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start; }
.n-probleme .n-sticker { width: 68px; height: 68px; border-radius: 20px; grid-row: span 3; box-shadow: 0 4px 0 var(--navy); }
.n-probleme:nth-child(3n+1) .n-sticker { background: var(--menthe-2); transform: rotate(-4deg); }
.n-probleme:nth-child(3n+2) .n-sticker { background: var(--mangue-2); transform: rotate(3deg); }
.n-probleme:nth-child(3n) .n-sticker { background: #E3E4F2; transform: rotate(-2deg); }
.n-probleme .n-emoji { font-size: 36px; }
.n-probleme h3 { font-size: 22px; line-height: 1.12; }
.n-probleme p { font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--gris); }
.n-probleme .n-livre-tag { justify-self: start; margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--navy); font-weight: 800; font-size: 13px; background: var(--creme); }
.n-probleme .n-livre-tag i { width: 10px; height: 14px; border-radius: 2px; border: 2px solid var(--navy); display: inline-block; }
.n-honnete { margin: 34px auto 0; max-width: 760px; display: flex; gap: 14px; align-items: flex-start; background: var(--navy); color: var(--creme); border-radius: 22px; padding: 18px 22px; font-weight: 700; line-height: 1.5; font-size: 15.5px; }
.n-honnete strong { color: var(--mangue); }

/* 4. Comment ça marche */
.n-etapes { display: grid; gap: 52px; margin-top: 56px; counter-reset: etape; }
.n-etape { display: grid; gap: 28px; align-items: center; }
.n-etape-texte { position: relative; }
.n-etape-num { color: var(--navy); width: 64px; height: 64px; border-radius: 50%; border: var(--bord); box-shadow: 0 4px 0 var(--navy); display: grid; place-items: center; font-family: var(--titre); font-weight: 800; font-size: 30px; background: var(--mangue); }
.n-etape:nth-child(2) .n-etape-num { background: var(--menthe); }
.n-etape:nth-child(3) .n-etape-num { background: var(--creme); }
.n-etape h3 { font-size: 30px; line-height: 1.08; margin-top: 18px; color: var(--creme); }
.n-etape p { font-size: 17px; font-weight: 700; line-height: 1.55; margin-top: 12px; color: #C9CBEA; max-width: 460px; }
.n-etape-visuel { display: grid; place-items: center; position: relative; padding: 10px 0; }
.n-etape-visuel .n-tel { width: 236px; box-shadow: 0 10px 0 rgba(0,0,0,.35); border-color: var(--creme); }
.n-etape:nth-child(1) .n-tel { transform: rotate(-3deg); }
.n-etape:nth-child(2) .n-tel { transform: rotate(3deg); }
.n-etape:nth-child(3) .n-tel { transform: rotate(-2deg); }
.n-bulle { position: absolute; z-index: 2; background: var(--creme); color: var(--navy); border: var(--bord); border-radius: 18px; padding: 10px 14px; font-weight: 800; font-size: 14px; box-shadow: 0 4px 0 var(--navy-3); max-width: 200px; line-height: 1.3; }
.n-bulle .manuscrit { font-size: 22px; }
.n-bulle-a { right: 0; top: 18%; transform: rotate(4deg); }
.n-bulle-b { left: 0; bottom: 14%; transform: rotate(-4deg); background: var(--mangue); }

/* 5. Essai : la première activité */
.n-essai-grille { display: grid; gap: 36px; margin-top: 44px; align-items: center; }
.n-essai-carte { background: var(--papier); border: var(--bord); border-radius: 30px; box-shadow: 0 8px 0 var(--navy); padding: 26px 22px; display: grid; gap: 14px; }
.n-essai-carte label { font-family: var(--titre); font-weight: 800; font-size: 24px; line-height: 1.1; }
.n-essai-carte input { width: 100%; min-height: 58px; padding: 0 18px; border: var(--bord); border-radius: 18px; background: #fff; font-size: 18px; font-weight: 700; }
.n-essai-carte input:focus { outline: 3px solid var(--mangue); outline-offset: 2px; }
.n-segments { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.n-segments button { min-height: 52px; border: var(--bord); border-radius: 16px; background: var(--creme); font-weight: 800; font-size: 16px; cursor: pointer; }
.n-segments button[aria-pressed="true"] { background: var(--menthe); box-shadow: inset 0 -4px 0 rgba(28,31,74,.18); }
.n-essai-carte .n-btn { width: 100%; }
.n-aide { min-height: 0; font-weight: 800; color: #B5531B; font-size: 14px; }
.n-aide:empty { display: none; }
.n-direct { font-size: 14px; font-weight: 800; text-align: center; color: var(--gris); }
.n-resultat { background: var(--papier); border: var(--bord); border-radius: 30px; box-shadow: 0 8px 0 var(--navy); padding: 24px 22px; margin-top: 22px; }
.n-resultat h3 { font-size: 24px; line-height: 1.12; }
.n-resultat > p { margin-top: 10px; font-weight: 600; line-height: 1.55; }
.n-mission { margin-top: 16px; background: var(--navy); color: var(--creme); border-radius: 20px; padding: 16px 18px; }
.n-mission-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.n-mission-tete h4 { margin: 0; font-family: var(--titre); font-size: 18px; }
.n-mission-tete span { background: var(--menthe); color: var(--navy); border-radius: 999px; padding: 3px 10px; font-weight: 800; font-size: 13px; }
.n-mission p { margin-top: 8px; font-weight: 700; line-height: 1.5; }
.n-mission .n-objectif { color: var(--mangue); font-size: 17px; }
.n-resultat .n-btn { width: 100%; margin-top: 18px; font-size: 18px; }
.n-resultat .n-note { text-align: center; }
.n-essai-livre { position: relative; padding: 10px 6px 34px; }
.n-essai-livre .livre-ouvert { margin-top: 0; }

/* 6. Souvenirs */
.n-souvenirs-grille { display: grid; gap: 40px; margin-top: 46px; align-items: center; }
.n-mur { position: relative; min-height: 520px; }
.n-pol { position: absolute; width: 190px; background: #fff; border: var(--bord); border-radius: 8px; padding: 10px 10px 0; box-shadow: 0 6px 0 var(--navy); }
.n-pol .n-photo { height: 150px; border-radius: 4px; display: grid; place-items: center; font-size: 66px; border: 2px solid rgba(28,31,74,.15); }
.n-pol figcaption { font-family: var(--main); font-size: 21px; line-height: 1.05; text-align: center; padding: 8px 2px 4px; }
.n-pol small { display: block; font-family: var(--texte); font-weight: 800; font-size: 11px; color: var(--gris); text-align: center; padding-bottom: 8px; letter-spacing: .04em; text-transform: uppercase; }
.n-pol::before { content: ''; position: absolute; top: -12px; left: 50%; width: 70px; height: 22px; margin-left: -35px; background: rgba(255,226,184,.9); border: 2px solid rgba(28,31,74,.25); transform: rotate(-3deg); }
.n-pol-1 { left: 2%; top: 0; transform: rotate(-7deg); }
.n-pol-1 .n-photo { background: var(--menthe-2); }
.n-pol-2 { right: 2%; top: 30px; transform: rotate(6deg); }
.n-pol-2 .n-photo { background: var(--mangue-2); }
.n-pol-3 { left: 28%; bottom: 0; transform: rotate(2deg); z-index: 2; }
.n-pol-3 .n-photo { background: #E3E4F2; }
.n-diplome { background: var(--navy); color: var(--creme); border: var(--bord); border-radius: 26px; box-shadow: 0 8px 0 var(--navy-3); padding: 26px 24px; position: relative; text-align: center; transform: rotate(-1.5deg); max-width: 420px; margin: 0 auto; }
.n-diplome .n-surtitre { color: var(--menthe); }
.n-diplome h3 { font-size: 30px; margin-top: 8px; color: var(--mangue); }
.n-diplome .manuscrit { font-size: 30px; margin-top: 10px; }
.n-diplome p { font-weight: 700; margin-top: 10px; color: #C9CBEA; }
.n-sceau { position: absolute; right: -14px; top: -18px; width: 74px; height: 74px; border-radius: 50%; background: var(--mangue); border: var(--bord); display: grid; place-items: center; font-size: 34px; transform: rotate(12deg); box-shadow: 0 4px 0 var(--navy-3); }
.n-souvenirs-texte ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.n-souvenirs-texte li { display: flex; gap: 14px; align-items: flex-start; font-weight: 700; font-size: 17px; line-height: 1.45; }
.n-souvenirs-texte li .n-sticker { width: 48px; height: 48px; border-radius: 15px; flex: none; box-shadow: 0 3px 0 var(--navy); }
.n-souvenirs-texte li .n-emoji { font-size: 24px; }
.n-souvenirs-texte li strong { display: block; font-family: var(--titre); font-size: 19px; }

/* 7. L'auteur */
.n-auteur { display: grid; gap: 30px; align-items: center; }
.n-auteur-photo { position: relative; justify-self: center; }
.n-auteur-photo img { display: block; width: 240px; height: 320px; object-fit: cover; border: var(--bord); border-radius: 28px; box-shadow: 0 8px 0 var(--navy); transform: rotate(-3deg); }
.n-auteur-photo .n-sticker { position: absolute; right: -22px; bottom: 20px; padding: 8px 14px; border-radius: 16px; font-weight: 800; font-size: 14px; background: var(--menthe); transform: rotate(6deg); }
.n-citation { font-family: var(--main); font-size: 38px; line-height: 1.05; margin-top: 14px; }
.n-auteur-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.n-auteur-points li { font-weight: 700; font-size: 16.5px; line-height: 1.5; padding-left: 30px; position: relative; }
.n-auteur-points li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--menthe); border: 2px solid var(--navy); }

/* 8. La bibliothèque */
.n-etagere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; margin-top: 50px; }
.n-livre { text-align: center; }
.n-couv { position: relative; aspect-ratio: 3 / 4; border: var(--bord); border-radius: 8px 18px 18px 8px; box-shadow: 6px 7px 0 var(--navy); padding: 16px 12px 14px 22px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; overflow: hidden; transition: transform .2s; }
.n-couv:hover { transform: translateY(-4px) rotate(-1deg); }
.n-couv::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: rgba(28,31,74,.22); border-right: 2px solid rgba(28,31,74,.35); }
.n-couv .n-emoji { font-size: 46px; align-self: center; }
.n-couv strong { font-family: var(--titre); font-size: 19px; line-height: 1.05; }
.n-couv span { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.n-livre p { font-weight: 700; font-size: 14px; color: var(--gris); margin-top: 12px; line-height: 1.4; }
.n-prix { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px; border: 2px solid var(--navy); font-weight: 900; font-size: 14px; background: var(--papier); }
.n-prix-offert { background: var(--menthe); }
.n-couv-1 { background: var(--menthe); } .n-couv-2 { background: #C9CBEA; } .n-couv-3 { background: var(--mangue); }
.n-couv-4 { background: var(--navy); color: var(--creme); } .n-couv-4::before { background: rgba(255,243,217,.2); }
.n-couv-5 { background: var(--mangue-2); }
.n-lot { margin: 40px auto 0; max-width: 760px; background: var(--papier); border: var(--bord); border-radius: 26px; box-shadow: var(--ombre); padding: 22px; display: grid; gap: 16px; align-items: center; }
.n-lot h3 { font-size: 24px; }
.n-lot p { font-weight: 700; color: var(--gris); margin-top: 6px; line-height: 1.45; }
.n-lot .n-btn { min-height: 54px; font-size: 18px; }
.n-lot-btns { display: grid; gap: 12px; }
@media (min-width: 520px) { .n-lot-btns { grid-template-columns: 1fr 1fr; } }

/* Conseils (bloc généré par contenu/generer.js, styles v-fiche d'app.css) */
.n-conseils .v-section:first-child { margin-top: 0; }
.n-conseils .v-section + .v-section { margin-top: 64px; }
.n-conseils .v-h2 { font-size: 34px; }
.n-conseils .v-sous { font-size: 17px; }

/* 9. Éleveurs et refuges */
.n-pros { display: grid; gap: 18px; margin-top: 40px; }
.n-pro { display: flex; gap: 18px; align-items: center; background: var(--papier); border: var(--bord); border-radius: 24px; box-shadow: var(--ombre); padding: 20px; text-decoration: none; color: var(--navy); }
.n-pro .n-sticker { width: 64px; height: 64px; border-radius: 18px; flex: none; background: var(--menthe-2); box-shadow: 0 3px 0 var(--navy); }
.n-pro .n-emoji { font-size: 32px; }
.n-pro h3 { font-size: 21px; }
.n-pro p { font-weight: 600; color: var(--gris); margin-top: 4px; line-height: 1.45; font-size: 15px; }
.n-pro .n-fleche { margin-left: auto; font-size: 28px; font-weight: 900; }

/* 10. Questions */
.n-questions { max-width: 820px; margin: 40px auto 0; display: grid; gap: 14px; }
.n-questions details { background: var(--papier); border: var(--bord); border-radius: 20px; box-shadow: 0 4px 0 var(--navy); }
.n-questions summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 20px; font-family: var(--titre); font-weight: 800; font-size: 19px; position: relative; }
.n-questions summary::-webkit-details-marker { display: none; }
.n-questions summary::after { content: '+'; position: absolute; right: 16px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--mangue); border: 2px solid var(--navy); display: grid; place-items: center; font-family: var(--texte); font-weight: 900; font-size: 20px; line-height: 1; }
.n-questions details[open] summary::after { content: '−'; background: var(--menthe); }
.n-questions details p { padding: 0 20px 20px; font-weight: 600; line-height: 1.55; color: var(--gris); }

/* 11. Fin */
.n-final { text-align: center; padding: 90px 0 100px; overflow: hidden; }
.n-final h2 { font-size: 40px; line-height: 1.04; max-width: 820px; margin: 0 auto; }
.n-final .n-chapo { margin: 18px auto 0; }
.n-final .n-cta-bloc { margin-top: 34px; }
.n-play { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 8px 16px; border: 2px solid var(--creme); border-radius: 14px; color: var(--creme); text-decoration: none; font-weight: 800; }
.n-play small { display: block; font-size: 11px; font-weight: 700; opacity: .8; }
.n-pied { background: var(--navy-3); color: #C9CBEA; padding: 30px 0 110px; font-size: 14px; font-weight: 700; }
.n-pied .n-int { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.n-pied a { color: var(--creme); }

/* Barre fixe mobile */
.n-sticky { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; transform: translateY(150%); transition: transform .25s; }
.n-sticky.on { transform: none; }
.n-sticky .n-btn { width: 100%; }

@media (min-width: 700px) {
  .n-problemes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-etagere { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .n-pros { grid-template-columns: 1fr 1fr; }
  .n-lot { grid-template-columns: 1fr auto; max-width: 900px; }
}

@media (min-width: 960px) {
  .n-bande { padding: 120px 0; }
  .n-titre { font-size: 58px; }
  .n-chapo { font-size: 20px; }
  .n-hero { padding: 40px 0 110px; }
  .n-hero-grille { grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
  .n-hero h1 { font-size: 76px; }
  .n-hero-visuel { min-height: 640px; }
  .n-rond-1 { width: 540px; height: 540px; }
  .n-tel { width: 290px; }
  .n-polaroid-hero { width: 170px; }
  .n-promesses { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 70px; }
  .n-promesse { padding: 36px 32px 40px; }
  .n-promesse:nth-child(2) { transform: translateY(26px); }
  .n-problemes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
  .n-probleme { grid-template-columns: 1fr; padding: 28px; }
  .n-probleme .n-sticker { grid-row: auto; margin-bottom: 12px; width: 78px; height: 78px; }
  .n-etapes { gap: 110px; margin-top: 90px; }
  .n-etape { grid-template-columns: 1fr 1fr; gap: 80px; }
  .n-etape:nth-child(2) .n-etape-texte { order: 2; }
  .n-etape h3 { font-size: 42px; }
  .n-etape p { font-size: 19px; }
  .n-etape-visuel .n-tel { width: 280px; }
  .n-essai-grille { grid-template-columns: 1fr 1.1fr; gap: 70px; margin-top: 64px; }
  .n-souvenirs-grille { grid-template-columns: 1.1fr 1fr; gap: 80px; margin-top: 64px; }
  .n-mur { min-height: 660px; }
  .n-pol { width: 230px; }
  .n-pol .n-photo { height: 190px; }
  .n-auteur { grid-template-columns: auto 1fr; gap: 80px; }
  .n-auteur-photo img { width: 300px; height: 400px; }
  .n-citation { font-size: 50px; }
  .n-etagere { gap: 30px; margin-top: 70px; }
  .n-final { padding: 140px 0 150px; }
  .n-conseils .v-h2 { font-size: 46px; }
  .n-final h2 { font-size: 64px; }
  .n-sticky { display: none; }
  .n-pied { padding-bottom: 30px; }
}

@media (max-width: 420px) {
  .n-connexion { display: none; }
  .n-hero h1 { font-size: 40px; }
  .n-hero-visuel { min-height: 470px; }
  .n-rond-1 { width: 330px; height: 330px; }
  .n-tel { width: 210px; }
  .n-hero .n-tel { width: 200px; }
  .n-flottant { font-size: 12.5px; padding: 8px 10px; max-width: 180px; }
  .n-flottant .n-emoji { font-size: 20px; }
  .n-polaroid-hero { width: 120px; }
  .n-polaroid-hero .n-photo { height: 86px; font-size: 42px; }
  .n-pol { width: 158px; }
  .n-pol .n-photo { height: 120px; font-size: 52px; }
  .n-pol figcaption { font-size: 18px; }
  .n-mur { min-height: 470px; }
  .n-etagere .n-couv strong { font-size: 16px; }
}

/* ===== Pages éleveurs et refuges (22/10/2026), même DA que l'accueil ===== */
.n-page { overflow-x: clip; }
.n-nav-lien { font-weight: 800; font-size: 15px; color: var(--navy); text-decoration: none; padding: 10px 8px; }
.n-fil { font-weight: 800; font-size: 13px; color: var(--gris); }
.n-fil a { color: var(--gris); }
.n-cta-duo { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.n-hero .n-cta-duo { margin-top: 30px; }
.n-final .n-cta-duo { justify-content: center; }

/* Visuel éleveurs : le carnet de santé et la carte glissée dedans */
.n-carnet { position: relative; width: 280px; height: 370px; border: var(--bord); border-radius: 14px 24px 24px 14px; background: var(--navy); box-shadow: 0 10px 0 var(--navy-3); transform: rotate(-6deg); z-index: 1; }
.n-carnet::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 0; width: 4px; background: rgba(255,243,217,.18); }
.n-carnet span { position: absolute; left: 40px; right: 20px; top: 40px; font-family: var(--titre); font-weight: 800; font-size: 26px; line-height: 1.05; color: var(--creme); }
.n-carnet small { position: absolute; left: 40px; bottom: 30px; font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--menthe); }
.n-carte-qr { position: absolute; z-index: 2; width: 250px; background: var(--papier); border: var(--bord); border-radius: 22px; box-shadow: 0 8px 0 var(--navy); padding: 18px 18px 16px; transform: rotate(5deg); right: 6%; bottom: 8%; text-align: center; }
.n-carte-qr .n-carte-logo { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--titre); font-weight: 800; font-size: 24px; letter-spacing: -1px; }
.n-carte-qr .n-carte-logo .v-logo-patte { width: 30px; height: 30px; border-radius: 9px; }
.n-carte-qr strong { display: block; font-family: var(--titre); font-weight: 800; font-size: 20px; margin-top: 8px; }
.n-carte-qr .manuscrit { display: block; font-size: 22px; color: var(--gris); margin-top: 2px; }
.n-qr { width: 112px; height: 112px; margin: 12px auto 8px; display: block; border: 2px solid var(--navy); border-radius: 10px; background: #fff; padding: 6px; }
.n-carte-qr small { display: block; font-weight: 800; font-size: 12px; color: var(--gris); }

/* Visuel refuges : la page de suivi */
.n-suivi { position: relative; z-index: 2; width: 100%; max-width: 420px; background: var(--papier); border: var(--bord); border-radius: 26px; box-shadow: 0 10px 0 var(--navy); padding: 20px; transform: rotate(-2deg); }
.n-suivi-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.n-suivi-tete strong { font-family: var(--titre); font-weight: 800; font-size: 20px; }
.n-suivi-tete span { font-weight: 800; font-size: 12px; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }
.n-suivi-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 12px; }
.n-suivi-chiffres div { background: var(--creme); border: 2px solid var(--navy); border-radius: 14px; padding: 8px; text-align: center; font-weight: 800; font-size: 12px; color: var(--gris); }
.n-suivi-chiffres b { display: block; font-family: var(--titre); font-size: 24px; color: var(--navy); }
.n-suivi-ligne { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-top: 2px dashed rgba(28,31,74,.15); font-weight: 800; font-size: 14px; }
.n-suivi-ligne em { font-style: normal; color: var(--gris); font-size: 13px; }
.n-barre { grid-column: 1 / -1; height: 10px; border-radius: 99px; background: #E3E4F2; border: 2px solid var(--navy); overflow: hidden; }
.n-barre i { display: block; height: 100%; background: var(--menthe); }
.n-suivi-ligne.n-fini .n-barre i { background: var(--mangue); }

/* Pourquoi / comment (cartes à gros numéros) */
.n-pas { display: grid; gap: 20px; margin-top: 46px; counter-reset: pas; }
.n-pas li { list-style: none; background: var(--papier); border: var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 26px 24px; position: relative; }
.n-pas li::before { counter-increment: pas; content: counter(pas); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: var(--bord); background: var(--mangue); font-family: var(--titre); font-weight: 800; font-size: 26px; box-shadow: 0 4px 0 var(--navy); }
.n-pas li:nth-child(2)::before { background: var(--menthe); }
.n-pas li:nth-child(3)::before { background: var(--creme); }
.n-pas h3 { font-size: 23px; line-height: 1.1; margin-top: 16px; }
.n-pas p { font-weight: 600; line-height: 1.55; color: var(--gris); margin-top: 8px; }
.n-pas { padding: 0; }

/* Les 4 parties du livre */
.n-parties { display: grid; gap: 18px; margin-top: 46px; padding: 0; }
.n-partie { list-style: none; border: var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 24px 22px; position: relative; overflow: hidden; }
.n-partie:nth-child(1) { background: var(--menthe); } .n-partie:nth-child(2) { background: var(--mangue); }
.n-partie:nth-child(3) { background: var(--papier); } .n-partie:nth-child(4) { background: #C9CBEA; }
.n-partie .n-sticker { width: 64px; height: 64px; border-radius: 20px; transform: rotate(-5deg); box-shadow: 0 4px 0 var(--navy); }
.n-partie .n-emoji { font-size: 34px; }
.n-partie small { display: block; margin-top: 16px; font-weight: 900; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.n-partie h3 { font-size: 24px; line-height: 1.08; margin-top: 4px; }
.n-partie p { font-weight: 700; line-height: 1.5; margin-top: 10px; font-size: 15.5px; }

/* Ce que tu vois / ce que tu ne vois pas */
.n-deux { display: grid; gap: 22px; margin-top: 46px; }
.n-encadre { border: var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 26px 24px; background: var(--papier); }
.n-encadre h3 { font-size: 24px; display: flex; align-items: center; gap: 12px; }
.n-encadre h3 .n-emoji { font-size: 28px; }
.n-encadre ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.n-encadre li { font-weight: 700; line-height: 1.5; padding-left: 28px; position: relative; }
.n-encadre li::before { content: '✓'; position: absolute; left: 0; font-weight: 900; color: var(--menthe); }
.n-encadre p { font-weight: 600; line-height: 1.55; margin-top: 12px; color: var(--gris); }
.n-encadre-nuit { background: var(--navy); color: var(--creme); }
.n-encadre-nuit p { color: #C9CBEA; }
.n-encadre-nuit li::before { content: '✕'; color: var(--mangue); }

/* Sommaire détaillé (bloc généré par tools/detail-livres.js) */
.n-sommaire #sommaire { max-width: 880px; margin: 0 auto; }
.n-sommaire h2 { font-size: 36px; line-height: 1.05; text-align: center; }
.n-sommaire h3 { font-size: 23px; margin-top: 40px; }
.n-sommaire h3 small { font-family: var(--texte); font-size: 14px; color: var(--gris); font-weight: 800; }
.n-sommaire p, .n-sommaire li { font-weight: 600; line-height: 1.6; }
.n-sommaire #sommaire > p { margin-top: 14px; text-align: center; color: var(--gris); }
.n-sommaire #sommaire > ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.n-sommaire #sommaire > ul > li { background: var(--papier); border: 2px solid var(--navy); border-radius: 16px; padding: 12px 16px; }
.n-sommaire #sommaire > ol { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: chap var(--debut, 0); }
.n-sommaire #sommaire > ol > li { background: var(--papier); border: 2px solid var(--navy); border-radius: 16px; padding: 12px 16px 12px 16px; box-shadow: 0 3px 0 var(--navy); }
.n-sommaire .duree { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--menthe-2); border: 1.5px solid var(--navy); font-weight: 800; font-size: 12px; white-space: nowrap; }
.n-sommaire .art-encart { margin-top: 16px; background: var(--navy); color: var(--creme); border-radius: 24px; padding: 22px 24px; border: var(--bord); box-shadow: 0 6px 0 var(--navy-3); }
.n-sommaire .art-encart p { color: #E3E4F2; margin-top: 10px; }
.n-sommaire .art-encart p:first-child { margin-top: 0; font-family: var(--main); font-size: 23px; line-height: 1.2; color: var(--creme); }
.n-sommaire .art-encart .art-encart-titre { font-family: var(--titre); font-weight: 800; font-size: 18px; color: var(--mangue); margin-top: 18px; }
.n-sommaire .art-encart ol { margin: 10px 0 0; padding-left: 22px; }
.n-sommaire .art-encart li { color: var(--creme); }

@media (min-width: 700px) {
  .n-parties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-deux { grid-template-columns: 1fr 1fr; }
  .n-sommaire #sommaire > ol { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .n-pas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
  .n-parties { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 64px; }
  .n-partie:nth-child(even) { transform: translateY(22px); }
  .n-deux { margin-top: 64px; gap: 28px; }
  .n-carnet { width: 320px; height: 420px; }
  .n-carte-qr { width: 270px; right: 4%; }
  .n-sommaire h2 { font-size: 48px; }
}
@media (max-width: 420px) {
  .n-carnet { width: 220px; height: 300px; }
  .n-carnet span { font-size: 21px; }
  .n-carte-qr { width: 200px; padding: 14px; right: 0; }
  .n-qr { width: 88px; height: 88px; }
  .n-nav-lien { display: none; }
}

/* ===== Écran de connexion et d'inscription (app.js ecranConnexion, 22/10/2026) ===== */
/* Mêmes jetons que .n-page : l'écran vit dans #app, hors de la page d'accueil. */
.n-auth { --ombre: 0 6px 0 var(--navy); --bord: 3px solid var(--navy); --rayon: 26px; }
.n-auth .n-auth-visuel { display: none; }
.n-auth .n-auth-carte { background: var(--papier); border: var(--bord); border-radius: 30px; box-shadow: 0 8px 0 var(--navy); padding: 22px 20px 26px; margin: 8px 0 12px; }
.n-auth .n-auth-carte .logo-connexion { width: 60px; height: 60px; border-radius: 18px; box-shadow: 0 4px 0 var(--navy); transform: rotate(-6deg); }
@media (min-width: 960px) {
  /* #app fait 460 px de large pour toute l'application : seul cet écran s'élargit. */
  #app:has(> .n-auth) { max-width: 1180px; }
  .n-auth { display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: center; padding-top: 40px; }
  .n-auth .n-auth-visuel { display: block; position: relative; background: var(--navy); color: var(--creme); border: var(--bord); border-radius: 36px; box-shadow: 0 10px 0 var(--navy-3); padding: 44px 40px 0; overflow: hidden; min-height: 640px; background-image: radial-gradient(rgba(255,243,217,0.07) 1.5px, transparent 1.5px); background-size: 18px 18px; }
  .n-auth .n-auth-visuel .n-surtitre { color: var(--menthe); }
  .n-auth-titre { font-family: var(--titre); font-weight: 800; font-size: 52px; line-height: 1.02; letter-spacing: -0.03em; margin: 10px 0 0; }
  .n-auth-titre .n-orange { -webkit-text-stroke: 0; }
  .n-auth .n-piliers-mini li { color: var(--creme); }
  .n-auth-tel { position: relative; margin-top: 34px; height: 330px; }
  .n-auth-tel .n-tel { position: absolute; left: 50%; top: 0; width: 230px; margin-left: -115px; transform: rotate(-4deg); border-color: var(--creme); }
  .n-auth-tel .n-polaroid-hero { right: 8%; bottom: auto; top: 40px; color: var(--navy); }
  .n-auth .n-auth-carte { margin: 0; padding: 30px 30px 32px; }
}

/* ===== Pages de lecture : conseils, auteur, pages légales (22/10/2026) =====
   Le contenu garde ses classes .art-* et .doc-* (styles d'app.css) ; on change le cadre :
   en-tête et pied de l'accueil, grand haut de page en bande, colonne plus aérée. */
.n-lecture .art, .n-lecture .doc { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.n-art-hero { position: relative; overflow: hidden; background: var(--papier); border-top: var(--bord); border-bottom: var(--bord); padding: 30px 0 46px; margin-top: 6px; }
.n-art-hero::before { content: ''; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: var(--menthe-2); border: var(--bord); }
.n-art-hero::after { content: ''; position: absolute; right: 120px; bottom: -50px; width: 110px; height: 110px; border-radius: 50%; background: var(--mangue-2); border: var(--bord); }
.n-art-hero > * { position: relative; z-index: 1; }
.n-art-hero .art-fil, .n-art-hero .art-fil a { margin: 0; }
.n-lecture .n-art-hero h1, .n-lecture .doc-titre, .n-lecture .doc .grand-titre { font-size: 40px; line-height: 1.02; letter-spacing: -0.035em; margin-top: 14px; }
.n-lecture .n-art-hero .art-chapo, .n-lecture .n-art-hero .doc-chapo { font-size: 18px; line-height: 1.6; color: var(--navy); }
.n-art-hero .art-meta img { width: 42px; height: 42px; }
.n-art-sticker { display: none; }
.n-art-corps { padding-top: 34px !important; padding-bottom: 90px !important; }
.n-lecture .n-hub { max-width: 1120px; }
.n-lecture .art h2, .n-lecture .doc h2 { font-size: 30px; margin-top: 60px; }
.n-lecture .art h3, .n-lecture .doc h3 { font-size: 22px; margin-top: 32px; }
.n-lecture .art p, .n-lecture .art li, .n-lecture .doc p, .n-lecture .doc li { font-size: 17px; line-height: 1.7; }
.n-lecture .art a, .n-lecture .doc a { color: var(--navy); text-decoration-color: var(--mangue); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.n-lecture .art-bref { background: var(--navy); color: var(--creme); border: var(--bord); border-left-width: 3px; border-radius: 26px; box-shadow: 0 6px 0 var(--navy-3); padding: 22px 24px; margin-top: 0; }
.n-lecture .art-bref p { color: #E3E4F2; }
.n-lecture .art-bref .art-encart-titre { color: var(--menthe); font-family: var(--texte); font-weight: 900; font-size: 13px; letter-spacing: .1em; }
.n-lecture .art-sommaire { margin-top: 26px; background: var(--menthe-2); border-radius: 24px; padding: 20px 22px; }
.n-lecture .art-sommaire ol { columns: 2 240px; column-gap: 30px; }
.n-lecture .art-encart { border-radius: 22px; padding: 20px 22px; box-shadow: var(--ombre); }
.n-lecture .art-mission { border: var(--bord); border-radius: 28px; padding: 24px 24px; box-shadow: 0 8px 0 var(--navy-3); }
.n-lecture .art-mission-tete h3 { font-size: 22px; }
.n-lecture .art-idees > li { border-radius: 20px; box-shadow: var(--ombre); padding: 18px 18px 18px 70px; }
.n-lecture .art-idees > li::before { width: 40px; height: 40px; border-radius: 13px; transform: rotate(-5deg); box-shadow: 0 3px 0 var(--navy); }
.n-lecture .art-tableau { box-shadow: var(--ombre); border-radius: 22px; }
.n-lecture .art-faq details { border-radius: 20px; padding: 16px 18px; }
.n-lecture .art-cta { position: relative; overflow: hidden; margin-top: 64px; border: var(--bord); border-radius: 32px; padding: 40px 26px 36px; box-shadow: 0 10px 0 var(--navy-3); background-image: radial-gradient(rgba(255,243,217,0.07) 1.5px, transparent 1.5px); background-size: 18px 18px; }
.n-lecture .art-cta::before { content: '🐾'; display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 18px; font-size: 34px; border-radius: 22px; background: var(--mangue); border: var(--bord); box-shadow: 0 4px 0 var(--navy-3); transform: rotate(-6deg); }
.n-lecture .art-cta h2 { font-size: 32px; line-height: 1.05; }
.n-lecture .art-cta .btn { min-height: 62px; font-size: 20px; }
.n-lecture .art-liees { gap: 16px; }
.n-lecture .art-carte { border-radius: 22px; padding: 18px 20px; box-shadow: var(--ombre); transition: transform .15s; }
.n-lecture .art-carte:nth-child(3n+1) { border-top: 10px solid var(--menthe); }
.n-lecture .art-carte:nth-child(3n+2) { border-top: 10px solid var(--mangue); }
.n-lecture .art-carte:nth-child(3n) { border-top: 10px solid #C9CBEA; }
.n-lecture .art-carte strong { font-size: 19px; }
.n-lecture .n-art-hero .art-auteur { margin-top: 22px; align-items: flex-start; }
.n-lecture .n-art-hero .art-auteur img { box-shadow: 0 6px 0 var(--navy); }
/* Centre de conseils : les thèmes en pastilles, les articles en grille */
.n-lecture .n-hub .art-sommaire { background: transparent; border: 0; box-shadow: none; padding: 0; }
.n-lecture .n-hub .art-sommaire p { display: none; }
.n-lecture .n-hub .art-sommaire ol { columns: auto; list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.n-lecture .n-hub .art-sommaire li { margin: 0; }
.n-lecture .n-hub .art-sommaire a { display: inline-block; padding: 10px 16px; border: var(--bord); border-radius: 999px; background: var(--papier); box-shadow: 0 3px 0 var(--navy); text-decoration: none; font-family: var(--titre); font-weight: 800; }
.n-lecture .n-hub .art-sommaire li:nth-child(odd) a { background: var(--menthe); }
.n-lecture .n-hub .art-sommaire li:nth-child(4n+2) a { background: var(--mangue); }
/* Pages légales */
.n-lecture .doc .carte { border-radius: 22px; }
.n-lecture .doc-date { margin-top: 12px; }
@media (min-width: 900px) {
  .n-art-hero { padding: 54px 0 70px; }
  .n-lecture .n-art-hero h1, .n-lecture .doc-titre, .n-lecture .doc .grand-titre { font-size: 60px; }
  .n-lecture .n-art-hero .art-chapo, .n-lecture .n-art-hero .doc-chapo { font-size: 20px; }
  .n-art-hero::before { width: 380px; height: 380px; right: -120px; top: -140px; }
  .n-art-sticker { display: grid; place-items: center; position: absolute; z-index: 2; right: calc(50% - 560px); top: 70px; width: 120px; height: 120px; border-radius: 34px; border: var(--bord); background: var(--mangue); box-shadow: 0 6px 0 var(--navy); font-size: 60px; transform: rotate(8deg); }
  .n-lecture .art h2, .n-lecture .doc h2 { font-size: 38px; }
  .n-lecture .n-hub .art-liees { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .n-lecture .n-art-hero .art-auteur img { width: 180px; height: 240px; }
}
@media (max-width: 1240px) { .n-art-sticker { display: none; } }
@media (max-width: 899px) {
  .n-art-hero::before { width: 120px; height: 120px; right: -60px; top: -60px; }
  .n-art-hero::after { display: none; }
}

/* ===== Page auteur : un portrait (22/10/2026) ===== */
.n-portrait { padding: 34px 0 70px; overflow: hidden; }
.n-portrait-grille { display: grid; gap: 50px; align-items: center; }
.n-portrait h1 { font-size: 42px; line-height: 1.0; letter-spacing: -0.035em; margin-top: 12px; }
.n-portrait .n-chapo { color: var(--navy); font-size: 19px; }
.n-signature { font-family: var(--main); font-size: 54px; line-height: 1; margin-top: 18px; transform: rotate(-4deg); display: inline-block; }
.n-portrait-photo { position: relative; justify-self: center; width: 280px; }
.n-portrait-photo figure { margin: 0; background: #fff; border: var(--bord); border-radius: 10px; padding: 12px 12px 0; box-shadow: 0 10px 0 var(--navy); transform: rotate(3deg); position: relative; }
.n-portrait-photo figure::before { content: ''; position: absolute; top: -16px; left: 50%; width: 110px; height: 30px; margin-left: -55px; background: rgba(255,243,217,.92); border: 2px solid rgba(28,31,74,.3); transform: rotate(-4deg); }
.n-portrait-photo img { display: block; width: 100%; height: 340px; object-fit: cover; border-radius: 4px; }
.n-portrait-photo figcaption { font-family: var(--main); font-size: 26px; text-align: center; padding: 10px 0 12px; }
.n-portrait-photo .n-flottant { animation-duration: 3.6s; }
.n-portrait-photo .n-p1 { left: -70px; top: 30px; transform: rotate(-6deg); }
.n-portrait-photo .n-p2 { right: -80px; top: 46%; background: var(--menthe); animation-delay: .7s; }
.n-portrait-photo .n-p3 { left: -50px; bottom: 30px; background: var(--papier); animation-delay: 1.4s; }
.n-avant-apres { display: grid; gap: 22px; margin-top: 46px; }
.n-avant-apres article { border: var(--bord); border-radius: 28px; box-shadow: var(--ombre); padding: 28px 26px; background: var(--papier); }
.n-avant-apres article:last-child { background: var(--menthe); }
.n-avant-apres .n-sticker { width: 64px; height: 64px; border-radius: 20px; box-shadow: 0 4px 0 var(--navy); transform: rotate(-5deg); }
.n-avant-apres .n-emoji { font-size: 32px; }
.n-avant-apres h3 { font-size: 24px; margin-top: 16px; }
.n-avant-apres p { font-weight: 700; line-height: 1.6; margin-top: 10px; font-size: 16.5px; }
.n-citation-grande { text-align: center; font-family: var(--main); font-size: 40px; line-height: 1.1; margin: 50px auto 0; max-width: 820px; }
.n-citation-grande span { background: linear-gradient(transparent 60%, var(--mangue) 60%, var(--mangue) 92%, transparent 92%); padding: 0 6px; }
.n-principes { display: grid; gap: 20px; margin-top: 46px; }
.n-principe { border: 3px solid var(--creme); border-radius: 26px; padding: 26px 24px; background: rgba(255,243,217,.06); }
.n-principe .n-sticker { width: 70px; height: 70px; border-radius: 22px; box-shadow: 0 4px 0 var(--navy-3); border-color: var(--creme); }
.n-principe:nth-child(1) .n-sticker { background: var(--menthe); } .n-principe:nth-child(2) .n-sticker { background: var(--mangue); }
.n-principe:nth-child(3) .n-sticker { background: var(--creme); } .n-principe:nth-child(4) .n-sticker { background: #C9CBEA; }
.n-principe .n-emoji { font-size: 34px; }
.n-principe h3 { color: var(--creme); font-size: 24px; margin-top: 18px; }
.n-principe p { color: #C9CBEA; font-weight: 700; line-height: 1.6; margin-top: 10px; }
.n-bande-navy .n-honnete { background: var(--creme); color: var(--navy); }
.n-bande-navy .n-honnete strong { color: #B5531B; }
.n-aussi { display: grid; gap: 20px; margin-top: 46px; }
.n-aussi article { background: var(--papier); border: var(--bord); border-radius: 26px; box-shadow: var(--ombre); padding: 26px 24px; }
.n-aussi article:nth-child(2) { background: var(--mangue-2); } .n-aussi article:nth-child(3) { background: var(--menthe-2); }
.n-aussi .n-sticker { width: 60px; height: 60px; border-radius: 18px; box-shadow: 0 4px 0 var(--navy); }
.n-aussi .n-emoji { font-size: 30px; }
.n-aussi h3 { font-size: 22px; margin-top: 16px; }
.n-aussi p { font-weight: 700; line-height: 1.6; margin-top: 8px; }
.n-aussi a { color: var(--navy); text-decoration-color: var(--mangue); text-decoration-thickness: 3px; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .n-portrait { padding: 60px 0 110px; }
  .n-portrait-grille { grid-template-columns: 1.2fr 1fr; gap: 80px; }
  .n-portrait h1 { font-size: 68px; }
  .n-portrait-photo { width: 340px; }
  .n-portrait-photo img { height: 420px; }
  .n-avant-apres { grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 64px; }
  .n-avant-apres article:last-child { transform: translateY(24px) rotate(1deg); }
  .n-citation-grande { font-size: 58px; margin-top: 90px; }
  .n-principes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 64px; }
  .n-principe:nth-child(even) { transform: translateY(26px); }
  .n-aussi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
}
@media (max-width: 420px) {
  .n-portrait-photo { width: 230px; }
  .n-portrait-photo img { height: 280px; }
  .n-portrait-photo .n-p1 { left: -30px; } .n-portrait-photo .n-p2 { right: -26px; } .n-portrait-photo .n-p3 { left: -20px; }
}

/* ===== Centre de conseils : une bibliothèque (22/10/2026) ===== */
.n-biblio-hero { padding: 40px 0 70px; }
.n-biblio-grille { display: grid; gap: 40px; align-items: center; }
.n-biblio-hero h1 { font-size: 42px; line-height: 1.0; letter-spacing: -0.035em; margin-top: 12px; color: var(--creme); }
.n-biblio-hero .art-meta { color: #C9CBEA; margin-top: 18px; }
.n-biblio-hero .art-meta a { color: var(--creme); }
.n-biblio-hero .art-fil, .n-biblio-hero .art-fil a { color: #C9CBEA; margin: 0; }
.n-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.n-tuile { display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 18px; border: 3px solid var(--navy-3); border-radius: 24px; box-shadow: 0 6px 0 var(--navy-3); color: var(--navy); text-decoration: none; transition: transform .15s; }
.n-tuile:hover { transform: translateY(-4px) rotate(-1deg); }
.n-tuile:nth-child(1) { background: var(--menthe); } .n-tuile:nth-child(2) { background: var(--mangue); transform: rotate(1.5deg); }
.n-tuile:nth-child(3) { background: var(--creme); transform: rotate(-1.5deg); } .n-tuile:nth-child(4) { background: #C9CBEA; }
.n-tuile .n-emoji { font-size: 36px; }
.n-tuile strong { font-family: var(--titre); font-weight: 800; font-size: 19px; line-height: 1.1; margin-top: auto; }
.n-tuile small { font-weight: 800; font-size: 13px; opacity: .75; }
.n-une { display: grid; gap: 24px; align-items: center; background: var(--papier); border: var(--bord); border-radius: 32px; box-shadow: 0 8px 0 var(--navy); padding: 26px; text-decoration: none; color: var(--navy); margin-top: -40px; position: relative; z-index: 2; }
.n-une .n-une-visuel { display: grid; place-items: center; height: 170px; border: var(--bord); border-radius: 24px; background: var(--mangue); font-size: 84px; transform: rotate(-2deg); box-shadow: 0 5px 0 var(--navy); }
.n-une .n-surtitre { color: #B5531B; }
.n-une h2 { font-size: 30px; line-height: 1.05; margin-top: 8px; }
.n-une p { font-weight: 700; line-height: 1.55; color: var(--gris); margin-top: 10px; }
.n-une .n-lire { display: inline-block; margin-top: 16px; font-family: var(--titre); font-weight: 800; font-size: 18px; border-bottom: 4px solid var(--mangue); }
.n-rayon { padding: 70px 0; border-top: var(--bord); }
/* Pas de trait entre la carte « à la une » et le premier rayon (demande de Victor). */
.n-une-zone + .n-rayon { border-top: 0; }
/* Un clic sur une tuile de thème descend en douceur jusqu'au rayon, sans le coller au bord. */
@media (prefers-reduced-motion: no-preference) { html:has(.n-biblio-hero) { scroll-behavior: smooth; } }
.n-rayon-tete h2 { scroll-margin-top: 110px; }
.n-rayon-1 { background: var(--papier); } .n-rayon-2 { background: var(--menthe-2); }
.n-rayon-3 { background: var(--mangue-2); } .n-rayon-4 { background: #E3E4F2; }
.n-rayon-tete { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: center; }
.n-rayon-tete .n-sticker { grid-row: span 2; width: 84px; height: 84px; border-radius: 26px; transform: rotate(-6deg); background: var(--papier); }
.n-rayon-tete .n-emoji { font-size: 44px; }
.n-rayon-tete h2 { font-size: 32px; line-height: 1.05; }
.n-rayon-tete p { font-weight: 700; line-height: 1.55; color: var(--gris); max-width: 680px; }
.n-fiches { display: grid; gap: 20px; margin-top: 36px; }
.n-fiche2 { position: relative; display: flex; flex-direction: column; gap: 8px; background: #fff; border: var(--bord); border-radius: 6px 22px 22px 22px; box-shadow: var(--ombre); padding: 22px 22px 20px; text-decoration: none; color: var(--navy); transition: transform .15s; margin-top: 16px; }
.n-fiche2:hover { transform: translateY(-4px); }
.n-fiche2::before { content: attr(data-fiche); position: absolute; left: -3px; top: -22px; padding: 2px 14px; border: var(--bord); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--mangue); font-weight: 900; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.n-fiche2 strong { font-family: var(--titre); font-weight: 800; font-size: 20px; line-height: 1.12; }
.n-fiche2 span { font-weight: 600; line-height: 1.5; color: var(--gris); font-size: 15px; }
.n-fiche2 em { font-style: normal; margin-top: auto; padding-top: 8px; font-family: var(--titre); font-weight: 800; font-size: 15px; }
.n-fiche2 em::after { content: ' →'; }
.n-biblio-fin { padding: 80px 0 100px; }
@media (min-width: 900px) {
  .n-biblio-hero { padding: 64px 0 110px; }
  .n-biblio-grille { grid-template-columns: 1.15fr 1fr; gap: 70px; }
  .n-biblio-hero h1 { font-size: 64px; }
  .n-tuile { min-height: 180px; padding: 22px; }
  .n-tuile strong { font-size: 22px; }
  .n-une { grid-template-columns: 280px 1fr; padding: 30px; gap: 40px; margin-top: -60px; }
  .n-une .n-une-visuel { height: 220px; font-size: 110px; }
  .n-une h2 { font-size: 40px; }
  .n-rayon { padding: 100px 0; }
  .n-rayon-tete h2 { font-size: 46px; }
  .n-fiches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; margin-top: 50px; }
}

/* ===== Connexion : la carte de lecteur et le livre ouvert (22/10/2026) ===== */
.n-lecteur-bande { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -22px -20px 18px; padding: 14px 20px; background: var(--menthe); border-bottom: var(--bord); border-radius: 27px 27px 0 0; }
.n-lecteur-bande span { font-weight: 900; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.n-lecteur-bande i { display: block; width: 74px; height: 22px; background: repeating-linear-gradient(90deg, var(--navy) 0 2px, transparent 2px 4px, var(--navy) 4px 7px, transparent 7px 9px); opacity: .8; }
.n-auth .n-auth-carte { position: relative; overflow: visible; }
.n-tampon { position: absolute; right: 18px; top: 66px; width: 78px; height: 78px; border-radius: 50%; border: 3px dashed #B5531B; color: #B5531B; display: grid; place-items: center; text-align: center; font-weight: 900; font-size: 11px; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; transform: rotate(14deg); opacity: .85; pointer-events: none; }
.n-auth-livre .livre-ouvert { margin: 0 auto; max-width: 520px; }
@media (min-width: 960px) {
  .n-auth .n-auth-visuel.n-auth-livre { background: var(--mangue); color: var(--navy); background-image: radial-gradient(rgba(28,31,74,0.10) 1.5px, transparent 1.5px); padding: 50px 44px 60px; min-height: 0; }
  .n-auth-livre .n-surtitre { color: var(--navy) !important; }
  .n-auth-livre .n-auth-titre { color: var(--navy); }
  .n-auth-livre .n-auth-titre .n-orange { color: var(--creme); -webkit-text-stroke: 2px var(--navy); }
  .n-auth-livre .n-auth-sous { font-weight: 700; font-size: 18px; line-height: 1.5; margin-top: 12px; max-width: 460px; }
  .n-auth-livre .livre-ouvert { margin-top: 40px; }
  .n-auth-livre .n-flottant { position: absolute; }
  .n-auth-livre .n-a1 { left: 64px; top: 56%; transform: rotate(-4deg); }
  .n-auth-livre .n-a2 { left: 30px; bottom: 26px; animation-delay: 1s; background: var(--menthe); }
  .n-auth .n-auth-carte { border-style: solid; }
  .n-lecteur-bande { margin: -30px -30px 22px; padding: 16px 30px; }
}