/*
 * Le style de la version iPhone : celui de l'appli Android (ui/theme), traduit
 * pour le navigateur. Les couleurs viennent de couleurs.css, écrit d'après
 * Color.kt ; formes (Shape.kt), espaces (Dimens.kt) et typographie (Type.kt)
 * sont reportés ici à la main.
 */

@font-face { font-family: "Elan"; font-weight: 600; font-display: swap; src: url("polices/elan_semibold.ttf") format("truetype"); }
@font-face { font-family: "Elan"; font-weight: 700; font-display: swap; src: url("polices/elan_bold.ttf") format("truetype"); }
@font-face { font-family: "Elan"; font-weight: 800; font-display: swap; src: url("polices/elan_extrabold.ttf") format("truetype"); }

:root {
    /* Shape.kt */
    --forme-tres-petite: 10px;
    --forme-petite: 14px;
    --forme-moyenne: 22px;
    --forme-grande: 30px;
    --forme-tres-grande: 40px;
    /* Dimens.kt */
    --espace-xs: 4px;
    --espace-sm: 8px;
    --espace-md: 12px;
    --espace-lg: 16px;
    --espace-xl: 24px;
    --espace-xxl: 32px;
    --marge-ecran: 24px;
    --ecart-de-section: 32px;
    --marge-de-carte: 24px;
    /* La barre du bas, et ce qu'il faut laisser sous le contenu pour qu'elle ne le cache pas. */
    --hauteur-barre: 80px;
    --bas-protege: env(safe-area-inset-bottom, 0px);
    --haut-protege: env(safe-area-inset-top, 0px);
    --police-systeme: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--background);
    color: var(--on-background);
    font-family: var(--police-systeme);
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.1px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

button { font: inherit; color: inherit; }

/* ---------- Type.kt ---------- */
.display-large  { font-family: "Elan", var(--police-systeme); font-weight: 800; font-size: 56px; line-height: 62px; letter-spacing: -1.2px; font-feature-settings: "tnum"; }
.display-medium { font-family: "Elan", var(--police-systeme); font-weight: 800; font-size: 44px; line-height: 50px; letter-spacing: -0.8px; font-feature-settings: "tnum"; }
.display-small  { font-family: "Elan", var(--police-systeme); font-weight: 800; font-size: 34px; line-height: 42px; letter-spacing: -0.5px; font-feature-settings: "tnum"; }
.headline-large  { font-family: "Elan", var(--police-systeme); font-weight: 700; font-size: 30px; line-height: 38px; letter-spacing: -0.4px; }
.headline-medium { font-family: "Elan", var(--police-systeme); font-weight: 700; font-size: 26px; line-height: 34px; letter-spacing: -0.3px; }
.headline-small  { font-family: "Elan", var(--police-systeme); font-weight: 700; font-size: 22px; line-height: 30px; letter-spacing: -0.2px; }
.title-large  { font-family: "Elan", var(--police-systeme); font-weight: 600; font-size: 20px; line-height: 28px; letter-spacing: -0.1px; }
.title-medium { font-weight: 500; font-size: 17px; line-height: 24px; }
.title-small  { font-weight: 500; font-size: 15px; line-height: 22px; }
.body-large   { font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: 0.1px; }
.body-medium  { font-weight: 400; font-size: 14px; line-height: 22px; letter-spacing: 0.15px; }
.body-small   { font-weight: 400; font-size: 13px; line-height: 20px; letter-spacing: 0.2px; }
.label-large  { font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0.4px; }
.label-medium { font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: 0.5px; }
.label-small  { font-weight: 500; font-size: 11px; line-height: 16px; letter-spacing: 0.6px; }
.surtitre     { font-weight: 500; font-size: 11px; line-height: 16px; letter-spacing: 2px; text-transform: uppercase; }
.discret { color: var(--on-surface-variant); }

h1, h2, h3, p { margin: 0; }

