/* ══ Charte de Kadofy (docs/design-standard.md) ══════════════════════════════════════════════════════════════
   Toutes les feuilles du site s'y réfèrent : pas de couleur, de taille de texte ni d'arrondi en dur (sauf couleurs
   des marques tierces : Google, Apple, WhatsApp…). Points de bascule (les media queries n'acceptent pas de
   variables) : 480 (petit téléphone), 640 (téléphone), 768 (grand téléphone, petite tablette), 1024 (tablette :
   barre du bas), 1280 (petit ordinateur) — en max-width ; les min-width sont le pixel d'après (641, 769, 1025, 1281). */
:root {
    /* Marque (design K3 de v2) : un orange et un or. Les noms « green » et « gold » sont historiques : ils sont
       utilisés par toutes les feuilles du site et restent les mêmes, seules les valeurs ont changé (--c-green = orange). */
    --c-green:          #c9461c;   /* orange Kadofy : boutons principaux, liens, éléments actifs */
    --c-green-dark:     #a33912;   /* survol et appui, texte orange sur fond pâle */
    --c-green-light:    #ffe9df;   /* fond d'un élément sélectionné ou survolé, pastille orange pâle */
    --c-green-tint:     #fff6f1;   /* fond orange très léger : encadrés, messages de réussite */
    --c-gold:           #f2b13c;   /* mise en avant, alerte */
    --c-gold-hover:     #de9c24;
    --c-gold-light:     #fff3d6;   /* fond d'une alerte ou d'une étiquette dorée */

    /* Neutres */
    --c-text:           #1f2328;   /* titres et texte, pied de page, bouton foncé */
    --c-muted:          #646b73;   /* texte secondaire, légendes */
    --c-subtle:         #9aa0a6;   /* indications discrètes, icônes inactives, désactivé */
    --c-border:         #e6e7ea;   /* bordures, séparations, champs */
    --c-bg:             #fafafa;   /* fond des pages (l'accueil est en blanc) */
    --c-surface:        #ffffff;   /* cartes, fenêtres */
    --c-surface-alt:    #f6f6f6;   /* fond léger : recherche, survol, zone secondaire */

    /* Erreur et suppression : la seule couleur hors de la marque */
    --c-danger:         #dc2626;
    --c-danger-dark:    #b91c1c;   /* texte sur fond rouge pâle, survol */
    --c-danger-bg:      #fef2f2;
    --c-danger-border:  #fecaca;

    /* Sur fond orange ou foncé (bandeaux, pied de page), pas de variable : blanc à 0.8 (texte secondaire) ou 0.6 (texte
       discret), à 0.15 ou 0.3 (traits), à 0.1, 0.2 ou 0.3 (fonds). Voile derrière une fenêtre : noir à 0.5. */

    /* Arrondis (et 50 % pour un rond) : formes douces du design K3 */
    --radius-sm:   8px;     /* pastilles, petits éléments */
    --radius-md:   12px;    /* champs, petites cartes, boutons carrés */
    --radius-lg:   24px;    /* cartes, encadrés, fenêtres, panneaux */
    --radius-pill: 999px;   /* boutons, onglets, étiquettes */

    /* Ombres et anneaux de focus */
    --shadow-sm:   0 1px 3px rgba(31,35,40,0.06);      /* carte au repos */
    --shadow-md:   0 8px 24px rgba(31,35,40,0.08);     /* carte survolée, menu */
    --shadow-lg:   0 14px 40px rgba(31,35,40,0.14);    /* menu ouvert, message */
    --shadow-xl:   0 20px 60px rgba(31,35,40,0.18);    /* fenêtre, tiroir */
    --shadow-up:   0 -4px 24px rgba(31,35,40,0.08);    /* barre collée en bas de l'écran */
    --ring:        0 0 0 3px rgba(201,70,28,0.18);     /* focus d'un champ */
    --ring-danger: 0 0 0 3px rgba(220,38,38,0.15);     /* champ en erreur */
    --ring-gold:   0 0 0 3px rgba(242,177,60,0.35);    /* focus sur fond orange */

    /* Tailles de texte */
    --text-3xs:  10px;      /* barre du bas et pastilles de compteur, rien d'autre */
    --text-2xs:  11px;      /* étiquettes en capitales, mini-badges */
    --text-xs:   12px;      /* légendes */
    --text-sm:   13px;      /* petits textes d'interface */
    --text-md:   14px;      /* texte de l'interface */
    --text-lg:   16px;      /* texte de lecture, champs sur téléphone */
    --text-xl:   18px;
    --text-2xl:  20px;      /* titres de section */
    --text-3xl:  24px;      /* titres de page sur téléphone */
    --text-4xl:  28px;      /* titres de page, logo */
    --text-5xl:  32px;      /* grands chiffres, grandes icônes */
    --text-title:   clamp(1.6rem, 3vw, 2.2rem);     /* grands titres de section, nom d'une idée */
    --text-hero:    clamp(2rem, 4.5vw, 2.8rem);     /* titre d'un bandeau de page, prix d'une idée */
    --text-display: clamp(2.1rem, 4.8vw, 3.6rem);   /* très grand titre */

    /* Largeurs de page */
    --page-width:      1280px;   /* pages larges : accueil, Explorer, blog, listes, réservations, idées… */
    --page-width-text: 760px;    /* une colonne de lecture : article, support, notifications, recherche */
    --page-gutter:     clamp(16px, 4vw, 48px);   /* marge sur les côtés : la même que l'en-tête */
    /* Conteneur d'une page : width: min(var(--page-width), 100% - 2 * var(--page-gutter)); margin: 0 auto; */

    /* Une seule police (design K3) : Manrope, 400 à 800 (Header.php). Les titres : 800 et lettres resserrées. */
    --font-body:    'Manrope', 'Segoe UI', sans-serif;
    --font-display: 'Manrope', 'Segoe UI', sans-serif;

    --transition: 0.2s ease;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--c-bg);
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
    font-family: inherit;
}

