/* ============================================================================
   QUIZ SEO (04/10/2026, demande de Frank) : la pastille QUIZ presente sur
   chaque page, la petite fenetre qui propose le quiz a l'arrivee, et la page
   quiz-seo.asp elle-meme.

   FICHIER A PART DE site.css, VOLONTAIREMENT : le 04/10/2026, site.css porte
   en local la mise en page du test image, pas encore publiee. Les styles du
   quiz vivent ici pour que les deux mises en ligne restent separees.
   Charge par assets/quiz.js sur toutes les pages, et directement par
   quiz-seo.asp (pour eviter un affichage sans style au chargement).
   Changer le numero ?v= dans quiz.js et quiz-seo.asp apres chaque retouche :
   les fichiers statiques sont mis en cache 7 jours (web.config).
   ============================================================================ */

/* Couleur du quiz : l'or "mesure" du site, pour se distinguer du bleu des
   liens et du bouton de retour en haut. Blanc sur #9A6A12 : 4,7 pour 1. */
:root{--quiz-fond:var(--measure);--quiz-encre:#FFFFFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--quiz-encre:#131920}}
:root[data-theme="dark"]{--quiz-encre:#131920}

/* ---------------------------------------------------------------- pastille */
/* En bas a droite. Quand le bouton de retour en haut apparait (meme coin),
   quiz.js ajoute la classe au-dessus et la pastille monte d'un cran. */
.quiz-pastille{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:21;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--quiz-fond);background:var(--quiz-fond);color:var(--quiz-encre);font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.08em;text-decoration:none;box-shadow:0 2px 6px rgba(26,34,44,.18),0 10px 24px rgba(26,34,44,.18);transition:bottom .2s ease}
.quiz-pastille.au-dessus{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
.quiz-pastille:hover{filter:brightness(1.1)}
.quiz-pastille:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.quiz-pastille[hidden]{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .quiz-pastille{box-shadow:0 2px 6px rgba(0,0,0,.5),0 10px 24px rgba(0,0,0,.4)}}
:root[data-theme="dark"] .quiz-pastille{box-shadow:0 2px 6px rgba(0,0,0,.5),0 10px 24px rgba(0,0,0,.4)}
/* Sur telephone : un onglet colle au bord droit, a mi-hauteur. Une pastille
   ronde dans le coin masquerait du texte, comme le bouton de retour en haut
   (cache tant que la page n'a pas defile, pour la meme raison). */
@media (max-width:600px){
  .quiz-pastille,.quiz-pastille.au-dessus{right:0;bottom:auto;top:50%;transform:translateY(-50%);min-height:0;padding:10px 5px;border-right:0;border-radius:10px 0 0 10px;writing-mode:vertical-rl;text-orientation:upright;font-size:12px;letter-spacing:0;transition:none}
}
@media (prefers-reduced-motion:reduce){.quiz-pastille{transition:none}}

/* ------------------------------------------------------ fenetre d'arrivee */
/* Une carte dans le coin, jamais une fenetre qui recouvre la page : Google
   deconseille les fenetres qui cachent le contenu a l'arrivee depuis ses
   resultats, surtout sur telephone. */
.quiz-fenetre{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;width:min(360px,calc(100vw - 32px));background:var(--panel);color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--quiz-fond);border-radius:12px;padding:16px 18px 18px;box-shadow:0 2px 6px rgba(26,34,44,.14),0 16px 40px rgba(26,34,44,.22);opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease}
.quiz-fenetre.visible{opacity:1;transform:none}
.quiz-fenetre p{max-width:none}
.quiz-fenetre-sur{margin:0 40px 6px 0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--measure)}
.quiz-fenetre-titre{margin:0 0 8px;font-family:var(--display);font-weight:800;font-size:19px;line-height:1.2;color:var(--ink)}
.quiz-fenetre-texte{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.quiz-fenetre-actions{display:flex;flex-wrap:wrap;gap:10px}
.quiz-fenetre-actions .btn{cursor:pointer}
.quiz-fenetre-fermer{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--ink-soft);font-size:24px;line-height:1;cursor:pointer}
.quiz-fenetre-fermer:hover{background:var(--panel-2)}
.quiz-fenetre-fermer:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .quiz-fenetre{box-shadow:0 2px 6px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.5)}}
:root[data-theme="dark"] .quiz-fenetre{box-shadow:0 2px 6px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.5)}
/* Sur telephone, la carte prend la largeur et se pose AU-DESSUS de l'icone du
   bandeau cookies (bas gauche, 68 px de haut, mesure a 375 px le 04/10/2026) :
   posee a 12 px du bas, l'icone recouvrait le bouton "Faire le quiz". */
