/*
 * Trouvaille — feuille de style du site.
 *
 * Parti pris : la sobriété plutôt que l'effet. Une page paraît brouillonne quand chaque
 * bloc reçoit un traitement différent — une ombre ici, une bordure colorée là, un fond
 * sombre au milieu. On s'en tient donc à un système court et on s'y tient :
 *
 *   ESPACEMENTS  une seule échelle (--e1 à --e7), jamais de valeur au jugé.
 *   TYPOGRAPHIE  trois tailles de titre, deux de texte. Rien d'autre.
 *   SURFACES     un seul type de carte : fond blanc, bordure fine, pas d'ombre.
 *                L'ombre est réservée à ce qui flotte réellement (fenêtres modales).
 *   ALIGNEMENT   tout à gauche. Le centrage systématique fatigue et brouille la lecture.
 *   COULEUR      l'encre pour le texte et les actions, un seul caramel pour l'accent.
 */

:root {
    /* Couleurs — volontairement peu nombreuses. */
    --ivoire: #fdfaf5;
    --sable: #f5efe4;
    --carte: #ffffff;
    --encre: #1f1d1a;
    --encre-2: #38342e;
    --gris: #6c6459;
    --gris-clair: #a09889;
    --caramel: #8a5a2b;
    --bordure: #e6ddcd;

    /* Espacements — l'échelle entière du site tient dans ces sept valeurs. */
    --e1: 4px;
    --e2: 8px;
    --e3: 16px;
    --e4: 24px;
    --e5: 40px;
    --e6: 64px;
    --e7: 96px;

    --r: 10px;
    --r-l: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/*
 * Indispensable : l'attribut HTML `hidden` cache un élément via la feuille de style du
 * navigateur, mais N'IMPORTE QUELLE règle `display` écrite ici l'emporte sur elle. Sans
 * cette ligne, tout élément à la fois `hidden` et pourvu d'un `display` reste visible —
 * les fenêtres modales s'affichaient toutes en même temps, et leur bouton de fermeture
 * était sans effet puisqu'il ne fait que reposer l'attribut.
 */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--ivoire);
    color: var(--encre);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Trois tailles de titre, deux de texte. */
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.4px; }
h1 { font-size: clamp(2.1rem, 7vw, 3.2rem); }
h2 { font-size: clamp(1.55rem, 4.5vw, 2.1rem); }
h3 { font-size: 1.1rem; letter-spacing: -.2px; }
p { margin: 0; }
.lead { font-size: 1.05rem; color: var(--gris); max-width: 52ch; }
.small { font-size: .89rem; color: var(--gris); }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--e4); }

/* ═════════════ Éléments communs ═════════════ */

.logo { display: inline-flex; align-items: center; gap: var(--e2); text-decoration: none; color: inherit; }
.logo-mark {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--encre);
    color: var(--ivoire);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    flex: 0 0 auto;
}
.logo-mark.big { width: 46px; height: 46px; border-radius: 12px; font-size: 26px; margin-bottom: var(--e3); }
.logo-word { font-family: "Playfair Display", Georgia, serif; font-size: 1.15rem; font-weight: 600; }

.eyebrow {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--caramel);
    margin-bottom: var(--e2);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    padding: 11px 18px;
    border-radius: var(--r);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}
.btn-ink { background: var(--encre); color: var(--ivoire); }
.btn-ink:hover { background: var(--encre-2); }
.btn-outline { background: transparent; border-color: var(--bordure); color: var(--encre); }
.btn-outline:hover { border-color: var(--gris); }
.btn-ghost { background: transparent; color: var(--gris); }
.btn-ghost:hover { color: var(--encre); }
.btn-danger { background: transparent; border-color: #d8bcba; color: #9c3330; }
.btn-danger:hover { background: #fbf0ef; }
.btn-lg { padding: 13px 24px; font-size: .98rem; }
.btn-sm { padding: 7px 13px; font-size: .84rem; }
.btn-block { width: 100%; margin-top: var(--e4); }
.btn:disabled { opacity: .5; cursor: progress; }

input[type="email"], input[type="password"], input[type="search"], input[type="text"],
input[type="number"], select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    background: var(--carte);
    color: var(--encre);
    font-size: .94rem;
    font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--gris-clair); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--caramel); outline-offset: 1px; border-color: transparent; }
textarea { resize: vertical; }

.field-label {
    display: block;
    font-size: .78rem;
    font-weight: 500;
    color: var(--gris);
    margin: var(--e3) 0 var(--e1);
}

