/* Pensiam — pages publiques (/reserver, /compte, connexion), identiques pour toutes les pensions.
   Flat design : blanc, un vert pour l'action, un ambre pour l'attente, gris neutres, aucune ombre. */
:root {
    --p-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --p-font-display: "Manrope", "Roboto", system-ui, sans-serif;
    --p-bg: #ffffff;
    --p-surface: #f8f9fa;
    --p-text: #202124;
    --p-muted: #5f6368;
    --p-primary: #1e8e3e;
    --p-primary-contrast: #ffffff;
    --p-primary-dark: #137333;
    --p-primary-tint: #e6f4ea;
    --p-secondary: #f29900;
    --p-secondary-dark: #b06000;
    --p-secondary-tint: #fef7e0;
    --p-border: #dadce0;
    --p-error: #d93025;
    --p-error-tint: #fce8e6;
    --p-info-tint: #e8f0fe;
    --p-info-dark: #174ea6;
    --p-radius: 12px;
    --p-radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: var(--p-font);
    font-size: 16px;
    background: var(--p-bg);
    color: var(--p-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Pied de page ancré en bas même sur une page courte : le body est une colonne, le contenu prend l'espace restant. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }

h1, h2, h3 {
    font-family: var(--p-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 .5rem;
}
h1 { font-size: 2rem; line-height: 1.2; }
h2 { font-size: 1.25rem; margin-top: 1.5rem; }
h3 { font-size: 1.05rem; }
p { margin: .4rem 0 .8rem; }
a { color: var(--p-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--p-muted); }

.page { max-width: 60rem; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; }
.page-narrow { max-width: 28rem; }

/* En-tête : barre blanche, trait fin, marque à gauche, navigation à droite */
.site-header {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: .65rem 1.25rem; background: var(--p-bg); border-bottom: 1px solid var(--p-border);
}
.site-header .brand {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--p-font-display); font-weight: 700; font-size: 1.2rem; color: var(--p-text);
}
.site-header .brand::before {
    content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: var(--p-primary);
}
.site-header .brand:hover { text-decoration: none; }
.site-header nav { display: flex; gap: .25rem; }
.site-header nav a {
    color: var(--p-muted); font-weight: 500; padding: .45rem .8rem; border-radius: 999px;
}
.site-header nav a:hover { background: var(--p-surface); color: var(--p-text); text-decoration: none; }

.site-footer {
    margin-top: auto; padding: 1.5rem 1.25rem; border-top: 1px solid var(--p-border);
    color: var(--p-muted); font-size: .875rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}

/* Pages d'authentification : fond gris clair, carte blanche centrée */
.auth-page {
    max-width: none; padding: 3rem 1rem; background: var(--p-surface);
    display: flex; align-items: center; justify-content: center;
}
.auth-card {
    width: 100%; max-width: 26rem; background: var(--p-bg); border: 1px solid var(--p-border);
    border-radius: 16px; padding: 2.5rem 2.25rem;
}
.auth-card.auth-wide { max-width: 34rem; }
.auth-brand {
    display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem;
    font-family: var(--p-font-display); font-weight: 700; color: var(--p-muted); font-size: .95rem;
}
.auth-brand::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--p-primary); }
.auth-card h1 { font-size: 1.75rem; margin-bottom: .25rem; }
.auth-card .auth-intro { color: var(--p-muted); margin: 0 0 1.25rem; }
.auth-card .form { margin-top: .5rem; }
.auth-card .btn-primary { width: 100%; padding: .85rem 1.4rem; margin-top: .25rem; }
.auth-alt { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--p-border); text-align: center; color: var(--p-muted); font-size: .95rem; }
.auth-card form.actions-only { margin-top: 1.5rem; }

/* Formulaires */
.form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-weight: 500; font-size: .875rem; color: var(--p-text); }
.field-inline { flex-direction: row; align-items: center; gap: .6rem; }
.field-inline label { font-weight: 400; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }

input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="date"], input[type="number"], select, textarea {
    font: inherit; color: var(--p-text); background: var(--p-bg);
    padding: .7rem .9rem; border: 1px solid var(--p-border); border-radius: var(--p-radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--p-muted); }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--p-primary); box-shadow: 0 0 0 2px var(--p-primary-tint);
}
input:disabled { background: var(--p-surface); color: var(--p-muted); }
input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--p-primary); margin: 0; }
.validation-message { color: var(--p-error); font-size: .8rem; }
:focus-visible { outline: 2px solid var(--p-primary); outline-offset: 2px; }
/* Le titre reçoit le focus après chaque navigation (lecteurs d'écran) : aucun contour visible pour autant. */
h1:focus, h1:focus-visible { outline: none; }

