/*
 * WinetPay — LES DEUX MODALES DU LIEN QUI NE PEUT PAS S'OUVRIR.
 *
 * Voir `resources/views/partials/acces-lien.blade.php` pour le pourquoi des deux situations
 * (walled-garden sans ticket · webview sans application). Cette feuille les habille.
 *
 * 🔴 **REFAITE LE 2026-09-04 APRÈS UN VERDICT DU PROPRIÉTAIRE : « ce formulaire n'est pas ultra
 * premium ».** Il avait raison — c'était une boîte blanche correcte, sans signature. La reprise
 * emploie le vocabulaire qu'il a DÉJÀ validé sur « Ajouter une annonce » : trois ombres étagées, un
 * lustre en pseudo-élément qui traverse, un état d'appui franc. Réinventer un langage à côté de
 * celui qu'il a approuvé aurait produit un troisième dialecte dans le même site.
 *
 * ⚠️ Feuille dédiée, chargée par le partiel : elle sert la fiche d'annonce ET la vitrine d'un
 * annonceur, qui ne chargent pas les mêmes styles.
 *
 * ⚠️ Tokens uniquement — le garde-fou du design system refuse toute couleur écrite en dur.
 * ⚠️ Animations par `transform` et `opacity` seuls : cette modale s'ouvre sur des téléphones
 * d'entrée de gamme, derrière un portail captif.
 */

/*
 * ═══ LE GARDE-FOU `[hidden]`, EN TÊTE DE FEUILLE ═══
 * Règle du NAVIGATEUR, donc de spécificité minimale : la moindre classe posant un `display:` la bat.
 * Un test du projet vérifie sa présence sur CHAQUE feuille.
 */
[hidden] { display: none !important; }


/* ═══════════════════ LE VOILE ═══════════════════ */

/*
 * 🔴 **L'ÉTAT FERMÉ EST PORTÉ PAR LA CLASSE, PAS PAR `[hidden]`.** Onze occurrences de ce piège sur
 * ce projet : un `display:` de classe bat l'attribut, et le voile reste alors dans la page —
 * invisible, et parfaitement capable d'intercepter TOUS les clics du site.
 */
.acl-voile {
    display: none;
    position: fixed;
    inset: 0;
    /* Au-dessus de l'en-tête collant et du bouton flottant du marché. */
    z-index: 9000;
    padding: var(--sp-4);
    background: color-mix(in srgb, var(--c-neutral-900) 62%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.acl-voile.is-ouvert {
    display: grid;
    place-items: center;
}


/* ═══════════════════ LA CARTE ═══════════════════ */
.acl-carte {
    position: relative;
    inline-size: 100%;
    max-inline-size: 440px;
    /* ⚠️ Aucun retrait EN HAUT : le décor doit toucher les bords arrondis. Il déborde du retrait
       latéral par des marges négatives — voir `.acl-entete`. */
    padding: 0 var(--sp-6) var(--sp-6);
    overflow: hidden;
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: 24px;
    text-align: center;

    /*
     * 🔑 **TROIS OMBRES ÉTAGÉES, PAS UNE.** Une ombre unique aplatit ; trois — un contact serré, une
     * diffusion moyenne, une portée large et teintée de la marque — donnent l'épaisseur. C'est
     * exactement le traitement validé sur les boutons du marché.
     */
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--c-neutral-900) 8%, transparent),
        0 12px 28px color-mix(in srgb, var(--c-neutral-900) 14%, transparent),
        0 32px 64px color-mix(in srgb, var(--c-primary) 18%, transparent);

    animation: acl-entree 280ms var(--ease-out) both;
}

@keyframes acl-entree {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to { opacity: 1; transform: none; }
}

/* ═══════════════════ LE DÉCOR ═══════════════════

   🔑 **LA MÊME ONDE QUE LE HÉROS DU MARCHÉ.** Le visiteur vient d'une page qui porte ce motif ;
   inventer un décor de plus aurait fait deux langages dans un même parcours.

   ⚠️ **DESSINÉ, PAS PHOTOGRAPHIÉ** : le dégradé vient de la marque, donc il suit les huit thèmes.
   Une image de fichier aurait gardé ses couleurs — le défaut qui a imposé une scène en ligne pour
   le héros. */
