/* ==========================================================================
   Aparté — feuille de style partagée
   --------------------------------------------------------------------------
   Première brique d'une sortie progressive du style inline. Chargée à la
   demande par les vues via @push('styles'), elle ne touche ni l'en-tête ni
   le pied de page, qui gardent leurs règles actuelles.

   Toutes les classes sont préfixées `ap-` pour ne jamais entrer en conflit
   avec Bootstrap, chargé par CDN dans le layout.
   ========================================================================== */

:root {
    --ap-sable:      #faf7f3;
    --ap-creme:      #fffdfb;
    --ap-beige:      #e2c9b0;
    --ap-bronze:     #b98d5f;
    --ap-bronze-fonce:#a87c4f;
    --ap-encre:      #2c2622;
    --ap-gris:       #7c6f66;
    --ap-gris-clair: #a89c93;
    --ap-ligne:      #ebe1d6;
    --ap-vert:       #3f7d58;
    --ap-vert-clair: #eaf2ec;
    --ap-rouge:      #a34b3c;
    --ap-rouge-clair:#fbecea;

    --ap-rayon:      16px;
    --ap-rayon-sm:   10px;
    --ap-ombre:      0 1px 2px rgba(44,38,34,.04), 0 8px 24px -12px rgba(44,38,34,.14);
    --ap-ombre-forte:0 2px 4px rgba(44,38,34,.05), 0 18px 40px -18px rgba(44,38,34,.24);
}

/* --------------------------------------------------------------------------
   Fond texturé
   Reproduit en CSS l'effet d'un dégradé Haikei : deux halos radiaux très
   doux plus un grain SVG. Aucune image à télécharger, aucune requête réseau.
   -------------------------------------------------------------------------- */
.ap-page {
    position: relative;
    background:
        radial-gradient(60rem 40rem at 12% -8%,  rgba(226,201,176,.34), transparent 62%),
        radial-gradient(48rem 34rem at 92% 6%,   rgba(212,193,178,.26), transparent 58%),
        radial-gradient(40rem 30rem at 50% 108%, rgba(226,201,176,.20), transparent 60%),
        var(--ap-sable);
    padding: 40px 0 72px;
}

.ap-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .25;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.ap-wrap {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
    color: var(--ap-encre);
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   Titres
   -------------------------------------------------------------------------- */
.ap-titre {
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0 0 6px;
    text-align: center;
}

.ap-sous-titre {
    text-align: center;
    color: var(--ap-gris);
    font-size: 15px;
    margin: 0 0 34px;
}

.ap-section-titre {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ap-gris);
    margin: 0 0 14px;
}

/* --------------------------------------------------------------------------
   Panneaux
   -------------------------------------------------------------------------- */
.ap-panel {
    background: var(--ap-creme);
    border: 1px solid var(--ap-ligne);
    border-radius: var(--ap-rayon);
    box-shadow: var(--ap-ombre);
    padding: 22px 24px;
    margin-bottom: 20px;
}

.ap-panel--plat { box-shadow: none; background: rgba(255,255,255,.62); }

/* --------------------------------------------------------------------------
   Mise en page : articles à gauche, décision à droite
   -------------------------------------------------------------------------- */
.ap-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 26px;
    align-items: start;
}

.ap-aside { position: sticky; top: 24px; }

@media (max-width: 900px) {
    .ap-layout { grid-template-columns: 1fr; }
    .ap-aside  { position: static; }
}

/* --------------------------------------------------------------------------
   Lignes du panier
   -------------------------------------------------------------------------- */
.ap-ligne-article {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ap-ligne);
}
.ap-ligne-article:last-child { border-bottom: 0; padding-bottom: 4px; }
.ap-ligne-article:first-child { padding-top: 4px; }

.ap-vignette {
    width: 76px; height: 76px;
    flex: 0 0 76px;
    object-fit: cover;
    border-radius: var(--ap-rayon-sm);
    background: var(--ap-sable);
    border: 1px solid var(--ap-ligne);
}

.ap-article-nom  { font-weight: 600; line-height: 1.35; }
.ap-article-meta { font-size: 13px; color: var(--ap-gris); margin-top: 3px; }
.ap-article-prix { margin-left: auto; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.ap-retirer {
    background: none; border: 0; padding: 4px 2px;
    color: var(--ap-gris-clair); font-size: 12.5px;
    cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
    transition: color .15s;
}
.ap-retirer:hover { color: var(--ap-rouge); }

/* --------------------------------------------------------------------------
   Choix du mode de remise
   `.delivery-option` garde son nom : le script s'y accroche.
   -------------------------------------------------------------------------- */
.ap-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 12px; }