.error {
    margin-top: var(--e3);
    padding: 10px 12px;
    background: #fbf0ef;
    border-left: 2px solid #9c3330;
    border-radius: 4px;
    color: #7a2320;
    font-size: .88rem;
}
.hint { margin-top: var(--e3); font-size: .82rem; color: var(--gris); line-height: 1.5; }
.hint-tight { margin-top: var(--e1); }

/* Une seule carte pour tout le site. */
.panel {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--r-l);
    padding: var(--e4);
}

/* ═════════════ Site public ═════════════ */

/* Le site public entier repose sur le sable : une seule teinte du haut jusqu'au pied de
   page. L'inventaire, lui, garde son fond ivoire — c'est un outil de travail, pas une
   vitrine, et il gagne à être plus clair sous les cartes blanches. */
#public-site { background: var(--sable); }

.site-nav { border-bottom: 1px solid var(--bordure); background: var(--sable); position: sticky; top: 0; z-index: 20; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); height: 64px; }
.nav-links { display: none; gap: var(--e4); }
.nav-links a { color: var(--gris); text-decoration: none; font-size: .9rem; }
.nav-links a:hover { color: var(--encre); }

.hero { padding: var(--e6) 0; }
.hero-inner { display: grid; gap: var(--e5); }
.hero h1 { margin-bottom: var(--e3); }
.hero h1 em { font-style: italic; color: var(--caramel); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }

/* ══════════════ Planche I — l'ouverture ══════════════
   Une photographie pleine largeur, un voile sombre dégradé, le titre posé dessus. Le voile
   part de la gauche : c'est là que se lit le texte, et le détail de l'objet reste visible à
   droite. Sans lui, un titre clair sur une photo claire devient illisible. */