/* ---------- La page ---------- */
.ecran {
    min-height: 100dvh;
    padding: calc(var(--haut-protege) + var(--espace-lg)) var(--marge-ecran)
             calc(var(--hauteur-barre) + var(--bas-protege) + 40px);
}
.ecran > * + * { margin-top: var(--espace-xl); }

.carte {
    background: var(--surface-container-low);
    border-radius: var(--forme-grande);
    padding: var(--marge-de-carte);
}
.carte-pleine {
    background: var(--primary-container);
    color: var(--on-primary-container);
    border-radius: var(--forme-grande);
    padding: var(--marge-de-carte);
}

.grille-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace-md);
}

.figure { display: block; width: 100%; height: 100%; }

/* ---------- Boutons ---------- */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-sm);
    min-height: 56px;
    padding: 0 var(--espace-xl);
    border: none;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}
.bouton:active { filter: brightness(0.92); }
.bouton-tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.bouton-texte {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--primary); border: none;
    padding: 0 var(--espace-md); min-height: 44px; border-radius: 999px;
    font-weight: 600; font-size: 15px; cursor: pointer;
}
.bouton-texte:active { background: color-mix(in srgb, var(--primary) 12%, transparent); }

/* ---------- La barre de navigation du bas ---------- */
.barre {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    padding: var(--espace-sm) var(--espace-sm) calc(var(--espace-sm) + var(--bas-protege));
    background: color-mix(in srgb, var(--surface-container) 92%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent);
    z-index: 10;
}
.barre a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-top: 4px;
    color: var(--on-surface-variant);
    text-decoration: none;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.barre .pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 32px;
    border-radius: 16px;
    transition: background 0.2s;
}
.barre a[aria-current="page"] { color: var(--on-surface); }
.barre a[aria-current="page"] .pastille { background: var(--secondary-container); color: var(--on-secondary-container); }
.barre svg { width: 24px; height: 24px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- La séance (plein écran, comme sur Android : ni barre du bas, ni marge) ---------- */
.seance {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: calc(var(--haut-protege) + var(--espace-sm)) var(--marge-ecran) calc(var(--bas-protege) + var(--espace-md));
}
.seance-haut { display: flex; align-items: center; gap: var(--espace-sm); }
.seance-haut .progression { flex: 1; min-width: 0; }
.barre-progres { height: 8px; border-radius: 4px; background: var(--surface-container-high); overflow: hidden; }
.barre-progres > div { height: 100%; border-radius: 4px; background: var(--primary); transition: width 0.4s; }
.bouton-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border: none; border-radius: 24px;
    background: transparent; color: var(--on-surface); cursor: pointer;
}
.bouton-icone:active { background: var(--surface-container-high); }
.lien { background: none; border: none; color: var(--primary); padding: 4px 0; font-weight: 500; font-size: 14px; cursor: pointer; }
.seance-centre {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--espace-md);
    min-height: 0;
    /* Le milieu défile si l'aide est longue : les boutons du bas restent à portée. */
    overflow-y: auto;
    padding: var(--espace-sm) 0;
}
.seance-centre > * { flex: none; }
.seance-figure { width: 100%; height: 30dvh; max-height: 300px; min-height: 160px; background: var(--surface-container-low); border-radius: var(--forme-grande); }
.seance-actions { display: flex; flex-direction: column; gap: var(--espace-sm); padding-top: var(--espace-sm); }
.rangee { display: flex; gap: var(--espace-md); }
.rangee > * { flex: 1; }
.bouton-large { width: 100%; }
.bouton-secondaire {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-sm);
    min-height: 52px; padding: 0 var(--espace-md); border-radius: 999px;
    border: 1px solid var(--outline-variant); background: transparent; color: var(--on-surface);
    font-weight: 600; font-size: 14px; line-height: 18px; white-space: nowrap; cursor: pointer;
}
.bouton-secondaire:active { background: var(--surface-container-high); }

