/*
 * WinetPay — Le tunnel de dépôt (`.adp-*`). 09-CDC-ADS.md, ADS-D26 / ADS-D36.
 *
 * IDENTITÉ. Aucune palette nouvelle : la couleur reste `--c-primary`, donc les sept thèmes et la
 * garantie de contraste AA sont acquis sans rien réécrire (règle « le thème possède la COULEUR, le
 * style la FORME »). Ce qui distingue cet écran, c'est sa forme : une colonne étroite, une seule
 * décision par bloc, et une barre d'action qui ne quitte jamais le pouce.
 *
 * ⚠️ PIÈGE CONNU DU PROJET : la règle générique `button { background: var(--bo-primary) }` d'app.css
 * fuit sur tout <button> non redéclaré. Chaque bouton stylé ici REDÉCLARE son fond, survol compris.
 *
 * ⚠️ FEUILLE SÉPARÉE d'`annonces.css`, volontairement : le budget d'ADS-D31 porte sur la première
 * vue du CATALOGUE. Charger les styles d'un formulaire que 99 % des visiteurs n'ouvriront jamais
 * mangerait ce budget pour rien.
 *
 * Toutes les animations passent par `transform`/`opacity` — zéro mise en page recalculée, le
 * contrat de performance déjà mesuré sur les écrans d'accès.
 */

.adp {
    --adp-gap: var(--sp-5);
}

/*
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * 🔴 `hidden` DOIT VRAIMENT MASQUER — SIXIÈME OCCURRENCE DE CE PIÈGE DANS LE PROJET
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 *
 * `[hidden] { display: none }` est une règle du NAVIGATEUR : sa spécificité est la plus faible qui
 * soit. La moindre règle de classe posant un `display:` la bat, et l'élément reste rendu alors que
 * le balisage le dit masqué. Il est alors INVISIBLE mais présent — il occupe la place, et surtout
 * il capte les clics. Aucune erreur nulle part.
 *
 * Trois éléments de cet écran étaient concernés, et le garde du projet les a tous les trois
 * attrapés :
 *
 *  - `.adp-modale` (`display: grid`, `position: fixed; inset: 0`) — le voile du doublon serait
 *    resté par-dessus TOUTE la page et aurait intercepté chaque clic du formulaire. Exactement le
 *    défaut passé en production le 2026-08-10 avec la fenêtre d'avis.
 *  - `.adp-act` — les boutons portent `.btn`, qui pose un `display` dans `site.css`. « Retour » et
 *    « Publier » sont masqués au chargement : ils seraient restés cliquables.
 *  - `.adp-prix` (`display: flex`) — masqué PAR LE JS quand le prix est « gratuit » ou « sur
 *    demande ». Celui-là, aucun garde ne pouvait le voir : il n'est jamais écrit `hidden` dans une
 *    vue. Il est ici parce que le raisonnement, lui, s'applique.
 */
.adp-modale[hidden],
.adp-act[hidden],
.adp-prix[hidden] {
    display: none !important;
}

.adp-container {
    max-width: 44rem;
}

.adp-wrap {
    padding-block: var(--sp-8) calc(var(--sp-10) + 4.5rem); /* place pour la barre d'action collée */
}

/* ===== En-tête ===== */
.adp-title {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    color: var(--an-ink);
    margin: 0 0 var(--sp-2);
    text-wrap: balance;
}

.adp-sub {
    color: var(--an-dim);
    margin: 0 0 var(--sp-6);
}

/* ===== Les trois étapes ===== */
.adp-steps {
    display: flex;
    gap: var(--sp-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-5);
}

.adp-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-small);
    color: var(--an-dim);
    padding-top: var(--sp-2);
    border-top: 3px solid var(--an-line);
    transition: color var(--an-dur) ease, border-color var(--an-dur) ease;
}

.adp-step.is-on {
    color: var(--an-ink);
    border-top-color: var(--c-primary);
    font-weight: var(--fw-semibold);
}

.adp-step-n {
    display: inline-grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 50%;
    background: var(--an-line);
    color: var(--an-ink);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
}

.adp-step.is-on .adp-step-n {
    background: var(--c-primary);
    color: var(--c-text-inverse);
}

/* Sur mobile, l'intitulé disparaît : trois pastilles suffisent à dire où l'on en est. */
@media (max-width: 30rem) {
    .adp-step { font-size: 0; gap: 0; justify-content: center; }
    .adp-step-n { font-size: var(--fs-caption); }
}