.acl-entete {
    position: relative;
    /* Elle déborde du retrait latéral de la carte pour toucher les deux bords. */
    margin-inline: calc(-1 * var(--sp-6));
    block-size: 148px;
    background:
        radial-gradient(120% 100% at 15% 0%, color-mix(in srgb, var(--c-primary) 24%, transparent), transparent 60%),
        linear-gradient(142deg, var(--c-primary), var(--c-accent));
    overflow: hidden;
}

.acl-decor { display: block; inline-size: 100%; block-size: 100%; }

/* Les fronts d'onde partent du bas de la bande, là où la pastille viendra se poser. */
.acl-front {
    transform-box: view-box;
    transform-origin: 220px 205px;
    animation: acl-front 6s cubic-bezier(.2, .55, .3, 1) infinite;
}

.acl-front:nth-of-type(2) { animation-delay: 2s; }
.acl-front:nth-of-type(3) { animation-delay: 4s; }

@keyframes acl-front {
    0% { transform: scale(.3); opacity: 0; }
    14% { opacity: .95; }
    72% { opacity: .28; }
    100% { transform: scale(1.5); opacity: 0; }
}

.acl-poussiere {
    transform-box: view-box;
    transform-origin: center;
    animation: acl-poussiere 5s ease-in-out infinite;
}

/* Décalages portés par des CLASSES : un attribut `style` est refusé par la CSP du back-office, où ce
   partiel est aussi servi (2026-09-15) — les poussières y clignotaient toutes ensemble. */
.acl-poussiere--1 { animation-delay: 1.4s; }
.acl-poussiere--2 { animation-delay: 2.6s; }
.acl-poussiere--3 { animation-delay: 3.4s; }
.acl-poussiere--4 { animation-delay: 2s; }

@keyframes acl-poussiere {
    0%, 100% { opacity: .22; }
    40% { opacity: .85; }
}

/* La poignée vit SUR le décor : elle en prend la couleur claire. */
.acl-poignee { display: none; }

.acl-fermer {
    position: absolute;
    inset-block-start: var(--sp-4);
    inset-inline-end: var(--sp-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    padding: 0;
    /* ⚠️ Elle est POSÉE SUR LE DÉCOR : ses couleurs de page l'y rendaient illisible. */
    z-index: 2;
    color: var(--c-neutral-0);
    background: color-mix(in srgb, var(--c-neutral-900) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-neutral-0) 34%, transparent);
    border-radius: var(--r-full);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.acl-fermer svg { inline-size: 16px; block-size: 16px; }
.acl-fermer:hover { background: color-mix(in srgb, var(--c-neutral-900) 34%, transparent); }
.acl-fermer:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }


/* ═══════════════════ LA PASTILLE ═══════════════════

   Elle donne à la modale son sujet avant la première ligne lue. Un halo l'entoure : c'est ce qui la
   sépare d'un simple rond coloré. */
.acl-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 66px;
    block-size: 66px;
    /* 🔑 ELLE CHEVAUCHE LA BANDE. C'est ce recouvrement qui donne à la carte deux plans au lieu
       d'un empilement — et il place le sujet exactement à la couture des deux. */
    margin-block: -36px var(--sp-4);
    color: var(--c-primary);
    /* 🔴 **DEUX `background` SE SERAIENT ANNULÉS** : le second gagne, et la pastille aurait été
       TRANSLUCIDE sur la bande au lieu dy paraître découpée. Une seule déclaration, deux couches :
       la teinte par-dessus la couleur de la carte. */
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--c-primary) 16%, transparent),
            color-mix(in srgb, var(--c-accent) 12%, transparent)),
        var(--c-surface);
    border: 0;
    border-radius: var(--r-full);
    /* Un anneau de la couleur de la carte : la pastille paraît DÉCOUPÉE dans la bande. */
    box-shadow:
        0 0 0 6px var(--c-surface),
        0 8px 20px color-mix(in srgb, var(--c-neutral-900) 16%, transparent);
}

.acl-ico svg { inline-size: 28px; block-size: 28px; }

.acl-t {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: 1.22;
    letter-spacing: -.015em;
}

/* Le nom du réseau, en pastille : il confirme DE QUEL WiFi on parle, sans peser comme une phrase. */
.acl-reseau {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--sp-3);
    padding: 4px 12px;
    color: var(--c-text-muted);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
}

