/* Rappels — illustrations des feuilles 2a/2b (js/rappels-push.js) et page
   Compte → Rappels (rappels.html, js/rappels.js). Maquette :
   docs/maquettes/fin-de-session-v2.dc.html. */

/* ---- 2a : les trois gestes Safari, au trait filet et encre ---- */
.rp-gestes {
    height: 152px;
    background: var(--surface-creux);
    border: var(--trait-1) solid var(--trait);
    border-radius: var(--r-bloc);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 0 var(--e-3);
    flex: none;
}
.rp-geste { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.rp-geste-cadre {
    width: 76px;
    height: 76px;
    border: var(--trait-1) solid var(--trait);
    border-radius: var(--r-bloc);
    background: var(--surface-page);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--encre);
}
.rp-ico-partager { width: 28px; height: 28px; }
.rp-geste-cadre-pile { flex-direction: column; gap: 6px; padding: 0 6px; }
.rp-ico-ajouter { width: 22px; height: 22px; }
.rp-geste-texte { font-family: var(--f-texte); font-size: var(--t-11); line-height: 1.2; color: var(--texte); text-align: center; }
.rp-geste-cadre-ajout { flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: hidden; }
.rp-geste-barre {
    height: 26px;
    border-bottom: var(--trait-1) solid var(--trait);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--e-2);
}
.rp-geste-barre span { font-family: var(--f-texte); font-size: var(--t-12); font-weight: 600; color: var(--texte); }
.rp-geste-icone { flex: 1; display: flex; align-items: center; justify-content: center; }
.rp-geste-tuile {
    width: 30px;
    height: 30px;
    border-radius: var(--r-bloc);
    background: var(--surface-page);
    border: var(--trait-1) solid var(--encre);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rp-geste-tuile svg { width: 20px; height: 20px; }
.rp-geste-legende { font-family: var(--f-mono); font-size: var(--t-11); color: var(--texte-3); white-space: nowrap; }
.rp-geste-fleche { font-family: var(--f-mono); font-size: var(--t-13); color: var(--trait); margin-bottom: 24px; }

/* ---- 2b : aperçu de la notification (variante A) sur écran encre ---- */
.rp-apercu {
    height: 152px;
    background: var(--encre);
    border-radius: var(--r-bloc);
    padding: 18px 14px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    flex: none;
}
.rp-apercu-heure {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: var(--t-34);
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--texte-negatif);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.rp-apercu-notif {
    width: 100%;
    background: var(--surface-creux);
    border-radius: var(--r-bloc);
    padding: 10px var(--e-3);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
}
.rp-apercu-icone {
    width: 32px;
    height: 32px;
    border-radius: var(--r-bloc);
    background: var(--surface-page);
    border: var(--trait-1) solid var(--trait);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.rp-apercu-icone svg { width: 22px; height: 22px; }
.rp-apercu-corps { flex: 1; min-width: 0; }
.rp-apercu-tete { display: flex; align-items: baseline; gap: var(--e-2); }
.rp-apercu-tete span:first-child { flex: 1; font-family: var(--f-texte); font-size: var(--t-13); font-weight: 600; color: var(--texte); }
.rp-apercu-tete span:last-child { font-family: var(--f-texte); font-size: var(--t-11); color: var(--texte-2); }
.rp-apercu-corps p { font-family: var(--f-texte); font-size: var(--t-13); line-height: 1.3; color: var(--texte); margin: 0; }

/* ---- Compte → Rappels (3a, 3b) ---- */
main.rp-page {
    max-width: 480px;
    padding: var(--e-6) var(--e-4) var(--e-4);
}
#rappelsContenu:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
}
.rp-titre {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: var(--t-34);
    letter-spacing: -.03em;
    line-height: 1;
    margin: 0 0 var(--e-4);
}
.rp-carte {
    background: var(--surface-bloc);
    border: var(--trait-1) solid var(--trait);
    border-radius: var(--r-bloc);
}
.rp-interrupteur-ligne {
    padding: 0 var(--e-4);
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: var(--e-3);
}
.rp-interrupteur-label { flex: 1; min-width: 0; font-size: 17px; font-weight: 500; }
.rp-interrupteur {
    position: relative;
    width: 52px;
    height: 32px;
    border-radius: var(--r-loge);
    border: var(--trait-1) solid var(--trait);
    background: var(--trait);
    cursor: pointer;
    padding: 0;
    flex: none;
    transition: background-color var(--t-court) var(--courbe), border-color var(--t-court) var(--courbe);
}
.rp-interrupteur span {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    border-radius: var(--r-loge);
    background: var(--surface-creux);
    transition: left var(--t-court) var(--courbe);
}
.rp-interrupteur[aria-checked="true"] { background: var(--encre); border-color: var(--encre); }
.rp-interrupteur[aria-checked="true"] span { left: 23px; }
.rp-interrupteur:disabled { opacity: .45; cursor: not-allowed; }
.rp-interrupteur:focus-visible, .rp-option:focus-visible, .rp-roue-col:focus-visible {
    outline: var(--trait-2) solid var(--action);
    outline-offset: 2px;
}
.rp-aide {
    font-size: var(--t-13);
    line-height: 1.6;
    color: var(--texte-2);
    margin: 0 0 var(--e-4);
    padding: 0 var(--e-1);
    text-wrap: pretty;
}
/* Permission refusée, iPhone sans l'app installée : explication sépia. */
.rp-avis {
    font-size: var(--t-13);
    line-height: 1.6;
    color: var(--texte-2);
    margin: calc(-1 * var(--e-3)) 0 var(--e-4);
    padding: 0 var(--e-1);
    text-wrap: pretty;
}
.rp-creneaux {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    transition: opacity var(--t-court) linear;
}
/* Rappels coupés : la liste passe à 45 % et ne répond plus. */
.rp-creneaux.rp-coupe { opacity: .45; pointer-events: none; }
.rp-legende {
    font-family: var(--f-mono);
    font-size: var(--t-11);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--texte-2);
    margin: 0;
    padding: 0 var(--e-1);
}
.rp-liste { overflow: hidden; display: flex; flex-direction: column; }
.rp-option {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    min-height: 52px;
    width: 100%;
    padding: 0 var(--e-4);
    border: 0;
    border-top: var(--trait-1) solid var(--trait);
    background: transparent;
    color: var(--texte);
    font-family: var(--f-texte);
    text-align: left;
    cursor: pointer;
}
.rp-option:first-child { border-top-color: transparent; }
.rp-radio {
    width: 20px;
    height: 20px;
    border-radius: var(--r-loge);
    border: var(--trait-1) solid var(--trait);
    background: var(--surface-creux);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.rp-radio span { width: 10px; height: 10px; border-radius: var(--r-loge); background: transparent; }
.rp-option[aria-checked="true"] .rp-radio { border-color: var(--encre); }
.rp-option[aria-checked="true"] .rp-radio span { background: var(--encre); }
.rp-option-label { flex: 1; min-width: 0; font-size: 17px; }
.rp-option-heure { font-family: var(--f-mono); font-size: var(--t-13); color: var(--texte-3); }
/* 3b : l'heure précise en Familjen dans un cadre réserve — la cible du tap. */
.rp-heure-precise {
    height: 38px;
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: 0 10px;
    margin: 7px 0;
    background: var(--surface-creux);
    border: var(--trait-1) solid var(--trait);
    border-radius: var(--r-controle);
    font-family: var(--f-display);
    font-weight: 600;
    font-size: var(--t-22);
    letter-spacing: -.02em;
    color: var(--texte-3);
}
.rp-option[aria-checked="true"] .rp-heure-precise { color: var(--texte); }
.rp-chevron { font-family: var(--f-mono); font-size: var(--t-11); color: var(--texte-3); }
.rp-prochain {
    font-family: var(--f-mono);
    font-size: var(--t-11);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texte-3);
    margin: var(--e-4) 0 0;
    padding: 0 var(--e-1);
}