[id].is-active { display: block; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: var(--text-md);
    font-family: var(--font-body);
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    white-space: nowrap;
    line-height: 1;
}

.btn-primary          { background: var(--c-green); color: #fff; border-color: var(--c-green); }
.btn-primary:hover    { background: var(--c-green-dark); border-color: var(--c-green-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(201, 70, 28, 0.25); }

.btn-yellow           { background: var(--c-gold); color: var(--c-text); border-color: var(--c-gold); }
.btn-yellow:hover     { background: var(--c-gold-hover); border-color: var(--c-gold-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(242, 177, 60, 0.35); }

.btn-secondary        { background: var(--c-muted); color: #fff; border-color: var(--c-muted); }
.btn-secondary:hover  { background: var(--c-text); border-color: var(--c-text); }

.btn-success          { background: var(--c-green); color: #fff; border-color: var(--c-green); }
.btn-success:hover    { background: var(--c-green-dark); border-color: var(--c-green-dark); }

/* Action qui supprime ou annule, sur la page (la confirmation, elle, est en btn-danger) */
.btn-danger-outline       { background: #fff; color: var(--c-danger); border-color: var(--c-danger-border); }
.btn-danger-outline:hover { background: var(--c-danger-bg); border-color: var(--c-danger); }

.btn-danger           { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.btn-danger:hover     { background: var(--c-danger-dark); border-color: var(--c-danger-dark); }

.btn-light            { background: var(--c-surface-alt); color: var(--c-text); border-color: var(--c-border); }
.btn-light:hover      { background: var(--c-border); }

.btn-dark             { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.btn-dark:hover       { background: var(--c-muted); border-color: var(--c-muted); }

/* Bouton blanc à côté d'un bouton principal (fenêtres Ajouter à ma liste, Réserver, Annuler la réservation : « Se connecter », « Fermer ») */
.btn-white            { background: #fff; color: var(--c-text); border-color: var(--c-border); }
.btn-white:hover      { border-color: var(--c-green); color: var(--c-green); }

/* Bouton à contour foncé (design K3 : « S'inscrire | Se connecter » de l'en-tête) */
.btn-outline-dark       { background: transparent; color: var(--c-text); border-color: var(--c-text); }
.btn-outline-dark:hover { background: var(--c-text); color: #fff; }

/* Bouton secondaire à contour (page d'erreur « Page précédente », bilan de Mes listes) */
.btn-outline          { background: transparent; color: var(--c-green); border-color: var(--c-green); }
.btn-outline:hover    { background: var(--c-green-light); }

.btn-disabled, .btn:disabled { background: var(--c-border); color: var(--c-subtle); border-color: var(--c-border); cursor: not-allowed; pointer-events: none; }

/* Tailles et largeur. Rôles : btn-primary = action principale (orange) ; btn-yellow = mise en avant (or) ;
   btn-light = action secondaire, Annuler, Fermer, Précédent ; btn-outline = secondaire à contour ;
   btn-danger-outline = supprimer / annuler sur la page ; btn-danger = confirmer une suppression. */
.btn-sm    { padding: 8px 14px; font-size: var(--text-sm); }
.btn-lg    { padding: 16px 32px; font-size: var(--text-lg); }
.btn-block { display: flex; width: 100%; box-sizing: border-box; }
.btn:focus-visible { outline: 3px solid var(--c-green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn:hover { transform: none; }
}

.badge {
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: transform 0.2s;
    text-transform: uppercase;
    font-size: var(--text-xs);
    display: block;
}

.badge-green       { background-color: var(--c-green) !important; color: white; }
.badge-red         { background-color: var(--c-danger) !important; color: white; }
.badge-yellow      { background-color: var(--c-gold) !important; color: var(--c-text); }
.badge-default     { background-color: var(--c-muted) !important; color: white; }
/* Badges d'occasion : couleur inline gérée dans l'admin (Occasions) */
.badge-link        { background-color: var(--c-muted) !important; color: white; }
.badge-password    { background-color: var(--c-text) !important; color: white; }
.badge-date-future { background-color: var(--c-surface-alt); color: var(--c-muted); border: 1px solid var(--c-border); }
.badge-date-past   { background-color: var(--c-danger-bg); color: var(--c-danger-dark); border: 1px solid var(--c-danger-border); }

.alert {
    padding: 10px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: var(--text-md);
    line-height: 1.5;
}

.alert-success {
    background-color: var(--c-green-tint);
    color: var(--c-green);
    border: 1px solid var(--c-green-light);
}

.alert-warning {
    background-color: var(--c-gold-light);
    color: var(--c-text);
    border: 1px solid var(--c-gold);
}

.alert-error {
    background-color: var(--c-danger-bg);
    color: var(--c-danger-dark);
    border: 1px solid var(--c-danger-border);
}

/* ── Toast notifications ── */
.toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 14px 20px;
    min-width: 260px;
    max-width: 400px;
    border-left: 4px solid var(--c-green);
    animation: toastIn .3s cubic-bezier(.22,1,.36,1);
}
.toast--error   { border-left-color: var(--c-danger); }
.toast--success { border-left-color: var(--c-green); }
.toast--info    { border-left-color: var(--c-muted); }

.toast__icon { flex-shrink: 0; font-size: var(--text-2xl); line-height: 1; display: flex; }
.toast--success .toast__icon { color: var(--c-green); }
.toast--error   .toast__icon { color: var(--c-danger); }
.toast--info    .toast__icon { color: var(--c-muted); }

.toast__text {
    flex: 1;
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--c-text);
    margin: 0;
}

.toast__close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-2xl);
    color: var(--c-subtle);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.toast__close:hover { color: var(--c-muted); background: var(--c-surface-alt); }

.toast--out {
    animation: toastOut .35s cubic-bezier(.4,0,1,1) forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0)   scale(1);    }
    to   { opacity: 0; transform: translateY(16px) scale(.97); }
}

/* Mobile et tablette : au-dessus de la barre de navigation du bas (60 px, header.css) au lieu de la recouvrir */
@media (max-width: 1024px) {
    .toast {
        bottom: calc(60px + 16px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 480px) {
    .toast {
        right: 12px;
        left: 12px;
        bottom: calc(60px + 12px + env(safe-area-inset-bottom));
        min-width: unset;
        max-width: unset;
    }
}

.form-group {
    margin-bottom: 20px;
}

.form-group > label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--c-text);
}

.form-group .required {
    color: var(--c-danger);
    margin-left: 2px;
}

.form-group small {
    display: block;
    margin-top: 6px;
    font-size: var(--text-xs);
    color: var(--c-muted);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 12px 14px;
    font-size: var(--text-md);
    font-family: var(--font-body);
    color: var(--c-text);
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
    -webkit-appearance: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--c-green);
    box-shadow: var(--ring);
}

/* Téléphones et tablettes : champs en 16 px minimum, sinon Safari (iPhone) zoome à chaque saisie et la page
   reste agrandie. !important : passe devant les tailles réduites des pages (filtres, paramètres, administration). */
@media (max-width: 1024px), (pointer: coarse) {
    body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]), select, textarea) {
        font-size: var(--text-lg) !important;
    }
}

input::placeholder,
textarea::placeholder {
    color: var(--c-subtle);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.input-group {
    display: flex;
    width: 100%;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.input-group:focus-within {
    border-color: var(--c-green);
    box-shadow: var(--ring);
}

.input-group input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex: 1;
}

.input-group button {
    border-radius: 0;
    flex-shrink: 0;
}
/* Bouton afficher / masquer des champs mot de passe (ajouté par assets/js/ui-actions.js) */
.pw-field {
    position: relative;
    display: block;
    flex: 1 1 auto;        /* garde la place du champ dans les formulaires en ligne */
    min-width: 0;
}
.pw-field > input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 48px !important;
}
.pw-field__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    font-size: var(--text-lg);
    line-height: 1;
}
.pw-field__toggle:hover { background: var(--c-surface-alt); color: var(--c-green); }
.pw-field__toggle:focus-visible { outline: 2px solid var(--c-green); outline-offset: 1px; }

/* Menu « ⋯ » en haut des profils, listes et idées des autres membres, avec « Signaler » (Components/ReportLink.php) */
.report-menu {
    position: relative;
    flex-shrink: 0;
}
.report-menu__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--c-subtle);
    font-size: var(--text-xl);
    list-style: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.report-menu__btn::-webkit-details-marker { display: none; }