/* Vide, la pastille ne doit pas laisser un rectangle fantôme. */
.acl-reseau:empty { display: none; }

.acl-reseau::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--r-full);
    background: var(--c-success);
}

.acl-lead {
    margin: 0 0 var(--sp-6);
    color: var(--c-text-muted);
    font-size: var(--fs-small);
    line-height: 1.6;
}


/* ═══════════════════ LA SAISIE ═══════════════════ */
.acl-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/*
 * 🔑 **UN CHAMP DE CODE N'EST PAS UN CHAMP DE TEXTE.** On y saisit huit caractères qu'on relit
 * caractère par caractère sur un bout de papier : il est donc large, centré, espacé, et il met en
 * majuscules à l'écran quoi qu'on tape. Le creux intérieur le fait lire comme une fente où l'on
 * dépose quelque chose, et non comme une étiquette.
 */
.acl-champ {
    inline-size: 100%;
    min-block-size: 58px;
    padding: 0 var(--sp-4);
    color: var(--c-text);
    background: var(--c-bg);
    border: 1.5px solid var(--c-border);
    border-radius: 16px;
    box-shadow: inset 0 2px 4px color-mix(in srgb, var(--c-neutral-900) 5%, transparent);

    /* ⚠️ 16 px au moins : en dessous, iOS zoome au focus et démolit la mise en page de la modale. */
    font-size: 19px;
    font-weight: var(--fw-bold);
    /* ⚠️ **PAS PLUS DE .07em.** À .16, « DDF » se lisait « D D F » — trois lettres séparées au lieu
       d'un code. L'espacement doit aérer, jamais découper. Signalé sur capture le 2026-09-05. */
    letter-spacing: .07em;
    text-align: center;
    /* 🔴 **PLUS DE MAJUSCULES FORCÉES** (demande du propriétaire, 2026-09-05 : « on accepte les
       minuscules dans les champs »). `text-transform: uppercase` ne changeait QUE l affichage : le
       visiteur tapait « hj hyhu » et lisait « HJ HYHU », donc doutait de ce qu il avait saisi. La
       casse n a aucune importance — le serveur cherche sans en tenir compte et renvoie au routeur la
       graphie exacte qu il connaît. Autant montrer ce qui est tapé. */
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.acl-champ::placeholder {
    color: var(--c-text-muted);
    font-size: 15px;
    font-weight: var(--fw-medium);
    letter-spacing: normal;
    text-transform: none;
}

.acl-champ:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow:
        inset 0 2px 4px color-mix(in srgb, var(--c-neutral-900) 4%, transparent),
        0 0 0 4px color-mix(in srgb, var(--c-primary) 16%, transparent);
}

/* Le second champ n'existe que pour ceux qui en ont besoin : fermé par défaut, comme la question. */
.acl-mdp { display: none; }
.acl-mdp.is-ouvert { display: block; }

/* ⚠️ Le mot de passe n'est PAS un code : ni majuscules forcées, ni lettres espacées. */
.acl-mdp .acl-champ {
    letter-spacing: normal;
    font-size: 17px;
}


/* ═══════════════════ LE BOUTON ═══════════════════

   Le vocabulaire validé sur « Ajouter une annonce » : trois ombres, un lustre qui traverse, un appui
   franc. Rien d'inventé ici — la cohérence vaut mieux qu'une trouvaille. */
.acl-b {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    inline-size: 100%;
    min-block-size: 56px;
    padding: 0 var(--sp-6);
    border: 0;
    border-radius: var(--r-full);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    letter-spacing: -.005em;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.acl-b svg { inline-size: 18px; block-size: 18px; }

.acl-b-1 {
    color: var(--c-text-inverse);
    background: linear-gradient(135deg,
        var(--c-primary),
        color-mix(in srgb, var(--c-primary) 70%, var(--c-accent)));
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--c-primary) 40%, transparent),
        0 6px 16px color-mix(in srgb, var(--c-primary) 34%, transparent),
        0 14px 32px color-mix(in srgb, var(--c-primary) 22%, transparent);
}

/* Le lustre : une bande de lumière qui traverse lentement. C'est ce qui sépare un aplat d'une
   surface. Pseudo-élément, donc aucun nœud de plus dans le document. */