.ouverture { position: relative; overflow: hidden; background: var(--encre); }
.ouverture-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.92);
    /* Très lent rapprochement sur la photo d'ouverture : six pour cent en trente
       secondes, une seule fois. Assez pour que l'image paraisse vivante, trop lent pour
       qu'on voie le mouvement — si on le remarque, c'est qu'il est trop rapide. */
    animation: respiration 30s ease-out forwards;
}
@keyframes respiration {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

/* Apparition des blocs à la montée : opacité et léger déplacement. La classe est posée
   par app.js quand le bloc entre dans l'écran ; sans JavaScript, tout reste visible. */
.apparait {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s ease-out, transform .7s ease-out;
}
.apparait.vu { opacity: 1; transform: none; }
.ouverture-voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28, 24, 18, .86) 0%, rgba(28, 24, 18, .72) 100%);
}
.ouverture-texte { position: relative; padding: var(--e6) var(--e3); color: var(--ivoire); }
.ouverture-texte h1 { margin: var(--e2) 0 var(--e3); color: var(--ivoire); }
.ouverture-texte h1 em { font-style: italic; color: #e0c08a; }
.ouverture-texte .lead { color: #ded5c4; max-width: 46ch; }
.eyebrow.clair { color: #e0c08a; }

/* Deux boutons pensés pour un fond sombre : l'or pour l'action principale, un contour
   discret pour la seconde. Les variantes claires du reste du site y disparaîtraient. */
.btn-or { background: #e0c08a; color: var(--encre); }
.btn-or:hover { background: #eccfa0; }
.btn-fantome { background: transparent; border-color: rgba(253, 250, 245, .45); color: var(--ivoire); }
.btn-fantome:hover { border-color: var(--ivoire); }

/* ══════════════ La méthode, en trois temps ══════════════
   Chiffres romains et filets : le vocabulaire du catalogue de vente, pas celui du
   tutoriel numéroté. */
/* Plus aucune différence de fond : le sable court sur tout le site public (voir la règle
   #public-site). Une section teintée au milieu d'une page ivoire créait forcément deux
   bords, quelle que soit la façon de les fondre. Une seule teinte, pas de raccord. */
.etapes { background: transparent; }
.etapes-grille { display: grid; }
.etapes-grille article { padding: var(--e4) var(--e3); border-bottom: 1px solid var(--bordure); }
.etapes-grille article:last-child { border-bottom: 0; }
.etapes-grille .num {
    font-family: "Playfair Display", Georgia, serif;
    font-size: .95rem;
    letter-spacing: 1.5px;
    color: var(--caramel);
}
.etapes-grille h3 { margin: var(--e2) 0 var(--e2); }
.etapes-grille p { color: var(--gris); max-width: 42ch; }

/* ══════════════ Planche II — les trois prix ══════════════ */
.colonnes-prix { display: grid; border-top: 1px solid var(--bordure); margin-top: var(--e4); }
.colonne { padding: var(--e4) var(--e3); border-bottom: 1px solid var(--bordure); }
.colonne:last-child { border-bottom: 0; }
/* La colonne du milieu est la cote de référence de l'application : elle se détache.
   En blanc depuis que le fond du site est sable — un sable sur du sable ne se voit pas. */
.colonne.milieu { background: var(--carte); }
.colonne span {
    font-size: .68rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--caramel);
    font-weight: 600;
}
.colonne b {
    display: block;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1;
    margin: var(--e2) 0;
}
.colonne p { color: var(--gris); font-size: .9rem; max-width: 34ch; }

.objet-legende { display: grid; gap: var(--e3); align-items: center; margin-top: var(--e4); }
.objet-legende img {
    width: 100%;
    max-width: 260px;
    height: auto;
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    display: block;
}
.objet-legende p { color: var(--gris); font-size: .9rem; font-style: italic; margin: 0; }

/* ══════════════ Planche III — le document ══════════════
   Le rapport présenté comme une planche de catalogue : l'ombre portée est la seule du
   site, réservée à ce qui imite une feuille de papier posée. */
.planche { margin: 0; }
.planche-lien { display: block; text-decoration: none; }

/* La feuille est une page A4 réelle (794 px de large) réduite pour tenir dans la colonne.
   Le conteneur porte la hauteur visible ; l'échelle est calculée pour que 794 px de
   contenu occupent exactement la largeur disponible. */
.planche-cadre {
    display: block;
    position: relative;
    /* Exactement les dimensions de la feuille réduite : 794 × 297 mm ramenés à l'échelle
       ci-dessous. Toute autre valeur laisserait une bande blanche sur un côté. */
    width: 286px;
    height: 404px;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--bordure);
    box-shadow: 0 14px 34px rgba(33, 29, 23, .18);
    background: #fff;
}
.planche-cadre iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 794px;
    height: 1123px;
    border: 0;
    transform-origin: top left;
    transform: scale(.36);
    /* La planche est une illustration, pas une page à parcourir : les clics vont au lien
       qui l'entoure et mènent au rapport complet. */
    pointer-events: none;
}
.planche figcaption {
    margin-top: var(--e3);
    text-align: center;
    font-size: .84rem;
    font-style: italic;
    color: var(--gris);
}

/* Aperçu de fiche : droit, sobre, sans ombre ni rotation. */
.preview-card {
    width: min(340px, 100%);
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--r-l);
    overflow: hidden;
}
.preview-photo { aspect-ratio: 4 / 3; background: var(--sable); display: grid; place-items: center; overflow: hidden; }
.preview-photo svg { width: 46%; height: auto; color: var(--gris-clair); }
.preview-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-body { padding: var(--e3); }
.preview-tag { font-size: .72rem; color: var(--caramel); }
.preview-body h3 { margin: var(--e1) 0; }
.preview-tiers { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--e3); border-top: 1px solid var(--bordure); }
.preview-tiers div { padding: var(--e2) var(--e1) 0; }
.preview-tiers div + div { border-left: 1px solid var(--bordure); }
.preview-tiers span { display: block; font-size: .66rem; color: var(--gris); }
.preview-tiers b { font-family: "Playfair Display", Georgia, serif; font-size: 1rem; font-weight: 600; }
.preview-tiers .mid b { color: var(--caramel); }

/* Deux colonnes côte à côte à partir de 720 px, empilées en dessous : le texte d'abord,
   l'image ensuite. Une seule règle sert les sections « prix » et « document ». */
.split { display: grid; gap: var(--e5); align-items: start; }

/* Photographies. Pas d'ombre ni de cadre : la bordure fine du système suffit, et une
   photo de meuble se suffit à elle-même. */
.figure { margin: 0; }
.figure img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    background: var(--sable);
}
.figure figcaption {
    margin-top: var(--e3);
    font-size: .86rem;
    color: var(--gris);
    max-width: 46ch;
}

/* Un bouton qui doit se lire comme un lien : même rôle, même apparence. */
.link-button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--caramel);
    text-decoration: underline;
    cursor: pointer;
}

/* Sans filet horizontal : sur une page qui enchaîne quatre planches, ces traits se
   lisaient comme des soudures. L'espacement suffit à séparer. */
.section { padding: var(--e5) 0; }
.section-head { max-width: 46ch; margin-bottom: var(--e4); }
.section-head p { margin-top: var(--e3); }

/* Les trois étapes et les quatre atouts partagent la même grille et le même style. */
.cols { display: grid; gap: var(--e5) var(--e4); }
.item h3 { margin-bottom: var(--e2); }
.item p { color: var(--gris); font-size: .93rem; }
.item-num {
    display: block;
    font-family: "Playfair Display", Georgia, serif;
    font-size: .95rem;
    color: var(--caramel);
    margin-bottom: var(--e2);
}

