/* Fraunces (SIL Open Font License 1.1), auto-hébergée : aucune requête vers un service externe.
   Police variable : un seul fichier couvre les graisses 500 et 600. Voir fiche 04. */
@font-face {
    font-family: "Fraunces";
    src: url("fonts/fraunces-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --display: "Fraunces", Georgia, "Times New Roman", serif;
    --background: #0b0b0c;
    --surface: #131315;
    --surface-raised: #19191c;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);
    --gold: #c9a96a;
    --gold-light: #e0c896;
    --cream: #f1eadc;
    --text: #d1cdc4;
    --muted: #8f8b84;
    --green: #8fbd8a;
    --red: #d98b84;
    --amber: #e0b96a;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    /* Hauteur minimale explicite : dans une WebView, une page courte laissait apparaître
       le fond uni de l'élément html sous le dégradé du body. */
    min-height: 100vh;
    background:
        radial-gradient(circle at 80% 10%, rgba(201, 169, 106, 0.12), transparent 30rem),
        linear-gradient(180deg, #0d0d0f 0%, #09090a 100%);
}

a {
    color: inherit;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Structure ---------------------------------------------------------------- */

.shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding-bottom: 56px;
}

.topbar {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 169, 106, 0.65);
    border-radius: 14px;
    color: var(--gold-light);
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.08em;
    clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
}

.brand strong,
.brand small {
    display: block;
}

.brand strong {
    color: var(--cream);
    font-family: var(--display);
    font-size: 17px;
    letter-spacing: 0.18em;
}

.brand small {
    margin-top: 3px;
    color: var(--gold);
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-link {
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    text-decoration: none;
    background: none;
    cursor: pointer;
}

.nav-link:hover,
.nav-link.active {
    color: var(--cream);
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.035);
}

.inline-form {
    display: inline;
    margin: 0;
}

.foundation-badge,
.platform-pill,
.badge {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.035);
}

.foundation-badge {
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --- Typographie ------------------------------------------------------------------ */

.eyebrow {
    margin: 0 0 18px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.eyebrow a {
    color: inherit;
    text-decoration: none;
}

.eyebrow a:hover {
    text-decoration: underline;
}

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

h1,
h2,
h3 {
    color: var(--cream);
    font-family: var(--display);
    font-weight: 500;
}

h1 {
    margin-bottom: 20px;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

h2 {
    margin-bottom: 16px;
    font-size: 1.35rem;
}

h3 {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

/* Un sous-titre placé après un formulaire, un graphique ou une liste ne colle pas au bloc précédent. */
.card > * + h3 {
    margin-top: 26px;
}

/* Les cartes « jour » du programme restent compactes. */
.card.day-detail > * + h3 {
    margin-top: 0;
}

.muted {
    color: var(--muted);
}

.small {
    font-size: 13px;
    line-height: 1.6;
}

code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.95em;
}

/* --- Pages ---------------------------------------------------------------------- */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 48px 0 28px;
}

.page-header h1 {
    margin-bottom: 8px;
}

.page-header .eyebrow {
    margin-bottom: 12px;
}

.status-page,
.auth-panel {
    max-width: 560px;
    padding: 72px 0 48px;
}

.status-page p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.7;
}

.auth-panel .platform-pill {
    margin-top: 40px;
}

.platform-pill {
    width: fit-content;
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 13px;
}

.platform-pill strong {
    color: var(--cream);
}

.status-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 12px rgba(143, 189, 138, 0.8);
}

/* --- Cartes et grilles ----------------------------------------------------------- */

.card {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
}

.card-highlight {
    border-color: rgba(201, 169, 106, 0.5);
    background: linear-gradient(145deg, rgba(201, 169, 106, 0.12), rgba(201, 169, 106, 0.03));
}

.card + .card,
.alert + .card,
.card + .alert {
    margin-top: 16px;
}

.two-columns {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 16px;
    align-items: start;
}

.empty-state {
    text-align: center;
    padding: 48px 24px;
}

.empty-state p {
    color: var(--muted);
}

.facts,
.credentials {
    margin: 0 0 16px;
}

.facts div,
.credentials div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.facts dt,
.credentials dt {
    color: var(--muted);
    font-size: 13px;
}

.facts dd,
.credentials dd {
    margin: 0;
    text-align: right;
    color: var(--cream);
}

.credentials .secret {
    font-size: 1.15rem;
    letter-spacing: 0.08em;
    color: var(--gold-light);
    user-select: all;
}

