/* Vignettes et figures des sections, style 1 À PLAT (décidé par Antoine le 02/11/2026).
   Même langage que les images 3D des hauts de page, sans inclinaison :
   panneaux à coins de 10 px et ombre décalée, pictogrammes dans une pastille sombre,
   titres en Clash, aplats du terroir gardés comme sol, et jauges qui se remplissent
   une fois à l'entrée dans l'écran (animation.js pose .jauge puis .jauge--vue).
   Les cotes et le cartouche, abandonnés, deviennent pastilles et cartes de chiffre clé.
   Chargée après accueil.css et pages.css : toutes les règles partent de html.v-alterne main. */

html.v-alterne main {
  --s1-ombre: 8px 10px 0 -3px rgba(14, 23, 20, .16), 0 18px 32px -12px rgba(14, 23, 20, .30);
  --s1-ombre-p: 4px 6px 0 -2px rgba(14, 23, 20, .18), 0 10px 18px -8px rgba(14, 23, 20, .28);
  --s1-bord: 1px solid rgba(14, 23, 20, .12);
}
html.v-alterne main .sec--sombre {
  --s1-ombre: 10px 14px 0 -4px rgba(0, 0, 0, .38), 0 20px 40px -10px rgba(0, 0, 0, .6);
  --s1-ombre-p: 5px 7px 0 -2px rgba(0, 0, 0, .35), 0 12px 22px -8px rgba(0, 0, 0, .5);
}

/* ── 1. Le cadre de toute vignette : un panneau ─────────────────────────── */
html.v-alterne main .vign { border-radius: 10px; box-shadow: var(--s1-ombre); }
html.v-alterne main .vign:not(.aplat) { border: var(--s1-bord); }