/* Tableau des trois canaux : des lignes, pas des cartes. */
.tiers-table { border-top: 1px solid var(--bordure); }
.tiers-row {
    display: grid;
    gap: var(--e1) var(--e4);
    padding: var(--e4) 0;
    border-bottom: 1px solid var(--bordure);
}
.tiers-row dt { font-family: "Playfair Display", Georgia, serif; font-size: 1.15rem; font-weight: 600; margin: 0; }
.tiers-row dd { margin: 0; color: var(--gris); font-size: .93rem; }

.site-footer { border-top: 1px solid var(--bordure); padding: var(--e5) 0 var(--e6); }
.footer-inner { display: grid; gap: var(--e3); }
.footer-note { font-size: .8rem; color: var(--gris-clair); max-width: 62ch; }

/* ═════════════ Fenêtres modales ═════════════ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(31, 29, 26, .5);
    display: grid;
    place-items: start center;
    padding: var(--e3);
    z-index: 60;
    overflow-y: auto;
}
.modal-close {
    position: absolute;
    top: var(--e3); right: var(--e3);
    background: transparent;
    border: none;
    width: 30px; height: 30px;
    cursor: pointer;
    font-size: .95rem;
    color: var(--gris);
    line-height: 1;
}
.modal-close:hover { color: var(--encre); }

.login-card {
    position: relative;
    background: var(--ivoire);
    border-radius: var(--r-l);
    box-shadow: 0 20px 60px rgba(31, 29, 26, .22);
    padding: var(--e5) var(--e4) var(--e4);
    width: min(400px, 100%);
    margin: auto;
}
.login-card h2 { font-size: 1.5rem; }
.login-sub { color: var(--gris); font-size: .9rem; margin-top: var(--e1); }

/* Message de confirmation, à distinguer nettement d'une erreur : même forme, autre
   couleur. Un « courriel envoyé » affiché en rouge fait croire à une panne. */
.info {
    margin-top: var(--e3);
    padding: 10px 12px;
    background: #f0f4ed;
    border-left: 2px solid #5e7a52;
    border-radius: 4px;
    color: #3d5636;
    font-size: .88rem;
    line-height: 1.5;
}

/* Les deux liens de bas de fenêtre : mot de passe oublié, et bascule vers la création
   de compte. Discrets — ce ne sont pas les actions principales. */
.login-liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--e2);
    margin-top: var(--e3);
    font-size: .86rem;
}

/* ═════════════ Application ═════════════ */

.app-bar { background: var(--carte); border-bottom: 1px solid var(--bordure); position: sticky; top: 0; z-index: 20; }
.app-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    min-height: 62px;
    flex-wrap: wrap;
    padding-top: var(--e2);
    padding-bottom: var(--e2);
}
.app-bar-right { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.user-email { font-size: .82rem; color: var(--gris); display: none; }

.app-main { padding-top: var(--e4); padding-bottom: var(--e6); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e3); margin-bottom: var(--e5); }
.stat { border-left: 1px solid var(--bordure); padding-left: var(--e3); }
.stat:first-child { border-left: none; padding-left: 0; }
.stat-value { display: block; font-family: "Playfair Display", Georgia, serif; font-size: 1.5rem; font-weight: 600; line-height: 1.25; }
.stat-label { font-size: .76rem; color: var(--gris); }

.folders-bar { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); flex-wrap: wrap; }
.folders-chips { display: flex; gap: var(--e2); flex-wrap: wrap; flex: 1; min-width: 0; }
.folder-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    background: transparent;
    border: 1px solid var(--bordure);
    border-radius: 20px;
    padding: 6px 8px 6px 14px;
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.folder-chip:hover { border-color: var(--gris); }
.folder-chip.active { background: var(--encre); color: var(--ivoire); border-color: var(--encre); }
/* Le compte devient un jeton : sans lui, « Part Heritier 3 0 » ne se lisait pas -- le 3
   appartenait-il au nom, ou etait-ce le nombre d'objets ? */
.folder-chip .count {
    font-size: .7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: var(--sable);
    color: var(--gris);
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 2px;
}
.folder-chip.active .count { background: rgba(255,255,255,.22); color: var(--ivoire); }

/* Le dossier parent, en amont du nom : deux dossiers peuvent porter le meme nom. */
.folder-chip .chip-parent {
    font-size: .68rem;
    color: var(--gris-clair);
    margin-right: 1px;
}
.folder-chip.active .chip-parent { color: rgba(253,250,245,.6); }
.folder-chip .edit { border: none; background: transparent; cursor: pointer; font-size: .76rem; padding: 0 2px; color: inherit; opacity: .5; }
.folder-chip .edit:hover { opacity: 1; }