/* Le compte des répétitions : − nombre + */
.compteur { display: flex; align-items: center; justify-content: center; gap: var(--espace-xl); }
.compteur .bouton-icone { width: 56px; height: 56px; border-radius: 28px; background: var(--surface-container-high); }
.compteur .nombre { min-width: 3ch; }

/* L'anneau d'un minuteur : un dégradé conique, et le nombre au centre. */
.anneau {
    --part: 0;
    position: relative;
    width: min(62vw, 240px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--primary) calc(var(--part) * 360deg), var(--surface-container-high) 0);
    display: flex; align-items: center; justify-content: center;
}
.anneau::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--background); }
.anneau > * { position: relative; }

.puce {
    display: inline-flex; align-items: center; gap: var(--espace-sm);
    padding: 6px 6px 6px 14px; border-radius: 999px;
    background: var(--inverse-surface); color: var(--inverse-on-surface); font-size: 14px;
}
.puce button { background: none; border: none; color: var(--inverse-primary); font-weight: 600; padding: 6px 10px; cursor: pointer; }

.pas { display: flex; align-items: center; justify-content: space-between; padding: var(--espace-md) 0; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent); }
.pas .compteur { gap: var(--espace-md); }

/* Les choix de fin (ressenti, difficulté) */
.choix { display: flex; flex-direction: column; gap: var(--espace-sm); width: 100%; }
.choix button {
    min-height: 56px; border-radius: var(--forme-moyenne); border: none;
    background: var(--surface-container); color: var(--on-surface);
    font-size: 17px; font-weight: 500; cursor: pointer;
}
.choix button:active { background: var(--secondary-container); }

/* Les boîtes de dialogue */
.voile {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(0, 0, 0, 0.42);
    display: flex; align-items: flex-end; justify-content: center;
    padding: var(--espace-lg) var(--espace-lg) calc(var(--bas-protege) + var(--espace-lg));
}
.dialogue {
    width: 100%; max-width: 480px; max-height: 80dvh; overflow: auto;
    background: var(--surface-container-high); color: var(--on-surface);
    border-radius: var(--forme-tres-grande); padding: var(--espace-xl);
}
.dialogue > * + * { margin-top: var(--espace-md); }
.dialogue .boutons { display: flex; flex-direction: column; gap: var(--espace-sm); margin-top: var(--espace-xl); }

.liste-plan { list-style: none; margin: 0; padding: 0; }
.liste-plan li { display: flex; align-items: center; gap: var(--espace-md); padding: var(--espace-sm) 0; }
.liste-plan .mini-figure { width: 72px; height: 72px; flex: none; border-radius: var(--forme-petite); background: var(--surface-container-low); }
.carte-cliquable { cursor: pointer; text-decoration: none; color: inherit; display: block; }

