/* Banque de questions Nimsea — pages publiques (catalogue, fiche, retour de paiement, 404)
   Mise en forme de nimsea.com (17/10/2026) : fond beige #EAE7E0, encre #0E1A2B, teal #00B5A5, corail #F06449,
   titres Nunito 900, texte Instrument Sans, boutons en pilule, cartes blanches très arrondies, pied bleu nuit.
   Les polices viennent de polices.css (fabriqué avec le site, mêmes fichiers que l'accueil des démos).
   L'administration (admin/) garde sa feuille banque.css. */
:root{--bg:#EAE7E0;--panel:#fff;--ink:#0E1A2B;--navy:#0E1A2B;--teal:#00B5A5;--teal-d:#005E70;--coral:#F06449;
  --gray:rgba(14,26,43,.78);--gray-l:rgba(14,26,43,.68);--line:rgba(14,26,43,.12);--line-soft:rgba(14,26,43,.07);
  --f-titre:'Nunito',system-ui,-apple-system,"Segoe UI",sans-serif;--f-texte:'Instrument Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);--cadre:1180px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:var(--f-texte);font-size:16px;line-height:1.6;color:var(--ink);
  background:radial-gradient(900px 520px at 92% 0,rgba(0,181,165,.17),transparent 72%),radial-gradient(700px 420px at 0 170px,rgba(0,181,165,.09),transparent 70%),var(--bg);background-repeat:no-repeat}