.acl-b-1::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    inline-size: 40%;
    background: linear-gradient(100deg,
        transparent,
        color-mix(in srgb, var(--c-neutral-0) 34%, transparent),
        transparent);
    transform: skewX(-18deg);
    animation: acl-lustre 5.5s var(--ease-out) infinite;
    pointer-events: none;
}

@keyframes acl-lustre {
    0%, 62% { transform: translateX(0) skewX(-18deg); }
    100% { transform: translateX(420%) skewX(-18deg); }
}

.acl-b-1:hover { transform: translateY(-1px); }
.acl-b-1:active { transform: translateY(2px) scale(.995); }
.acl-b:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }

/* ⚠️ Un bouton occupé reste LISIBLE : on baisse l'opacité, jamais le contraste du texte seul. */
.acl-b[disabled] { opacity: .62; cursor: default; transform: none; }
.acl-b[disabled]::before { animation: none; }


/* ═══════════════════ L'ÉTAT ET L'ATTENTE ═══════════════════

   🔑 **LE CHEMIN LONG DURE DEUX CYCLES D'AGENT**, une trentaine de secondes : vérifier le code
   auprès du routeur, puis ouvrir la session. Un écran muet pendant ce temps se lit comme une panne,
   et le visiteur recharge — ce qui relance tout. L'anneau dit que ça travaille ; le texte dit
   à quelle étape. */
.acl-suite {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-block-start: var(--sp-4);
    min-block-size: 22px;
}

.acl-etat {
    /* ⚠️ Sans marge propre : elle est portée par `.acl-suite`, qui aligne le texte et l'anneau. */
    margin: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-small);
    line-height: 1.5;
}

.acl-etat[data-ton="erreur"] { color: var(--c-error); }
.acl-etat[data-ton="succes"] { color: var(--c-success); }

/* Fermé par défaut : l'anneau n'existe que pendant l'attente. Une classe, jamais `[hidden]`. */
.acl-anneau { display: none; flex: 0 0 auto; inline-size: 18px; block-size: 18px; }
.acl-carte.is-attente .acl-anneau { display: block; }

.acl-anneau svg { inline-size: 100%; block-size: 100%; animation: acl-tourne 900ms linear infinite; }
.acl-anneau-fond { stroke: var(--c-border); }
.acl-anneau-arc { stroke: var(--c-primary); }

/* ⚠️ `transform` SEUL — le contrat de performance du projet. */
@keyframes acl-tourne { to { transform: rotate(360deg); } }


/* ═══════════════════ LA RÉUSSITE ═══════════════════

   🔴 **UNE CARTE DE RÉUSSITE QUI MONTRE ENCORE SON FORMULAIRE SE CONTREDIT.** Vu à la capture : la
   coche était verte, et juste dessous le titre demandait toujours d'entrer un code, au-dessus d'un
   champ rempli et d'un bouton grisé. On retire ce qui n'a plus d'objet. */
.acl-ico-ok { display: none; }
.acl-carte.is-succes .acl-ico-wifi { display: none; }
.acl-carte.is-succes .acl-ico-ok { display: block; }

.acl-carte.is-succes .acl-form,
.acl-carte.is-succes .acl-lead,
.acl-carte.is-succes .acl-pied { display: none; }

.acl-carte.is-succes .acl-ico {
    color: var(--c-success);
    background: color-mix(in srgb, var(--c-success) 14%, transparent);
    border-color: color-mix(in srgb, var(--c-success) 32%, transparent);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-success) 8%, transparent);
}


/* ═══════════════════ LE LIEN À COPIER (modale navigateur) ═══════════════════ */
.acl-lien-boite {
    margin-block-end: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-bg);
    border: 1px dashed var(--c-border);
    border-radius: 14px;
    text-align: start;
}

.acl-lien-txt {
    display: block;
    color: var(--c-text);
    font-size: var(--fs-caption);
    line-height: 1.55;
    /* ⚠️ Une adresse longue doit RESTER LISIBLE et sélectionnable : elle se coupe, elle ne déborde
       pas et elle ne s'abrège pas par des points de suspension — on ne recopie pas un « … ». */
    word-break: break-all;
    user-select: all;
}