.report-menu__btn i { display: flex; }
.report-menu__btn:hover,
.report-menu[open] .report-menu__btn { background: var(--c-surface-alt); color: var(--c-muted); }
.report-menu__list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 200px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.report-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--c-danger-dark);
    font-size: var(--text-md);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}
.report-menu__item i { display: flex; }
.report-menu__item:hover,
.report-menu__item:focus-visible { background: var(--c-danger-bg); }

/* ══ Composants communs (docs/design-standard.md) ═════════════════════════════════════════════════════════════ */

/* État vide : une page ou un onglet sans contenu (icône, titre, texte, bouton) */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
    background: var(--c-surface);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-lg);
}
.empty-state[hidden] { display: none; }
.empty-state__icon { display: flex; margin-bottom: 4px; font-size: var(--text-5xl); color: var(--c-subtle); }
.empty-state__title { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--c-text); line-height: 1.5; }
.empty-state__text { margin: 0; max-width: 440px; font-size: var(--text-md); color: var(--c-muted); line-height: 1.5; }
.empty-state .btn { margin-top: 8px; }
/* Dans une fenêtre ou un menu : sans cadre */
.empty-state--compact { padding: 16px 8px; background: none; border: 0; }

/* Titres : titre de page (pages « appli ») et titre de section */
.page-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--c-text);
}
.section-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--c-text);
}
@media (max-width: 640px) {
    .page-title { font-size: var(--text-3xl); }
    .section-title { font-size: var(--text-xl); }
}

/* Carte : fond blanc, bordure, arrondi et ombre de la charte */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Pastille (étiquette courte : statut, catégorie, compteur) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-alt);
    color: var(--c-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.chip--green   { background: var(--c-green-light); color: var(--c-green); }
.chip--gold    { background: var(--c-gold-light); color: var(--c-text); }
.chip--danger  { background: var(--c-danger-bg); color: var(--c-danger-dark); }

/* Pastille d'icône : icône Flaticon dans un rond teinté (à la place des emojis d'interface) */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-green-light);
    color: var(--c-green);
    font-size: var(--text-2xl);
    line-height: 1;
}
.icon-badge i { display: flex; }
.icon-badge--sm { width: 40px; height: 40px; font-size: var(--text-lg); }
.icon-badge--lg { width: 72px; height: 72px; font-size: var(--text-4xl); }
.icon-badge--gold    { background: var(--c-gold-light); color: var(--c-text); }