/* ── 2. Pictogrammes : une tuile de tableau de bord ─────────────────────── */
html.v-alterne main .vign--ico { justify-content: flex-start; padding: 0 22px; gap: 18px; }
html.v-alterne main .vign--ico .ico,
html.v-alterne main :is(.trio, .pieces, .publics, .montants) .ico {
  width: 62px; height: 62px; padding: 13px; flex: none; border-radius: 10px; background: #0E1714;
  stroke: #EDE8DD; box-shadow: var(--s1-ombre-p); overflow: visible; }
html.v-alterne main :is(.vign--ico, .trio, .pieces, .publics, .montants) .ico .p { stroke: #E9A54B; }
html.v-alterne main :is(.vign--ico, .trio, .pieces, .publics, .montants) .ico .pl,
html.v-alterne main :is(.vign--ico, .trio, .pieces, .publics, .montants) .ico rect.p { fill: #E9A54B; }
html.v-alterne main .vign__leg { font-family: 'Clash Grotesk', var(--t); font-size: .95rem; font-weight: 600; line-height: 1.2;
  color: #0E1714; max-width: 18ch; }
/* Sans légende : deux lignes de panneau à droite de la pastille, comme une carte de chiffre clé */
html.v-alterne main .vign--ico:not(:has(.vign__leg))::after { content: ""; flex: 1; max-width: 150px; height: 40px;
  background: linear-gradient(rgba(14, 23, 20, .62) 0 0) 0 0 / 64% 10px no-repeat,
              linear-gradient(rgba(14, 23, 20, .22) 0 0) 0 19px / 100% 7px no-repeat,
              linear-gradient(rgba(14, 23, 20, .22) 0 0) 0 33px / 72% 7px no-repeat; }
html.v-alterne main .vign--ico.vign--seul { padding: 18px 22px; }

/* ── 3. Captures réelles : la fenêtre de navigateur des hauts de page ──── */
html.v-alterne main .vign--img { padding-top: 22px; background: #E3E9E5; border: var(--s1-bord);
  background-image: radial-gradient(circle at 12px 11px, #B9C4BE 3px, transparent 3.5px),
                    radial-gradient(circle at 24px 11px, #B9C4BE 3px, transparent 3.5px),
                    radial-gradient(circle at 36px 11px, #B9C4BE 3px, transparent 3.5px); }

/* ── 4. Les figures des sections : un sol d'aplat, des panneaux posés dessus */
html.v-alterne main figure.aplat:not(.i3d) { border-radius: 14px;
  background-image: radial-gradient(circle, rgba(14, 23, 20, .09) 1.2px, transparent 1.5px); background-size: 22px 22px; }
html.v-alterne main :is(.carnet__feuille, .cal__feuille, .compris > div, .ticket > div, .trio > div, .pieces > div,
  .publics > div, .pannes > div, .branchements__src span, .branchements__site, .duo > div, .montants > div,
  .serp__pack, .serp__res, .captures__ecran, .cadre, .reals .cadre, .coupes__col > span, .fen) {
  border: var(--s1-bord); border-radius: 10px; box-shadow: var(--s1-ombre); }
html.v-alterne main .compris__non { border-style: dashed !important; border-color: rgba(14, 23, 20, .35) !important; }
html.v-alterne main :is(.carnet__titre, .cal__titre, .compris b, .ticket b, .pannes b, .duo b, .montants b) {
  font-family: 'Clash Grotesk', var(--t); font-weight: 600; }
html.v-alterne main .carnet li b, html.v-alterne main :is(.vign--suivi, .vign--dossier) b { border-radius: 50%; }
html.v-alterne main .metiers .vign { box-shadow: var(--s1-ombre-p); }

/* ── 5. Cartouche et cotes abandonnés : cartes de chiffre clé et pastilles ─ */
html.v-alterne main .cartouche-t { display: flex; flex-wrap: wrap; gap: 10px; border: 0; background: none; padding: 0; }
html.v-alterne main .cartouche-t > div { border: var(--s1-bord) !important; border-radius: 9px; background: #FFFFFF;
  padding: 9px 14px; box-shadow: var(--s1-ombre-p); }
html.v-alterne main .cartouche-t dt { font-size: .72rem; color: #46534D; }
html.v-alterne main .cartouche-t dd { font-family: 'Clash Grotesk', var(--t); font-size: 1.02rem; color: #0E1714; }
html.v-alterne main .cotation > i { display: none; }
html.v-alterne main .cotation--h, html.v-alterne main .cotation--etapes { display: inline-flex; width: auto; height: auto; }
html.v-alterne main .cotation > span { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 7px;
  border-radius: 7px; background: #22312B; color: #EDE8DD; border: 1px solid #3F554B; font: 600 .82rem var(--f);
  box-shadow: var(--s1-ombre-p); white-space: nowrap; writing-mode: horizontal-tb; transform: none; }
html.v-alterne main .cotation > span::before { content: "◷"; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 5px; background: #D88C22; color: #0E1714; font-size: 12px; }

/* ── 6. Les jauges : se remplissent une fois, à l'entrée dans l'écran ──── */
@keyframes s1-pose { from { opacity: 0; transform: scale(.35); } }
@keyframes s1-allume { from { opacity: 0; } }
@keyframes s1-trace { from { transform: scaleX(0); } }
html.v-alterne main .jauge--vue .cal__grille b,
html.v-alterne main .jauge--vue :is(.carnet li b, .vign--suivi b, .vign--dossier b:not(.vide)) {
  animation: s1-pose .38s cubic-bezier(.3, 1.4, .5, 1) calc(.15s + var(--n, 0) * 90ms) both; }
html.v-alterne main .jauge--vue .vign__jours i.pris,
html.v-alterne main .jauge--vue .compris span { animation: s1-allume .3s ease-out calc(.15s + var(--n, 0) * 70ms) both; }
html.v-alterne main .frise ol::before, html.v-alterne main .curseurs__axe::before { transform-origin: 0 50%; }
html.v-alterne main .jauge--vue .frise ol::before { animation: s1-trace 1.4s cubic-bezier(.3, .7, .2, 1) .1s both; }
html.v-alterne main .jauge--vue .frise li { animation: s1-allume .4s ease-out calc(.2s + var(--n, 0) * 260ms) both; }
html.v-alterne main .jauge--vue .curseurs__axe::before { animation: s1-trace 1s cubic-bezier(.3, .7, .2, 1) calc(.15s + var(--n, 0) * 200ms) both; }
html.v-alterne main .jauge--vue .curseurs__axe i { animation: s1-allume .3s ease-out calc(.9s + var(--n, 0) * 200ms) both; }
/* Avant l'entrée à l'écran, rien n'est rempli (seulement si animation.js a pu poser .jauge) */
html.v-alterne main .jauge:not(.jauge--vue) :is(.cal__grille b, .carnet li b, .vign--suivi b, .vign--dossier b:not(.vide), .vign__jours i.pris, .compris span, .frise li, .curseurs__axe i) { opacity: 0; }
html.v-alterne main .jauge:not(.jauge--vue) :is(.frise ol, .curseurs__axe)::before { transform: scaleX(0); }
/* L'ordre de remplissage */
html.v-alterne main :is(.cal__grille > div, .carnet li, .vign--suivi span, .vign--dossier span, .vign__jours i, .compris span, .frise li, .curseurs > div):nth-child(2) { --n: 1; }
html.v-alterne main :is(.cal__grille > div, .carnet li, .vign--suivi span, .vign--dossier span, .vign__jours i, .compris span, .frise li, .curseurs > div):nth-child(3) { --n: 2; }
html.v-alterne main :is(.cal__grille > div, .carnet li, .vign--suivi span, .vign--dossier span, .vign__jours i, .compris span, .frise li, .curseurs > div):nth-child(4) { --n: 3; }
html.v-alterne main :is(.cal__grille > div, .carnet li, .vign--suivi span, .vign--dossier span, .vign__jours i, .compris span, .frise li, .curseurs > div):nth-child(5) { --n: 4; }
html.v-alterne main :is(.cal__grille > div, .carnet li, .vign__jours i, .compris span):nth-child(6) { --n: 5; }
html.v-alterne main :is(.cal__grille > div, .vign__jours i):nth-child(7) { --n: 6; }
html.v-alterne main :is(.cal__grille > div, .vign__jours i):nth-child(8) { --n: 7; }
html.v-alterne main :is(.cal__grille > div, .vign__jours i):nth-child(9) { --n: 8; }
html.v-alterne main :is(.cal__grille > div, .vign__jours i):nth-child(10) { --n: 9; }
html.v-alterne main :is(.cal__grille > div, .vign__jours i):nth-child(11) { --n: 10; }
html.v-alterne main :is(.cal__grille > div, .vign__jours i):nth-child(12) { --n: 11; }
html.v-alterne main .curseurs > div:nth-child(2) .curseurs__axe { --n: 1; }
html.v-alterne main .curseurs > div:nth-child(3) .curseurs__axe { --n: 2; }

@media (prefers-reduced-motion: reduce) {
  html.v-alterne main .jauge :is(.cal__grille b, .carnet li b, .vign--suivi b, .vign--dossier b, .vign__jours i.pris, .compris span, .frise li, .curseurs__axe i) { opacity: 1 !important; animation: none !important; }
  html.v-alterne main .jauge :is(.frise ol, .curseurs__axe)::before { transform: none !important; animation: none !important; }
}

/* La cote verticale de la page de résultats devient une pastille posée sur le bas du bloc des trois fiches */
html.v-alterne main .serp { padding-right: 0; }
html.v-alterne main .serp .cotation--v { left: auto; right: 16px; top: auto; bottom: 104px; height: auto; width: auto; }