/* Pages de contenu Tevna (fonctionnalités, ressources, tarifs, FAQ, à propos) : générées par scripts/site/generer.py.
   En-tête, pied et appel à l'action viennent d'accueil.css ; ici, l'ouverture de page, l'article et ses encadrés. */

/* Menu sur téléphone : un <details>, sans script */
.menu-mobile { display: none; position: relative; }
.menu-mobile summary { list-style: none; cursor: pointer; min-height: 42px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--trait); border-radius: 999px; background: var(--blanc); font: 600 0.875rem var(--police-texte); color: var(--nuit); }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile nav { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; display: grid; padding: 8px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; box-shadow: var(--ombre-flottante); z-index: 40; }
.menu-mobile nav a { padding: 10px 12px; border-radius: 10px; color: var(--nuit); text-decoration: none; font-weight: 500; }
.menu-mobile nav a:hover { background: var(--lavande); }
.menu a[aria-current="page"] { color: var(--nuit); }
.menu a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 960px) { .menu-mobile { display: block; margin-left: auto; } .entete-ligne > .bouton.petit { display: none; } }
.menu-mobile nav { min-width: 280px; max-height: calc(100vh - 96px); overflow-y: auto; }
.menu-mobile .mobile-rubrique { margin: 4px 12px 6px; font: 600 0.6875rem var(--police-texte); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gris); }
.menu-mobile .mobile-module { display: flex; align-items: center; gap: 10px; }
.menu-mobile .mobile-module .icone { width: 20px; height: 20px; flex: none; color: var(--indigo); }
.menu-mobile .mobile-tout { color: var(--indigo); font-weight: 600; }
.menu-mobile .mobile-separateur { height: 1px; margin: 6px 4px; background: var(--trait); }
.menu-mobile .mobile-demo { margin-top: 6px; text-align: center; background: var(--indigo); color: var(--blanc); font-weight: 600; }
.menu-mobile .mobile-demo:hover { background: var(--indigo-fonce); }

/* Méga-menu « Fonctionnalités » : s'ouvre au survol et au clavier (focus), sans script ; marque.js ajoute Échap et aria-expanded */
.entete-ligne { position: relative; }
.menu { align-items: center; }
.menu-deroulant { display: flex; align-items: center; }
.menu .menu-declencheur { display: inline-flex; align-items: center; gap: 4px; }
.menu-declencheur .chevron { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duree-court) var(--courbe); }
/* Survol stable (04/11/2026) : le panneau commençait 36 px sous le déclencheur et le pont n'en couvrait que 14, si bien
   qu'en descendant la souris le menu se refermait puis se rouvrait (« il saute »). Le pont couvre désormais tout l'écart,
   et la fermeture attend 180 ms : un écart de trajectoire ne le referme plus. Pas de pointer-events: none sur l'état
   fermé : c'est visibility (retardée) qui coupe les clics, pour que le panneau reste attrapable pendant ce délai. */
.mega { position: absolute; top: 100%; left: 50%; width: min(940px, calc(100vw - 2 * var(--marge))); padding-top: 6px; transform: translate(-50%, 6px); opacity: 0; visibility: hidden; z-index: 50;
  transition: opacity var(--duree-court) ease 180ms, transform var(--duree-moyen) var(--courbe) 180ms, visibility 0s linear calc(180ms + var(--duree-court)); }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -48px; height: 56px; }
.menu-deroulant:hover .mega, .menu-deroulant:focus-within .mega, .menu-deroulant.ouvert .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 60ms, 60ms, 0s; }
.menu-deroulant.ferme .mega { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.menu-deroulant:hover .chevron, .menu-deroulant:focus-within .chevron { transform: rotate(180deg); }
.menu-deroulant:hover .menu-declencheur::after, .menu-deroulant:focus-within .menu-declencheur::after { transform: scaleX(1); }
.mega-carte { display: grid; grid-template-columns: minmax(0, 1fr) 280px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 24px; box-shadow: var(--ombre-flottante), 0 40px 80px -40px rgba(59, 75, 245, 0.25); overflow: hidden; }
.mega-principal { padding: 22px 22px 18px; }
.mega-titre { margin: 0 10px 10px; font: 600 0.6875rem var(--police-texte); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gris); }
.mega-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.menu .mega a::after { content: none; }
.menu .mega a:where(:not(.bouton)) { font-size: inherit; font-weight: inherit; }
.menu .mega-lien, .menu .mega-bandeau { display: flex; align-items: flex-start; gap: 14px; padding: 12px; border-radius: 14px; color: var(--ardoise); transition: background-color var(--duree-court) ease; }
.menu .mega-lien:hover, .menu .mega-lien:focus-visible, .menu .mega-lien[aria-current="page"] { background: var(--brume); }
.mega-picto { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--lavande); color: var(--indigo); box-shadow: inset 0 0 0 1px rgba(59, 75, 245, 0.08);
  transition: background-color var(--duree-court) ease, color var(--duree-court) ease, transform var(--duree-moyen) var(--courbe-ressort); }