.temporary-password p {
    color: var(--text);
    line-height: 1.6;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.badge-ok {
    color: var(--green);
}

.badge-muted {
    color: var(--muted);
}

.badge-warn {
    color: var(--amber);
}

/* --- Formulaires --------------------------------------------------------------- */

.form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.field span {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.field small {
    color: var(--muted);
    font-size: 12px;
}

.field-inline {
    flex: 1 1 260px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Les champs numériques et de date passaient au travers : ils s'affichaient en rendu brut
   du navigateur, minuscules sur téléphone. Ils suivent désormais la même règle que les autres. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input:not([type]) {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--cream);
    font: inherit;
    font-size: 15px;
}

input:focus-visible {
    outline: 2px solid rgba(201, 169, 106, 0.7);
    outline-offset: 1px;
    border-color: transparent;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--cream);
    font: inherit;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.btn:hover {
    background: rgba(255, 255, 255, 0.07);
}

.btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.btn-primary {
    border-color: rgba(201, 169, 106, 0.7);
    background: linear-gradient(135deg, rgba(201, 169, 106, 0.95), rgba(201, 169, 106, 0.75));
    color: #1a150b;
    font-weight: 600;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
}

.btn-ghost {
    color: var(--text);
}

.btn-danger {
    border-color: rgba(217, 139, 132, 0.5);
    color: var(--red);
}

.btn-danger:hover {
    background: rgba(217, 139, 132, 0.12);
}

/* --- Alertes ----------------------------------------------------------------------- */

.alert {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.55;
}

.alert ul {
    margin: 0;
    padding-left: 18px;
}

.alert-error {
    border-color: rgba(217, 139, 132, 0.5);
    background: rgba(217, 139, 132, 0.1);
    color: #f0c9c4;
}

.alert-success {
    border-color: rgba(143, 189, 138, 0.5);
    background: rgba(143, 189, 138, 0.1);
    color: #cfe6cc;
}

.alert-info {
    border-color: rgba(201, 169, 106, 0.5);
    background: rgba(201, 169, 106, 0.1);
    color: var(--gold-light);
}

/* --- Tableaux ---------------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table th,
.table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.row-archived td {
    color: var(--muted);
}

.row-link {
    color: var(--cream);
    font-weight: 600;
    text-decoration: none;
}

.row-link:hover {
    color: var(--gold-light);
    text-decoration: underline;
}

/* --- Réactif ---------------------------------------------------------------------- */


/* --- Lot 2 : programmation ------------------------------------------------------------ */

.btn-sm {
    padding: 7px 12px;
    font-size: 13px;
}

.row-actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.field-inline-label {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

select {
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--cream);
    font: inherit;
    font-size: 14px;
}

select option {
    background: #16150e;
    color: var(--cream);
}

textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--cream);
    font: inherit;
    font-size: 15px;
    resize: vertical;
}

.week-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.week-tab {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.week-tab.current {
    border-color: rgba(143, 189, 138, 0.6);
}

.week-tab.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a150b;
    font-weight: 600;
}

.day-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.day-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 130px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(201, 169, 106, 0.12), rgba(201, 169, 106, 0.03));
    color: var(--cream);
    text-decoration: none;
    transition: border-color 120ms ease;
}

.day-card:hover {
    border-color: rgba(201, 169, 106, 0.6);
}

.day-card.rest {
    background: rgba(255, 255, 255, 0.02);
    color: var(--muted);
}

.day-name {
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.day-type {
    font-size: 14px;
    line-height: 1.3;
}

.day-meta {
    margin-top: auto;
    color: var(--muted);
    font-size: 12px;
}

.day-grid-detail {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* L'indice de glissement ne sert que sur téléphone, où la grille devient un carrousel. */
.day-swipe-hint {
    display: none;
}

.day-detail h3 {
    margin-bottom: 12px;
}

.day-detail.rest {
    opacity: 0.7;
}

.stat-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.25);
}

.stat-value {
    color: var(--gold-light);
    font-family: var(--display);
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Maxs sur les mouvements phares (page de suivi). */
.key-lifts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.key-lift {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.25);
}