/* ===== La jauge de complétude (§16.5) — une progression, pas un reproche ===== */
.adp-jauge {
    background: var(--an-card);
    border: 1px solid var(--an-line);
    border-radius: var(--an-radius);
    padding: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.adp-jauge-bar {
    block-size: 0.5rem;
    border-radius: 999px;
    background: var(--an-line);
    overflow: hidden;
}

.adp-jauge-fill {
    display: block;
    block-size: 100%;
    border-radius: 999px;
    background: var(--c-primary);
    /* `width` recalcule la mise en page ; ici la barre est seule sur sa ligne et ne pousse rien —
       la transition reste bornée à cet élément. */
    transition: width 320ms ease;
}

.adp-jauge-t {
    display: flex;
    gap: var(--sp-2);
    align-items: baseline;
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-small);
    color: var(--an-dim);
}

.adp-jauge-t strong { color: var(--an-ink); }

/* ===== État de sauvegarde ===== */
.adp-etat {
    min-block-size: 1.25rem;
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-small);
    color: var(--an-dim);
}

/* ===== La porte : il faut un compte pour publier ===== */
.adp-porte {
    background: var(--an-card);
    border: 1px solid var(--an-line);
    border-radius: var(--an-radius);
    padding: var(--sp-6);
    text-align: center;
}

.adp-porte-t { margin: 0 0 var(--sp-2); font-size: var(--fs-h3); color: var(--an-ink); }
.adp-porte-s { margin: 0 0 var(--sp-5); color: var(--an-dim); }
.adp-porte-a { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ===== Les écrans ===== */
.adp-ecran {
    border: 0;
    padding: 0;
    margin: 0 0 var(--adp-gap);
    min-inline-size: 0; /* un <fieldset> refuse de rétrécir sans cela, et déborde sur mobile */
}

.adp-legend {
    /* La légende porte l'étape pour les lecteurs d'écran ; le titre visible est celui de l'en-tête,
       et le répéter deux fois à l'écran serait du bruit. */
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.adp-champ { margin-bottom: var(--adp-gap); }

.adp-label {
    display: block;
    font-weight: var(--fw-semibold);
    color: var(--an-ink);
    margin-bottom: var(--sp-2);
}

.adp-aide {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-small);
    color: var(--an-dim);
}

.adp-aide-alerte { color: var(--c-warning); }

.adp-in {
    inline-size: 100%;
    padding: var(--sp-3) var(--sp-4);
    font: inherit;
    color: var(--an-ink);
    background: var(--c-surface);
    border: 1px solid var(--an-line);
    border-radius: var(--r-md);
    transition: border-color var(--an-dur) ease, box-shadow var(--an-dur) ease;
}

.adp-in:focus-visible {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-100);
}

.adp-ta { resize: vertical; min-block-size: 7rem; }
.adp-sel { appearance: none; background-image: none; }

/* Le champ de recherche qui filtre une liste longue (rubriques, lieux).
   Discret et posé JUSTE AU-DESSUS de sa liste : c'est sa proximité qui dit ce qu'il filtre, sans
   avoir à l'écrire. La croix de `type="search"` reste native — elle vide le champ d'un geste. */
.adp-filtre { margin-bottom: var(--sp-2); font-size: var(--fs-small); }

/* ===== Zone de dépôt des photos ===== */
.adp-depot {
    display: grid;
    place-items: center;
    gap: var(--sp-1);
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    cursor: pointer;
    color: var(--an-dim);
    background: var(--an-card);
    border: 2px dashed var(--an-line);
    border-radius: var(--an-radius);
    transition: border-color var(--an-dur) ease, transform var(--an-dur) ease;
}

.adp-depot:hover,
.adp-depot.is-survol { border-color: var(--c-primary); transform: translateY(-1px); }
.adp-depot:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.adp-depot:active { transform: translateY(0); } /* réponse immédiate à la pression (§12.4) */

.adp-depot-i { inline-size: 2rem; block-size: 2rem; }
.adp-depot-t { font-weight: var(--fw-semibold); color: var(--an-ink); }
.adp-depot-s { font-size: var(--fs-small); }

/* ===== La grille de photos ===== */
.adp-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: var(--sp-3);
    list-style: none;
    padding: 0;
    margin: var(--sp-4) 0 0;
}

.adp-photo {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--an-line);
}

