/* Lot 11, E5 (D5, 3e ronde, version C-a, choix de Vince le 2026-10-19 ; essai labo/lot11/D5/r3/Ca/page.html) : /rejoindre en
   récit, au langage du site. L'énoncé et la bande de photos ; la gang (liste numérotée, photo révélée de bas en haut) ; le lieu
   (photo et tuiles de chiffres) ; deux cartes « Ce que vous y gagnez » ; le formulaire à bascule, au style de celui de
   /contact (classes partagées .formulaire-b, .champs-b, .champ-b, .cases-b de stoud.css). Titres en deux tons. Jetons seulement. */
.recit_hero { padding-top: calc(var(--hauteur-fond-menu, 5.5rem) + var(--stoud-espace-blocs)); padding-bottom: var(--stoud-espace-section); }
.recit_enonce { display: flex; flex-direction: column; gap: var(--spacing--space-micro); max-width: 62rem; margin-bottom: var(--stoud-espace-blocs); }
.recit_hero h1 > span + span, .section_stoud h2 > span + span { color: var(--_🎨-color--base---base--dark-48); }
.recit_hero h1 { margin: 0; }
.recit_enonce_bas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--layout-grid--gutter); align-items: end; margin-top: var(--spacing--space-tiny); }
.recit_enonce_bas .paragraph { grid-column: 1 / span 5; margin: 0; }
.recit_enonce_bas .cta_tertiary { grid-column: 10 / -1; justify-self: end; }
.recit_bande { display: grid; grid-template-columns: 5fr 4fr 3fr; grid-auto-rows: clamp(16rem, 30vw, 32rem); gap: var(--layout-grid--gutter); }
.recit_bande figure { margin: 0; border-radius: var(--_🔘-radius---general--default); overflow: hidden; }
.recit_bande img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recit_titre { display: flex; flex-direction: column; gap: var(--spacing--space-micro); max-width: 60rem; }
.recit_titre h2 { margin: 0; }
.recit_texte { max-width: 30rem; }
.recit_texte p { margin: 0; }

/* La gang : la liste numérotée, à la taille des listes du site ; la photo de la rangée survolée se révèle de bas en haut. */
.registre_recit { display: grid; grid-template-columns: 7fr 5fr; gap: var(--spacing--space-large); align-items: stretch; }
.registre_liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--_🎨-color--base---base--dark-16); }
.registre_rangee { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; column-gap: var(--layout-grid--gutter); align-items: center; padding: var(--spacing--space-small) 0; border-bottom: 1px solid var(--_🎨-color--base---base--dark-16); color: var(--_🎨-color--base---base--dark-48); text-decoration: none; cursor: pointer; }
.registre_rangee h3 { margin: 0; }
.main-wrapper .registre_rangee { transition: color var(--stoud-duree-rapide) var(--stoud-courbe); }
.main-wrapper .registre_rangee h3 { transition: transform var(--stoud-duree) var(--stoud-courbe); }
.registre_rangee.est-actif, .registre_rangee:hover, .registre_rangee:focus-visible { color: var(--_🎨-color--base---base--dark-100); }
.registre_rangee.est-actif h3 { transform: translateX(8px); }
.registre_rangee:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 4px; }
.registre_lien { display: inline-flex; align-items: center; gap: 8px; color: var(--_🎨-color--base---base--dark-64); }
.registre_rangee.est-actif .registre_lien, .registre_rangee:hover .registre_lien, .registre_rangee:focus-visible .registre_lien { color: var(--_🎨-color--base---base--dark-100); }
.main-wrapper .registre_lien > span:last-child { transition: transform var(--stoud-duree-rapide) var(--stoud-courbe); }
.registre_rangee.est-actif .registre_lien > span:last-child { transform: translateX(4px); }
.registre_rangee.est-vous .registre_num::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--stoud-jaune); }
.registre_photos { position: relative; border-radius: var(--_🔘-radius---general--default); overflow: hidden; min-height: 26rem; background: var(--_🎨-color--base---base--dark-4); }
.registre_photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transform: scale(1.18); }
.main-wrapper .registre_photos img { transition: clip-path var(--stoud-duree) var(--stoud-courbe), transform var(--stoud-duree-lente) var(--stoud-courbe); }
.registre_photos img.est-actif { clip-path: inset(0 0 0 0); transform: none; z-index: 1; }
.registre_note { margin: var(--spacing--space-tiny) 0 0; }

/* Le lieu : photo et tuiles de chiffres (surtitre en haut, chiffre en bas, qui compte). */
.lieu_recit { display: grid; grid-template-columns: 7fr 5fr; gap: var(--stoud-espace-rangees); }
.lieu_photo { position: relative; margin: 0; border-radius: var(--_🔘-radius---general--default); overflow: hidden; min-height: 30rem; }
.lieu_photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lieu_chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: var(--stoud-espace-rangees); }
.lieu_chiffre { display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing--space-small); min-height: 11rem; padding: var(--spacing--space-tiny); border-radius: var(--_🔘-radius---general--default); background: var(--_🎨-color--base---base--dark-4); }
.lieu_chiffre .heading-style-h1 { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Ce que vous y gagnez : deux cartes du système (numéro en haut, titre h4, texte et points en bas). */
.gains_recit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--stoud-espace-rangees); }
.gain_carte { display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing--space-medium); min-height: 20rem; padding: var(--spacing--space-xx-small); border-radius: var(--_🔘-radius---general--default); background: var(--_🎨-color--base---base--dark-4); }
.gain_carte.mode-dark { background: var(--_🎨-color--base---base--dark-100); color: var(--_🎨-color--base---base--light-100); }
.gain_haut { display: flex; justify-content: space-between; gap: var(--spacing--space-nano); }
.gain_bas { display: flex; flex-direction: column; gap: var(--spacing--space-tiny); }
.gain_bas h3, .gain_bas p { margin: 0; }
.gain_carte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gain_carte li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.gain_carte li::before { content: ""; width: 8px; height: 8px; margin: 7px 0 0 2px; border-radius: 50%; background: var(--stoud-jaune); }
.gain_bouton { align-self: flex-start; margin-top: var(--spacing--space-pico); }