.key-lift-name {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.key-lift-value {
    color: var(--gold-light);
    font-family: var(--display);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.key-lift.empty .key-lift-value {
    color: var(--muted);
}

.key-lift-detail {
    color: var(--muted);
    font-size: 12px;
}

/* Maximum théorique déduit d'une série de plusieurs répétitions. */
.key-lift-estimate {
    color: var(--gold);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px dotted var(--border-strong);
    align-self: flex-start;
    cursor: help;
}

/* Titre du graphique : rappelle en clair la mesure affichée quand on change de colonne. */
.chart-title {
    max-width: 480px;
    margin: 14px 0 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    color: var(--cream);
    font-family: var(--display);
    font-size: 1.15rem;
    text-align: center;
}

.chart-title-unit {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mini-chart + .chart-title,
.chart-title + .mini-chart {
    margin-top: 6px;
}

/* Le minuteur suit le défilement : entre deux séries, on ne le perd plus de vue. */
.rest-timer {
    position: sticky;
    top: 8px;
    z-index: 20;
}

/* Un exercice validé se replie en une ligne : la séance raccourcit à mesure qu'elle avance. */
.exercise-item.collapsed {
    padding-top: 12px;
    padding-bottom: 12px;
    opacity: 0.75;
}

.exercise-item.collapsed .exercise-head {
    margin: 0;
    flex-wrap: wrap;
    gap: 10px;
}

.exercise-item.collapsed:hover {
    opacity: 1;
}

/* Tableau de mensurations : chaque colonne appelle sa propre courbe. */
.col-toggle {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    border-bottom: 1px dotted var(--border-strong);
}

.col-toggle:hover {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
}

.col-toggle:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.measurements-table th.col-active .col-toggle {
    color: var(--gold-light);
    border-bottom: 2px solid var(--gold);
}

.measurements-table td.col-active {
    color: var(--cream);
    background: rgba(201, 169, 106, 0.07);
}

/* Progression : le vert et le rouge disent en un coup d'œil le sens de l'évolution. */
.delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.delta-up {
    color: var(--green);
}

.delta-down {
    color: var(--red);
}

.delta-flat {
    color: var(--muted);
}

/* Saisie directe d'un max, sous les tuiles. */
.key-lift-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 18px;
}

.key-lift-entry .field {
    flex: 1 1 150px;
    margin: 0;
}

.key-lift-entry .btn {
    flex: 0 0 auto;
}

.volume-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.volume-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 13px;
}

.volume-count {
    color: var(--gold-light);
    font-weight: 600;
}

.volume-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.volume-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

/* Comme la liste côté client : l'espacement est porté par chaque ligne, ce qui permet de
   souder une paire en superset. */
.exercise-editor {
    display: flex;
    flex-direction: column;
}

.exercise-editor > * {
    margin-bottom: 10px;
}

.exercise-editor > *:last-child {
    margin-bottom: 0;
}

.exercise-row {
    display: grid;
    grid-template-columns: 28px minmax(180px, 2fr) repeat(4, minmax(70px, 0.7fr)) minmax(140px, 1.4fr);
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.2);
}

/* Superset dans l'éditeur : même bulle que côté client. */
.exercise-row.superset,
.superset-joint + .exercise-row {
    border-color: rgba(201, 169, 106, 0.5);
    background: rgba(201, 169, 106, 0.06);
}

.exercise-editor > .exercise-row.superset {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: rgba(201, 169, 106, 0.14);
}

.exercise-editor > .superset-joint {
    margin-bottom: 0;
}

.superset-joint + .exercise-row {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: rgba(201, 169, 106, 0.14);
}

.superset-joint + .exercise-row.superset {
    border-radius: 0;
}

.exercise-index {
    padding-bottom: 12px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
}

.exercise-row input {
    padding: 9px 10px;
    font-size: 14px;
}

.exercise-tools {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Espacement porté par chaque élément et non par un « gap » de conteneur : c'est ce qui
   permet de coller deux exercices en superset pour n'en faire qu'une bulle. */
.exercise-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.exercise-list > li {
    margin-bottom: 10px;
}

.exercise-list > li:last-child {
    margin-bottom: 0;
}

.exercise-item {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.2);
}

/* --- Superset : deux exercices (ou plus) soudés en une seule bulle ------------------
   La carte du haut, le bandeau « Superset » et la carte du bas partagent la même teinte
   et le même liseré, et leurs coins se rejoignent : on lit le groupe d'un coup d'œil. */
.exercise-item.superset,
.superset-joint + .exercise-item {
    border-color: rgba(201, 169, 106, 0.5);
    background: rgba(201, 169, 106, 0.06);
}

/* Carte du haut : elle se prolonge vers le bandeau. Le bord qui les sépare reprend la
   teinte du groupe plutôt que d'être transparent, sinon le fond sombre de la page
   réapparaît en une fine ligne au raccord. */
.exercise-list > li.exercise-item.superset {
    margin-bottom: 0;
}

.exercise-item.superset {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: rgba(201, 169, 106, 0.14);
}

/* Carte du bas : elle prolonge le bandeau. */
.superset-joint + .exercise-item {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: rgba(201, 169, 106, 0.14);
}

/* Exercice pris entre deux liaisons (superset de trois) : aucun coin arrondi. */
.superset-joint + .exercise-item.superset {
    border-radius: 0;
}

/* Sélecteur aligné sur celui de la liste (« .exercise-list > li »), sinon la marge de
   10 px de la liste l'emporte et un écart sombre réapparaît sous le bandeau. */