/* Boutons pilules, sans ombre */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    font: inherit; font-weight: 500; font-size: .95rem; line-height: 1;
    padding: .75rem 1.4rem; border-radius: 999px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--p-primary); color: var(--p-primary-contrast); }
.btn-primary:hover { background: var(--p-primary-dark); }
.btn-secondary { background: var(--p-bg); color: var(--p-primary-dark); border-color: var(--p-border); }
.btn-secondary:hover { background: var(--p-primary-tint); border-color: var(--p-primary-tint); }
.actions { display: flex; gap: .75rem; justify-content: flex-end; flex-wrap: wrap; margin-top: .5rem; }
.mt { margin-top: 1.5rem; }

/* Blocs */
.card { background: var(--p-bg); border: 1px solid var(--p-border); border-radius: var(--p-radius); padding: 1.5rem; margin: 1.25rem 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.card-head h2 { margin: 0; }

/* Messages : aplats teintés, texte foncé, pas de bordure */
.alert { padding: .85rem 1rem; border-radius: var(--p-radius-sm); margin: 1rem 0; font-size: .95rem; }
.alert-error { background: var(--p-error-tint); color: var(--p-error); }
.alert-success { background: var(--p-primary-tint); color: var(--p-primary-dark); }
.alert-info { background: var(--p-info-tint); color: var(--p-info-dark); }
.alert ul { margin: 0; padding-left: 1.2rem; }

/* Tableaux */
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--p-border); vertical-align: top; }
.table th { font-size: .8rem; color: var(--p-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.table tr:last-child td { border-bottom: none; }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .total td { font-weight: 600; font-size: 1.05rem; border-top: 2px solid var(--p-text); }

/* Puces d'état : vert = validé/confirmé, ambre = en attente, gris = terminé, rouge = refusé/annulé */
.badge { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 500; background: var(--p-surface); color: var(--p-muted); }
.badge-valide, .badge-confirmee { background: var(--p-primary-tint); color: var(--p-primary-dark); }
.badge-avalider, .badge-demande, .badge-essaiplanifie { background: var(--p-secondary-tint); color: var(--p-secondary-dark); }
.badge-encours { background: var(--p-info-tint); color: var(--p-info-dark); }
.badge-refuse, .badge-annulee { background: var(--p-error-tint); color: var(--p-error); }

/* Tunnel : stepper en pastilles, comme le calendrier de disponibilités */
.steps { display: flex; gap: 0; list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; counter-reset: step; }
.steps li {
    flex: 1; position: relative; padding: 0 .5rem .6rem; text-align: center;
    color: var(--p-muted); font-size: .85rem; font-weight: 500; border-bottom: 3px solid var(--p-border);
}
.steps li::before {
    counter-increment: step; content: counter(step);
    display: block; margin: 0 auto .35rem; width: 1.75rem; height: 1.75rem; line-height: 1.75rem;
    border-radius: 50%; background: var(--p-surface); color: var(--p-muted); font-weight: 600;
}
.steps li.active { color: var(--p-primary-dark); border-bottom-color: var(--p-primary); }
.steps li.active::before { background: var(--p-primary); color: #fff; }
.steps li.done { color: var(--p-text); border-bottom-color: var(--p-primary); }
.steps li.done::before { background: var(--p-primary-tint); color: var(--p-primary-dark); content: "✓"; }

.choices { display: flex; flex-direction: column; gap: .6rem; }
.choice {
    display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem;
    border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); background: var(--p-bg); cursor: pointer;
    transition: border-color .15s, background .15s;
}
.choice:hover { border-color: var(--p-primary); }
.choice:has(input:checked) { border-color: var(--p-primary); background: var(--p-primary-tint); }
.choice-qty input[type="number"] { width: 5.5rem; }
.recap-dates { padding: .75rem 1rem; background: var(--p-surface); border-radius: var(--p-radius-sm); margin: 0; }

@media (max-width: 600px) {
    h1 { font-size: 1.6rem; }
    .page { padding: 1.5rem 1rem 2.5rem; }
    .card { padding: 1.1rem; }
    .steps li { font-size: 0; }
    .steps li::before { font-size: .85rem; margin-bottom: 0; }
}

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

#blazor-error-ui {
    color-scheme: light only;
    background: var(--p-secondary-tint);
    color: var(--p-secondary-dark);
    bottom: 0; left: 0; width: 100%; z-index: 1000;
    border-top: 1px solid var(--p-border);
    display: none; position: fixed; padding: 0.6rem 1.25rem 0.7rem 1.25rem;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* Formulaires en carte (profil, fiche chien) */
.page-form { max-width: 40rem; }
.form-card { margin-top: 0; }
.field .hint { font-size: .8rem; color: var(--p-muted); }
.field a.hint { color: var(--p-primary-dark); margin-top: .2rem; }
.btn-sm { padding: .5rem 1rem; font-size: .875rem; }
.ml { margin-left: .6rem; }
.alert-warn { background: var(--p-secondary-tint); color: var(--p-secondary-dark); }

/* Tunnel, etape 1 : calendrier de disponibilites cliquable (rendu serveur, chaque case est un bouton) */
.cal-choix { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.cal-choix-item {
    flex: 1 1 8rem; display: flex; flex-direction: column; gap: .1rem; padding: .6rem .9rem;
    border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); background: var(--p-bg);
    transition: border-color .15s, background .15s;
}
.cal-choix-item span { font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--p-muted); }
.cal-choix-item b { font-weight: 600; }
.cal-choix-item.attendu { border-color: var(--p-primary); background: var(--p-primary-tint); }
.cal-choix-item.attendu span { color: var(--p-primary-dark); }
.cal-nav { display: flex; justify-content: space-between; margin: .25rem 0 -2.4rem; position: relative; z-index: 1; }
.cal-btn {
    width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--p-border); background: var(--p-bg);
    color: var(--p-text); font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 0;
}
.cal-btn:hover:not(:disabled) { background: var(--p-surface); border-color: var(--p-muted); }
.cal-btn:disabled { opacity: .3; cursor: default; }
.cal-mois { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem 2rem; }
.cal-un-mois h3 { text-align: center; text-transform: capitalize; margin: .35rem 0 .75rem; font-size: 1rem; }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grille .jsem { text-align: center; font-size: .7rem; font-weight: 500; text-transform: uppercase; color: var(--p-muted); padding-bottom: .25rem; }
.cal-jour {
    aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 0; border: none; border-radius: var(--p-radius-sm); background: var(--p-surface);
    font: inherit; font-size: .9rem; color: var(--p-text); cursor: pointer;
    transition: background .15s, color .15s;
}
.cal-jour i { width: 6px; height: 6px; border-radius: 50%; background: var(--p-primary); }
.cal-jour.dernier i { background: var(--p-secondary); }
.cal-jour.complet i, .cal-jour.ferme i { background: var(--p-border); }
.cal-jour.complet, .cal-jour.ferme { color: var(--p-muted); }
.cal-jour.ferme span { text-decoration: line-through; }
.cal-jour:hover:not(:disabled) { outline: 2px solid var(--p-primary); outline-offset: -2px; }
.cal-jour:disabled { background: transparent; color: var(--p-border); cursor: default; }
.cal-jour:disabled i { visibility: hidden; }
.cal-jour.aujourdhui { box-shadow: inset 0 0 0 2px var(--p-primary); }
.cal-jour.dans { background: var(--p-primary-tint); color: var(--p-primary-dark); }
.cal-jour.debut, .cal-jour.fin { background: var(--p-primary); color: #fff; box-shadow: none; }
.cal-jour.debut i, .cal-jour.fin i { background: rgba(255, 255, 255, .75); }
.cal-legende { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: .8rem; color: var(--p-muted); }
.cal-legende i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; vertical-align: middle; background: var(--p-primary); }
.cal-legende i.dernier { background: var(--p-secondary); }
.cal-legende i.complet { background: var(--p-border); }
@media (max-width: 600px) {
    .cal-jour { font-size: .8rem; border-radius: 6px; }
    .cal-nav { margin-bottom: -2.2rem; }
}

/* Mobile : les tableaux de l'espace client deviennent des cartes, une ligne par champ */
@media (max-width: 600px) {
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr { border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); padding: .35rem .75rem; margin-bottom: .6rem; }
    .table td { border-bottom: none; padding: .3rem 0; text-align: left; }
    .table td.num { text-align: left; }
    .table td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--p-muted); }
    .table td.actions-cell { padding-top: .5rem; }
    .table td.actions-cell a { display: inline-block; padding: .4rem .9rem; border: 1px solid var(--p-border); border-radius: 999px; }
    .card-head { flex-direction: column; align-items: stretch; }
    .card-head .btn { text-align: center; }
    .actions { flex-direction: column-reverse; }
    .actions .btn { width: 100%; text-align: center; }
    .btn-sm.ml { margin-left: 0; margin-top: .4rem; display: inline-block; }
}