/* ===================================================================
   NOUVEAU — la peau « iPhone » d'Astromazal, posée par-dessus le moteur.
   Rien ici ne touche au calcul ni aux textes : c'est de la surface.
   Étape 1 : la révélation (voile, étoiles, symbole tracé) et la bannière
   dorée du signe en tête du résultat.
   =================================================================== */

/* ---- le voile de révélation ---- */
#nv-voile{position:fixed; inset:0; z-index:9999; background:#0b1224; color:#f2e9d4;
  display:flex; align-items:center; justify-content:center; text-align:center;
  opacity:0; transition:opacity .45s ease; pointer-events:none}
#nv-voile.nv-on{opacity:1; pointer-events:auto}
#nv-voile canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
#nv-voile .nv-corps{position:relative; z-index:2; padding:0 28px; max-width:520px; width:100%}
#nv-voile .nv-attente{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:#b99c5e;
  animation:nvPulse 1.6s ease-in-out infinite}
@keyframes nvPulse{0%,100%{opacity:.55}50%{opacity:1}}
#nv-voile .nv-glyph{width:230px; height:230px; margin:0 auto 10px; position:relative; display:none}
#nv-voile .nv-glyph svg{width:100%; height:100%; overflow:visible}
#nv-voile .nv-glyph .nv-cercle{fill:none; stroke:var(--gold,#d3bc84); stroke-width:1.4; stroke-dasharray:600; stroke-dashoffset:600}
#nv-voile .nv-glyph .nv-halo{position:absolute; inset:-40px; border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(211,188,132,.28), transparent 60%)}
#nv-voile .nv-sym{position:absolute; inset:0; display:grid; place-items:center; font-size:96px; line-height:1;
  color:var(--gold,#d3bc84); text-shadow:0 0 22px rgba(211,188,132,.45); opacity:0; transform:scale(.6)}
/* la figure dorée dans le cercle : l'image de la bannière, découpée en rond, un peu en retrait du trait */
#nv-voile .nv-rond{display:block; width:calc(100% - 30px); height:calc(100% - 30px); border-radius:50%; overflow:hidden;
  box-shadow:0 0 30px rgba(211,188,132,.25)}   /* en retrait du trait doré, qui reste visible autour */
#nv-voile .nv-rond img{width:100%; height:100%; object-fit:cover; object-position:50% 40%; display:block;
  transform:scale(1.16); transform-origin:50% 42%}   /* la figure remplit le rond, les étoiles de David du bas restent hors champ */
#nv-voile .nv-kick,#nv-voile .nv-nom,#nv-voile .nv-heb,#nv-voile .nv-date{opacity:0}
#nv-voile .nv-etat{margin-top:14px; font-size:12.5px; color:#93a7d0; min-height:1.4em}
#nv-voile.nv-revele .nv-etat{display:none}
#nv-voile .nv-kick{font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:#b99c5e}
#nv-voile .nv-nom{font-family:"Cormorant Garamond","EB Garamond",Georgia,serif; font-weight:500; font-size:48px; line-height:1; margin:8px 0 0}
#nv-voile .nv-heb{font-size:24px; color:#b99c5e; margin-top:8px}
#nv-voile .nv-date{font-family:"Cormorant Garamond","EB Garamond",Georgia,serif; font-style:italic; font-size:21px; color:#cfc6b0; margin-top:16px}
#nv-voile .nv-passer{position:absolute; top:calc(18px + env(safe-area-inset-top,0px)); right:18px; z-index:3;
  background:none; border:0; color:#93a7d0; font:14px inherit; font-family:inherit; cursor:pointer; padding:8px}