.selection-bar {
    display: flex;
    align-items: center;
    gap: var(--e2);
    flex-wrap: wrap;
    background: var(--sable);
    border-radius: var(--r);
    padding: 10px var(--e3);
    margin-bottom: var(--e3);
    font-size: .88rem;
}
.selection-bar select { width: auto; }

.toolbar { display: grid; gap: var(--e2); margin-bottom: var(--e4); }
.search-field { position: relative; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--gris-clair); pointer-events: none; }
.search-field input { padding-left: 36px; }

.status { color: var(--gris); font-size: .9rem; padding: var(--e2) 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--e3); }
.card {
    position: relative;
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: border-color .15s ease;
}
.card:hover { border-color: var(--gris); }
.card.selected { border-color: var(--caramel); }

.card-image { aspect-ratio: 4 / 3; background: var(--sable); display: grid; place-items: center; overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-image .placeholder { color: var(--gris-clair); font-size: .74rem; padding: var(--e2); text-align: center; }

.card-body { padding: var(--e3); flex: 1; display: flex; flex-direction: column; gap: var(--e1); }
.card-name { font-family: "Playfair Display", Georgia, serif; font-size: .98rem; font-weight: 600; line-height: 1.3; }
.card-price { color: var(--caramel); font-weight: 600; font-size: .92rem; }
.card-meta { font-size: .74rem; color: var(--gris); margin-top: auto; padding-top: var(--e2); }
.tag { font-size: .72rem; color: var(--gris); }
.card-check { position: absolute; top: 8px; left: 8px; width: 19px; height: 19px; cursor: pointer; z-index: 2; accent-color: #8a5a2b; }

.skeleton { pointer-events: none; }
.skeleton .card-image, .sk-line {
    background: linear-gradient(90deg, var(--sable) 25%, #ede4d5 50%, var(--sable) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
.sk-line { height: 11px; border-radius: 3px; display: block; }
.sk-line.short { width: 55%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Certaines personnes règlent leur système pour supprimer les animations — mal des
   transports, troubles vestibulaires, simple préférence. On les respecte : tout s'affiche,
   rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
    .skeleton .card-image, .sk-line { animation: none; }
    html { scroll-behavior: auto; }
    .ouverture-photo { animation: none; }
    .apparait, .apparait.vu { opacity: 1; transform: none; transition: none; }
}

.empty { padding: var(--e6) 0; color: var(--gris); max-width: 44ch; }
.empty-icon { width: 40px; height: 40px; color: var(--bordure); margin-bottom: var(--e3); }
.empty h3 { color: var(--encre); margin-bottom: var(--e2); }
.empty p { font-size: .93rem; }

/* ═════════════ Fiche détaillée ═════════════ */

.detail-card {
    position: relative;
    background: var(--ivoire);
    border-radius: var(--r-l);
    box-shadow: 0 20px 60px rgba(31, 29, 26, .22);
    width: min(860px, 100%);
    margin: auto;
    padding: var(--e5) var(--e4) var(--e4);
}
.detail-title { font-family: "Playfair Display", Georgia, serif; font-size: 1.55rem; font-weight: 600; margin: 0 var(--e5) var(--e1) 0; }
.detail-photos { display: flex; gap: var(--e2); overflow-x: auto; margin: var(--e3) 0; padding-bottom: var(--e1); }
.detail-photos img { height: 160px; border-radius: var(--r); border: 1px solid var(--bordure); flex: 0 0 auto; }
.detail-section-title { font-size: .78rem; color: var(--gris); font-weight: 500; margin: var(--e4) 0 var(--e2); }

.price-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border: 1px solid var(--bordure); border-radius: var(--r); overflow: hidden; }
.tier { padding: var(--e3); background: var(--carte); }
.tier + .tier { border-left: 1px solid var(--bordure); }
.tier.highlight { background: var(--sable); }
.tier-label { font-size: .72rem; color: var(--gris); }
.tier-value { font-family: "Playfair Display", Georgia, serif; font-size: 1.1rem; font-weight: 600; margin-top: var(--e1); }
.tier.highlight .tier-value { color: var(--caramel); }

.detail-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 var(--e4); margin: 0; }
.detail-row { display: flex; gap: var(--e2); padding: var(--e2) 0; border-bottom: 1px solid var(--bordure); font-size: .88rem; }
.detail-row dt { color: var(--gris); min-width: 100px; margin: 0; }
.detail-row dd { margin: 0; }
.detail-text { font-size: .92rem; white-space: pre-wrap; }

.folder-card { width: min(600px, 100%); }
.percent-row { display: flex; gap: var(--e2); flex-wrap: wrap; }
.percent-row label { font-size: .84rem; color: var(--gris); }
.percent-row input { width: 76px; }
.folder-actions { display: flex; gap: var(--e2); margin-top: var(--e4); flex-wrap: wrap; }
.report-link { text-decoration: none; }

/* ═════════════ Écrans plus larges ═════════════ */

@media (min-width: 720px) {
    .cols { grid-template-columns: repeat(3, 1fr); }
    .cols.four { grid-template-columns: repeat(2, 1fr); }
    .tiers-row { grid-template-columns: 180px 1fr; align-items: baseline; }
    .split { grid-template-columns: 1fr 1fr; gap: var(--e6); }
    .etapes-grille { grid-template-columns: repeat(3, 1fr); }
    .etapes-grille article { border-bottom: 0; border-right: 1px solid var(--bordure); }
    .etapes-grille article:last-child { border-right: 0; }
    .colonnes-prix { grid-template-columns: repeat(3, 1fr); }
    .colonne { border-bottom: 0; border-right: 1px solid var(--bordure); }
    .colonne:last-child { border-right: 0; }
    .objet-legende { grid-template-columns: 260px 1fr; gap: var(--e5); }
    /* La planche grandit avec la place disponible : 794 × 0,44 = 349 px de large. */
    .planche-cadre { width: 349px; height: 494px; }
    .planche-cadre iframe { transform: scale(.44); }
    .toolbar { grid-template-columns: 1fr auto auto; }
    .user-email { display: inline; }
    .modal-backdrop { place-items: center; padding: var(--e4); }
    .footer-inner { grid-template-columns: auto 1fr; align-items: center; gap: var(--e5); }
    .detail-card { padding: var(--e5); }
    .detail-photos img { height: 200px; }
}

@media (min-width: 960px) {
    .nav-links { display: flex; }
    .hero { padding: var(--e7) 0; }
    .hero-inner { grid-template-columns: 1fr 340px; align-items: center; gap: var(--e7); }
    /* Les sections gardent le même espacement qu'en mobile. Sur grand écran, ce réglage
       montait à 96 px de chaque côté : près de deux cents pixels de vide entre deux
       planches, qui donnaient l'impression d'une page inachevée plutôt que d'un
       document aéré. */
    .cols.four { grid-template-columns: repeat(4, 1fr); }
}

/*
 * Sur écran tactile, une cible de 32 px se rate une fois sur trois. Les boutons passent
 * donc à 44 px de haut minimum — la hauteur en dessous de laquelle un doigt n'est plus
 * précis. Le rembourrage horizontal ne bouge pas : c'est la hauteur qui compte au pouce.
 */
@media (max-width: 719px) {
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; }
    .modal-close { width: 40px; height: 40px; }
    .card-check { width: 22px; height: 22px; }
}

/* ═════════════ Formulaire de fiche ═════════════
   Même carte que les autres fenêtres, mais plus large et défilante : une fiche compte une
   quinzaine de champs, et un formulaire qui déborde de l'écran ne se remplit jamais
   jusqu'au bout. */
.fiche-card {
    position: relative;
    width: min(680px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--r-l);
    padding: var(--e5) var(--e4) var(--e4);
}
.fiche-card h2 { font-size: 1.45rem; }

/* Les champs qui vont naturellement par deux ou par trois : les prix par canal, l'époque
   et les matières. Empilés sur téléphone, côte à côte dès qu'il y a la place. */
.fiche-duo, .fiche-trio { display: grid; gap: var(--e3); }

.fiche-photos-zone {
    margin-top: var(--e4);
    padding-top: var(--e3);
    border-top: 1px solid var(--bordure);
}
.fiche-photos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.fiche-photos img {
    width: 84px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--r);
    border: 1px solid var(--bordure);
}

