/**
 * Le parcours « essayer sans compte » (/essai, templates/visiteur/_layout.html.twig, public/js/essai-parcours.js), depuis le
 * 19/10/2026 : le plein écran du parcours de création d'un bâtiment (parcours-classement.css, plan-site.css), avec la marque
 * NORESA dans la barre et « Créer mon compte » à la place de « Quitter ». Ce fichier n'ajoute que ce qui est propre à l'essai.
 */

/* La page dessous (menu, pied de page, bulle d'aide) n'est jamais visible : seul le plein écran compte. */
html:has(body.essai-plein), body.essai-plein { overflow: hidden; }
body.essai-plein > header,
body.essai-plein #footer,
body.essai-plein .bande-haut,
body.essai-plein .fb-widget,
body.essai-plein .ia-chatbot { display: none !important; }

/* Les messages (base/_flash.html.twig) restent dans la page : posés au-dessus du plein écran, en haut au centre. */
body.essai-plein .contenu__bloc > .alert {
    position: fixed;
    top: 4.25rem;
    left: 50%;
    z-index: 1400;
    width: min(640px, calc(100% - 2rem));
    margin: 0;
    transform: translateX(-50%);
    box-shadow: var(--shadow-1);
}

/* La barre : la marque à gauche (logo, NORESA, « Essai sans compte »). */
.essai__marque img { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.essai__marque > span { font-weight: 700; letter-spacing: 0.04em; }
.essai .essai__compte { white-space: nowrap; }

/* La carte : un peu plus haute que celle des questions, le terrain reste visible au-dessus. */
.essai .parcours__carte { max-height: calc(100% - 5.5rem); }
.essai .parcours__carte.essai__carte--haute { max-height: min(60vh, calc(100% - 5.5rem)); }
.essai__titre { margin: 0 0 0.6rem; font-size: 1.3rem; line-height: 1.25; outline: none; }
.essai .essai__sous-titre { margin: -0.2rem 0 0.9rem; font-size: 0.92rem; }

/* La progression : « Étape 1 sur 2 », puis une jauge en segments. */
.essai__progression { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.4rem; }
.essai__progression .parcours__rang { margin: 0; white-space: nowrap; }
.essai__jauge { display: flex; gap: 0.3rem; flex: 1 1 auto; max-width: 12rem; }
.essai__jauge-seg { flex: 1; height: 5px; border-radius: 999px; background: var(--border-color); }
.essai__jauge-seg.is-done { background: color-mix(in srgb, var(--primary) 55%, transparent); }
.essai__jauge-seg.is-active { background: var(--primary); }

/* Les trois temps de l'essai (accueil). */
.essai__etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0 0 0.9rem; padding: 0; list-style: none; counter-reset: essai; }
.essai__etapes li {
    display: flex; flex-direction: column; gap: 0.45rem; padding: 0.8rem 0.85rem;
    border: 1px solid var(--border-color); border-radius: var(--radius, 12px);
    background: var(--bg-color, var(--bg)); font-size: 0.9rem; line-height: 1.4;
    animation: terrain-carte 0.5s cubic-bezier(.2, .9, .3, 1.25) both;
}
.essai__etapes li:nth-child(2) { animation-delay: 70ms; }
.essai__etapes li:nth-child(3) { animation-delay: 140ms; }
.essai__etapes .material-symbols-outlined {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
    color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); font-size: 21px;
}