/* Les trois pas : des pastilles numérotées, parce qu'une marche à suivre se compte. */
.acl-pas {
    margin: var(--sp-5) 0 0;
    padding: 0;
    list-style: none;
    text-align: start;
    counter-reset: acl-pas;
}

.acl-pas li {
    position: relative;
    margin-block-end: var(--sp-3);
    padding-inline-start: 34px;
    color: var(--c-text-muted);
    font-size: var(--fs-small);
    line-height: 1.5;
    counter-increment: acl-pas;
}

.acl-pas li::before {
    content: counter(acl-pas);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: -1px;
    display: grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 10%, transparent);
    border-radius: var(--r-full);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
}


/* ═══════════════════ LE PIED ═══════════════════ */
.acl-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2) var(--sp-5);
    margin-block-start: var(--sp-5);
    padding-block-start: var(--sp-4);
    border-block-start: 1px solid var(--c-border);
}

.acl-lien-discret {
    padding: 0;
    color: var(--c-text-muted);
    background: none;
    border: 0;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.acl-lien-discret:hover { color: var(--c-primary); }
.acl-lien-discret:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }


/* ═══════════════════ SUR TÉLÉPHONE : UNE FEUILLE, PAS UNE BOÎTE ═══════════════════

   ⚠️ Cette surcharge est APRÈS ce qu'elle surcharge — une requête média ne donne aucun poids, c'est
   la dernière déclarée qui gagne. Le piège a été payé quatre fois sur ce projet le 2026-09-04.

   🔑 Une modale centrée sur un écran de téléphone laisse le pouce loin des commandes. Une feuille
   ancrée en bas met le bouton là où la main est déjà. */
@media (max-width: 600px) {
    .acl-voile { padding: 0; }
    .acl-voile.is-ouvert { place-items: end stretch; }

    .acl-carte {
        max-inline-size: none;
        padding: 0 var(--sp-5) max(var(--sp-6), env(safe-area-inset-bottom));
        border-inline: 0;
        border-block-end: 0;
        border-start-start-radius: 26px;
        border-start-end-radius: 26px;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        animation-name: acl-entree-feuille;
    }

    .acl-entete { margin-inline: calc(-1 * var(--sp-5)); block-size: 132px; }

    /* ⚠️ La poignée est POSÉE SUR le décor : elle flotte au-dessus, en clair, sans pousser la bande. */
    .acl-poignee {
        display: block;
        position: absolute;
        inset-block-start: 10px;
        inset-inline: 0;
        z-index: 2;
        inline-size: 40px;
        block-size: 4px;
        margin: 0 auto;
        background: color-mix(in srgb, var(--c-neutral-0) 55%, transparent);
        border-radius: var(--r-full);
    }

    /* La croix descend d'un cran : la poignée occupe désormais le haut de la feuille. */
    .acl-fermer { inset-block-start: var(--sp-5); inset-inline-end: var(--sp-4); }
}

@keyframes acl-entree-feuille {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: none; }
}


/* ⚠️ **LE MOUVEMENT EST UN AGRÉMENT.** Une modale qui n'apparaît pas reste une modale : on coupe
   l'animation d'entrée sans rien masquer. `both` figerait l'état initial (opacité 0) si on se
   contentait de `animation: none` — d'où l'opacité et la transformation rendues explicitement.

   ⚠️ L'anneau reste AFFICHÉ, simplement immobile : c'est lui qui distingue « ça travaille » de
   « c'est fini ». Le supprimer priverait de cette information ceux qui coupent le mouvement. */
@media (prefers-reduced-motion: reduce) {
    .acl-carte { animation: none; opacity: 1; transform: none; }
    .acl-anneau svg { animation: none; }

    /* ⚠️ Les fronts partent d'`opacity: 0` : les figer sans les rendre visibles viderait le décor.
       On en montre UN, arrêté. */
    .acl-front, .acl-poussiere { animation: none; }
    .acl-front { opacity: 0; transform: scale(1.05); }
    .acl-front:nth-of-type(2) { opacity: .5; }
    .acl-poussiere { opacity: .5; }
    .acl-b-1::before { animation: none; opacity: 0; }
    .acl-b, .acl-champ, .acl-fermer { transition: none; }
    .acl-b-1:hover, .acl-b-1:active { transform: none; }
}