.fiche-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--e2);
    margin-top: var(--e4);
    padding-top: var(--e3);
    border-top: 1px solid var(--bordure);
}

/* Boutons au pied de la fiche consultée. La suppression est repoussée à droite, loin de
   « Modifier » : deux actions voisines dont l'une est sans retour, c'est un clic malheureux
   qui attend son heure. */
.detail-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--e3);
    margin-top: var(--e4);
    padding-top: var(--e3);
    border-top: 1px solid var(--bordure);
}

@media (min-width: 620px) {
    .fiche-duo { grid-template-columns: 1fr 1fr; }
    .fiche-trio { grid-template-columns: repeat(3, 1fr); }
}

/* ═════════════ Tableau de bord de l'inventaire ═════════════
   Trois blocs, une seule carte pour les trois : c'est le système du site, on n'invente
   pas une surface de plus pour l'occasion. */
.tableau-bord { display: grid; gap: var(--e3); }
.bloc-bord {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--r-l);
    padding: var(--e4);
}
.bloc-bord h3 {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--caramel);
    margin-bottom: var(--e3);
}
.note-bord { margin-top: var(--e3); font-size: .78rem; color: var(--gris); line-height: 1.45; }

/* Barres de répartition. La piste reste visible même à zéro : sans elle, on ne verrait
   pas qu'une catégorie existe. */