.exercise-list > li.superset-joint {
    margin-bottom: 0;
}

.superset-joint {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-left: 1px solid rgba(201, 169, 106, 0.5);
    border-right: 1px solid rgba(201, 169, 106, 0.5);
    background: rgba(201, 169, 106, 0.06);
}

/* Les deux filets qui encadrent le mot relient visuellement les deux cartes. */
.superset-joint::before,
.superset-joint::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(201, 169, 106, 0.35);
}

.superset-joint span {
    flex: 0 0 auto;
    padding: 3px 10px;
    border: 1px solid rgba(201, 169, 106, 0.45);
    border-radius: 999px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.4;
}

.exercise-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    color: var(--cream);
}

.prescription {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
    font-size: 14px;
}

.prescription strong {
    color: var(--gold-light);
}

.exercise-notes,
.session-notes {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.video-link {
    color: var(--gold-light);
    font-size: 13px;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.template-card h2 {
    margin: 12px 0 6px;
    font-size: 1.2rem;
}



/* --- Lot 3 : suivi ---------------------------------------------------------------------- */

.progress-card {
    margin-bottom: 16px;
}

.workout-item.done {
    border-color: rgba(143, 189, 138, 0.5);
}

.suggestion {
    margin: 8px 0 0;
    color: var(--gold-light);
    font-size: 13px;
}

.sets-table {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    font-size: 14px;
}

.sets-table th {
    padding: 4px 6px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

.sets-table td {
    padding: 4px 6px;
}

.sets-table input,
.sets-table select {
    width: 100%;
    min-width: 64px;
    padding: 8px 10px;
    font-size: 14px;
}

.history-list {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.7;
}

.rest-timer {
    position: sticky;
    top: 8px;
    z-index: 5;
    margin-bottom: 16px;
    padding: 16px 20px;
    border: 1px solid rgba(201, 169, 106, 0.6);
    border-radius: 16px;
    background: #141310;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.rest-timer.done {
    border-color: rgba(143, 189, 138, 0.7);
}

.rest-timer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rest-timer-head .eyebrow {
    margin-bottom: 6px;
}

.rest-timer-clock {
    margin: 4px 0 8px;
    color: var(--cream);
    font-family: var(--display);
    font-size: 2.6rem;
    line-height: 1;
}

.record-alert {
    font-size: 16px;
}

.mini-chart {
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 8px 0 16px;
    color: var(--gold-light);
}

.chart-label {
    fill: var(--muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.chart-grid {
    stroke: var(--border-strong);
    stroke-width: 1;
}

.week-bars {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin: 8px 0 16px;
}

.week-bar-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.week-bar-track {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 80px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.week-bar {
    width: 100%;
    border-radius: 8px 8px 0 0;
    background: rgba(201, 169, 106, 0.45);
}

.week-bar.goal {
    background: var(--green);
}

.week-bar-value {
    color: var(--cream);
    font-size: 11px;
}

.week-bar-label {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}

.measurement-grid {
    grid-template-columns: repeat(3, 1fr);
}


/* --- Lot 4 : nutrition ------------------------------------------------------------------ */

.stat-tiles-4 {
    grid-template-columns: repeat(4, 1fr);
}

.rings {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.macro-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.macro-ring svg {
    width: 100%;
    max-width: 150px;
}

.ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 11;
}

.ring-value {
    fill: none;
    stroke-width: 11;
    stroke-linecap: round;
    /* La couleur est posée en ligne par le composant : elle suit le remplissage. */
    transition: stroke-dasharray 400ms ease, stroke 400ms ease;
}

.ring-number {
    fill: var(--cream);
    font-family: var(--display);
    font-size: 22px;
    font-weight: 600;
}

.ring-unit {
    fill: var(--muted);
    font-size: 10px;
}

.ring-label {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ring-percent {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.water {
    margin-top: 12px;
}

.water-bar {
    background: linear-gradient(90deg, #7aa7d8, #a9c9ef);
}

.meal-card {
    margin-top: 12px;
}

.meal-head {
    display: grid;
    grid-template-columns: minmax(160px, 2fr) 100px minmax(180px, 2fr) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 10px;
}

.meal-head .exercise-tools {
    grid-column: auto;
}

.item-row {
    display: grid;
    grid-template-columns: minmax(200px, 2fr) 120px minmax(180px, 2fr) auto;
    gap: 10px;
    align-items: end;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.item-macros,
.meal-macros {
    padding-bottom: 10px;
}

.diary-meal {
    padding: 10px 0;
    border-top: 1px solid var(--border);
}

.add-food {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
}

.add-food select[size] {
    height: auto;
}

.nutrition-day select {
    width: 100%;
    padding: 8px;
    font-size: 12px;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}


/* --- Lot 5 : journal ---------------------------------------------------------------------- */

.journal-entry.is-new {
    border-color: rgba(143, 189, 138, 0.6);
}

.journal-note {
    margin: 8px 0 0;
    color: var(--cream);
    line-height: 1.6;
    white-space: pre-wrap;
}

.coach-reply {
    margin-top: 10px;
    padding: 10px 14px;
    border-left: 3px solid var(--gold);
    border-radius: 0 12px 12px 0;
    background: rgba(201, 169, 106, 0.08);
}

.coach-reply.is-new {
    border-left-color: var(--green);
    background: rgba(143, 189, 138, 0.1);
}

.coach-reply .eyebrow {
    margin-bottom: 6px;
}

.coach-reply p {
    margin: 0;
    color: var(--cream);
    white-space: pre-wrap;
}

.reply-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.emoji-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.emoji-btn {
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 16px;
    cursor: pointer;
}

.emoji-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* --- Lot 6 : fichiers ---------------------------------------------------------------------- */

.profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(201, 169, 106, 0.6);
}

.avatar-large {
    width: 96px;
    height: 96px;
}

.avatar-placeholder {
    display: grid;
    place-items: center;
    background: rgba(201, 169, 106, 0.15);
    color: var(--gold-light);
    font-family: var(--display);
    font-size: 20px;
}

.upload-label {
    cursor: pointer;
}

input[type="file"] {
    color: var(--muted);
    font-size: 13px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.gallery-item {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.2);
}

.gallery-item img,
.compare img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.gallery-item figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
}

.compare-card {
    margin-bottom: 16px;
}

.compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.compare figure {
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--border);
}

.compare figcaption {
    padding: 8px 12px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* --- Lot 7 : paiements et tableau de bord --------------------------------------------- */

.stat-tile-warn {
    border-color: rgba(224, 185, 106, 0.45);
}

.stat-tile-warn .stat-value {
    color: var(--amber);
}

.stat-tile-danger {
    border-color: rgba(217, 139, 132, 0.45);
}

.stat-tile-danger .stat-value {
    color: var(--red);
}

.badge-danger {
    background: rgba(217, 139, 132, 0.16);
    color: var(--red);
    border-color: rgba(217, 139, 132, 0.4);
}

a.badge {
    text-decoration: none;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.client-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.client-card-attention {
    border-color: rgba(224, 185, 106, 0.45);
}

.client-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.client-card-head .row-link {
    font-size: 17px;
}

.client-card-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.client-card-rows li {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 10px;
    align-items: baseline;
    font-size: 14px;
}

.client-card-rows a {
    color: var(--text);
    text-decoration: none;
}

.client-card-rows a:hover {
    color: var(--cream);
}

.client-card-rows .badge {
    margin-left: 8px;
}

.client-card-key {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --- Lot 7 : site public -------------------------------------------------------------- */

.site {
    --site-serif: Georgia, "Times New Roman", serif;
    --site-line: rgba(255, 255, 255, 0.07);
    --site-gold-soft: rgba(201, 169, 106, 0.5);
    --site-card: rgba(20, 19, 17, 0.85);
    color: var(--cream);
    line-height: 1.6;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

.site em {
    font-style: italic;
    background: linear-gradient(135deg, #d4af75, #c9a96a, #b8954f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.site h1,
.site h2,
.site h3,
.site-title,
.site-logo-text,
.site-sign {
    font-family: var(--site-serif);
    font-weight: 500;
    color: var(--cream);
    letter-spacing: 0.03em;
}

.site-hex {
    position: relative;
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.site-hex svg {
    width: 100%;
    height: 100%;
}

.site-hex .at {
    position: absolute;
    font-family: var(--site-serif);
    font-weight: 600;
    font-size: 12px;
    color: var(--gold);
}

.site-hex-large {
    width: 100px;
    height: 100px;
}

.site-hex-large .at {
    font-size: 34px;
}

.site-hex-medium {
    width: 72px;
    height: 72px;
}

.site-hex-medium .at {
    font-size: 24px;
}

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--site-line);
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}

.site-logo-text {
    font-size: 15px;
    letter-spacing: 0.14em;
}

.site-nav-links {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.site-nav-links a {
    padding: 8px 14px;
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color 0.3s;
}

.site-nav-links a:hover {
    color: var(--cream);
}

.site-nav-login {
    color: var(--gold-light) !important;
}

.site-cta,
.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    border: 1px solid var(--site-gold-soft);
    color: var(--cream) !important;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.35s, color 0.35s, border-color 0.35s;
}

.site-cta:hover,
.site-btn-primary:hover {
    background: linear-gradient(135deg, #d4af75, #c9a96a, #b8954f);
    color: #0a0a0a !important;
}

.site-btn-outline {
    border-color: var(--site-line);
}

.site-btn-outline:hover {
    border-color: var(--site-gold-soft);
    background: rgba(201, 169, 106, 0.08);
}

.site-btn-block {
    display: flex;
    width: 100%;
}

.site-hero {
    padding: 96px 24px 72px;
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
}

.site-hero-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.site-hero h1 {
    font-size: clamp(32px, 5.5vw, 54px);
    line-height: 1.18;
    margin: 0 0 24px;
}

.site-hero-sub,
.site-sub {
    font-size: clamp(15px, 2.5vw, 18px);
    font-weight: 300;
    color: var(--muted);
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.7;
}

.site-hero-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.site-stats {
    display: flex;
    justify-content: center;
    gap: clamp(32px, 6vw, 80px);
    flex-wrap: wrap;
    padding: 40px 24px;
    border-top: 1px solid var(--site-line);
    border-bottom: 1px solid var(--site-line);
    background: rgba(16, 15, 14, 0.4);
}

.site-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.site-stat-num {
    font-family: var(--site-serif);
    font-size: clamp(26px, 3.5vw, 36px);
    color: #d4af75;
    line-height: 1.1;
}

.site-stat-lbl {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
    margin-top: 6px;
    line-height: 1.5;
}

.site-section {
    padding: 80px 24px;
    max-width: 1080px;
    margin: 0 auto;
}

.site-section h2 {
    font-size: clamp(24px, 3.5vw, 34px);
    line-height: 1.25;
    margin: 0 0 20px;
}

.site-section p {
    font-size: 14px;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.8;
    margin: 0 0 16px;
}

.site-section strong {
    color: var(--cream);
    font-weight: 500;
}

.site-label {
    font-size: 10px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-align: center;
    margin-bottom: 14px;
}

.site-title {
    font-size: clamp(26px, 4vw, 38px);
    text-align: center;
    margin: 0 0 16px;
}

.site-sub {
    text-align: center;
    font-size: 15px;
    margin-bottom: 56px;
}

.site-approach {
    max-width: none;
    background: linear-gradient(135deg, rgba(201, 169, 106, 0.05) 0%, transparent 60%);
    border-bottom: 1px solid var(--site-line);
}

.site-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.site-minis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    justify-content: center;
}

.site-mini {
    background: var(--site-card);
    border: 1px solid var(--site-gold-soft);
    border-radius: 14px;
    padding: 26px 16px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cream);
}

.site-about {
    max-width: 760px;
    text-align: center;
    border-bottom: 1px solid var(--site-line);
}

.site-about-text {
    font-size: 16px !important;
    color: #c4bdb0 !important;
    line-height: 1.9 !important;
}

.site-sign {
    font-size: 18px;
    color: #d4af75;
    margin-top: 28px;
    letter-spacing: 0.12em;
}

.site-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.site-step {
    background: var(--site-card);
    border: 1px solid var(--site-line);
    border-radius: 16px;
    padding: 32px 26px;
    transition: border-color 0.4s, transform 0.4s;
}

.site-step:hover,
.site-price:hover {
    border-color: var(--site-gold-soft);
    transform: translateY(-4px);
}

.site-step-num {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af75, #b8954f);
    color: #0a0a0a;
    font-family: var(--site-serif);
    font-size: 14px;
    margin-bottom: 18px;
}

.site-step h3 {
    font-size: 17px;
    margin: 0 0 10px;
}

.site-step p {
    font-size: 13px;
    margin: 0;
}

.site-app {
    max-width: none;
    background: linear-gradient(160deg, rgba(201, 169, 106, 0.06) 0%, transparent 70%);
    border-top: 1px solid var(--site-line);
    border-bottom: 1px solid var(--site-line);
}

.site-feature {
    margin-bottom: 18px;
    padding-left: 16px;
    border-left: 2px solid var(--site-gold-soft);
}

.site-feature h4 {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cream);
}

.site-feature p {
    font-size: 13px;
    margin: 0;
}

.site-mockup {
    width: 240px;
    margin: 0 auto;
    background: var(--site-card);
    border: 1px solid var(--site-gold-soft);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.site-mockup-title {
    font-family: var(--site-serif);
    font-size: 11px;
    letter-spacing: 0.1em;
    margin-bottom: 18px;
}

.site-mockup-card {
    display: flex;
    flex-direction: column;
    background: rgba(201, 169, 106, 0.08);
    border: 1px solid var(--site-gold-soft);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    flex: 1;
}

.site-mockup-row {
    display: flex;
    gap: 8px;
}

.site-mockup-stat {
    font-family: var(--site-serif);
    font-size: 22px;
    color: #d4af75;
}

.site-mockup-lbl {
    font-size: 9px;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 2px;
}

.site-mockup-bar {
    height: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    background: rgba(201, 169, 106, 0.4);
}

.site-pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
    align-items: start;
}

.site-price {
    position: relative;
    background: var(--site-card);
    border: 1px solid var(--site-line);
    border-radius: 20px;
    padding: 32px 28px;
    transition: transform 0.4s, border-color 0.4s;
}

.site-price-featured {
    border-color: var(--site-gold-soft);
    box-shadow: 0 0 40px rgba(201, 169, 106, 0.08);
}

.site-price-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #d4af75, #c9a96a, #b8954f);
    color: #0a0a0a;
    font-size: 9px;
    font-weight: 600;
    padding: 5px 16px;
    border-radius: 20px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.site-price-name {
    font-size: 11px !important;
    color: #d4af75 !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 14px !important;
}

.site-price-amount {
    font-family: var(--site-serif);
    font-size: 46px !important;
    color: var(--cream) !important;
    line-height: 1;
    margin-bottom: 8px !important;
}

.site-price-amount .cur {
    font-size: 24px;
    margin-right: 3px;
}

.site-price-amount .per {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--muted);
    margin-left: 6px;
}

.site-price-desc {
    font-size: 13px !important;
    margin-bottom: 24px !important;
}

.site-price ul {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}

.site-price li {
    font-size: 13px;
    font-weight: 300;
    padding: 7px 0 7px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
}

.site-price li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #d4af75;
}

.site-price li:last-child {
    border-bottom: none;
}

.site-contact {
    background: var(--site-card);
    border: 1px solid var(--site-line);
    border-radius: 20px;
    padding: 44px;
    max-width: 560px;
    margin: 0 auto;
    display: grid;
    gap: 22px;
}

.site-contact label {
    display: block;
}

.site-contact label span {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.site-contact input,
.site-contact select,
.site-contact textarea {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    font-weight: 300;
    border: none;
    border-bottom: 1px solid var(--site-line);
    border-radius: 0;
    padding: 9px 0;
    background: transparent;
    color: var(--cream);
}

.site-contact input:focus,
.site-contact select:focus,
.site-contact textarea:focus {
    outline: none;
    border-bottom-color: var(--gold);
}

.site-contact select option {
    background: #16150e;
    color: var(--cream);
}

.site-contact-error {
    color: var(--red) !important;
    margin: 0 !important;
}

.site-contact-hint {
    font-size: 12px !important;
    text-align: center;
    margin: 0 !important;
}

.site-contact-success {
    text-align: center;
    color: #d4af75 !important;
    margin: 0 !important;
}

.site-footer {
    border-top: 1px solid var(--site-line);
    padding: 40px 24px;
    text-align: center;
}

.site-footer .site-logo {
    justify-content: center;
    margin-bottom: 16px;
}

.site-footer-links {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin: 18px 0;
    flex-wrap: wrap;
}

.site-footer-links a {
    font-size: 12px;
    font-weight: 300;
    color: var(--muted);
    text-decoration: none;
    letter-spacing: 0.05em;
}

.site-footer-links a:hover {
    color: #d4af75;
}

.site-insta {
    display: inline-flex;
    padding: 10px 22px;
    border: 1px solid var(--site-gold-soft);
    border-radius: 30px;
    color: #d4af75;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}

.site-insta:hover {
    background: linear-gradient(135deg, #d4af75, #b8954f);
    color: #0a0a0a;
}

.site-copy {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 0.05em;
    margin: 0;
}


/* --- Lot 9 : thème clair ----------------------------------------------------------------- */

/* Le site public garde toujours son identité sombre ; seule l'application bascule. */
html[data-theme="light"]:not(:has(.site)) {
    color-scheme: light;
    --background: #f4f1ea;
    --surface: #fffdf8;
    --surface-raised: #ffffff;
    --border: rgba(30, 25, 15, 0.12);
    --border-strong: rgba(30, 25, 15, 0.24);
    --gold: #8a6a2b;
    --gold-light: #6e5420;
    --cream: #1c1a16;
    --text: #2b2822;
    --muted: #6b665c;
    --green: #2f7a3a;
    --red: #b23a2f;
    --amber: #8f6400;
}

html[data-theme="light"]:not(:has(.site)) body {
    background:
        radial-gradient(circle at 80% 10%, rgba(138, 106, 43, 0.10), transparent 30rem),
        linear-gradient(180deg, #f7f4ed 0%, #efebe2 100%);
}

html[data-theme="light"]:not(:has(.site)) .card,
html[data-theme="light"]:not(:has(.site)) .table-wrap,
html[data-theme="light"]:not(:has(.site)) .stat-tile,
html[data-theme="light"]:not(:has(.site)) .day-card {
    background: var(--surface);
}

html[data-theme="light"]:not(:has(.site)) .table tbody tr:hover {
    background: rgba(0, 0, 0, 0.03);
}

html[data-theme="light"]:not(:has(.site)) input,
html[data-theme="light"]:not(:has(.site)) select,
html[data-theme="light"]:not(:has(.site)) textarea {
    background: var(--surface-raised);
    color: var(--text);
}

/* --- Lot 9 : purge et découverte ---------------------------------------------------------- */

.card-danger {
    border-color: rgba(217, 139, 132, 0.45);
}

.welcome-card {
    border-color: rgba(201, 169, 106, 0.5);
}

.welcome-card ol {
    margin: 0 0 12px;
    padding-left: 20px;
    display: grid;
    gap: 6px;
}

/* Début de cycle : la semaine du programme se cale sur le calendrier. */
.cycle-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px 20px;
}

.cycle-card .field {
    margin: 0;
}

.cycle-note {
    flex: 1 1 260px;
    margin: 0;
}

.cycle-note span + span {
    display: block;
}

/* Bannière hors ligne (application mobile) : visible sans être alarmante — la séance
   continue, c'est l'envoi qui attend. */
.offline-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border-left: 4px solid;
    font-size: 0.92rem;
    line-height: 1.45;
}

.offline-bar-down {
    background: rgba(197, 149, 46, 0.12);
    border-left-color: var(--gold, #8a6b2e);
}

.offline-bar-syncing {
    background: rgba(120, 160, 120, 0.12);
    border-left-color: #6f9a6f;
}

.offline-bar strong { font-weight: 600; }

.offline-bar-stale {
    flex-basis: 100%;
    opacity: 0.85;
}

/* Records personnels : chaque ligne se corrige sur place. */
.record-lines {
    list-style: none;
    margin: 0.35rem 0 0.9rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.record-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.record-value { flex: 1 1 auto; }

.record-value .muted { margin-left: 0.4rem; }

.record-actions {
    display: flex;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.record-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
    width: 100%;
}

.record-edit .field-tiny { flex: 1 1 7rem; min-width: 6rem; }

.record-edit-actions {
    display: flex;
    gap: 0.4rem;
}

/* Saisie d'un aliment : résultats cliquables plutôt qu'une liste déroulante native, et
   quantités usuelles d'un clic. La page peut s'allonger, c'est assumé. */
.food-search {
    width: 100%;
    margin-bottom: 10px;
}

.food-results {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--rule, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
}

.food-results li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.food-hit {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: none;
    border: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.food-hit:hover,
.food-hit:focus-visible {
    background: rgba(255, 255, 255, 0.05);
}

.food-hit.chosen {
    background: rgba(197, 149, 46, 0.16);
    box-shadow: inset 3px 0 0 var(--gold, #8a6b2e);
}

.food-hit-name { font-weight: 600; }

.food-hit-macros {
    font-size: 0.82rem;
    color: var(--muted);
}

.food-quantity,
.food-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.food-quantity .btn.active {
    background: rgba(197, 149, 46, 0.2);
    border-color: var(--gold, #8a6b2e);
}

.food-preview {
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.quick-meals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* --- Écran d'attente ------------------------------------------------------------------
   L'hexagone de la marque tourne, le « AT » reste droit : un logo qui pivote sur lui-même
   rendrait les lettres illisibles à mi-tour. */
.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 48px 0;
}

.loader-badge {
    position: relative;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
}

.loader-hex {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 5;
    stroke-linejoin: round;
    animation: loader-spin 1.5s linear infinite;
}

.loader-hex-track {
    stroke: rgba(201, 169, 106, 0.18);
}

.loader-hex-arc {
    stroke: var(--gold-light, #c2a24a);
    stroke-linecap: round;
    /* Un tiers du périmètre (≈ 283) : l'arc se détache nettement du fond. */
    stroke-dasharray: 94 189;
}

.loader-at {
    position: relative;
    font-family: var(--display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.08em;
    color: var(--gold-light, #c2a24a);
}

.loader-text {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

@keyframes loader-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loader-hex {
        animation: none;
    }
}

/* Bascule de thème : toujours en haut à droite, hors du menu qui défile sur téléphone. */
.theme-toggle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: none;
    color: var(--gold-light, #c2a24a);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    color: var(--cream);
}

/* --- Confort tactile sur téléphone -------------------------------------------------
   Placé en fin de feuille à dessein : ces règles doivent l'emporter sur les styles de
   composants définis plus haut, qui sinon les écrasent à spécificité égale. */