a{color:var(--teal-d)}
.cadre{width:100%;max-width:var(--cadre);margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
main.cadre{flex:1;padding-bottom:8px}
.logo{display:inline-flex;align-items:center;min-height:44px;font:900 23px/1 var(--f-titre);letter-spacing:-.3px;color:var(--ink);text-decoration:none}
.logo em{font-style:normal;color:var(--teal)}

/* barre du haut : logo, liens, langue */
.barre{position:sticky;top:0;z-index:50;background:rgba(234,231,224,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.barre-in{max-width:var(--cadre);margin:0 auto;padding:8px clamp(16px,4vw,32px);display:flex;align-items:center;gap:14px}
.badge-edu{position:relative;font:800 10.5px/1 var(--f-titre);letter-spacing:1.05px;text-transform:uppercase;color:var(--teal-d);border:1px solid rgba(0,94,112,.3);border-radius:100px;padding:6px 12px;text-decoration:none;white-space:nowrap}
.badge-edu::after{content:"";position:absolute;inset:-10px -4px}
.badge-edu:hover{background:rgba(0,94,112,.08)}
.badge-edu:focus-visible{background:rgba(0,94,112,.08);outline:3px solid var(--teal);outline-offset:2px}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:100px;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;transition:background .25s}
.nav a:hover{background:rgba(14,26,43,.07)}
.nav a:focus-visible{background:rgba(14,26,43,.07);outline:3px solid var(--teal);outline-offset:-3px}
.lang-switch{display:flex;gap:2px;padding:2px;border-radius:100px;background:rgba(14,26,43,.06)}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;font:600 13px/1 var(--f-texte);letter-spacing:.04em;min-width:44px;min-height:44px;padding:0 12px;border-radius:100px;background:transparent;color:var(--ink);text-decoration:none;transition:background .25s,color .25s}
.lang-switch a:hover{background:rgba(14,26,43,.08)}
.lang-switch a[aria-current="true"]{background:var(--navy);color:#fff}
.lang-switch a:focus-visible,.btn:focus-visible,.carte:focus-visible,.retour a:focus-visible,.logo:focus-visible,.pied a:focus-visible,.liens-bas a:focus-visible,.cgv a:focus-visible,.coche a:focus-visible,.message a:focus-visible,.fiche a:focus-visible,.facture a:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* en-tête de page */
.hero{position:relative;isolation:isolate;padding:clamp(30px,6vw,64px) 0 clamp(10px,2vw,18px)}
.eb{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:800 11.5px/1 var(--f-titre);letter-spacing:1.84px;text-transform:uppercase;color:var(--gray-l)}
.eb::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--teal)}
h1{margin:0;font:900 clamp(34px,6.4vw,60px)/1.06 var(--f-titre);letter-spacing:-.03em}
h2{margin:0;font:900 clamp(22px,3.4vw,28px)/1.15 var(--f-titre);letter-spacing:-.02em}
.pill{display:inline-block;font-style:normal;color:#fff;background:var(--coral);border-radius:100px;padding:.02em .3em .1em;white-space:nowrap}
.intro{max-width:640px;margin:18px 0 0;font-size:clamp(16px,2vw,18px);color:var(--gray)}
.intro b{color:var(--ink)}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:16px 30px;border-radius:100px;border:1.35px solid transparent;font:600 15px/1 var(--f-texte);text-decoration:none;transition:background .25s,color .25s}
.btn-teal{background:var(--teal);color:var(--ink)}
.btn-teal:hover,.btn-teal:focus-visible{background:var(--navy);color:#fff;outline:none}
.btn-ghost{background:transparent;border-color:rgba(14,26,43,.22);color:var(--ink)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--navy);color:#fff;border-color:var(--navy);outline:none}
.fleche{font-size:.95em}

/* filtres */
.filtres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px 16px;align-items:end;margin:8px 0 10px;padding:16px 18px;border-radius:24px;background:var(--panel);border:1px solid var(--line-soft);box-shadow:0 18px 44px -22px rgba(14,26,43,.22)}
.filtres label{display:flex;flex-direction:column;gap:5px;min-width:0;font:800 11px/1.2 var(--f-titre);letter-spacing:1.2px;text-transform:uppercase;color:var(--gray-l)}
.filtres select{width:100%;min-width:0;font:600 15px/1.2 var(--f-texte);letter-spacing:0;text-transform:none;min-height:44px;padding:11px 14px;border-radius:100px;border:1.35px solid rgba(14,26,43,.18);background:#fff;color:var(--ink)}
.filtres select:focus-visible{outline:3px solid var(--teal);outline-offset:1px}
.filtres .case{flex-direction:row;align-items:center;gap:9px;min-height:44px;padding:0 6px;text-transform:none;font:600 15px/1.2 var(--f-texte);letter-spacing:0;color:var(--ink);white-space:nowrap}
.filtres .case input{flex:none;width:22px;height:22px;accent-color:var(--teal)}
.filtres .recherche{grid-column:1/-1}
.filtres input[type=search]{width:100%;min-width:0;font:600 16px/1.2 var(--f-texte);letter-spacing:0;text-transform:none;min-height:48px;padding:12px 18px;border-radius:100px;border:1.35px solid rgba(14,26,43,.18);background:#fff;color:var(--ink)}
.filtres input[type=search]:focus-visible{outline:3px solid var(--teal);outline-offset:1px}
.legende{margin:0 0 14px;padding:0 8px;font-size:13px;color:var(--gray-l)}
.banniere{margin:0 0 16px;padding:14px 18px;border-radius:20px;background:rgba(0,181,165,.12);border:1px solid rgba(0,181,165,.35);color:var(--ink);font-size:15px}
.compte{margin:0 0 14px;padding:0 8px;font:800 12px/1 var(--f-titre);letter-spacing:1.5px;text-transform:uppercase;color:var(--gray-l)}

/* les paquets */
.grille{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));margin:0 0 6px}
.carte{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:22px 22px 18px;border-radius:28px;background:var(--panel);border:1px solid var(--line-soft);
  box-shadow:0 18px 44px -18px rgba(14,26,43,.2);color:inherit;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.carte:hover,.carte:focus-visible{transform:translateY(-5px);border-color:rgba(0,181,165,.55);box-shadow:0 30px 70px -20px rgba(14,26,43,.28)}
.emoji{font-size:34px;line-height:1}
.emoji.grand{font-size:54px}
.carte h2{margin:4px 0 0;font-size:20px;line-height:1.2;letter-spacing:-.3px;overflow-wrap:anywhere}
.etiquettes{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0}
.pastille{display:inline-block;font:800 10.5px/1 var(--f-titre);letter-spacing:1.05px;text-transform:uppercase;color:var(--teal-d);background:rgba(0,181,165,.1);border:1px solid rgba(0,181,165,.3);border-radius:100px;padding:6px 12px}
.langue-paquet{display:inline-block;font:800 10.5px/1 var(--f-titre);letter-spacing:.6px;color:#8a2f1d;background:rgba(240,100,73,.12);border:1px solid rgba(240,100,73,.4);border-radius:100px;padding:6px 12px;white-space:nowrap}
.classes{font:800 13.5px/1.35 var(--f-titre);color:var(--teal-d)}
.carte p{flex:1;margin:2px 0 0;font-size:14.5px;line-height:1.5;color:var(--gray);overflow-wrap:anywhere}
.bas{display:flex;justify-content:space-between;align-items:center;gap:10px;align-self:stretch;margin-top:10px;font-size:13.5px;color:var(--gray)}
.prix{font:800 14px/1 var(--f-titre);color:var(--ink);background:rgba(14,26,43,.07);border-radius:100px;padding:8px 14px;white-space:nowrap}
.prix.gratuit{background:rgba(0,181,165,.14);color:var(--teal-d)}
.prix.grand{font-size:18px;padding:10px 20px}
.vide{margin:26px 0;text-align:center;color:var(--gray)}

/* la fiche d'un paquet */
.retour{margin:22px 0 10px;font-weight:600}
.fiche{padding:clamp(18px,3vw,32px);border-radius:28px;background:var(--panel);border:1px solid var(--line-soft);box-shadow:0 18px 44px -18px rgba(14,26,43,.2)}
.fiche header{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fiche header>div{flex:1;min-width:200px}
.fiche h1{font-size:clamp(26px,5vw,38px);overflow-wrap:anywhere}
.fiche .classes{margin:6px 0 0}
.fiche h2{margin:26px 0 12px}
.description{margin:16px 0 0;font-size:17px;color:var(--gray)}
.note-langue{margin:12px 0 0;padding:12px 16px;border-radius:18px;background:rgba(240,100,73,.09);border:1px solid rgba(240,100,73,.3);font-size:14.5px;color:var(--ink)}
.infos{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:18px 0 0}
.infos dt{font:800 11.5px/1.9 var(--f-titre);letter-spacing:1.4px;text-transform:uppercase;color:var(--gray-l)}
.infos dd{margin:0;overflow-wrap:anywhere}
.apercu{margin:0;padding-left:22px}
.apercu li{margin:0 0 14px}
.apercu span{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.apercu em{font-style:normal;font-size:14px;padding:4px 12px;border-radius:100px;border:1.35px solid var(--line);color:var(--gray);background:#fff}
.apercu em.bonne{border-color:var(--teal);color:var(--teal-d);background:rgba(0,181,165,.1);font-weight:600}
.obtenir{margin-top:26px;padding:clamp(18px,3vw,26px);border-radius:24px;background:var(--navy);color:#fff}
.obtenir h2{margin:0 0 10px;color:#fff}
.obtenir p{margin:0 0 8px;color:rgba(255,255,255,.84)}
.obtenir b{color:#fff}
.obtenir a{color:var(--teal);font-weight:700}
.obtenir a:focus-visible{outline-color:#fff}
.demos a{display:inline-block;margin-right:10px;padding:10px 2px}
.retour a{display:inline-block;padding:10px 4px}

/* retour de paiement */
.message{max-width:680px;margin:clamp(28px,6vw,60px) auto 0;padding:clamp(24px,4vw,40px);border-radius:28px;background:var(--panel);border:1px solid var(--line-soft);box-shadow:0 18px 44px -18px rgba(14,26,43,.2)}
.message h1{font-size:clamp(30px,5vw,44px)}
.message p{margin:14px 0 0;color:var(--gray)}
.message b{color:var(--ink)}

/* page 404 */
.h404{overflow:clip}
.fantome{position:absolute;right:clamp(0px,3vw,50px);top:50%;transform:translateY(-50%);font:900 clamp(110px,24vw,260px)/1 var(--f-titre);letter-spacing:-.04em;color:rgba(0,181,165,.14);z-index:-1;pointer-events:none;user-select:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* pied de page bleu nuit */
.pied{margin-top:clamp(40px,6vw,80px);padding:clamp(34px,5vw,56px) 0 26px;background:var(--navy);color:#fff}
.pied-grille{display:grid;gap:28px 48px;grid-template-columns:1.6fr 1fr;align-items:start}
.pied .logo{color:#fff;font-size:26px}
.pied p{max-width:44ch;margin:14px 0 0;font-size:15px;color:rgba(255,255,255,.76)}
.pied ul{display:grid;gap:0;margin:0;padding:0;list-style:none}
.pied a{color:rgba(255,255,255,.84);text-decoration:none;font-size:15px}
.pied li a{display:inline-flex;align-items:center;min-height:44px}
.pied a:hover{color:var(--teal)}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;color:rgba(255,255,255,.7)}
.pied-bas a{display:inline-block;padding:12px 0;font-size:inherit;font-weight:600;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}

@media (max-width:980px){
  .filtres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filtres .case{grid-column:1/-1;padding-bottom:2px}
}
@media (max-width:760px){
  .nav{display:none}
  .lang-switch{margin-left:auto}
  .pied-grille{grid-template-columns:1fr}
}
@media (max-width:560px){
  .badge-edu{display:none}
  .barre-in{padding-block:10px}
  .hero{padding:22px 0 6px}
  .eb{margin-bottom:10px}
  .intro{margin-top:12px;font-size:15.5px}
  .filtres{gap:10px 10px;padding:14px;border-radius:22px}
  .filtres select{padding:10px 12px;font-size:14.5px}
  .grille{gap:14px}
  .carte{padding:18px 18px 14px;border-radius:24px}
  .carte p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .infos{grid-template-columns:1fr;gap:2px}
  .infos dd{margin-bottom:10px}
  .actions .btn{width:100%;justify-content:center}
  .fantome{right:-6px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.carte:hover,.carte:focus-visible{transform:none}}

/* page Merci : gros bouton « fermer cette fenêtre » (pilule bleu foncé nimsea.com) */
.fermer{margin-top:26px}
.btn-fermer{width:100%;justify-content:center;min-height:64px;padding:20px 32px;font-size:18px;background:#005E70;color:#fff;cursor:pointer}
.btn-fermer:hover{background:var(--navy);color:#fff}
.btn-fermer:focus-visible{background:var(--navy);color:#fff;outline:3px solid var(--teal);outline-offset:3px}
.fermer-secours{margin:16px 0 0;font-size:15px}
.fermer-secours[hidden]{display:none}