.barres { display: grid; gap: var(--e2); }
.barre-ligne { display: grid; grid-template-columns: 1fr 2fr auto; gap: var(--e3); align-items: center; }
.barre-nom { font-size: .86rem; }
.barre-piste { height: 8px; background: var(--sable); border-radius: 4px; overflow: hidden; }
.barre-remplie { display: block; height: 100%; background: var(--caramel); border-radius: 4px; }
.barre-valeur { font-size: .78rem; color: var(--gris); white-space: nowrap; }

/* Valeur par canal. */
.canaux { display: grid; gap: var(--e2); }
.canal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--e2) 0;
    border-bottom: 1px solid var(--bordure);
    font-size: .9rem;
}
.canal:last-child { border-bottom: 0; }
.canal b { font-family: "Playfair Display", Georgia, serif; font-size: 1.1rem; }

/* Palmarès : chaque ligne ouvre la fiche. */
.palmares { list-style: none; margin: 0; padding: 0; counter-reset: rang; }
.palmares li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e3);
    padding: var(--e2) 0;
    border-bottom: 1px solid var(--bordure);
    cursor: pointer;
}
.palmares li:last-child { border-bottom: 0; }
.palmares li:hover .palmares-nom { color: var(--caramel); }
.palmares li::before {
    counter-increment: rang;
    content: counter(rang);
    font-family: "Playfair Display", Georgia, serif;
    color: var(--gris-clair);
    font-size: .9rem;
    flex: 0 0 14px;
}
.palmares-nom { flex: 1; font-size: .88rem; }
.palmares b { font-family: "Playfair Display", Georgia, serif; white-space: nowrap; }

@media (min-width: 900px) {
    .tableau-bord { grid-template-columns: repeat(3, 1fr); }
}

/* Le bilan ferme la page, après les fiches : on le consulte une fois le lot regardé.
   Un filet et de l'air le séparent de la grille, sans en faire une autre page. */
.bilan { margin-top: var(--e6); padding-top: var(--e5); border-top: 1px solid var(--bordure); }
.bilan-titre {
    font-size: 1.25rem;
    margin-bottom: var(--e4);
}

/* Raccourci vers le bilan : même forme que les trois nombres voisins, sans en devenir un
   quatrième — pas de chiffre, une flèche. */
.stat-lien { text-decoration: none; color: inherit; cursor: pointer; }
.stat-lien:hover .stat-label { color: var(--caramel); }
.stat-lien .stat-value { color: var(--caramel); }

/* Comparatif des dossiers : sur toute la largeur, sous les trois blocs. */
.bloc-large { grid-column: 1 / -1; margin-top: var(--e3); }
.comparatif { display: grid; gap: var(--e2); }
.comparatif-ligne {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: var(--e3);
    align-items: center;
    padding: var(--e2) var(--e2);
    border-radius: var(--r);
    cursor: pointer;
}
.comparatif-ligne:hover { background: var(--sable); }
/* Le dossier affiché se repère sans qu'on ait à le chercher dans la liste. */
.comparatif-ligne.courant { background: var(--sable); box-shadow: inset 2px 0 0 var(--caramel); }
.comparatif-chiffres { text-align: right; white-space: nowrap; }
.comparatif-chiffres b { display: block; font-family: "Playfair Display", Georgia, serif; font-size: 1rem; }
.comparatif-chiffres span { font-size: .74rem; color: var(--gris); }

/* ── Le bloc « la vente » dans la fiche ──────────────────────────────────
   Encadré, parce qu'il change de nature : tout le reste de la fiche est une
   estimation, ces trois champs sont la seule vérité vérifiable du projet. */
.bloc-vente {
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    padding: var(--e3);
    margin: var(--e3) 0;
    background: var(--sable);
}
.bloc-vente legend {
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gris);
    padding: 0 var(--e2);
}
.vente-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e3);
}
@media (max-width: 520px) {
    .vente-duo { grid-template-columns: 1fr; }
}
.bloc-vente input,
.bloc-vente select {
    width: 100%;
    font: inherit;
    font-size: .92rem;
    padding: 9px 12px;
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    background: var(--carte);
    color: var(--encre);
}