.adp-photo img {
    display: block;
    inline-size: 100%;
    /* Ratio par défaut tant que les dimensions ne sont pas connues : aucune ligne ne saute. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.adp-photo-b {
    position: absolute;
    inset-block-start: var(--sp-2);
    inset-inline-start: var(--sp-2);
    padding: 0.1rem 0.4rem;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--c-text-inverse);
    background: var(--c-primary);
    border-radius: var(--r-sm);
}

.adp-photo-x {
    position: absolute;
    inset-block-start: var(--sp-2);
    inset-inline-end: var(--sp-2);
    /* ≥ 44 px de cible tactile (§16.12) — l'accessibilité EST le premium. */
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--c-neutral-0);
    background: rgba(0, 0, 0, 0.55); /* redéclaré : la règle générique de app.css fuirait ici */
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.adp-photo-x:hover { background: rgba(0, 0, 0, 0.75); }
.adp-photo-x:focus-visible { outline: 2px solid var(--c-neutral-0); outline-offset: -3px; }

/* ===== Choix (prix, WhatsApp) ===== */
.adp-choix { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.adp-opt {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    /* 44 px de haut : le même pouce doit pouvoir viser sans se tromper. */
    min-block-size: 2.75rem;
    padding: var(--sp-2) var(--sp-4);
    cursor: pointer;
    color: var(--an-ink);
    background: var(--an-card);
    border: 1px solid var(--an-line);
    border-radius: 999px;
    transition: border-color var(--an-dur) ease;
}

.adp-opt:has(input:checked) { border-color: var(--c-primary); font-weight: var(--fw-semibold); }
.adp-opt:has(input:focus-visible) { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.adp-opt-large { border-radius: var(--r-md); inline-size: 100%; }

/* ===== Le prix ===== */
.adp-prix { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.adp-prix-in { font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }
.adp-prix-dev { font-weight: var(--fw-semibold); color: var(--an-dim); }

/* ===== Récapitulatif ===== */
.adp-recap {
    background: var(--an-card);
    border: 1px solid var(--an-line);
    border-radius: var(--an-radius);
    padding: var(--sp-4);
}

.adp-recap-l { margin: 0 0 var(--sp-1); color: var(--an-ink); }
.adp-recap-l:first-child { font-weight: var(--fw-semibold); }
.adp-recap-l:last-child { margin-bottom: 0; }

.adp-legal { margin: var(--sp-4) 0 0; font-size: var(--fs-small); color: var(--an-dim); }

/* ===== Barre d'action — collée en bas, là où est le pouce ===== */
.adp-actions {
    position: sticky;
    inset-block-end: 0;
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end;
    padding: var(--sp-4) 0;
    background: linear-gradient(180deg, transparent, var(--c-bg) 35%);
}

.adp-erreur {
    margin: var(--sp-3) 0 0;
    padding: var(--sp-3) var(--sp-4);
    color: var(--c-error);
    background: var(--c-error-bg);
    border: 1px solid var(--c-error);
    border-radius: var(--r-md);
}

/* ===== La modale du doublon (ADS-D30) ===== */
.adp-modale {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: var(--sp-4);
    background: rgba(0, 0, 0, 0.5);
}

.adp-modale-boite {
    inline-size: min(28rem, 100%);
    padding: var(--sp-6);
    background: var(--c-surface);
    border-radius: var(--an-radius);
}

.adp-modale-t { margin: 0 0 var(--sp-2); font-size: var(--fs-h3); color: var(--an-ink); }
.adp-modale-s { margin: 0 0 var(--sp-5); color: var(--an-dim); }
.adp-modale-a { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ===== L'écran de fin ===== */
.adp-fin {
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    background: var(--an-card);
    border: 1px solid var(--an-line);
    border-radius: var(--an-radius);
}

.adp-fin-t { margin: 0 0 var(--sp-2); font-size: var(--fs-h2); color: var(--an-ink); }
.adp-fin-s { margin: 0 auto var(--sp-6); max-inline-size: 34rem; color: var(--an-dim); }
.adp-fin-a { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/*
 * Une animation qu'on ne peut pas refuser n'est pas premium (§16.12). Ceci coupe TOUTES les
 * transitions de la feuille d'un seul bloc — y compris celles qu'on ajoutera plus tard.
 */
@media (prefers-reduced-motion: reduce) {
    .adp *,
    .adp *::before,
    .adp *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}