.mega-picto .icone { width: 22px; height: 22px; }
.mega-lien:hover .mega-picto, .mega-lien:focus-visible .mega-picto, .mega-bandeau:hover .mega-picto { background: var(--indigo); color: var(--blanc); transform: translateY(-2px) rotate(-4deg); }
.mega-texte { display: grid; gap: 3px; padding-top: 1px; }
.mega-texte b { font: 600 0.9375rem/1.3 var(--police-titre); color: var(--nuit); }
.mega-texte span { font-size: 0.8125rem; line-height: 1.45; color: var(--gris); }
.menu .mega-bandeau { align-items: center; margin-top: 10px; padding: 12px 16px 12px 12px; background: var(--degrade-aube); border: 1px solid var(--trait); }
.mega-bandeau .mega-picto { background: var(--blanc); }
.mega-fleche { width: 18px; height: 18px; flex: none; margin-left: auto; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duree-court) var(--courbe); }
.mega-bandeau .mega-fleche { color: var(--indigo); }
.mega-bandeau:hover .mega-fleche, .mega-cote-lien:hover .mega-fleche { transform: translateX(4px); }
.mega-cote { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 24px 24px; background: var(--nuit); color: rgba(255, 255, 255, 0.72); }
.mega-filigrane { position: absolute; width: 220px; height: 220px; right: -60px; bottom: -50px; fill: var(--indigo-clair); opacity: 0.12; transform: rotate(-12deg); }
.mega-cote > :not(.mega-filigrane) { position: relative; }
.mega-cote-sur { margin: 0 0 8px; font: 600 0.6875rem var(--police-texte); text-transform: uppercase; letter-spacing: 0.1em; color: var(--indigo-clair); }
.mega-cote-titre { margin: 0 0 10px; font: 600 1.25rem/1.25 var(--police-titre); color: var(--blanc); }
.mega-cote-texte { margin: 0 0 18px; font-size: 0.875rem; line-height: 1.55; }
.menu .mega .mega-cote-lien { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--blanc); font-weight: 600; font-size: 0.875rem; }
.menu .mega-cote-lien:hover { color: var(--indigo-clair); }
.mega-cote .bouton { margin-top: auto; }
.menu .mega-cote .bouton { color: var(--blanc); }
@media (prefers-reduced-motion: reduce) { .mega, .mega-picto, .chevron, .mega-fleche { transition: none !important; } }

/* Ouverture de page */
.page-ouverture { position: relative; overflow: hidden; background: var(--degrade-aube); margin-top: -76px; padding: calc(76px + clamp(36px, 5vw, 64px)) 0 clamp(44px, 6vw, 72px); border-radius: 0 0 40px 40px; }
.page-ouverture .conteneur { position: relative; z-index: 1; max-width: 880px; }
.page-ouverture h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); margin: 14px 0 18px; }
.page-ouverture .chapeau { font-size: 1.1875rem; }
.page-ouverture .actions { margin-top: 26px; }
.page-ouverture .filigrane-ouverture { width: min(560px, 60vw); right: -10%; top: -10%; }
.fil { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 0.875rem; color: var(--gris); }
.fil li + li::before { content: "›"; margin-right: 6px; color: var(--gris); }
.fil a { color: var(--indigo); text-decoration: none; }
.maj { margin-top: 14px; font-size: 0.875rem; color: var(--gris); }

/* Corps : article + sommaire */
.page-corps { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(32px, 5vw, 64px); padding: clamp(48px, 6vw, 80px) 0; align-items: start; }
.page-corps.sans-sommaire { grid-template-columns: minmax(0, 820px); justify-content: center; }
.article > section { scroll-margin-top: 96px; }
.article > section + section { margin-top: 48px; }
.article h2 { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.875rem); margin-bottom: 16px; }
.article h3 { font-size: 1.1875rem; margin: 24px 0 10px; }
.article p { margin: 0 0 16px; }
.article ul, .article ol { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 8px; }
.article li::marker { color: var(--indigo); font-weight: 700; }
.article strong { color: var(--nuit); }
.article table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 0.9375rem; display: block; overflow-x: auto; }
.article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.article th { background: var(--brume); color: var(--nuit); font-weight: 600; }
.sommaire { position: sticky; top: 96px; display: grid; gap: 4px; padding: 18px; border: 1px solid var(--trait); border-radius: var(--rayon-carte); background: var(--blanc); }
.sommaire h2 { font: 600 0.75rem var(--police-texte); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris); margin: 0 0 6px; }
.sommaire a { display: block; padding: 7px 8px; border-radius: 9px; font-size: 0.875rem; line-height: 1.35; text-decoration: none; color: var(--ardoise); }
.sommaire a:hover { background: var(--lavande); color: var(--nuit); }
.sommaire .bouton { margin-top: 10px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 960px) { .page-corps { grid-template-columns: 1fr; } .sommaire { position: static; order: -1; } }