/* ---- 3c : roue de l'heure précise (dans une feuille) ---- */
.rp-roue-titre {
    font-family: var(--f-mono);
    font-size: var(--t-11);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--texte-2);
    margin: 0;
    text-align: center;
}
.rp-roue {
    position: relative;
    height: 260px;
    display: flex;
    justify-content: center;
    gap: var(--e-1);
    margin: var(--e-4) 0 var(--e-6);
}
.rp-roue-col {
    width: 100px;
    height: 260px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    padding: 104px 0;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.rp-roue-col::-webkit-scrollbar { display: none; }
.rp-roue-val,
.rp-roue-sep {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: var(--t-34);
    color: var(--texte);
}
.rp-roue-val {
    height: 52px;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.rp-roue-sep { display: flex; align-items: center; padding-bottom: var(--e-1); }
.rp-roue-filet { position: absolute; left: 56px; right: 56px; height: 1px; background: var(--trait); pointer-events: none; }
/* Fondu ivoire sur les voisines (#EFE4CE = --ivoire, à 55 % au bord du cadre). */
.rp-roue-fondu { position: absolute; left: 0; right: 0; height: 104px; pointer-events: none; }
.rp-roue-fondu-haut { top: 0; background: linear-gradient(var(--ivoire) 10%, rgba(239, 228, 206, .55)); }
.rp-roue-fondu-bas { bottom: 0; background: linear-gradient(rgba(239, 228, 206, .55), var(--ivoire) 90%); }