/* la révélation : chaque pièce arrive à son tour */
#nv-voile.nv-revele .nv-attente{display:none}
#nv-voile.nv-revele .nv-glyph{display:block}
#nv-voile.nv-revele .nv-cercle{animation:nvTrace 1.3s .1s ease forwards}
#nv-voile.nv-revele .nv-sym{animation:nvSym .9s .8s cubic-bezier(.2,.8,.2,1) forwards}
#nv-voile.nv-revele .nv-halo{animation:nvSouffle 3s 1.5s ease-in-out infinite}
#nv-voile.nv-revele .nv-kick{animation:nvMonte .6s 1.5s ease forwards}
#nv-voile.nv-revele .nv-nom{animation:nvMonte .6s 1.7s ease forwards}
#nv-voile.nv-revele .nv-heb{animation:nvMonte .6s 1.9s ease forwards}
#nv-voile.nv-revele .nv-date{animation:nvMonte .6s 2.2s ease forwards}
@keyframes nvTrace{to{stroke-dashoffset:0}}
@keyframes nvSym{to{opacity:1; transform:scale(1)}}
@keyframes nvSouffle{0%,100%{opacity:.5; transform:scale(1)}50%{opacity:1; transform:scale(1.08)}}
@keyframes nvMonte{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* ---- la bannière dorée du signe, en tête du résultat ---- */
.nv-banniere{margin:0 0 16px; border-radius:18px; overflow:hidden; border:1px solid rgba(147,167,208,.18);
  box-shadow:0 18px 50px rgba(0,0,0,.35); background:#0b1224; animation:nvMonte .6s ease both}
.nv-banniere img{display:block; width:100%; height:auto}

/* ---- les cartes arrivent l'une après l'autre ---- */
#results.nv-entree > .card{animation:nvMonte .55s ease both}
#results.nv-entree > .card:nth-child(2){animation-delay:.08s}
#results.nv-entree > .card:nth-child(3){animation-delay:.16s}
#results.nv-entree > .card:nth-child(4){animation-delay:.24s}
#results.nv-entree > .card:nth-child(5){animation-delay:.32s}

/* ---- les boutons répondent sous le doigt ---- */
body.nv button.main, body.nv button.go, body.nv .prixligne button, body.nv #cta-sticky .go{transition:transform .12s ease, box-shadow .2s ease}
body.nv button.main:active, body.nv button.go:active, body.nv .prixligne button:active, body.nv #cta-sticky .go:active{transform:scale(.97)}

/* ---- le mode « une question sur le ciel » : tant qu'il n'y a pas de résultat,
   rien d'autre que la marque, la question, le champ et le bouton ---- */
body.nv-focus header .tagline, body.nv-focus header .rule, body.nv-focus header .star{display:none}
body.nv-focus header{padding-bottom:0}
body.nv-focus #formcard > h2, body.nv-focus #formcard > h1, body.nv-focus #formcard > .promesse,
body.nv-focus #fiches-locales, body.nv-focus #card-exemple, body.nv-focus #preuve-compteur{display:none !important}
body.nv-focus .wrap > #formcard ~ *:not(#results){display:none !important}
body.nv-focus footer, body.nv-focus #cta-sticky{display:none !important}
body.nv-focus #formcard{background:none; border:0; box-shadow:none; padding:10px 8px 0; margin:0}
body.nv-focus .nv-hors-focus{display:none !important}
/* le bouton, les traits et « Retour » : toujours à la même hauteur, quelle que
   soit la question — posés en bas de l'écran, au-dessus des onglets */
body.nv-focus .nv-etapes > .nv-etape.nv-on{display:flex; flex-direction:column; justify-content:center; animation-name:nvFondu;
  min-height:calc(100svh - 400px); padding:0 0 150px; box-sizing:content-box}   /* la question respire entre la marque et le bloc du bas, sans faire défiler la page */
@media (min-width:721px){ body.nv-focus .nv-etapes > .nv-etape.nv-on{min-height:calc(100svh - 190px - 250px); padding-bottom:250px} }

/* ---- le ciel vivant, comme sur Maguen : scintillements et étoiles filantes,
   une couche fixe derrière la page, intouchable au doigt ---- */
.nv-ciel{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.nv-ciel .nv-scint{position:absolute; border-radius:50%; background:#fff; box-shadow:0 0 6px 1px rgba(255,255,255,.5); animation:nvScint ease-in-out infinite}
.nv-ciel .nv-scint.or{background:#ffe9b0; box-shadow:0 0 7px 1px rgba(211,188,132,.6)}
@keyframes nvScint{0%,100%{opacity:.1; transform:scale(.7)}50%{opacity:.95; transform:scale(1.25)}}
.nv-ciel .nv-filante{position:absolute; width:120px; height:2px; opacity:0; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(211,188,132,.55) 35%, #fff); animation:nvFile linear infinite}
@keyframes nvFile{0%{transform:translateX(0); opacity:0} 2%{opacity:1} 9%{transform:translateX(70vw); opacity:0} 100%{transform:translateX(70vw); opacity:0}}
@media (prefers-reduced-motion:reduce){ .nv-ciel .nv-scint{animation:none; opacity:.5} .nv-ciel .nv-filante{display:none} }
@keyframes nvFondu{from{opacity:0}to{opacity:1}}   /* sans transform : un transform ferait un « fixed » relatif à l'étape */
body.nv-focus .nv-nav{position:fixed; left:0; right:0; z-index:850; margin:0; padding:18px 20px 8px;
  height:196px; justify-content:flex-start;   /* hauteur fixe : le bouton et les traits ne bougent pas d'une question à l'autre */
  bottom:calc(72px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(rgba(11,18,36,0), rgba(11,18,36,.92) 26%, rgba(11,18,36,.97))}
body.nv-focus .nv-nav .nv-suite, body.nv-focus .nv-nav .btnrow, body.nv-focus .nv-nav .btnrow button.main{width:100%; max-width:520px; min-width:0}
body.nv-focus .nv-nav .btnrow{display:block; margin:0 !important; padding:0}
body.nv-focus .nv-nav .btnrow button.main{margin:0; display:block}
@media (min-width:721px){
  body.nv-focus .nv-nav{bottom:28px; left:50%; right:auto; transform:translateX(-50%); width:min(560px, 92vw); border-radius:20px; background:rgba(11,18,36,.9)}
}
body.nv-focus .card .nv-tete h2.nv-q{font-size:40px !important}
.card .nv-tete h2.nv-q{font-size:34px !important; text-transform:none !important; letter-spacing:0 !important; color:#f2e9d4 !important}
body.nv-focus .nv-tete{margin-bottom:26px}
/* quatre traits : on voit d'un coup d'œil combien de questions il reste */
.nv-points{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-width:300px; margin:6px auto 22px}
body.nv-focus .nv-points{margin:14px auto 26px}
.nv-nav .nv-points, body.nv-focus .nv-nav .nv-points{width:100%; margin:14px auto 2px}
.nv-points i{display:block; height:4px; border-radius:2px; background:rgba(242,233,212,.18); transition:background .3s}
.nv-points i.nv-on{background:var(--gold,#d3bc84); box-shadow:0 0 10px rgba(211,188,132,.35)}
.grid.nv-etapes{display:block}
.nv-etapes > .nv-etape{display:none; animation:nvGlisse .35s ease both}
.nv-etapes > .nv-etape.nv-on{display:block}
@keyframes nvGlisse{from{opacity:0; transform:translateX(22px)}to{opacity:1; transform:none}}
.nv-etape > label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.nv-tete{text-align:center; margin-bottom:18px}
.nv-tete .nv-kick{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft,#b99c5e)}
.card .nv-tete h2.nv-q{font-family:"Cormorant Garamond","EB Garamond",Georgia,serif; font-weight:500; font-size:34px; line-height:1.1; margin:8px 0 6px; text-wrap:balance; text-transform:none; letter-spacing:0; color:var(--ink,#f2e9d4)}
.nv-tete .nv-aide{color:var(--ink-soft,#cfc6b0); font-size:14.5px; line-height:1.5; margin:0; text-align:center}
.nv-etape .dsel{justify-content:center}
.nv-etape .pourquoi{margin-top:14px; text-align:center}
.nv-etape .nv-cache{display:none !important}
.nv-etape .sexrow{justify-content:center}
.nv-nav{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:22px}
.nv-nav .btnrow{margin-top:0; width:100%}
.nv-nav .nv-suite{min-width:min(100%, 320px)}
.nv-nav .nv-sans, .nv-nav .nv-retour{background:none; border:0; color:var(--ink-soft,#93a7d0); font:inherit; font-size:14.5px; cursor:pointer; padding:6px 10px; text-decoration:underline; text-underline-offset:3px}
.nv-nav .nv-retour{text-decoration:none; opacity:.8}
body.nv .field .suggest{max-height:220px; overflow:auto}

/* ---- la page « À deux » sur téléphone ---- */
body.nv-focus #duoform > h2, body.nv-focus #duoform > h1{display:none !important}
body.nv-focus #duoform{background:none; border:0; box-shadow:none; padding:10px 8px 0; margin:0}
body.nv-focus .wrap > #duoform ~ *:not(#duoresults){display:none !important}
.nv-duo-etapes .nv-etape .sexrow{justify-content:center; flex-wrap:wrap; max-width:none; margin:12px 0 0}
.nv-duo-etapes .nv-etape .field{margin-top:12px}
body.nv .nv-cache{display:none !important}
.nv-duo-etapes .nv-etape .nv-type{flex-direction:column; align-items:stretch; gap:10px; max-width:360px; margin:12px auto 0}
.nv-duo-etapes .nv-etape .nv-type .sexopt{width:100%; justify-content:center}
.nv-duo-etapes .nv-points{grid-template-columns:repeat(7,1fr)}
/* la révélation à deux : deux ronds, un « & » doré entre les deux */
#nv-voile .nv-duo{display:flex; align-items:flex-start; justify-content:center; gap:10px; margin-bottom:8px}
#nv-voile .nv-duo-un{flex:1 1 0; min-width:0}
#nv-voile .nv-duo-glyph{width:min(38vw, 150px); height:min(38vw, 150px); margin:0 auto 8px}
#nv-voile .nv-duo-nom{font-size:26px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#nv-voile .nv-duo-signe{font-family:"Cormorant Garamond","EB Garamond",Georgia,serif; font-style:italic; font-size:19px; margin-top:4px}
#nv-voile .nv-duo-et{align-self:center; font-family:"Cormorant Garamond",Georgia,serif; font-size:44px; color:var(--gold,#d3bc84); padding-bottom:70px; opacity:0; animation:nvMonte .6s 1.4s ease forwards}
#nv-voile.nv-revele .nv-duo-nom{animation:nvMonte .6s 1.5s ease forwards}
#nv-voile.nv-revele .nv-duo-signe{animation:nvMonte .6s 1.8s ease forwards}

/* ---- étape 3 : les pastilles de chapitres, collées sous le menu ---- */
.nv-chapitres{position:sticky; top:46px; z-index:40; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:10px 4px 12px; margin:0 -4px 6px; background:linear-gradient(#0b1224 72%, rgba(11,18,36,0));
  -webkit-overflow-scrolling:touch}
.nv-chapitres::-webkit-scrollbar{display:none}
@media (max-width:720px){ body.nv-avec-onglets .nv-chapitres{top:0} }   /* plus de menu au-dessus sur téléphone */
.nv-chapitres button{flex:none; padding:8px 14px; border-radius:999px; border:1px solid rgba(147,167,208,.22);
  background:rgba(11,18,36,.75); backdrop-filter:blur(10px); color:#cfc6b0; font:inherit; font-size:13.5px; cursor:pointer;
  transition:background .2s, color .2s, transform .12s}
.nv-chapitres button:active{transform:scale(.96)}
.nv-chapitres button.nv-on{background:var(--gold,#d3bc84); color:#0b1224; border-color:var(--gold,#d3bc84); font-weight:500}

/* ---- ce qui se replie ---- */
.nv-plie{display:none !important}
.nv-pli, .nv-src{background:none; border:0; color:var(--gold,#d3bc84); font:inherit; font-size:14.5px; cursor:pointer;
  padding:6px 0; margin:6px auto 0; display:flex; align-items:center; gap:7px}
.nv-pli::after, .nv-src::after{content:""; width:7px; height:7px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg); margin-top:-3px; transition:transform .25s}
.nv-pli[aria-expanded="true"]::after, .nv-src.nv-ouvert::after{transform:rotate(-135deg); margin-top:3px}
.nv-src{font-size:12.5px; color:var(--ink-soft,#93a7d0); opacity:.85; margin-top:10px}

/* ---- la barre d'onglets, sur téléphone ---- */
.nv-onglets{display:none}
@media (max-width:720px){
  /* le menu du haut ne sert plus : tout est dans la barre du bas ; en tête, la marque seule */
  body.nv-avec-onglets .menusite, body.nv-avec-onglets .langsel{display:none !important}
  body.nv-avec-onglets header .star, body.nv-avec-onglets header .rule, body.nv-avec-onglets header .backlink{display:none}
  body.nv-avec-onglets header .tagline{font-size:13px; opacity:.8; margin-top:2px}
  body.nv-avec-onglets .card{padding:30px 20px}
  body.nv-avec-onglets .offre-choix{display:flex; flex-direction:column; gap:12px}
  body.nv-avec-onglets .offre-carte{width:100%; margin:0}
  body.nv-avec-onglets header{padding-top:calc(18px + env(safe-area-inset-top,0px))}
  .nv-onglets{position:fixed; left:0; right:0; bottom:0; z-index:900; display:grid; grid-template-columns:repeat(6,1fr);
    padding:8px 6px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(11,18,36,.82); backdrop-filter:blur(18px);
    border-top:1px solid rgba(147,167,208,.18)}
  .nv-onglets a{display:flex; flex-direction:column; align-items:center; gap:4px; color:#93a7d0; font-size:11px; text-decoration:none; padding:2px 0}
  .nv-onglets a.nv-on{color:var(--gold,#d3bc84)}
  .nv-onglets svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
  body.nv-avec-onglets{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  body.nv-avec-onglets #cta-sticky{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  /* l'étoile Maguen (position posée en ligne par maguen.js) remonte au-dessus des onglets */
  /* Maguen est dans la barre : le bouton flottant s'efface, la bulle reste au-dessus des onglets */
  body.nv-avec-onglets .mg-lanceur, body.nv-avec-onglets .mg-boite{display:none !important}   /* Maguen vit dans la barre : ni bouton ni bulle flottante */
  .nv-onglets .nv-maguen img{width:28px; height:28px; display:block; border-radius:50%}
  body.nv-avec-onglets footer{padding-bottom:24px}
}

/* ---- étape 4 : partager en story ---- */
.nv-story-bloc{text-align:center; margin:14px 0 6px}
.nv-story-bloc .nv-story{display:inline-flex; align-items:center; gap:10px}
.nv-story-bloc .nv-story-ico{font-size:14px}
.nv-story-bloc .nv-story-aide{max-width:46ch; margin:10px auto 0; font-size:14px; color:var(--ink-soft,#cfc6b0); line-height:1.5}
.nv-appui{position:fixed; inset:0; z-index:9998; background:rgba(4,8,18,.94); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px}
.nv-appui p{color:#f2e9d4; text-align:center; margin:0; font-size:15px}
.nv-appui img{max-height:70vh; max-width:92vw; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.nv-appui .nv-fermer{background:none; border:1px solid rgba(147,167,208,.4); color:#f2e9d4; border-radius:999px; padding:10px 22px; font:inherit; cursor:pointer}

@media (prefers-reduced-motion:reduce){
  #nv-voile *{animation-duration:.01ms !important; animation-delay:0s !important}
  #results.nv-entree > .card, .nv-banniere, .nv-etapes > .nv-etape{animation:none}
}

/* ---- le rappel « chapitre 1 offert », et la barre d'achat du bas (20/09/2026) ----
   Mesure du 20/09 : seulement 35 % des fiches calculees voyaient l'offre, posee
   7 ecrans plus bas. La barre la rappelle du premier ecran au dernier. */
.nv-rappel{display:none}
.nv-achat{display:none}
@media (max-width:720px){
  body.nv .nv-rappel{display:block; margin:0 0 14px; padding:9px 12px;
    border-left:2px solid #b08d3e; background:rgba(176,141,62,.08);
    font-size:13px; line-height:1.5; color:#e4dcc6}
  body.nv-avec-achat .nv-achat{display:flex; position:fixed; left:0; right:0;
    bottom:calc(66px + env(safe-area-inset-bottom,0px)); z-index:880;
    align-items:center; gap:12px; padding:9px 14px;
    /* toute la barre est en or, le texte en blanc (20/09/2026). L'or est
       volontairement profond : le blanc y passe le seuil de lisibilite. */
    background:linear-gradient(180deg,#8a6d28,#6f5620);
    border-top:1px solid rgba(242,233,212,.45);
    box-shadow:0 -10px 24px rgba(0,0,0,.35);
    transition:transform .3s ease, opacity .3s ease}
  .nv-achat .nv-achat-txt{flex:1 1 auto; min-width:0}
  .nv-achat b{display:block; font-family:"Cormorant Garamond",Georgia,serif;
    font-weight:500; font-size:17px; line-height:1.2; color:#fff}
  .nv-achat span{display:block; margin-top:2px; font-size:12px; line-height:1.35;
    color:rgba(255,255,255,.93); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .nv-achat .nv-achat-btn{flex:0 0 auto; min-height:44px; padding:0 20px; border:0;
    border-radius:3px; background:#0b1224; color:#f2e9d4; font-family:inherit;
    font-size:13.5px; font-weight:600; letter-spacing:.6px; cursor:pointer}
  .nv-achat.nv-off{transform:translateY(130%); opacity:0; pointer-events:none}
  body.nv-avec-achat{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
  body.nv-focus .nv-achat{display:none !important}
  /* une seule barre sur telephone : la doree remplace l'ancienne barre bleue,
     qui apparaissait par-dessous des que l'offre entrait a l'ecran */
  body.nv-avec-achat #cta-sticky{display:none !important}
}
@media (prefers-reduced-motion:reduce){ .nv-achat{transition:none} }

/* ---- le titre sur la premiere question (22/09/2026) ----
   Le mode « une question a la fois » masquait le titre partout. Un visiteur
   venu d'une publicite tombait sur « Etape 1 sur 4 » sans savoir ou il etait.
   Il revient sur la premiere question, et s'efface des la deuxieme. */
body.nv-focus.nv-debut #formcard > h1.pagetitre,
body.nv-focus.nv-debut #duoform > h1.pagetitre{
  display:block !important; margin:38px auto 16px; max-width:19ch;   /* ~1 cm sous la marque */
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:500;
  font-size:26px; line-height:1.16; text-align:center; color:#f2e9d4}
/* la question se resserre d'autant : l'ecran ne doit pas se mettre a defiler */
body.nv-focus.nv-debut .nv-etapes > .nv-etape.nv-on{min-height:calc(100svh - 540px); padding-bottom:120px}
/* la page a deux a une premiere question plus haute (trois choix) : elle se
   resserre un peu plus, sinon l'ecran se met a defiler de quelques pixels */
/* La page a deux n'a PAS la place du centimetre : sa premiere question tient
   trois choix. Un demi-centimetre suffit, sinon le dernier choix passe sous
   le bouton Continuer (constate le 22/09/2026). */
body.nv-focus.nv-debut .nv-duo-etapes > .nv-etape.nv-on{min-height:calc(100svh - 556px); padding-bottom:110px}
body.nv-focus.nv-debut #duoform > h1.pagetitre{font-size:24px; margin-top:16px; margin-bottom:10px}
@media (max-width:360px){
  body.nv-focus.nv-debut #formcard > h1.pagetitre,
  body.nv-focus.nv-debut #duoform > h1.pagetitre{font-size:23px}
}
@media (min-width:721px){ body.nv-debut #formcard > h1.pagetitre, body.nv-debut #duoform > h1.pagetitre{max-width:none} }

/* ---- la notice avant le calcul (22/09/2026) ----
   Lignes fines sous « Continuer » de la premiere question ; au toucher, le
   texte s'ouvre en panneau plein ecran. Le rapport, lui, ne change pas. */
@media (max-width:720px){
  .nv-notice{display:flex; flex-direction:column; align-items:center; gap:0; width:100%; margin:4px 0 0}
  .nv-notice-ligne{background:none; border:0; color:#b99c5e; font:inherit; font-size:13.5px; line-height:23px; padding:0 8px; cursor:pointer;
    text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(185,156,94,.45); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .nv-notice-ligne::after{content:" \203A"}
  body.nv-feuille-ouverte{overflow:hidden}
  .nv-feuille{position:fixed; inset:0; z-index:9990; background:#0b1224; color:#f2e9d4; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:calc(64px + env(safe-area-inset-top,0px)) 16px calc(40px + env(safe-area-inset-bottom,0px)); animation:nvFondu .18s ease-out}
  .nv-feuille-corps{max-width:560px; margin:0 auto}
  .nv-feuille-carte{margin:0}
  .nv-feuille .nv-fermer{display:block; margin:22px auto 0; background:none; border:1px solid rgba(147,167,208,.4); color:#f2e9d4; border-radius:999px; padding:10px 26px; font:inherit; cursor:pointer}
  .nv-feuille .nv-fermer-haut{position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); right:14px; margin:0; width:40px; height:40px; padding:0; border-radius:50%; font-size:17px; line-height:38px; background:rgba(11,18,36,.85)}
}

/* ---- écrans presque carrés : Fold déplié, iPad en portrait, téléphone couché ----
   (mise en page téléphone, mais rapport largeur/hauteur >= 3/4). Le bloc fixe
   « Continuer » + onglets (268 px) mangeait l'écran : les derniers champs d'une
   question passaient dessous. Ici le bloc « Continuer » suit les champs, dans
   la page ; seuls les onglets restent fixes. Téléphone en portrait : inchangé
   (22/09/2026). */
@media (max-width:720px) and (min-aspect-ratio:3/4){
  body.nv-focus .nv-nav{position:static; left:auto; right:auto; transform:none; width:auto; height:auto;
    margin:26px 0 0; padding:0; background:none}
  body.nv-focus .nv-etapes > .nv-etape.nv-on,
  body.nv-focus.nv-debut .nv-etapes > .nv-etape.nv-on,
  body.nv-focus.nv-debut .nv-duo-etapes > .nv-etape.nv-on{min-height:0; padding-bottom:110px; justify-content:flex-start}
}