/* ==========================================================================
   annuaire-gratuit.ma - Mon espace, favoris, alertes (charte existante)
   orange #f26400 / #d95500, bleu #1e6dab, texte #263226, gris #687168,
   bordures #dfe7df / #edf1ed, fonds #f8fbf8 / #fff7f2
   ========================================================================== */

/* ---------- Bouton favori (cœur) ---------- */
.ag-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid #dfe7df;
    border-radius: 22px;
    background: #fff;
    color: #687168;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color .15s, border-color .15s, background-color .15s, transform .15s;
}
.ag-fav-btn i { font-size: 19px; }
.ag-fav-btn:hover, .ag-fav-btn:focus-visible { border-color: #f26400; color: #f26400; outline: none; }
.ag-fav-btn:focus-visible { box-shadow: 0 0 0 3px rgba(242, 100, 0, .25); }
.ag-fav-btn.is-active { border-color: #f26400; background: #fff7f2; color: #d95500; }
.ag-fav-btn.is-active i { animation: ag-fav-pop .25s ease-out; }
.ag-fav-btn[disabled] { opacity: .7; cursor: progress; }
.ag-fav-btn[hidden] { display: none; }
@keyframes ag-fav-pop { 0% { transform: scale(.7); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }

.ag_listing_card { position: relative; }
.ag_listing_card .ag-fav-btn.ag-fav-corner { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.ag_listing_card .ag_listing_header { padding-right: 52px; }
.ag-fav-details { margin: 8px 0 4px; }
.ag_pharmacy_card_header { position: relative; }
.ag_pharmacy_card .ag-fav-btn.ag-fav-corner { padding: 0; flex: 0 0 auto; }

/* ---------- Carte contextuelle (enregistrer recherche / trajet / ville) ---------- */
#ag-ret-slot:empty { display: none; }
#ag-ret-slot { clear: both; margin: 12px 0 16px; }
.ag-ret-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid #dfe7df;
    border-left: 4px solid #f26400;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff8f3 0%, #ffffff 70%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    color: #263226;
    font-family: Arial, Helvetica, sans-serif;
}
.ag-ret-card.is-saved { align-items: center; border-left-color: #419641; background: #f7fbf7; box-shadow: none; }
.ag-ret-card.is-saved .ag-ret-card-icon { background: #419641; }
.ag-ret-card.is-guest { background: #fff; box-shadow: none; }
.ag-ret-card-icon {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f26400;
    color: #fff;
    font-size: 18px;
}
.ag-ret-card-body { flex: 1 1 auto; min-width: 0; }
.ag-ret-card-title { display: block; font-size: 16px; line-height: 22px; }
.ag-ret-card-sub { margin: 2px 0 8px; color: #687168; font-size: 14px; line-height: 20px; }
.ag-ret-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.ag-ret-form { margin: 0; }
.ag-ret-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.ag-ret-select, .ag-ret-time, .ag-ms input[type=time], .ag-ms select {
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #cfd8cf;
    border-radius: 6px;
    background: #fff;
    color: #263226;
    font-size: 15px;
    max-width: 100%;
}
.ag-ret-select:focus, .ag-ret-time:focus, .ag-ms select:focus, .ag-ms input:focus { border-color: #f26400; outline: 2px solid rgba(242, 100, 0, .25); outline-offset: 1px; }
.ag-ret-select[disabled] { background: #f2f2f2; color: #8a8f8a; }
.ag-ret-time-wrap { display: inline-flex; align-items: center; gap: 8px; color: #687168; }
.ag-ret-time-wrap[hidden] { display: none; }
.ag-ret-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-weight: 400; color: #263226; cursor: pointer; }
.ag-ret-check input { width: 18px; height: 18px; margin: 0; accent-color: #f26400; }
.ag-ret-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px dashed #cfd8cf;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    color: #263226;
    cursor: pointer;
}
.ag-ret-consent[hidden] { display: none; }
.ag-ret-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #f26400; }
.ag-ret-consent.is-required { border-color: #f26400; background: #fff7f2; }
.ag-ret-note { margin: 0 0 10px; color: #8a5a00; font-size: 13px; line-height: 19px; }
.ag-ret-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-ret-btn, .ag-ret-btn:link, .ag-ret-btn:visited, .ag-ms .ag-ret-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 16px;
    border: 0;
    border-radius: 6px;
    background: #f26400;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.ag-ret-btn:hover, .ag-ret-btn:focus { background: #d95500; color: #fff; text-decoration: none; }
.ag-ret-btn:focus-visible, .ag-ret-btn-ghost:focus-visible { outline: 3px solid rgba(242, 100, 0, .35); outline-offset: 2px; }
.ag-ret-btn.is-loading { opacity: .75; cursor: progress; }
.ag-ret-btn-ghost, .ag-ret-btn-ghost:link, .ag-ret-btn-ghost:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid #dfe7df;
    border-radius: 6px;
    background: #fff;
    color: #263226 !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.ag-ret-btn-ghost:hover { border-color: #f26400; color: #f26400 !important; text-decoration: none; }
.ag-ret-btn-danger { color: #b3261e !important; }
.ag-ret-btn-danger:hover { border-color: #b3261e; color: #b3261e !important; }
.ag-ret-link { color: #1e6dab; font-weight: 700; }

/* ---------- Notifications éphémères ---------- */
.ag-ret-toasts { position: fixed; left: 50%; bottom: 18px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 420px; transform: translateX(-50%); pointer-events: none; }
.ag-ret-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #263226;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    pointer-events: auto;
    animation: ag-toast-in .2s ease-out;
    transition: opacity .4s, transform .4s;
}
.ag-ret-toast i { font-size: 18px; color: #a3d832; }
.ag-ret-toast-error { background: #8c1d18; }
.ag-ret-toast-error i { color: #fff; }
.ag-ret-toast-info i { color: #ffb37a; }
.ag-ret-toast a { color: #ffb37a; font-weight: 700; text-decoration: underline; }
.ag-ret-toast.is-leaving { opacity: 0; transform: translateY(8px); }
@keyframes ag-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Accueil : reprenez là où vous en étiez ---------- */
#ag-ret-home[hidden] { display: none; }
#ag-ret-home { margin: 14px 0; padding: 14px; border: 1px solid #dfe7df; border-radius: 8px; background: #fff; }
.ag-ret-home-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: #263226; font-size: 16px; }
.ag-ret-home-head a { color: #1e6dab; font-size: 14px; font-weight: 700; }
.ag-ret-quick-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ag-ret-quick, .ag-ret-quick:link, .ag-ret-quick:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid #e2e8e2;
    border-radius: 6px;
    background: #f8fbf8;
    color: #263226;
    text-decoration: none;
}
.ag-ret-quick:hover, .ag-ret-quick:focus { border-color: #f26400; background: #fff7f2; color: #263226; text-decoration: none; }
.ag-ret-quick i { flex: 0 0 22px; color: #f26400; font-size: 20px; text-align: center; }
.ag-ret-quick span { min-width: 0; }
.ag-ret-quick small { display: block; color: #687168; font-size: 12px; }
.ag-ret-quick strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Pages "Mon espace"
   ========================================================================== */
.ag-ms { color: #263226; font-family: Arial, Helvetica, sans-serif; }
.ag-ms h1 { margin: 6px 0 4px; font-size: 24px; line-height: 31px; color: #263226; }
.ag-ms h2 { margin: 0 0 10px; font-size: 18px; line-height: 24px; color: #263226; }
.ag-ms-lead { margin: 0 0 16px; color: #687168; font-size: 15px; line-height: 22px; }
.ag-ms-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ag-ms-flash { margin: 10px 0 14px; padding: 12px 14px; border-radius: 6px; background: #edf7e8; color: #2b5b1f; font-weight: 700; }
.ag-ms-flash.is-error { background: #fdecea; color: #8c1d18; }
.ag-ms-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ag-ms-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ag-ms-stat, .ag-ms-stat:link, .ag-ms-stat:visited {
    display: block;
    padding: 12px 14px;
    border: 1px solid #dfe7df;
    border-radius: 8px;
    background: #fff;
    color: #263226;
    text-decoration: none;
}
.ag-ms-stat:hover { border-color: #f26400; text-decoration: none; color: #263226; }
.ag-ms-stat i { color: #1e6dab; font-size: 18px; }
.ag-ms-stat strong { display: block; margin-top: 6px; font-size: 24px; line-height: 28px; }
.ag-ms-stat span { color: #687168; font-size: 13px; }
.ag-ms-panel { padding: 16px; border: 1px solid #dfe7df; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .04); }
.ag-ms-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ag-ms-panel-head a { color: #1e6dab; font-size: 14px; font-weight: 700; }
.ag-ms-list { margin: 0; padding: 0; list-style: none; }
.ag-ms-item { padding: 14px 0; border-top: 1px solid #edf1ed; transition: opacity .3s; }
.ag-ms-item:first-child { border-top: 0; padding-top: 4px; }
.ag-ms-item.is-removed, .ag-ms-fav.is-removed { opacity: 0; }
.ag-ms-item-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ag-ms-item-title { font-size: 16px; font-weight: 700; color: #263226; }
.ag-ms-item-title a { color: #263226; }
.ag-ms-item-meta { margin-top: 3px; color: #687168; font-size: 13px; line-height: 19px; }
.ag-ms-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #edf1ed; color: #263226; font-size: 12px; font-weight: 700; line-height: 18px; }
.ag-ms-badge.is-on { background: #fff7f2; color: #d95500; }
.ag-ms-badge.is-new { background: #e6f2fb; color: #1e6dab; }
.ag-ms-badge.is-warn { background: #fff4dc; color: #8a5a00; }
.ag-ms-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
.ag-ms-form label.ag-ms-field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; font-weight: 700; color: #687168; }
.ag-ms-form [hidden] { display: none !important; }
.ag-ms-days { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-ms-days label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; margin: 0; border: 1px solid #cfd8cf; border-radius: 6px; background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.ag-ms-days input { position: absolute; opacity: 0; pointer-events: none; }
.ag-ms-days input:checked + span { color: #fff; }
.ag-ms-days label:has(input:checked) { border-color: #f26400; background: #f26400; color: #fff; }
.ag-ms-days input:focus-visible + span { outline: 2px solid #f26400; outline-offset: 3px; }
.ag-ms-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ag-ms-empty { padding: 26px 16px; border: 1px dashed #cfd8cf; border-radius: 8px; background: #f8fbf8; text-align: center; color: #687168; }
.ag-ms-empty i { display: block; margin-bottom: 8px; color: #f26400; font-size: 30px; }
.ag-ms-empty strong { display: block; margin-bottom: 4px; color: #263226; font-size: 16px; }
.ag-ms-empty p { margin: 0 0 12px; }

/* Favoris */
.ag-ms-group-city { margin: 18px 0 8px; color: #f26400; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.ag-ms-group-cat { margin: 6px 0 8px; color: #687168; font-size: 14px; font-weight: 700; }
.ag-ms-favs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; }
.ag-ms-fav { position: relative; padding: 14px 14px 12px; border: 1px solid #dfe7df; border-radius: 8px; background: #fff; transition: opacity .3s; }
.ag-ms-fav h3 { margin: 0 52px 2px 0; font-size: 16px; line-height: 22px; }
.ag-ms-fav h3 a { color: #263226; }
.ag-ms-fav .ag-fav-btn { position: absolute; top: 10px; right: 10px; padding: 0; }
.ag-ms-fav-cat { color: #f26400; font-size: 13px; font-weight: 700; }
.ag-ms-fav-line { display: flex; gap: 8px; margin-top: 6px; color: #444; font-size: 14px; line-height: 20px; }
.ag-ms-fav-line i { flex: 0 0 14px; margin-top: 3px; color: #1e6dab; }
.ag-ms-fav-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.ag-ms-fav-actions a { min-height: 44px; padding: 8px 6px; font-size: 13px; }

/* Préférences */
.ag-ms-switch { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid #edf1ed; cursor: pointer; }
.ag-ms-switch:first-of-type { border-top: 0; }
.ag-ms-switch strong { display: block; font-size: 15px; }
.ag-ms-switch small { display: block; margin-top: 2px; color: #687168; font-size: 13px; font-weight: 400; line-height: 18px; }
.ag-ms-switch input { position: absolute; opacity: 0; }
.ag-ms-toggle { position: relative; flex: 0 0 46px; width: 46px; height: 26px; margin-top: 2px; border-radius: 13px; background: #cfd8cf; transition: background .15s; }
.ag-ms-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.ag-ms-switch input:checked + .ag-ms-toggle { background: #f26400; }
.ag-ms-switch input:checked + .ag-ms-toggle::after { transform: translateX(20px); }
.ag-ms-switch input:focus-visible + .ag-ms-toggle { outline: 3px solid rgba(242, 100, 0, .35); outline-offset: 2px; }
.ag-ms-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-ms-chip { display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 0 14px; border: 1px solid #cfd8cf; border-radius: 20px; background: #fff; font-size: 14px; font-weight: 400; cursor: pointer; }
.ag-ms-chip input { position: absolute; opacity: 0; }
.ag-ms-chip:has(input:checked) { border-color: #f26400; background: #fff7f2; color: #d95500; font-weight: 700; }
.ag-ms-chip:has(input:focus-visible) { outline: 2px solid #f26400; outline-offset: 2px; }
.ag-ms-alert { margin: 0 0 14px; padding: 12px 14px; border-radius: 6px; background: #fff4dc; color: #6b4600; font-size: 14px; line-height: 20px; }
.ag-ms-sticky { position: sticky; bottom: 0; z-index: 5; margin: 16px -16px -16px; padding: 12px 16px; border-top: 1px solid #edf1ed; border-radius: 0 0 8px 8px; background: rgba(255, 255, 255, .96); }

/* Tableau de bord : raccourcis et suggestions */
.ag-ms-welcome { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-radius: 8px; background: linear-gradient(135deg, #263226 0%, #3b4b3b 100%); color: #fff; }
.ag-ms-welcome h1 { color: #fff; }
.ag-ms-welcome p { margin: 0; color: #d9e8cb; }
.ag-ms-suggest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ag-ms-suggest a { display: block; padding: 10px 12px; border: 1px solid #e2e8e2; border-radius: 6px; background: #f8fbf8; color: #263226; text-decoration: none; }
.ag-ms-suggest a:hover { border-color: #f26400; text-decoration: none; }
.ag-ms-suggest small { display: block; color: #687168; }
.ag-ms-interests { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-ms-context { padding: 16px; border: 1px solid #f7c9a6; border-radius: 8px; background: #fff7f2; }

/* Désabonnement */
.ag-ms-narrow { max-width: 560px; margin: 24px auto; }

@media (min-width: 600px) {
    .ag-ms-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ag-ms-favs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ag-ret-quick-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ag-ms-suggest { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .ag-ms-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ag-ret-quick-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .ag-ret-card { padding: 12px; gap: 10px; }
    .ag-ret-card-icon { flex-basis: 34px; width: 34px; height: 34px; font-size: 15px; }
    .ag-ret-fields .ag-ret-select { flex: 1 1 100%; }
    .ag-ret-actions .ag-ret-btn { flex: 1 1 auto; }
    .ag-ms h1 { font-size: 21px; line-height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
    .ag-fav-btn.is-active i, .ag-ret-toast { animation: none; }
}

/* Anti-débordement mobile */
.ag-ms, .ag-ms * { box-sizing: border-box; }
.ag-ms { max-width: 100%; overflow-wrap: anywhere; }
.ag-ms-panel, .ag-ms-stat, .ag-ret-quick, .ag-ms-fav, .ag-ret-card-body { min-width: 0; }
.ag-ms-welcome > div { flex: 1 1 240px; min-width: 0; }
.ag-ms-welcome h1 { margin: 0 0 4px; }
.ag-ms-form > * { max-width: 100%; }
.ag-ms h1, .ag-ms h2 { float: none; width: auto; }
.ag-ms-head > div { flex: 1 1 280px; min-width: 0; }
.ag-ms-form label.ag-ms-field { flex: 1 1 180px; min-width: 0; }
.ag-ms-form label.ag-ms-field select, .ag-ms-form label.ag-ms-field input[type=text] { width: 100%; }
.ag-ms-form label.ag-ms-field input[type=time] { width: auto; }
.ag-ms-form fieldset.ag-ms-field { flex: 1 1 100%; }