/* FAQ, sources, liens */
.page-faq { margin-top: 56px; }
.page-faq h2 { margin-bottom: 18px; }
.sources { margin-top: 48px; padding: 20px 22px; border-radius: 16px; background: var(--brume); font-size: 0.9375rem; }
.sources h2 { font-size: 1rem !important; margin-bottom: 8px !important; }
.sources ul { margin: 0; }
.sources a { word-break: break-word; }
.avertissement { margin-top: 12px; font-size: 0.875rem; color: var(--gris); }
.a-lire { margin-top: 48px; }
.cartes-liens { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; padding: 0 !important; list-style: none; }
.cartes-liens a { display: grid; gap: 6px; height: 100%; padding: 20px; border: 1px solid var(--trait); border-radius: 16px; background: var(--blanc); text-decoration: none; transition: border-color var(--duree-court) ease, box-shadow var(--duree-court) ease, transform var(--duree-court) var(--courbe); }
.cartes-liens a:hover { border-color: var(--indigo); box-shadow: var(--ombre-carte); transform: translateY(-2px); }
.cartes-liens b { color: var(--nuit); font: 600 1.0625rem/1.3 var(--police-titre); }
.cartes-liens span { color: var(--gris); font-size: 0.9375rem; line-height: 1.5; }
.cartes-liens .rubrique-carte { color: var(--indigo); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.grille-hub { padding: clamp(48px, 6vw, 80px) 0 0; }
.grille-hub h2 { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.875rem); }

/* Accueil : mot-clé du titre principal, présenté comme une étiquette */
.h1-surtitre { display: block; width: fit-content; margin-bottom: 20px; padding: 4px 10px; border-radius: 999px; background: var(--lavande); color: var(--indigo-fonce); font: 600 0.8125rem/1.3 var(--police-texte); letter-spacing: 0; }
.lien-plus { display: inline-flex; gap: 6px; margin-top: 18px; font-weight: 600; text-decoration: none; }
.lien-plus:hover { text-decoration: underline; }
.pied-cinq { grid-template-columns: 1.3fr repeat(4, 1fr); }
@media (max-width: 960px) { .pied-cinq { grid-template-columns: 1fr 1fr; } }
.espace-bas { height: clamp(24px, 4vw, 48px); }