/* ---------- Les briques des écrans (web/ui/Composants.kt) ---------- */
.carte-m3 { color: var(--on-surface); overflow: hidden; position: relative; }
.touchable { cursor: pointer; -webkit-user-select: none; user-select: none; transition: transform 0.12s, filter 0.12s; }
.touchable:active { transform: scale(0.985); filter: brightness(0.96); }
.en-tete-de-section { padding-top: var(--espace-lg); }
.colonne { display: flex; flex-direction: column; }
.colonne-sm > * + * { margin-top: var(--espace-sm); }
.colonne-xs > * + * { margin-top: var(--espace-xs); }
.ligne { display: flex; align-items: center; }
.ligne-sm { display: flex; align-items: center; gap: var(--espace-sm); }
.etire { flex: 1; min-width: 0; }
.primaire { color: var(--primary); }
.deux-lignes { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.quatre-lignes { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.une-ligne { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pastille-filtre {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 12px; border-radius: var(--forme-petite);
    border: 1px solid var(--outline-variant); background: transparent; color: var(--on-surface-variant);
    font-size: 14px; font-weight: 500; letter-spacing: 0.1px; white-space: nowrap; cursor: pointer;
}
.pastille-filtre.choisie { color: var(--on-secondary-container); }
.point-de-ton { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.etiquette { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: var(--forme-petite); white-space: nowrap; flex: none; }
.barre-de-ton { width: 4px; height: 40px; border-radius: 2px; flex: none; }
.barre-de-progression { height: 4px; border-radius: 2px; background: var(--secondary-container); overflow: hidden; }
.barre-de-progression > div { height: 100%; border-radius: 2px; background: var(--primary); }
.encart { display: flex; gap: var(--espace-sm); align-items: flex-start; padding: var(--espace-md); border-radius: var(--forme-petite); background: var(--secondary-container); color: var(--on-secondary-container); }
.encart-texte > * + * { margin-top: var(--espace-xs); }
.miniature { width: 60px; height: 40px; flex: none; border-radius: var(--forme-petite); overflow: hidden; background: var(--surface-container-low); }

/* Les rangées qui défilent jusqu'au bord de l'écran (LazyRow « bleedHorizontally »). */
.rangee-defilante {
    display: flex; gap: var(--espace-sm); overflow-x: auto; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--marge-ecran)); padding: 0 var(--marge-ecran) var(--espace-sm);
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding: 0 var(--marge-ecran);
}
.rangee-defilante::-webkit-scrollbar { display: none; }

/* Le curseur (Slider) : la piste remplie jusqu'à la poignée. */
.curseur { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; }
.curseur::-webkit-slider-runnable-track {
    height: 16px; border-radius: 8px;
    background: linear-gradient(to right, var(--primary) var(--part, 0%), var(--secondary-container) var(--part, 0%));
}
.curseur::-webkit-slider-thumb {
    -webkit-appearance: none; width: 4px; height: 44px; margin-top: -14px; border-radius: 2px; background: var(--primary);
    box-shadow: 0 0 0 6px var(--background);
}

/* Les feuilles qui montent du bas (ModalBottomSheet). */
.voile-feuille { padding: 0; align-items: flex-end; animation: voile-apparait 0.2s ease-out; }
.feuille {
    width: 100%; max-width: 640px; max-height: 92dvh; display: flex; flex-direction: column;
    background: var(--surface-container-low); color: var(--on-surface);
    border-radius: 28px 28px 0 0; animation: feuille-monte 0.28s cubic-bezier(0.2, 0, 0, 1);
}
.poignee { width: 32px; height: 4px; border-radius: 2px; background: var(--on-surface-variant); opacity: 0.4; margin: 22px auto 12px; flex: none; cursor: pointer; }
.feuille-contenu {
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0 var(--marge-ecran) calc(var(--espace-xl) + var(--bas-protege));
}
.feuille-contenu > * + * { margin-top: var(--espace-md); }
@keyframes feuille-monte { from { transform: translateY(100%); } to { transform: none; } }
@keyframes voile-apparait { from { background: rgba(0, 0, 0, 0); } }

/* Le bandeau d'annulation (Snackbar). */
.bandeau {
    position: fixed; left: var(--espace-md); right: var(--espace-md);
    bottom: calc(var(--hauteur-barre) + var(--bas-protege) + var(--espace-md)); z-index: 40;
    display: flex; align-items: center; gap: var(--espace-sm);
    min-height: 48px; padding: 6px 8px 6px 16px; border-radius: 4px;
    background: var(--inverse-surface); color: var(--inverse-on-surface);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
.bandeau > span { flex: 1; }
.bandeau .bouton-texte { color: var(--inverse-primary); }

/* Un champ de saisie (OutlinedTextField). */
.champ {
    width: 100%; height: 56px; padding: 0 16px; border-radius: var(--forme-moyenne);
    border: 1px solid var(--outline); background: transparent; color: var(--on-surface);
    font: inherit; font-size: 16px; outline: none;
}
.champ:focus { border: 2px solid var(--primary); padding: 0 15px; }
.champ-avec-icone { position: relative; }
.champ-avec-icone .champ { padding-left: 48px; }
.champ-avec-icone .champ:focus { padding-left: 47px; }
.champ-avec-icone > .icone-gauche { position: absolute; left: 14px; top: 16px; color: var(--on-surface-variant); pointer-events: none; }
.champ-avec-icone > .bouton-icone { position: absolute; right: 4px; top: 4px; }
.etiquette-de-champ { display: block; margin-bottom: 4px; color: var(--on-surface-variant); }

/* La case à cocher (Checkbox). */
.case {
    width: 18px; height: 18px; flex: none; border-radius: 2px; border: 2px solid currentColor;
    display: inline-flex; align-items: center; justify-content: center; margin: 15px;
}
.case.cochee { background: currentColor; }

/* ---------- L'onglet Rituel (web/ecrans/rituel) ---------- */
.ecran-liste > * + * { margin-top: var(--espace-sm); }
.ecran-liste > .en-tete-de-section { margin-top: var(--espace-sm); }

/* La carte de marque (HorizonSurface) : le ciel en dégradé, ses étoiles et son halo dessinés derrière. */
.carte-horizon { position: relative; overflow: hidden; border-radius: var(--forme-tres-grande); }
.fond-de-carte { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.contenu-de-carte { position: relative; }
.carte-du-jour .contenu-de-carte { padding: var(--marge-de-carte); display: flex; flex-direction: column; gap: var(--espace-sm); }
.carte-padding .contenu-de-carte, .carte-m3.carte-padding { padding: var(--marge-de-carte); }
.carte-m3.carte-padding-md { padding: var(--espace-md); }
.carte-m3.carte-padding > * + *, .carte-m3.carte-padding-md > * + * { margin-top: var(--espace-xs); }

.bouton-heros {
    display: flex; align-items: center; justify-content: center; gap: var(--espace-sm);
    width: 100%; min-height: 58px; border-radius: 20px; border: none; cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1);
}
.bouton-heros:active { transform: scale(0.97); }
.bouton-heros.fantome { min-height: 50px; background: transparent; border: 1px solid; }
.pastille-heros { flex: none; background: transparent; border: 1px solid; border-radius: 16px; padding: 8px 12px; cursor: pointer; }
.case-de-phase { display: flex; align-items: center; min-height: 48px; border-radius: var(--forme-moyenne); padding: 4px 0; }
.case-de-phase .case { margin: 0 12px 0 14px; }
.case-de-phase .case .icone, .case-de-phase .case > span { display: inline-flex; }

.ligne-de-detail { padding: var(--espace-sm) 0; border-radius: var(--forme-petite); }
.chevron { display: inline-flex; transition: transform 0.25s; }
.chevron.ouvert { transform: rotate(180deg); }
.apparait { animation: apparait 0.25s ease-out; }
@keyframes apparait { from { opacity: 0; transform: translateY(-4px); } }
.ligne-de-mouvement { padding: var(--espace-xs) 0; border-radius: var(--forme-petite); }
.ligne-de-mouvement .barre-de-ton { margin-right: var(--espace-sm); }
.quantite { max-width: 112px; text-align: right; }

/* Les tuiles (souplesse, dehors, intervalles, programmes, catalogue) : une colonne qui pousse son pied en bas. */
.carte-m3.tuile { display: flex; flex-direction: column; padding: var(--espace-md); }
.tuile-illustration { position: relative; border-radius: var(--forme-petite); overflow: hidden; }
.coin-haut-droit { position: absolute; top: 4px; right: 4px; display: inline-flex; }
.coin-bas-gauche {
    position: absolute; left: 0; bottom: 0; padding: 1px 6px; border-radius: var(--forme-petite);
    background: var(--secondary-container); color: var(--on-secondary-container);
}
.pied-de-tuile { padding-top: var(--espace-sm); font-weight: 500; }
.tuile > .etire { flex: 1; }
.icone-teintee {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: var(--forme-petite); background: var(--secondary-container); color: var(--on-secondary-container);
}
.coche-de-tuile {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    margin: -4px -6px 0 4px; border: none; border-radius: 16px; background: transparent; cursor: pointer; flex: none;
}

/* La séance à deux. */
.duo-scene { display: flex; justify-content: center; gap: var(--espace-lg); padding: var(--espace-sm) 0; border-radius: var(--forme-moyenne); }
.cadre-de-binome { border-radius: var(--forme-moyenne); padding: 2px; overflow: hidden; flex: none; }
.duo-personnes { display: flex; justify-content: center; gap: var(--espace-xl); }
.pastilles-qui-passent { display: flex; flex-wrap: wrap; gap: var(--espace-xs) var(--espace-sm); }
.nuancier { width: 48px; height: 48px; border: none; background: transparent; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.nuance { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }

/* Le paysage des sorties dehors et le personnage, de dos, prêt à partir. */
.scene-dehors { position: relative; width: 100%; height: 100%; overflow: hidden; }
.figure-dehors { position: absolute; left: 50%; bottom: 6px; aspect-ratio: 1; transform: translateX(-50%); }

.a-droite { display: flex; justify-content: flex-end; }
.bouton-compact { min-height: 40px; padding: 0 var(--espace-lg); font-size: 14px; }
.cadre-de-figure { background: var(--surface-container-low); border-radius: var(--forme-grande); padding: var(--espace-lg); aspect-ratio: 1.5 / 1; }
.cadre-de-figure .figure { height: 100%; }
.texte-multiligne { white-space: pre-line; }
.bouton-icone.ecarter { width: 44px; height: 44px; margin: -8px -8px 0 0; color: inherit; opacity: 0.7; }
.bouton[disabled] { opacity: 0.38; cursor: default; }

/* ---------- Les écrans secondaires (barre du haut, bouton flottant) ---------- */
.ecran-secondaire { padding-top: var(--haut-protege); }
.barre-du-haut {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 4px;
    margin: 0 calc(-1 * var(--marge-ecran)); padding: 8px 8px 8px 4px; min-height: 64px;
    background: var(--background);
}
.barre-du-haut + * { margin-top: var(--espace-sm); }
.liste-md > * + * { margin-top: var(--espace-md); }
.liste-sm > * + * { margin-top: var(--espace-sm); }
.carte-m3.carte-padding-lg { padding: var(--espace-lg); }
.gras { font-weight: 600; }
.bouton-flottant {
    position: fixed; right: var(--espace-lg); z-index: 20;
    bottom: calc(var(--hauteur-barre) + var(--bas-protege) + var(--espace-lg));
    display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px 0 16px;
    border: none; border-radius: 16px; background: var(--primary-container); color: var(--on-primary-container);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12); cursor: pointer;
}
.bouton-flottant:active { filter: brightness(0.95); }
.etat-vide { display: flex; flex-direction: column; align-items: center; gap: var(--espace-md); padding: var(--espace-xxl) 0; text-align: center; }
.icone-d-en-tete {
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
    border-radius: 50%; background: var(--secondary-container); color: var(--on-secondary-container);
}
.jauge { height: 8px; border-radius: 4px; background: var(--surface-container-highest); overflow: hidden; }
.jauge > div { height: 100%; border-radius: 4px; }
.rang-de-zone { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.interrupteur {
    position: relative; width: 52px; height: 32px; border-radius: 16px; flex: none;
    background: var(--surface-container-highest); border: 2px solid var(--outline); transition: background 0.2s;
}
.interrupteur > span {
    position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--outline); transition: all 0.2s;
}
.interrupteur.actif { background: var(--primary); border-color: var(--primary); }
.interrupteur.actif > span { left: 22px; top: 2px; width: 24px; height: 24px; background: var(--on-primary); }
.ecran.avec-bouton-flottant { padding-bottom: calc(var(--hauteur-barre) + var(--bas-protege) + 104px); }
.liste-lg > * + * { margin-top: var(--espace-lg); }
.cadre-chemin { background: var(--surface-container-low); border-radius: var(--forme-grande); padding: var(--espace-lg); }
.cadre-chemin > * + * { margin-top: var(--espace-sm); }
.ligne-interrupteur { padding: var(--espace-xs) 0 var(--espace-xxl); border-radius: var(--forme-petite); }
.ligne-d-exercice { padding: var(--espace-md) 0; }

/* ---------- Les minuteurs d'intervalles et les sorties dehors ---------- */
.seance-reglage { padding-top: var(--haut-protege); }
.seance-reglage .barre-du-haut { margin: 0 calc(-1 * var(--marge-ecran)); }
.seance-defile { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: var(--espace-md); }
.seance-defile-tout { overflow-y: auto; }
.vignette-carree { width: 56px; height: 56px; flex: none; border-radius: var(--forme-petite); overflow: hidden; }
.bouton-tonal-rond {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    border: none; border-radius: 50%; background: var(--secondary-container); color: var(--on-secondary-container); cursor: pointer;
}
.bouton-tonal-rond[disabled], .bouton-secondaire[disabled] { opacity: 0.38; cursor: default; }
.pastille-de-phase { display: inline-flex; padding: 8px 16px; border-radius: 999px; }
.figure-d-intervalle { width: min(100%, 34dvh); aspect-ratio: 1; border-radius: var(--forme-grande); overflow: hidden; flex: none; }
.chiffres { font-feature-settings: "tnum"; }
.bouton-haut { min-height: 64px; }
.liste-xs > * + * { margin-top: var(--espace-xs); }
.sortie { min-height: 100dvh; display: flex; flex-direction: column; padding-top: var(--haut-protege); padding-bottom: var(--bas-protege); }
.sortie-scene { height: 240px; flex: none; }
.sortie-texte { padding: var(--espace-lg) var(--marge-ecran) var(--espace-xl); }
.fermer-sur-scene { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, 0.25); }
.option-d-etape {
    display: flex; align-items: center; gap: var(--espace-md); padding: var(--espace-md);
    border-radius: var(--forme-moyenne); background: var(--surface-container-low); border: 2px solid transparent;
}
.option-d-etape.choisie { background: var(--secondary-container); border-color: var(--primary); }
.sortie-en-route { height: 100dvh; overflow: hidden; }
.sortie-scene-haute { flex: 0.42; min-height: 0; }
.sortie-milieu {
    flex: 0.58; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
    padding: var(--espace-md) var(--marge-ecran); text-align: center;
}

/* ---------- Le bilan (web/ecrans/Bilan.kt), les badges, les plats en photo ---------- */
.bilan {
    min-height: 100dvh; display: flex; flex-direction: column; gap: var(--espace-lg);
    padding: calc(var(--haut-protege) + var(--espace-xxl)) var(--marge-ecran) calc(var(--bas-protege) + var(--espace-xxl));
}
.roue { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--secondary-container); border-top-color: var(--primary); animation: tourne 0.9s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.pastille-d-icone { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; }
.barre-arrondie { height: 6px; width: 100%; border-radius: 3px; background: var(--surface-container-highest); overflow: hidden; }
.barre-arrondie > div { height: 100%; border-radius: 3px; background: var(--primary); }
.barre-arrondie.sur-ciel { background: rgba(255, 255, 255, 0.18); }
.barre-arrondie.sur-ciel > div { background: var(--hero-glow); }
.badges-qui-eclosent { gap: var(--espace-md); align-items: stretch; }
.cellule-de-badge { width: 150px; min-height: 190px; flex: none; display: flex; animation: eclot 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes eclot { from { opacity: 0; transform: scale(0.6); } }
.carte-de-badge {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--espace-sm); text-align: center;
    padding: var(--espace-lg); border-radius: var(--forme-moyenne);
}
.medaille { position: relative; flex: none; }
.coeur-de-medaille {
    position: absolute; left: 17%; top: 17%; width: 66%; height: 66%; transform: translateY(-4.5%);
    border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.confettis { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
.carte-photo { position: relative; overflow: hidden; border-radius: var(--forme-tres-grande); display: flex; flex-direction: column; justify-content: flex-end; }
.photo-de-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: apparait-photo 0.22s ease-out; }
@keyframes apparait-photo { from { opacity: 0; } }
.voile-de-photo { position: absolute; inset: 0; pointer-events: none; }
.texte-de-photo { position: relative; padding: var(--espace-lg) var(--marge-de-carte) 20px; }
.texte-de-photo.grande { padding-bottom: var(--marge-de-carte); }
.texte-de-photo > * + * { margin-top: var(--espace-xs); }
.ombre-lisible { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }

/* ---------- L'écran de séance fidèle à Android (web/ecrans/seance/PiecesDeSeance.kt) ---------- */
.au-centre { display: flex; justify-content: center; }
.puce-d-annulation {
    display: inline-flex; align-items: center; padding: 0 4px 0 16px; border-radius: var(--forme-grande);
    background: var(--surface-container-high); color: var(--on-surface);
}
.anneau-de-progression {
    position: relative; flex: none; border-radius: 50%;
    background: conic-gradient(var(--couleur) calc(var(--part) * 360deg), var(--surface-container-highest) 0);
    transition: --part 0.9s;
}
.anneau-de-progression::before { content: ""; position: absolute; inset: var(--trait); border-radius: 50%; background: var(--background); }
.dans-l-anneau { position: absolute; inset: var(--trait); display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; }
.disque-du-souffle { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--secondary) 18%, transparent); }
.bandeau-du-tour {
    display: flex; align-items: center; gap: var(--espace-sm); padding: 4px var(--espace-md);
    border-radius: var(--forme-grande); background: var(--surface-container-low);
}
.bloc-d-exercice { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espace-sm); }
.bloc-d-exercice.compact { gap: var(--espace-xs); }
.illustration-de-seance {
    flex: 1 1 auto; min-height: 132px; max-height: 300px; width: 100%;
    border-radius: var(--forme-tres-grande); background: var(--surface-container-low); padding: var(--espace-md);
}
.bloc-d-exercice.compact .illustration-de-seance { flex: 0 0 auto; height: clamp(132px, 32dvh, 300px); }
.nombre-de-reps { padding: 4px 16px; border-radius: var(--forme-moyenne); }
.rebond { animation: rebond 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes rebond { from { transform: scale(1.18); } }
.carte-d-aide { width: 100%; padding: var(--espace-md); border-radius: var(--forme-moyenne); background: var(--surface-container-low); }
.apercu-du-suivant { width: 112px; height: 72px; flex: none; border-radius: var(--forme-moyenne); background: var(--surface-container-low); overflow: hidden; }
.rangee-d-icones { display: flex; justify-content: space-evenly; }
.rangee-repos { padding-bottom: var(--espace-sm); }
.reglage-des-series { justify-content: space-evenly; }
.cadre-de-figure.sans-fond { background: transparent; padding: 0; width: 100%; }
.ecran-de-fin {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column; justify-content: space-evenly; gap: var(--espace-lg);
    padding: var(--espace-md) 0;
}
.ressentis { align-items: flex-end; }
.ressenti { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4px 8px; border-radius: var(--forme-petite); text-align: center; color: var(--on-surface-variant); }
.ressenti.allume { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.point-de-ressenti { display: block; border-radius: 50%; background: var(--tertiary); }
.fete-de-fin { position: relative; width: 100%; height: 200px; margin-bottom: var(--espace-md); border-radius: var(--forme-tres-grande); overflow: hidden; }
.figure-de-fete { position: absolute; left: 50%; bottom: 6px; width: 132px; height: 112px; transform: translateX(-50%); }