/* Un objet vendu se repère dans la liste sans avoir à ouvrir sa fiche. */
.badge-vendu {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: #e7f0e6;
    color: #2f5d33;
}

/* Les chiffres de la confrontation aux ventes. */
.ventes-chiffres {
    display: flex;
    gap: var(--e5);
    flex-wrap: wrap;
    margin-bottom: var(--e3);
}
.chiffre-vente { display: flex; flex-direction: column; }

/* ── En-tête compact des Fiches publiques ────────────────────────────────
   Le titre et l'état de publication sur une seule ligne. Les trois blocs de
   statistiques prenaient un tiers de l'écran pour trois nombres. */
.page-tete {
    display: flex;
    align-items: baseline;
    gap: var(--e3);
    flex-wrap: wrap;
    margin: 0 0 var(--e3);
}
/* Même règle que dans le module : un titre de page de travail se lit, il ne se proclame
   pas. La taille générale (3,2 rem) est celle du bandeau d'accueil. */
.page-tete h1 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.2; letter-spacing: -.01em; }
.etats-resume { display: flex; gap: 6px; flex-wrap: wrap; }
.pe {
    font-size: .78rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.pe b { font-weight: 700; }
.pe-ok { background: #e7f0e6; color: #2f5d33; }
.pe-warn { background: #f7ecdf; color: #8a5a2b; }
.pe-off { background: var(--sable); color: var(--gris); }

/* Panneau qui se replie : on lit l'explication une fois, pas mille. */
.tete-repliable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--encre);
    cursor: pointer;
    text-align: left;
}
.tete-repliable .fleche { color: var(--caramel); font-size: 1rem; }
.repliable #corps-reglages { margin-top: var(--e3); }

/* ── La ligne de chiffres de l'accueil ───────────────────────────────────
   Quatre blocs occupaient une bande entière pour trois nombres et un lien,
   et repoussaient les meubles hors de l'écran. */
.ligne-stats {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .9rem;
    color: var(--gris);
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    padding: 10px var(--e3);
    margin-bottom: var(--e3);
}
.ligne-stats b {
    color: var(--encre);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
}
.ligne-stats .sep { color: var(--bordure); }
/* Le vendu en vert : c'est le seul chiffre verifie de la ligne. */
.ligne-stats .stat-vendu b { color: #2f5d33; }
.ligne-stats .lien-bilan {
    margin-left: auto;
    color: var(--caramel);
    font-weight: 600;
    text-decoration: none;
    font-size: .85rem;
}
.ligne-stats .lien-bilan:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .ligne-stats .lien-bilan { margin-left: 0; }
}

/* ── Le comparatif : où en est chaque dossier ────────────────────────────
   Remplace le classement par valeur estimée, qui répétait un chiffre déjà
   affiché et ne disait pas quoi faire. */
.scroll-comparatif { overflow-x: auto; }
.comparatif-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 620px;
    font-size: .88rem;
}
.comparatif-table th,
.comparatif-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--bordure);
    vertical-align: middle;
}
.comparatif-table th {
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gris-clair);
    font-weight: 600;
    white-space: nowrap;
}
.comparatif-table tbody tr:last-child td { border-bottom: 0; }
.comparatif-table tbody tr { cursor: pointer; }
.comparatif-table tbody tr:hover { background: var(--sable); }
.comparatif-table tbody tr.courant { background: var(--sable); }
.comparatif-table .chiffre-col { font-variant-numeric: tabular-nums; white-space: nowrap; }
.comparatif-table .dossier { font-weight: 600; }
.comparatif-table .dossier small {
    display: block;
    font-weight: 400;
    color: var(--gris-clair);
    font-size: .76rem;
}
.ecoule { display: flex; align-items: center; gap: 8px; }
.ecoule .jauge {
    width: 90px; height: 7px; border-radius: 99px;
    background: var(--sable); overflow: hidden; flex: 0 0 auto;
}
.ecoule .jauge i { display: block; height: 100%; background: #2f5d33; opacity: .75; }
.ecoule .pct { font-size: .76rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.comparatif-table .ecart { font-weight: 600; font-variant-numeric: tabular-nums; }
.comparatif-table .ecart.plus { color: #2f5d33; }
.comparatif-table .ecart.moins { color: #9c3330; }
.dort { font-size: .76rem; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.dort.calme { background: #e7f0e6; color: #2f5d33; }
.dort.tiede { background: #f7ecdf; color: #8a5a2b; }
.dort.froid { background: #f9ece9; color: #9c3330; }