/* Formulaire « Demander une démo » (accueil et /contact) */
.contact { padding: clamp(56px, 7vw, 96px) 0 clamp(88px, 10vw, 128px); }
.contact-grille { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-texte h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem); margin-bottom: 16px; }
.contact-texte p { font-size: 1.125rem; margin: 0 0 24px; }
.contact-carte { padding: clamp(22px, 3vw, 36px); }
.form-demo .champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-demo label { display: grid; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--nuit); }
.form-demo label span { font-weight: 400; color: var(--gris); }
.form-demo .large { grid-column: 1 / -1; }
.form-demo input:not([type=checkbox]), .form-demo select, .form-demo textarea { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--trait); border-radius: 12px; font: 400 1rem var(--police-texte); color: var(--nuit); background: var(--blanc); transition: border-color var(--duree-court) ease, box-shadow var(--duree-court) ease; }
.form-demo textarea { resize: vertical; min-height: 84px; }
.form-demo input:focus, .form-demo select:focus, .form-demo textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 4px var(--lavande); }
.form-demo .case { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--ardoise); }
.form-demo .case input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--indigo); }
.form-demo .piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-demo button { margin-top: 20px; width: 100%; justify-content: center; }
.form-demo .etat { margin: 12px 0 0; font-size: 0.9375rem; min-height: 1.4em; }
.form-demo .etat.succes { color: var(--succes); font-weight: 600; }
.form-demo .etat.erreur { color: var(--corail); font-weight: 600; }
.form-demo.envoye .champs, .form-demo.envoye button { display: none; }
.mention-rgpd { margin: 10px 0 0; font-size: 0.8125rem; color: var(--gris); }
@media (max-width: 860px) { .contact-grille { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form-demo .champs { grid-template-columns: 1fr; } }
.form-demo .lib em { font-style: normal; font-weight: 400; color: var(--gris); }


/* Simulateur NPEC (/ressources/simulateur-npec) */
.simulateur-npec { padding-top: clamp(32px, 4vw, 56px); display: grid; gap: 20px; max-width: 980px; }
.simu-carte { padding: clamp(18px, 3vw, 28px); border: 1px solid var(--trait); border-radius: var(--rayon-carte); background: var(--blanc); box-shadow: var(--ombre-carte); }
.simu-champs { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.simu-champ { position: relative; display: grid; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--nuit); }
.simu-champ > span { font-weight: 400; color: var(--gris); }
.simu-champ input { width: 100%; box-sizing: border-box; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--trait); border-radius: 12px; font: 400 1rem var(--police-texte); color: var(--nuit); background: var(--blanc); }
.simu-champ input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 4px var(--lavande); }
.simu-suggestions { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; margin: 6px 0 0; padding: 6px; list-style: none; background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre-flottante); max-height: 340px; overflow-y: auto; }
.simu-suggestion { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-weight: 400; }
.simu-suggestion b { font-weight: 600; color: var(--nuit); font-size: 0.9375rem; }
.simu-suggestion span { color: var(--gris); font-size: 0.8125rem; }
.simu-suggestion:hover, .simu-suggestion[aria-selected="true"] { background: var(--brume); }
.simu-chargement { margin: 14px 0 0; font-size: 0.875rem; color: var(--gris); }
.simu-erreur { color: #b42318; font-weight: 600; }
.simu-resultat { display: grid; gap: 16px; }
.simu-vide { margin: 0; padding: 22px; border: 1.5px dashed var(--trait); border-radius: var(--rayon-carte); color: var(--gris); text-align: center; }
.simu-bloc { padding: clamp(18px, 3vw, 28px); border-radius: var(--rayon-carte); background: var(--brume); }
.simu-tete h2 { margin: 0; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); }
.simu-tete p { margin: 4px 0 0; color: var(--gris); font-size: 0.875rem; }
.simu-montants { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 18px; }
.simu-montant { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 16px; background: var(--blanc); border: 1px solid var(--trait); }
.simu-montant.principal { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--lavande); }
.simu-montant-titre { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gris); }
.simu-montant strong { font: 700 clamp(1.35rem, 1.1rem + 1vw, 1.9rem)/1.15 var(--police-titre, inherit); color: var(--nuit); }
.simu-montant.principal strong { color: var(--indigo); }
.simu-montant-detail { font-size: 0.875rem; color: var(--ardoise); line-height: 1.45; }
.simu-alerte { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff7e6; color: #8a4b00; font-size: 0.9375rem; }
.simu-note { margin: 0; font-size: 0.8125rem; color: var(--gris); }
@media (max-width: 720px) { .simu-champs { grid-template-columns: 1fr; } }

/* Article « Qualiopi indicateur par indicateur » : tableau par critère et pastilles d'aide */
.article .table-qualiopi td { vertical-align: top; }
.article .table-qualiopi td.num { font: 700 1rem var(--police-titre); color: var(--indigo); white-space: nowrap; }
.article .table-qualiopi td:nth-child(2) { font-weight: 600; color: var(--nuit); min-width: 180px; }
.article .table-qualiopi td:nth-child(3) { min-width: 260px; }
.statut-q { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 600 0.75rem/1.4 var(--police-texte); white-space: nowrap; }
.statut-q.auto { background: #e3f8ef; color: #0b6b47; }
.statut-q.prep { background: var(--lavande); color: var(--indigo-fonce); }
.statut-q.main { background: #fff1e0; color: #8a4b00; }
@media (max-width: 960px) { .page-corps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .article .table-qualiopi, .article .table-qualiopi tbody, .article .table-qualiopi tr, .article .table-qualiopi td { display: block; min-width: 0; }
  .article .table-qualiopi { overflow: visible; }
  .article .table-qualiopi thead { display: none; }
  .article .table-qualiopi tr { position: relative; padding: 14px 0 16px 40px; border-bottom: 1px solid var(--trait); }
  .article .table-qualiopi td { padding: 0; border: 0; }
  .article .table-qualiopi td.num { position: absolute; left: 0; top: 14px; }
  .article .table-qualiopi td:nth-child(3) { margin: 6px 0 10px; }
}

/* Public d'un module : « Apprentissage » ou « Toutes formations » (menu et cartes des fonctionnalités) */
.portee { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font: 600 0.6875rem/1.5 var(--police-texte); letter-spacing: 0.02em; white-space: nowrap; }
.portee.app { background: var(--lavande); color: var(--indigo-fonce); }
.portee.tous { background: #e3f8ef; color: #0b6b47; }