/* Le formulaire à bascule : la photo à gauche, le formulaire de /contact à droite. */
.form_recit { display: grid; grid-template-columns: 5fr 7fr; gap: var(--stoud-espace-rangees); scroll-margin-top: var(--haut-collant, 159px); }
.form_recit_photo { position: relative; margin: 0; border-radius: var(--_🔘-radius---general--default); overflow: hidden; min-height: 32rem; }
.form_recit_photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.form_recit_photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--_🎨-color--base---base--dark-0) 50%, var(--_🎨-color--base---base--dark-64)); }
.form_recit_photo .label-large { position: absolute; z-index: 1; left: var(--spacing--space-xx-small); bottom: var(--spacing--space-xx-small); color: var(--_🎨-color--base---base--light-100); }
.form_recit_droite { display: flex; flex-direction: column; gap: var(--spacing--space-small); min-width: 0; }
.form_recit_tete { display: flex; flex-direction: column; gap: var(--spacing--space-pico); }
.form_recit_tete h2, .form_recit_tete p { margin: 0; }
/* La bascule « Un bureau · Le collectif » : un interrupteur à deux positions, au-dessus des champs. */
.bascule_recit { display: inline-grid; grid-template-columns: 1fr 1fr; position: relative; margin: 0 0 var(--spacing--space-small); padding: 4px; border: 0; border-radius: var(--_🔘-radius---ui--button-base); background: var(--_🎨-color--base---base--dark-4); min-width: 0; }
.bascule_recit legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bascule_recit label { position: relative; z-index: 1; margin: 0; padding: 10px 20px; text-align: center; font-weight: 500; cursor: pointer; color: var(--_🎨-color--base---base--dark-64); white-space: nowrap; }
.main-wrapper .bascule_recit label { transition: color var(--stoud-duree-rapide) var(--stoud-courbe); }
.bascule_recit input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bascule_recit label:has(input:checked) { color: var(--_🎨-color--base---base--light-100); }
.bascule_recit label:has(input:focus-visible) { outline: 2px solid var(--stoud-jaune); outline-offset: 2px; border-radius: var(--_🔘-radius---ui--button-base); }
.bascule_recit::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--_🔘-radius---ui--button-base); background: var(--_🎨-color--base---base--dark-100); }
.main-wrapper .bascule_recit::before { transition: transform var(--stoud-duree) var(--stoud-courbe); }
[data-parcours="collectif"] .bascule_recit::before { transform: translateX(100%); }
[data-parcours="bureau"] [data-pour="collectif"], [data-parcours="collectif"] [data-pour="bureau"] { display: none; }
/* Mode édition : les champs des deux parcours restent visibles (leurs étiquettes se modifient). */
html.unik-edition .form_recit [data-pour] { display: flex; }
html.unik-edition .registre_note { display: block; }
html.unik-edition .form_recit_photo { display: block; min-height: 16rem; }

@media (max-width: 991px) {
  .registre_recit, .lieu_recit, .form_recit { grid-template-columns: minmax(0, 1fr); gap: var(--stoud-espace-blocs); }
  .registre_photos { min-height: 0; aspect-ratio: 4 / 3; order: -1; }
  .lieu_photo { min-height: 0; aspect-ratio: 4 / 3; }
  .form_recit_photo { display: none; }
  .registre_note { display: none; }
}
@media (max-width: 767px) {
  .recit_enonce_bas { grid-template-columns: minmax(0, 1fr); }
  .recit_enonce_bas .paragraph, .recit_enonce_bas .cta_tertiary { grid-column: 1 / -1; justify-self: start; }
  .recit_bande { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .recit_bande figure { aspect-ratio: 1; }
  .recit_bande figure:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .registre_rangee { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: var(--spacing--space-minimal); padding: var(--spacing--space-tiny) 0; }
  .registre_rangee .registre_lien { grid-column: 2; }
  .lieu_chiffre { min-height: 8rem; }
  .lieu_chiffre .heading-style-h1 { font-size: var(--_🔠-typography---size--h3); line-height: 1; }
  .gains_recit { grid-template-columns: minmax(0, 1fr); }
  .gain_carte { min-height: 0; }
  .bascule_recit { display: grid; width: 100%; }
  .bascule_recit label { padding: 10px 8px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .main-wrapper .registre_photos img, .main-wrapper .registre_rangee, .main-wrapper .registre_rangee h3, .main-wrapper .registre_lien > span:last-child, .main-wrapper .bascule_recit::before, .main-wrapper .bascule_recit label { transition: none; }
  .registre_photos img { transform: none; }
}