.delivery-option {
    width: 100%; text-align: left; font: inherit; color: inherit;
    display: block; cursor: pointer;
    background: var(--ap-creme);
    border: 1.5px solid var(--ap-ligne);
    border-radius: var(--ap-rayon-sm);
    padding: 15px 16px;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.delivery-option:hover { border-color: #d8c3a8; transform: translateY(-1px); }
.delivery-option.is-selected {
    border-color: var(--ap-bronze);
    box-shadow: 0 0 0 3px rgba(226,201,176,.34);
}

.delivery-option__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.delivery-option__title { font-weight: 600; }
.delivery-option__price { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delivery-option__price--free { color: var(--ap-vert); }
.delivery-option__desc  { font-size: 13px; color: var(--ap-gris); line-height: 1.5; display: block; }

.ap-note-bascule { font-size: 13px; color: var(--ap-gris-clair); margin-top: 10px; }

/* Encart retrait boutique */
.ap-retrait {
    background: linear-gradient(180deg, rgba(226,201,176,.22), rgba(226,201,176,.10));
    border: 1px solid var(--ap-beige);
    border-radius: var(--ap-rayon-sm);
    padding: 16px 18px;
    margin-top: 14px;
}
.ap-retrait__titre { font-weight: 600; margin-bottom: 4px; }
.ap-retrait__texte { font-size: 13.5px; color: #6b5f52; line-height: 1.55; }
.ap-horaires {
    margin: 12px 0 0;
    display: grid; grid-template-columns: auto 1fr; gap: 3px 16px;
    font-size: 13px; color: #6b5f52;
}
.ap-horaires dt { font-weight: 600; }
.ap-horaires dd { margin: 0; }

/* --------------------------------------------------------------------------
   Code promo
   -------------------------------------------------------------------------- */
.ap-promo { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ap-promo > div { flex: 1 1 180px; }

.ap-label { display: block; font-size: 13px; color: var(--ap-gris); margin-bottom: 6px; }

.ap-input {
    width: 100%; padding: 11px 13px;
    border: 1px solid var(--ap-ligne); border-radius: var(--ap-rayon-sm);
    background: #fff; font: inherit; font-size: 15px; color: var(--ap-encre);
    transition: border-color .15s, box-shadow .15s;
}
.ap-input:focus {
    outline: none;
    border-color: var(--ap-bronze);
    box-shadow: 0 0 0 3px rgba(226,201,176,.3);
}

.ap-promo-actif {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    background: var(--ap-vert-clair);
    border: 1px solid #cfe3d6;
    border-radius: var(--ap-rayon-sm);
    padding: 13px 15px;
}
.ap-promo-actif strong { color: #1f5637; }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.ap-btn {
    font: inherit; font-weight: 600;
    border: 1px solid transparent; border-radius: var(--ap-rayon-sm);
    padding: 11px 18px; cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s, opacity .15s;
}
.ap-btn:active { transform: translateY(1px); }
.ap-btn:disabled { opacity: .55; cursor: default; transform: none; }

.ap-btn--secondaire { background: #fff; border-color: var(--ap-ligne); color: var(--ap-encre); }
.ap-btn--secondaire:hover:not(:disabled) { border-color: var(--ap-bronze); }

.ap-btn--discret { background: transparent; border-color: transparent; color: var(--ap-rouge); font-size: 13px; padding: 6px 10px; }
.ap-btn--discret:hover:not(:disabled) { background: var(--ap-rouge-clair); }

.ap-btn--payer {
    display: block; width: 100%;
    background: var(--ap-bronze); color: #fff;
    font-size: 16.5px; padding: 16px 0;
    border-radius: 12px;
    box-shadow: 0 6px 18px -8px rgba(185,141,95,.85);
}
.ap-btn--payer:hover:not(:disabled) { background: var(--ap-bronze-fonce); }

/* --------------------------------------------------------------------------
   Récapitulatif et bloc de paiement
   -------------------------------------------------------------------------- */
.ap-recap { display: grid; gap: 9px; font-size: 15px; }
.ap-recap-ligne { display: flex; justify-content: space-between; gap: 14px; color: var(--ap-gris); }
.ap-recap-ligne span:last-child { font-variant-numeric: tabular-nums; color: var(--ap-encre); }
.ap-recap-ligne--remise span { color: var(--ap-vert); }

.ap-total {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    border-top: 1px solid var(--ap-ligne);
    margin-top: 6px; padding-top: 14px;
    font-size: 20px; font-weight: 700;
}
.ap-total span:last-child { font-variant-numeric: tabular-nums; }

.ap-cgv {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; line-height: 1.5;
    margin: 18px 0 16px;
}
.ap-cgv input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ap-bronze); flex: 0 0 auto; }
.ap-cgv a { color: var(--ap-bronze-fonce); }

.ap-reassurance {
    list-style: none; margin: 16px 0 0; padding: 0;
    display: grid; gap: 8px;
    font-size: 13px; color: var(--ap-gris);
}
.ap-reassurance li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.45; }
.ap-reassurance svg { flex: 0 0 15px; margin-top: 2px; color: var(--ap-bronze); }

.ap-moyens {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px dashed var(--ap-ligne);
    font-size: 12.5px; color: var(--ap-gris-clair); text-align: center; line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Continuer mes achats
   Après un ajout, le client arrive sur le panier : ce lien le renvoie là d'où
   il venait. Zone tactile de 44 px, seuil minimal sur mobile.
   -------------------------------------------------------------------------- */
.ap-continuer {
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 44px; padding: 10px 18px;
    background: var(--ap-creme);
    border: 1px solid var(--ap-ligne);
    border-radius: var(--ap-rayon-sm);
    color: var(--ap-encre); text-decoration: none;
    font-size: 14.5px; font-weight: 600;
    transition: border-color .15s, color .15s;
}
.ap-continuer:hover { border-color: var(--ap-bronze); color: var(--ap-bronze-fonce); }
.ap-continuer svg   { color: var(--ap-bronze); }

@media (max-width: 900px) {
    .ap-continuer { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */
.ap-alerte {
    border-radius: var(--ap-rayon-sm);
    padding: 13px 16px; margin-bottom: 18px;
    font-size: 14.5px; line-height: 1.5;
}
.ap-alerte--ok    { background: var(--ap-vert-clair);  border: 1px solid #cfe3d6; color: #1f5637; }
.ap-alerte--ko    { background: var(--ap-rouge-clair); border: 1px solid #f0cec8; color: #8a3a2d; }

/* --------------------------------------------------------------------------
   Panier vide
   -------------------------------------------------------------------------- */
.ap-vide { text-align: center; padding: 60px 20px; }
.ap-vide__titre { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.ap-vide__texte { color: var(--ap-gris); margin: 0 0 26px; }
.ap-vide__cta {
    display: inline-block; background: var(--ap-bronze); color: #fff;
    text-decoration: none; font-weight: 600;
    padding: 13px 30px; border-radius: 12px;
    transition: background .15s;
}
.ap-vide__cta:hover { background: var(--ap-bronze-fonce); color: #fff; }

/* Respecte les personnes sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
    .delivery-option, .ap-btn { transition: none; }
    .delivery-option:hover { transform: none; }
}

/* ==========================================================================
   Fiche produit
   --------------------------------------------------------------------------
   Section ajoutée à la suite, sans rien réécrire au-dessus : les règles du
   panier restent intactes. Tout est préfixé `ap-`, à deux exceptions près —
   `.thumbnail` et les classes `carousel-*` / `technical-*`, auxquelles le
   script de la vue s'accroche déjà. Elles gardent leur nom mais sont scopées
   sous `.ap-fiche` pour ne rien laisser fuir sur les autres pages.
   ========================================================================== */

.ap-fiche {
    --ap-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* --------------------------------------------------------------------------
   Fil d'Ariane
   -------------------------------------------------------------------------- */
.ap-fil {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 0 28px;
    font-size: 13px; color: var(--ap-gris-clair);
}
.ap-fil a { color: var(--ap-gris); text-decoration: none; transition: color .15s; }
.ap-fil a:hover { color: var(--ap-bronze); }
.ap-fil__sep { color: #d8ccc0; font-size: 12px; }
.ap-fil__actuel { color: var(--ap-encre); font-weight: 600; }

/* --------------------------------------------------------------------------
   Deux colonnes : la galerie, puis le bloc de décision
   -------------------------------------------------------------------------- */
.ap-produit {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 52px;
    align-items: start;
}

/* --------------------------------------------------------------------------
   Galerie
   -------------------------------------------------------------------------- */
.ap-galerie { position: relative; display: grid; gap: 14px; }

.ap-galerie__scene {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    background: var(--ap-creme);
    border: 1px solid var(--ap-ligne);
    border-radius: var(--ap-rayon);
    box-shadow: var(--ap-ombre);
    overflow: hidden;
}

.ap-galerie__lien { display: block; width: 100%; height: 100%; }

.ap-galerie__img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 18px;
    transition: opacity .18s ease, transform .4s ease;
}
.ap-galerie__lien:hover .ap-galerie__img { transform: scale(1.015); }
.ap-galerie__lien:focus-visible { outline: 2px solid var(--ap-bronze); outline-offset: -4px; }

.ap-galerie__compteur,
.ap-galerie__etat {
    position: absolute;
    font-size: 12px; font-weight: 600; letter-spacing: .02em;
    padding: 6px 12px; border-radius: 999px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}
.ap-galerie__compteur {
    right: 12px; bottom: 12px;
    background: rgba(255,253,251,.86);
    border: 1px solid var(--ap-ligne);
    color: var(--ap-gris);
    font-variant-numeric: tabular-nums;
}
.ap-galerie__etat {
    left: 12px; top: 12px;
    background: var(--ap-vert-clair);
    border: 1px solid #cfe3d6;
    color: #1f5637;
}

.ap-galerie__loupe {
    position: absolute; right: 12px; top: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,253,251,.86);
    border: 1px solid var(--ap-ligne);
    color: var(--ap-gris);
    opacity: 0; transition: opacity .2s ease;
    pointer-events: none;
}
.ap-galerie__scene:hover .ap-galerie__loupe { opacity: 1; }

/* Vignettes : grille sur grand écran, rail à défilement tactile sur mobile */
.ap-galerie__vignettes {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 0; padding: 0; list-style: none;
}

.ap-vignette-produit {
    width: 74px; height: 74px;
    flex: 0 0 74px;
    object-fit: cover;
    background: var(--ap-creme);
    border: 1px solid var(--ap-ligne);
    border-radius: var(--ap-rayon-sm);
    cursor: pointer;
    opacity: .68;
    transition: opacity .18s, box-shadow .18s, border-color .18s;
}
.ap-vignette-produit:hover { opacity: 1; }
.ap-vignette-produit:focus-visible { outline: 2px solid var(--ap-bronze); outline-offset: 2px; }
.ap-vignette-produit.active {
    opacity: 1;
    border-color: var(--ap-bronze);
    box-shadow: 0 0 0 3px rgba(226,201,176,.42);
}

/* --------------------------------------------------------------------------
   Bloc de décision : marque, nom, prix, bouton
   -------------------------------------------------------------------------- */
/* Flux normal, et non une grille : les pastilles `inline-flex` (marque,
   disponibilité) doivent garder la largeur de leur contenu. */
.ap-decision { display: block; }

.ap-decision__marque {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--ap-bronze);
    text-decoration: none;
    margin-bottom: 12px;
}
.ap-decision__marque:hover { color: var(--ap-bronze-fonce); text-decoration: underline; text-underline-offset: 4px; }

.ap-decision__titre {
    font-family: var(--ap-serif);
    font-size: clamp(27px, 3.2vw, 38px);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -.01em;
    color: var(--ap-encre);
    margin: 0 0 14px;
}

.ap-decision__prix {
    font-size: 25px; font-weight: 600;
    color: var(--ap-encre);
    font-variant-numeric: tabular-nums;
    margin: 0 0 14px;
}

.ap-decision__dispo {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600;
    padding: 6px 13px; border-radius: 999px;
    margin-bottom: 18px;
}
.ap-decision__dispo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ap-decision__dispo--ok { background: var(--ap-vert-clair);  border: 1px solid #cfe3d6; color: #1f5637; }
.ap-decision__dispo--ko { background: var(--ap-rouge-clair); border: 1px solid #f0cec8; color: #8a3a2d; }

.ap-decision__resume {
    font-size: 15.5px; line-height: 1.75; color: var(--ap-gris);
    margin: 0 0 24px;
}
.ap-decision__resume p { margin: 0 0 12px; }
.ap-decision__resume p:last-child { margin-bottom: 0; }

/* Carte d'achat */
.ap-achat {
    background: var(--ap-creme);
    border: 1px solid var(--ap-ligne);
    border-radius: var(--ap-rayon);
    box-shadow: var(--ap-ombre);
    padding: 20px;
}

/* Le sélecteur de quantité reste masqué, comme avant : la valeur 1 part
   toujours dans le formulaire. */
.ap-quantite { display: none; }
.ap-qte-btn {
    background: var(--ap-beige); border: 0; color: #fff;
    width: 30px; height: 26px; border-radius: 6px;
    cursor: pointer; font-weight: 700;
}
.ap-qte-champ {
    width: 60px; text-align: center;
    border: 1px solid var(--ap-ligne); border-radius: 6px; padding: 5px;
    font: inherit;
}

.ap-btn--panier {
    display: block; width: 100%;
    background: var(--ap-bronze); color: #fff;
    font-size: 16px; padding: 15px 0;
    border-radius: 12px;
    box-shadow: 0 6px 18px -8px rgba(185,141,95,.85);
}
.ap-btn--panier:hover:not(:disabled) { background: var(--ap-bronze-fonce); }

/* Même bouton, mais rendu par un lien (barre mobile, produit déjà au panier). */
.ap-btn--lien { text-align: center; text-decoration: none; color: #fff; }
.ap-btn--lien:hover { color: #fff; }

.ap-achat__note {
    margin: 12px 0 0;
    font-size: 13px; color: var(--ap-gris-clair); text-align: center; line-height: 1.5;
}
.ap-achat__indispo {
    margin: 0; text-align: center;
    color: #8a3a2d; font-size: 14.5px; line-height: 1.5;
}

/* Réassurance, juste sous le bouton */
.ap-atouts {
    list-style: none; margin: 18px 0 0; padding: 16px 0 0;
    border-top: 1px dashed var(--ap-ligne);
    display: grid; gap: 11px;
    font-size: 13.5px; color: var(--ap-gris);
}
.ap-atouts li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
.ap-atouts svg { flex: 0 0 16px; margin-top: 2px; color: var(--ap-bronze); }
.ap-atouts strong { color: var(--ap-encre); font-weight: 600; }

/* Services boutique (inscription, téléphone, paiement) */
.ap-services {
    display: grid; gap: 12px;
    margin-top: 18px;
}
.ap-service {
    display: flex; align-items: center; gap: 13px;
    background: rgba(255,255,255,.62);
    border: 1px solid var(--ap-ligne);
    border-radius: var(--ap-rayon-sm);
    padding: 12px 14px;
    font-size: 13.5px; color: var(--ap-gris); line-height: 1.5;
}
.ap-service p { margin: 0; }
.ap-service strong { color: var(--ap-encre); }
.ap-service__img { width: 40px; height: auto; flex: 0 0 40px; }

/* --------------------------------------------------------------------------
   Barre d'achat mobile
   Masquée par défaut : sans JavaScript elle ne s'affiche jamais et la page
   reste complète. Le script la révèle quand le bouton principal sort du champ.
   -------------------------------------------------------------------------- */
.ap-barre-mobile {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 900;
    display: none;
    align-items: center; gap: 14px;
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
    background: rgba(255,253,251,.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--ap-ligne);
    box-shadow: 0 -8px 24px -18px rgba(44,38,34,.5);
    transform: translateY(110%);
    transition: transform .22s ease;
}
.ap-barre-mobile.is-visible { transform: translateY(0); }
.ap-barre-mobile__texte { min-width: 0; }
.ap-barre-mobile__nom {
    font-size: 12.5px; color: var(--ap-gris);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-barre-mobile__prix { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ap-barre-mobile .ap-btn { margin-left: auto; flex: 0 0 auto; width: auto; padding: 13px 22px; font-size: 15px; }

/* --------------------------------------------------------------------------
   Sections secondaires
   -------------------------------------------------------------------------- */
.ap-sep { border: 0; border-top: 1px solid var(--ap-ligne); margin: 56px 0 0; }

.ap-bloc { margin-top: 48px; }
.ap-bloc__titre {
    font-family: var(--ap-serif);
    font-size: 22px; font-weight: 400; color: var(--ap-encre);
    margin: 0 0 18px;
}
.ap-bloc__compte { font-family: inherit; font-size: 14px; color: var(--ap-gris-clair); }

/* Replis natifs : fonctionnent sans une ligne de JavaScript */
.ap-repli {
    background: var(--ap-creme);
    border: 1px solid var(--ap-ligne);
    border-radius: var(--ap-rayon-sm);
    margin-bottom: 10px;
    overflow: hidden;
}
.ap-repli__titre {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px;
    font-size: 15px; font-weight: 600; color: var(--ap-encre);
    cursor: pointer;
    list-style: none;
    transition: background .15s;
}
.ap-repli__titre::-webkit-details-marker { display: none; }
.ap-repli__titre::after {
    content: "";
    flex: 0 0 8px; width: 8px; height: 8px;
    border-right: 1.5px solid var(--ap-gris);
    border-bottom: 1.5px solid var(--ap-gris);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}
.ap-repli[open] > .ap-repli__titre::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ap-repli__titre:hover { background: rgba(226,201,176,.14); }
.ap-repli__contenu {
    padding: 2px 18px 18px;
    font-size: 14.5px; line-height: 1.7; color: var(--ap-gris);
}
.ap-repli__contenu p { margin: 0 0 12px; }
.ap-repli__contenu p:last-child { margin-bottom: 0; }
.ap-repli__contenu a { color: var(--ap-bronze-fonce); }

.ap-specs {
    display: grid; grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px 24px; margin: 0;
}
.ap-specs dt {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ap-gris-clair);
    padding-top: 2px;
}
.ap-specs dd { margin: 0; color: var(--ap-encre); font-size: 14.5px; line-height: 1.6; }
.ap-repli__contenu .ap-specs { margin: 4px 0 16px; }

.ap-puces { margin: 0; padding-left: 18px; }
.ap-puces li { margin-bottom: 5px; }
.ap-puces li::marker { color: var(--ap-beige); }

/* --------------------------------------------------------------------------
   Description technique
   Les classes historiques sont conservées (le script les cible) mais scopées.
   -------------------------------------------------------------------------- */
.ap-technique {
    position: relative;
    background: var(--ap-creme);
    border: 1px solid var(--ap-ligne);
    border-radius: var(--ap-rayon);
    box-shadow: var(--ap-ombre);
    padding: 26px;
}

.ap-fiche .technical-description-layout { display: flex; gap: 34px; align-items: flex-start; }
.ap-fiche .technical-description-text-wrapper { flex: 1; min-width: 0; }
.ap-fiche .technical-description-image-wrapper { flex-shrink: 0; width: 290px; }
.ap-fiche .technical-description-image-wrapper img {
    width: 100%; height: auto; max-height: 380px; object-fit: cover;
    display: block; cursor: zoom-in;
    border-radius: var(--ap-rayon-sm);
}
.ap-fiche .technical-description-content {
    color: var(--ap-gris); line-height: 1.75; font-size: 14.5px;
}
.ap-fiche .technical-description-content p { margin: 0 0 14px; }
.ap-fiche .technical-description-content strong { color: var(--ap-encre); font-weight: 600; }
.ap-fiche .technical-description-content ul { list-style: none; margin: 0 0 14px; padding: 0; }
.ap-fiche .technical-description-content li { margin-bottom: 8px; padding-left: 18px; position: relative; }
.ap-fiche .technical-description-content li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--ap-beige);
}
.ap-fiche .technical-description-content h1,
.ap-fiche .technical-description-content h2,
.ap-fiche .technical-description-content h3,
.ap-fiche .technical-description-content h4,
.ap-fiche .technical-description-content h5,
.ap-fiche .technical-description-content h6 {
    font-family: var(--ap-serif); font-weight: 400; font-size: 18px;
    color: var(--ap-encre); margin: 0 0 12px; line-height: 1.35;
}

.ap-galerie-secondaire {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px; margin-top: 26px;
}
.ap-galerie-secondaire img {
    width: 100%; height: 190px; object-fit: cover;
    border-radius: var(--ap-rayon-sm); border: 1px solid var(--ap-ligne);
    cursor: zoom-in; display: block;
}

.ap-fiche .technical-carousel-container { width: 100%; }
.ap-fiche .technical-carousel-main {
    position: relative; max-width: 760px; margin: 0 auto;
    border-radius: var(--ap-rayon-sm); overflow: hidden;
}
.ap-fiche .technical-carousel-images {
    position: relative; width: 100%; height: 460px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ap-sable);
}
.ap-fiche .technical-carousel-image {
    position: absolute; width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0; transition: opacity .45s ease-in-out;
    pointer-events: none; cursor: zoom-in;
}
.ap-fiche .technical-carousel-image.active { opacity: 1; pointer-events: auto; }

.ap-fiche .carousel-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,253,251,.92);
    border: 1px solid var(--ap-ligne);
    color: var(--ap-encre);
    cursor: pointer; z-index: 5;
    box-shadow: var(--ap-ombre);
    transition: background .15s, border-color .15s;
}
.ap-fiche .carousel-nav:hover { background: #fff; border-color: var(--ap-bronze); }
.ap-fiche .carousel-prev { left: 14px; }
.ap-fiche .carousel-next { right: 14px; }

.ap-fiche .carousel-indicators {
    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 5;
}
.ap-fiche .carousel-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(44,38,34,.22);
    cursor: pointer; transition: background .18s, transform .18s;
}
.ap-fiche .carousel-dot.active { background: var(--ap-bronze); transform: scale(1.35); }

.ap-fiche .technical-carousel-thumbnails {
    display: flex; gap: 12px; justify-content: center;
    margin-top: 20px; flex-wrap: wrap;
}
.ap-fiche .technical-carousel-thumb {
    width: 76px; height: 100px; object-fit: cover;
    border: 1px solid var(--ap-ligne); border-radius: var(--ap-rayon-sm);
    cursor: pointer; opacity: .62;
    transition: opacity .18s, box-shadow .18s, border-color .18s;
}
.ap-fiche .technical-carousel-thumb:hover { opacity: 1; }
.ap-fiche .technical-carousel-thumb.active {
    opacity: 1; border-color: var(--ap-bronze);
    box-shadow: 0 0 0 3px rgba(226,201,176,.42);
}

/* --------------------------------------------------------------------------
   Avis clients
   -------------------------------------------------------------------------- */
.ap-avis-entete {
    display: flex; align-items: center; gap: 18px;
    padding-bottom: 20px; margin-bottom: 20px;
    border-bottom: 1px solid var(--ap-ligne);
}
.ap-avis-note {
    font-family: var(--ap-serif);
    font-size: 42px; line-height: 1; color: var(--ap-encre);
    font-variant-numeric: tabular-nums;
}
.ap-avis-base { font-size: 13px; color: var(--ap-gris-clair); margin-top: 6px; }

.ap-etoiles { display: flex; gap: 3px; }
.ap-etoile { color: var(--ap-ligne); font-size: 17px; line-height: 1; }
.ap-etoile--on { color: var(--ap-bronze); }
.ap-etoiles--grand .ap-etoile { font-size: 21px; }

.ap-avis-liste { display: grid; gap: 14px; }
.ap-avis-carte {
    background: var(--ap-creme);
    border: 1px solid var(--ap-ligne);
    border-left: 3px solid var(--ap-beige);
    border-radius: var(--ap-rayon-sm);
    padding: 18px 20px;
}
.ap-avis-carte__entete {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 14px; margin-bottom: 10px;
}
.ap-avis-carte__auteur { font-weight: 600; color: var(--ap-encre); }
.ap-avis-carte__date { font-size: 12.5px; color: var(--ap-gris-clair); white-space: nowrap; }
.ap-avis-carte__texte { color: var(--ap-gris); line-height: 1.65; font-size: 14.5px; }
.ap-badge-verifie {
    display: inline-block; margin-left: 8px;
    background: var(--ap-vert-clair); border: 1px solid #cfe3d6; color: #1f5637;
    padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
}

/* --------------------------------------------------------------------------
   Conseils & inspirations — volontairement discret, il ne doit pas
   concurrencer le bloc de décision.
   -------------------------------------------------------------------------- */
.ap-lies__grille {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;
}
.ap-carte-article {
    display: block; height: 100%;
    background: var(--ap-creme);
    border: 1px solid var(--ap-ligne);
    border-radius: var(--ap-rayon);
    overflow: hidden;
    text-decoration: none; color: inherit;
    transition: box-shadow .2s ease, transform .2s ease;
}
.ap-carte-article:hover { box-shadow: var(--ap-ombre-forte); transform: translateY(-2px); color: inherit; }
.ap-carte-article__media { height: 150px; overflow: hidden; background: var(--ap-sable); }
.ap-carte-article__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-carte-article__vide {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(226,201,176,.55), rgba(185,141,95,.35));
    font-size: 2rem;
}
.ap-carte-article__corps { padding: 16px 18px 18px; }
.ap-etiquette {
    display: inline-block; margin-bottom: 9px;
    background: rgba(226,201,176,.28);
    color: var(--ap-bronze-fonce);
    padding: 3px 11px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
}
.ap-carte-article__titre {
    font-family: var(--ap-serif);
    font-size: 16.5px; font-weight: 400; line-height: 1.35;
    color: var(--ap-encre); margin: 0 0 7px;
}
.ap-carte-article__extrait { font-size: 13.5px; line-height: 1.55; color: var(--ap-gris); margin: 0; }

.ap-lien-plus {
    display: inline-block; margin-top: 22px;
    color: var(--ap-bronze-fonce); text-decoration: none;
    font-size: 14px; font-weight: 600;
    border-bottom: 1px solid rgba(185,141,95,.4);
    padding-bottom: 2px;
}
.ap-lien-plus:hover { color: var(--ap-encre); border-color: var(--ap-encre); }

/* --------------------------------------------------------------------------
   Adaptations écrans
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .ap-produit { grid-template-columns: 1fr; gap: 32px; }
    .ap-galerie__scene { aspect-ratio: 1 / 1; }
    .ap-fiche .technical-description-layout { flex-direction: column-reverse; gap: 22px; }
    .ap-fiche .technical-description-image-wrapper { width: 100%; }
}

@media (max-width: 768px) {
    .ap-fiche { padding-bottom: 88px; }
    .ap-barre-mobile { display: flex; }

    .ap-galerie__vignettes {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }
    .ap-vignette-produit { width: 64px; height: 64px; flex: 0 0 64px; scroll-snap-align: start; }

    .ap-technique { padding: 18px; }
    .ap-fiche .technical-carousel-images { height: 320px; }
    .ap-fiche .carousel-nav { width: 36px; height: 36px; }
    .ap-fiche .carousel-nav svg { width: 20px; height: 20px; }
    .ap-fiche .technical-carousel-thumb { width: 62px; height: 84px; }

    .ap-specs { grid-template-columns: 1fr; gap: 4px 0; }
    .ap-specs dd { margin-bottom: 12px; }

    .ap-avis-carte__entete { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-galerie__img, .ap-carte-article, .ap-barre-mobile,
    .ap-fiche .technical-carousel-image { transition: none; }
    .ap-galerie__lien:hover .ap-galerie__img,
    .ap-carte-article:hover { transform: none; }
}

/* ==========================================================================
   Accueil et pages de paiement
   --------------------------------------------------------------------------
   Section ajoutée à la suite, sans toucher à ce qui précède. Elle corrige
   l'affichage mobile de trois vues :

     • l'accueil            (products/index.blade.php)
     • la confirmation      (orders/confirmation.blade.php)
     • le paiement différé  (orders/paiement-en-cours.blade.php)

   Deux principes tenus de bout en bout :

   1. Rien ne bouge sur grand écran. Les règles sont soit neutres (retour à
      la ligne des chaînes longues, zones tactiles), soit enfermées dans une
      media query mobile, soit exprimées en `clamp()` calibré pour retomber
      exactement sur la valeur desktop actuelle.
   2. Les classes historiques des vues (`.product-card`, `.info-value`…) ne
      sont jamais ciblées seules : elles sont toujours scopées sous une
      classe `ap-` posée sur la section. Rien ne fuit sur les autres pages,
      et la spécificité (0,2,0) l'emporte sur les styles inline des vues
      sans avoir besoin de `!important`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Accueil — bandeau de marques défilant
   L'animation ne s'arrête jamais et le rail n'est pas saisissable au doigt.
   Pour qui demande moins de mouvement, on coupe l'animation et on rend le
   rail scrollable, sans quoi la moitié des logos deviendrait inatteignable.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .ap-marques { padding: 24px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-marques .brands-track { animation: none; }
    .ap-marques .brands-slider {
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .ap-marques .brand-item { scroll-snap-align: center; }
    .ap-marques .brand-item img { transition: none; }
    .ap-marques .brand-item img:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Accueil — phrase d'introduction
   24px fixes sur 360px de large, c'est trois mots par ligne. Taille fluide,
   et les retours forcés sautent en dessous de 576px : ils ont été écrits
   pour une ligne de 1200px.
   -------------------------------------------------------------------------- */
.section-description.ap-intro {
    font-size: clamp(16.5px, 2.4vw, 24px);
    line-height: 1.6;
}

@media (max-width: 575.98px) {
    .section-description.ap-intro { padding: 0 16px; margin-top: 30px; }
    .section-description.ap-intro br { display: none; }
}

/* --------------------------------------------------------------------------
   Accueil — titres de section
   Les paliers 3rem / 2.2rem / 1.8rem sautaient d'un coup. `clamp()` calibré
   pour redonner 3rem dès 1143px, donc rien ne change sur le conteneur
   desktop (1200px).
   -------------------------------------------------------------------------- */
.ap-accueil .bestsellers-title    { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.ap-accueil .bestsellers-subtitle { font-size: clamp(1rem, 1.7vw, 1.2rem); }

@media (max-width: 575.98px) {
    .ap-accueil { margin-top: 40px; }
    .ap-accueil .bestsellers-subtitle { margin-bottom: 24px; }
}

/* --------------------------------------------------------------------------
   Accueil — grille produits
   Sous 576px aucune classe Bootstrap `col-*` ne s'applique : chaque fiche
   occupait toute la largeur, avec une image de 266px de haut. Un produit
   par écran, et un défilement interminable.

   On passe à deux colonnes. Le sélecteur ne vise que les `.row` imbriquées,
   celles qui portent les fiches produit ; les colonnes de vignettes de
   catégorie, elles, vivent dans la `.row` de premier niveau et ne sont pas
   touchées.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .ap-accueil .row .row > [class*="col-"] { width: 50%; }

    /* Hauteur en vw : la fiche fait la moitié de l'écran, l'image garde un
       rapport proche de 3/4 quelle que soit la taille du téléphone. */
    .ap-accueil .product-image-container { height: 60vw; }

    .ap-accueil .product-info { padding: 12px 6px 4px; }
    .ap-accueil .product-price { margin-bottom: 6px; }
    .ap-accueil .product-card { margin-bottom: 8px; }
}

/* --------------------------------------------------------------------------
   Accueil — vignettes de catégorie
   Le libellé (DÉCORATION, BIJOUX…) n'apparaissait qu'au survol : sur un
   écran tactile il n'apparaissait donc jamais. On l'affiche d'emblée dès
   qu'il n'y a pas de survol possible.
   -------------------------------------------------------------------------- */
@media (hover: none) {
    .ap-accueil .category-overlay {
        transform: translateY(0);
        background: linear-gradient(transparent, rgba(0,0,0,.72));
        padding: 26px 14px 12px;
    }
    .ap-accueil .category-link:hover { transform: none; box-shadow: none; }
    .ap-accueil .category-link:hover img { transform: none; }
}

/* Texte de catégorie : 12px, sous le plancher lisible. */
.ap-accueil .category-description       { font-size: 14.5px; }
.ap-accueil .category-description p     { line-height: 1.6; margin-bottom: 14px; }

@media (max-width: 767.98px) {
    .ap-accueil .category-description br { display: none; }
    .ap-accueil .category-description > div { padding: 14px 10px 22px !important; }
    /* Le lien « Voir tous les… » faisait 26px de haut : intenable au doigt. */
    .ap-accueil .category-description a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        padding: 0 6px;
    }
}

/* Widget Instagram tiers : borne de sécurité contre le débordement. */
.ap-accueil [class*="elfsight-app-"] { max-width: 100%; }

/* --------------------------------------------------------------------------
   Accueil — boutique et horaires
   -------------------------------------------------------------------------- */
.ap-boutique .boutique-title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }

@media (max-width: 575.98px) {
    .ap-boutique { padding: 40px 0; }
    .ap-boutique .boutique-info { padding: 26px 4px 0; }
    .ap-boutique .boutique-address { font-size: 1rem; margin-bottom: 22px; }

    /* « Mardi au Jeudi » face à « 10h30/13h - 14h30/19h » : les deux tenaient
       tout juste. On autorise le passage à la ligne plutôt que le débordement. */
    .ap-boutique .horaires-list li {
        flex-wrap: wrap;
        gap: 2px 14px;
        font-size: 14px;
        text-align: left;
    }
    .ap-boutique .horaires-list .heure { margin-left: auto; text-align: right; }

    .ap-boutique .btn-directions { padding: 15px 18px; }
}

/* --------------------------------------------------------------------------
   Confirmation de commande
   -------------------------------------------------------------------------- */

/* L'identifiant de paiement Stripe et les e-mails sont des chaînes sans
   espace : sans césure, ils poussaient la page en débordement horizontal. */
.ap-confirmation .info-value,
.ap-confirmation .product-name,
.ap-confirmation .order-details-header h3 { overflow-wrap: anywhere; }

/* `flex: 1` sans `min-width: 0` refuse de descendre sous la largeur du plus
   long mot : c'est l'autre porte d'entrée du débordement. */
.ap-confirmation .product-info { min-width: 0; }
.ap-confirmation .product-total { white-space: nowrap; }

/* Titre fluide, calibré pour retomber sur 2.5rem dès 910px de large. */
.ap-confirmation .confirmation-header h1 {
    font-size: clamp(1.6rem, 4.4vw, 2.5rem);
    line-height: 1.25;
    letter-spacing: 1px;
}
.ap-confirmation .confirmation-header .icon { font-size: clamp(2.6rem, 8vw, 4rem); }
.ap-confirmation .confirmation-header p { font-size: clamp(1rem, 2.4vw, 1.2rem); }

@media (max-width: 575.98px) {
    .ap-confirmation { margin: 24px auto; padding: 0 12px; }

    /* 50px puis 30px de padding sur 336px de large, il ne restait presque
       rien au texte. */
    .ap-confirmation .confirmation-header { padding: 28px 16px; margin-bottom: 26px; }
    .ap-confirmation .order-details-header { padding: 16px; }
    .ap-confirmation .order-details-body   { padding: 16px; }
    .ap-confirmation .order-summary        { padding: 16px; }
    .ap-confirmation .next-steps           { padding: 18px 16px; margin-top: 24px; }

    /* Étiquette de 120px fixes + valeur : la valeur se retrouvait comprimée
       sur 170px. On rend l'étiquette à sa largeur naturelle, la valeur passe
       à la ligne quand il le faut. */
    .ap-confirmation .info-label { width: auto; margin-right: 6px; }
    .ap-confirmation .info-item  { font-size: 15px; margin-bottom: 12px; line-height: 1.55; }

    .ap-confirmation .product-item  { padding: 14px 12px; gap: 12px; }
    .ap-confirmation .product-image { width: 56px; height: 56px; flex: 0 0 56px; margin-right: 0; }
    .ap-confirmation .product-details { font-size: 14px; }
    .ap-confirmation .summary-line  { font-size: 15px; gap: 12px; }

    .ap-confirmation .action-buttons { gap: 12px; margin-top: 30px; }
    .ap-confirmation .btn { min-height: 48px; }
}

/* --------------------------------------------------------------------------
   Paiement en cours de validation
   La vue n'avait que des styles en ligne : aucune media query ne pouvait
   l'atteindre. Les valeurs d'origine sont reprises telles quelles pour le
   grand écran, seul le mobile change.
   -------------------------------------------------------------------------- */
.ap-attente {
    max-width: 620px;
    margin: 0 auto;
    padding: 60px 20px 72px;
    text-align: center;
}

.ap-attente__carte {
    background: #fff;
    border-radius: 12px;
    padding: 40px 34px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

.ap-attente__titre {
    font-size: clamp(19px, 4.6vw, 22px);
    line-height: 1.35;
    font-weight: 600;
    margin: 0 0 16px;
}

.ap-attente__texte {
    font-size: 15px;
    line-height: 1.65;
    color: #5c534b;
    margin: 0 0 16px;
}
.ap-attente__texte:last-of-type { margin-bottom: 24px; }
/* L'adresse e-mail du client peut être longue et sans espace. */
.ap-attente__texte strong { overflow-wrap: anywhere; }

.ap-attente__note {
    background: #f4f0ea;
    border-left: 4px solid var(--ap-bronze);
    border-radius: 8px;
    padding: 14px 18px;
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
    color: #6b6259;
}
.ap-attente__note a {
    color: #8a6339;
    overflow-wrap: anywhere;
    text-underline-offset: 3px;
}

.ap-attente__retour {
    display: inline-block;
    margin-top: 26px;
    background: var(--ap-bronze);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 14px 28px;
    line-height: 20px;
    border-radius: 6px;
    transition: background .15s;
}
.ap-attente__retour:hover,
.ap-attente__retour:focus { background: var(--ap-bronze-fonce); color: #fff; }

@media (max-width: 575.98px) {
    .ap-attente { padding: 28px 14px 48px; }
    .ap-attente__carte { padding: 26px 18px; }
    .ap-attente__note  { padding: 13px 15px; }
    /* Pleine largeur : la seule action de la page mérite d'être atteignable
       au pouce sans viser. */
    .ap-attente__retour { display: block; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-attente__retour { transition: none; }
}