@media (max-width:600px){.quiz-fenetre{left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));width:auto}}
@media (prefers-reduced-motion:reduce){.quiz-fenetre{transition:none;transform:none}}

/* --------------------------------------------------------- page du quiz */
.quiz-zone{margin-top:28px;max-width:780px}
/* titres et message qui recoivent le focus par le script (tabindex="-1"),
   pour que le lecteur d'ecran annonce le nouvel ecran : pas de cadre */
.quiz-zone [tabindex="-1"]:focus{outline:none}
.quiz-carte{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px 24px;box-shadow:var(--shadow)}
.quiz-carte h2{margin-top:0;border-top:0;padding-top:0;font-size:clamp(20px,2.6vw,26px)}
.quiz-carte p{max-width:none}
@media (max-width:560px){.quiz-carte{padding:18px 16px}}
.quiz-points{margin:14px 0 0;padding-left:20px;display:grid;gap:6px}
.quiz-entete{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.quiz-entete p{margin:0}
.quiz-barre{height:6px;margin:10px 0 20px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.quiz-barre span{display:block;width:0;height:100%;background:var(--quiz-fond);transition:width .25s ease}
@media (prefers-reduced-motion:reduce){.quiz-barre span{transition:none}}
.quiz-fieldset{border:0;margin:0;padding:0;min-width:0}
.quiz-options{display:grid;gap:10px;margin-top:16px}
.quiz-option{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--champ-bord);border-radius:10px;background:var(--bg);font-size:15.5px;line-height:1.45;cursor:pointer}
.quiz-option input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--accent)}
.quiz-option:hover{border-color:var(--accent)}
.quiz-option:has(input:checked){border-color:var(--accent);background:var(--accent-bg)}
.quiz-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.quiz-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:20px}
.quiz-actions .btn{cursor:pointer}
.quiz-actions .btn[hidden]{display:none}
.quiz-alerte{margin:14px 0 0;color:var(--warn);font-weight:700;font-size:14.5px}
.quiz-alerte[hidden]{display:none}

/* resultat */
.quiz-score{margin:6px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(48px,9vw,72px);line-height:1;color:var(--measure)}
.quiz-score-texte{font-size:17px;font-weight:700}
.quiz-themes{margin-top:14px}
.quiz-themes .loi p{font-family:var(--mono);font-size:14px}
.quiz-fragile{margin-top:14px;font-weight:700}
.quiz-correction{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.quiz-correction li{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:0 10px 10px 0;padding:12px 16px}
.quiz-correction li.faux{border-left-color:var(--warn)}
.quiz-correction p{margin:6px 0;max-width:none;font-size:15px}
.quiz-correction .quiz-c-enonce{font-family:var(--display);font-weight:700;font-size:16px}
.quiz-tag{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:6px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px;background:var(--ok-bg);color:var(--ok)}
.quiz-tag.faux{background:var(--warn-bg);color:var(--warn)}

/* demande d'audit ou de reponse : le panneau du formulaire de contact,
   sans son effet colle (sticky), inutile ici */
.contact-form.quiz-demande{position:static;margin-top:26px}
.quiz-demande fieldset{border:0;margin:0 0 14px;padding:0;min-width:0}
.quiz-demande legend{padding:0;margin-bottom:8px;font-family:var(--display);font-weight:700;font-size:14.5px}
.contact-form .quiz-option{display:flex;margin:0 0 8px;font-family:var(--body);font-weight:400;font-size:15px}
.quiz-option b{font-family:var(--display)}
.quiz-facultatif{font-family:var(--body);font-weight:400;color:var(--faint)}
.quiz-demande [hidden]{display:none}