/* Une remarque (info, ou alerte quand le questionnaire est déjà commencé). */
.essai__note { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0 0 0.75rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: color-mix(in srgb, var(--primary) 7%, transparent); color: var(--ink); font-size: 0.85rem; line-height: 1.45; }
.essai__note .material-symbols-outlined { color: var(--primary); font-size: 19px; flex: none; }
.essai__note--alerte { background: color-mix(in srgb, var(--warning-color, #b45309) 12%, transparent); }
.essai__note--alerte .material-symbols-outlined { color: var(--warning-color, #b45309); }

/* Les activités, par famille. */
.essai-famille { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.essai-famille legend { padding: 0; margin: 0 0 0.45rem; color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.essai .parcours__choix--activites { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
/* Les boutons restent visibles quand la carte défile (activités, petit écran). */
.essai .parcours__carte .parcours__actions {
    position: sticky; bottom: -1.1rem; z-index: 1; align-items: center; margin: 0 -1.25rem -1.1rem; padding: 0.75rem 1.25rem;
    background: var(--panneau-fond); border-top: 1px solid var(--border-color);
}
.essai .parcours__choix--activites label { padding: 0.55rem 0.7rem; }
.essai .parcours__choix--activites .parcours__textes p { font-size: 0.85rem; line-height: 1.3; }
/* Activité : le terrain recule davantage, le bâtiment reste visible au-dessus de la carte haute. */
.essai:has(.essai__carte--haute) .parcours__dessin { transform: translateY(-33%) scale(0.56); }
.essai__choisi { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--muted); font-size: 0.85rem; font-weight: 600; }

/* Plusieurs activités (21/10/2026, activite.html.twig) : le résumé de l'activité principale, le rôle de chaque type
   coché (« · activité principale »), l'avertissement et les cases grisées quand l'essai a atteint son maximum. */
.essai-choix-resume { margin: 0 0 0.6rem; font-size: 0.88rem; font-weight: 600; white-space: pre-line; }
.essai .parcours__textes .essai-choix__role { font-weight: 600; }
.essai .essai-erreur:empty { display: none; }
.essai .essai-erreur { margin: 0 0 0.75rem; }
.essai .choice input:disabled + label { opacity: 0.45; cursor: not-allowed; }
.essai .choice input:disabled + label:hover { transform: none; box-shadow: none; }

/* L'effectif retenu (repartition.html.twig). */
.essai-repartition { width: 100%; border-collapse: collapse; margin: 0 0 0.9rem; font-size: 0.9rem; }
.essai-repartition th, .essai-repartition td { padding: 0.55rem 0.4rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-color); }
.essai-repartition thead th { color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.essai-repartition tfoot th, .essai-repartition tfoot td { font-weight: 700; border-bottom: 0; }
.essai-repartition td small { display: block; color: var(--muted); font-size: 0.78rem; }
.essai-repartition .essai-repartition__nombre { text-align: right; white-space: nowrap; }
.essai__lien { margin: 0 0 0.75rem; font-size: 0.85rem; }

/* « Réservé aux comptes » : replié, pour que le bouton reste en vue. */
.essai__reserve { margin: 0 0 0.75rem; border: 1px solid var(--border-color); border-radius: 10px; }
.essai__reserve summary { display: flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.75rem; cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.essai__reserve summary .material-symbols-outlined { color: var(--muted); font-size: 19px; }
.essai__reserve summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 10px; }
.essai__liste-verrou { margin: 0; padding: 0 0.9rem 0.7rem 2.4rem; color: var(--muted); font-size: 0.87rem; line-height: 1.5; }

/* Le bâtiment de l'essai : l'esquisse se dessine, puis le vrai bâtiment se construit à chaque choix. */
.essai__esquisse polygon { stroke-dasharray: 6 4; animation: essai-trace 1.2s ease-out both; }
@keyframes essai-trace { from { stroke-dashoffset: 120; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
.essai .essai__personne { fill: var(--mq-texte); opacity: 0.75; }
.essai .terrain__volumes { transform: translateY(18px); }

/* Formulaire envoyé : on attend la page suivante. */
.essai .essai--attente { pointer-events: none; opacity: 0.75; cursor: progress; }

/* Téléphone : la carte prend la largeur et jusqu'aux deux tiers de l'écran ; le terrain se cadre au-dessus. */

/* Écran de l'adresse (« Avant de commencer », 07/11/2026) : le classement, puis le formulaire des fiches gratuites
   (fiche-gratuite.css) et deux boutons de départ. Aucune couleur en dur : jetons du thème, le mode sombre suit. */
.essai-classement { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 0 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border-color); border-radius: 10px; }
.essai-classement > .material-symbols-outlined { color: var(--green, var(--primary)); font-size: 22px; flex: none; }
.essai-classement dl { display: grid; gap: 0.2rem; margin: 0; }
.essai-classement dl div { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.87rem; }
.essai-classement dt { color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; align-self: center; }
.essai-classement dd { margin: 0; font-weight: 600; color: var(--ink); }
.essai-adresse { margin: 0 0 0.75rem; gap: 0.75rem; }
.essai-adresse__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.essai-depart { display: grid; gap: 0.6rem; }
.essai-depart__bouton { justify-content: center; width: 100%; flex-wrap: wrap; }
.essai-depart__bouton .badge { margin-left: 0.25rem; }
.essai-depart__explication { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.essai-renvoi { margin: 0.5rem 0 0; text-align: center; }
.essai-renvoi__lien { padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; }
.essai-renvoi__lien:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 760px) {
    .essai-adresse__ligne { grid-template-columns: 1fr; }
    .essai .parcours__barre { top: 0.6rem; left: 0.6rem; right: 0.6rem; }
    .essai__marque small { display: none; }
    .essai .essai__compte { padding-inline: 0.6rem; }
    .essai .parcours__dessin { transform: translateY(-31%) scale(0.95); }
    .essai .parcours__carte, .essai .parcours__carte.essai__carte--haute { max-height: 66vh; max-height: 66dvh; }
    .essai__titre { font-size: 1.12rem; }
    .essai__etapes { grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
    .essai__etapes li { flex-direction: row; align-items: center; padding: 0.55rem 0.65rem; font-size: 0.85rem; }
    .essai__etapes .material-symbols-outlined { width: 32px; height: 32px; flex: none; }
    .essai .parcours__choix--activites { grid-template-columns: minmax(0, 1fr); }
    .essai .parcours__carte .parcours__actions { bottom: -1rem; margin: 0 -1rem -1rem; padding: 0.65rem 1rem; }
    /* Les boutons l'un sous l'autre, sur toute la largeur : le principal en premier, sous le pouce. */
    .essai .parcours__actions { flex-direction: column-reverse; align-items: stretch; gap: 0.5rem; }
    .essai .parcours__actions > div { display: flex; width: 100%; }
    .essai .parcours__actions > div:empty, .essai .parcours__actions > div:has(> .essai__choisi) { display: none; }
    .essai .parcours__actions .btn { flex: 1; justify-content: center; }
    .essai:has(.essai__carte--haute) .parcours__dessin { transform: translateY(-34%) scale(0.85); }
    .essai .essai__note { font-size: 0.8rem; }
    body.essai-plein .contenu__bloc > .alert { top: 3.6rem; }
}
/* Très petits écrans (iPhone SE) : la carte occupe un peu plus, le terrain reste en haut. */
@media (max-width: 760px) and (max-height: 700px) {
    .essai .parcours__carte, .essai .parcours__carte.essai__carte--haute { max-height: 72vh; max-height: 72dvh; }
    .essai .parcours__dessin { transform: translateY(-36%) scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
    .essai *, .essai *::before, .essai *::after { animation: none !important; transition: none !important; }
}