/* ========================================================================== Respire et Prie — système visuel JOUR = « Ciel du matin » (bleu pâle, accent bleu profond, pointe de corail). NUIT = « Vigile » (bleu nuit, accent ambre — la lueur d'un cierge). Le thème suit le système, ou le choix fait dans Paramètres (). Polices : Outfit (titres) + DM Sans (texte) + Cormorant Garamond (marque). (Les noms de tokens gardent leur ancien intitulé « nuit » — c'est le fond.) ========================================================================== */ :root { /* ---- JOUR : Ciel du matin ---- */ --nuit: #e7eef3; /* le fond : bleu ciel pâle */ --nuit-surface: #f3f7fa; /* cartes — plus claires, elles « montent » */ --nuit-surface-2: #dde8ee; /* renfoncé : menu, champs, pistes d'interrupteur */ --creme: #f2ecdd; /* conteneur derrière les images de prière */ --creme-doux: #e5ddc9; --foret: #316a92; --foret-clair: #5b8fb4; --emeraude: #316a92; /* l'accent = bleu profond */ --emeraude-clair: #2a5f87; /* accent en texte (plus foncé, contraste sur fond pâle) */ --terre: #c26547; /* corail chaud — usage très ponctuel */ --sur-accent: #f3f7fa; /* texte / icônes posés sur un accent plein */ --texte: #24313d; /* encre : bleu ardoise profond */ --texte-doux: #5f6f7c; --texte-tres-doux: #93a2ad; --trait: #cddbe4; --nav-fond: rgba(243, 247, 250, 0.92); --ombre: rgba(30, 45, 58, 0.16); --knob: #b7c6d1; /* pastille d'interrupteur au repos */ --serif: "Outfit", "Segoe UI", system-ui, sans-serif; --sans: "DM Sans", "Segoe UI", system-ui, sans-serif; --r-l: 20px; --r-m: 14px; --r-s: 10px; --pied: 68px; /* hauteur barre de navigation */ --large: 520px; } /* ---- NUIT : Vigile (bleu nuit & cierge) ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nuit: #0f1622; --nuit-surface: #17202f; --nuit-surface-2: #1f2a3c; --creme: #f0e9d8; --creme-doux: #d9d2c0; --foret: #6d8bb0; --foret-clair: #8ba6c6; --emeraude: #e0aa5a; /* accent = ambre du cierge */ --emeraude-clair: #ecc98a; /* accent en texte (plus clair sur fond sombre) */ --terre: #e0805e; --sur-accent: #1a1206; /* texte sombre posé sur l'ambre */ --texte: #e8ecf3; --texte-doux: #97a2b3; --texte-tres-doux: #63718a; --trait: #283243; --nav-fond: rgba(15, 22, 34, 0.86); --ombre: rgba(0, 0, 0, 0.5); --knob: #6c7891; } } :root[data-theme="dark"] { --nuit: #0f1622; --nuit-surface: #17202f; --nuit-surface-2: #1f2a3c; --creme: #f0e9d8; --creme-doux: #d9d2c0; --foret: #6d8bb0; --foret-clair: #8ba6c6; --emeraude: #e0aa5a; --emeraude-clair: #ecc98a; --terre: #e0805e; --sur-accent: #1a1206; --texte: #e8ecf3; --texte-doux: #97a2b3; --texte-tres-doux: #63718a; --trait: #283243; --nav-fond: rgba(15, 22, 34, 0.86); --ombre: rgba(0, 0, 0, 0.5); --knob: #6c7891; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); background: var(--nuit); color: var(--texte); line-height: 1.6; min-height: 100dvh; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.25; letter-spacing: 0.01em; } /* --------------------------------------------------------------- structure */ .app { max-width: var(--large); margin: 0 auto; padding: 0 20px calc(var(--pied) + 32px); min-height: 100dvh; } .entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 2px 20px; } /* ---------------------------------------------------- menu de l'en-tête */ .menu { position: relative; } .menu__bouton { list-style: none; cursor: pointer; display: inline-flex; padding: 8px; border-radius: 10px; border: 1px solid var(--trait); color: var(--texte-doux); } .menu__bouton::-webkit-details-marker { display: none; } .menu[open] .menu__bouton { color: var(--texte); border-color: var(--emeraude); } .menu__bouton svg { width: 20px; height: 20px; } .menu__panneau { position: absolute; top: calc(100% + 8px); right: 0; z-index: 45; min-width: 210px; padding: 6px; border-radius: var(--r-m); background: var(--nuit-surface); border: 1px solid var(--trait); box-shadow: 0 14px 40px var(--ombre); } .menu__item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--r-s); font-size: 14px; color: var(--texte); } .menu__item:hover { background: var(--nuit-surface); } .menu__item.actif { color: var(--emeraude-clair); } .menu__item svg { width: 18px; height: 18px; flex: none; color: var(--texte-doux); } .menu__item.actif svg { color: var(--emeraude-clair); } .menu__separateur { height: 1px; background: var(--trait); margin: 6px 8px; } .entete .marque { display: flex; align-items: center; gap: 10px; color: var(--texte); } .entete .marque .sceau { width: 32px; height: 32px; flex: none; border-radius: 9px; object-fit: cover; } .entete .marque .mot { font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; font-weight: 600; line-height: 1.02; letter-spacing: 0.01em; } .entete .marque .mot i { font-weight: 500; font-style: italic; } .salutation { font-family: var(--serif); font-size: 13px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--emeraude-clair); } .date-jour { color: var(--texte-doux); font-size: 13.5px; margin-top: 3px; } .accueil-tete { text-align: center; margin: 10px 0 6px; } .accroche-accueil { font-family: var(--serif); font-size: 22px; line-height: 1.35; color: var(--texte); margin: 0 0 8px; } /* ------------------------------------------------------------ prière à la une */ .alaune { display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "label label" "vign titre" "vign lire"; gap: 4px 16px; align-items: center; margin-top: 16px; padding: 16px; border-radius: var(--r-l); background: var(--nuit-surface); border: 1px solid var(--trait); } .alaune__label { grid-area: label; font-family: var(--serif); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--emeraude-clair); margin-bottom: 6px; } .alaune__vignette { grid-area: vign; align-self: start; aspect-ratio: 4 / 5; border-radius: var(--r-s); overflow: hidden; background: var(--creme); } .alaune__vignette img { width: 100%; height: 100%; object-fit: cover; } .alaune__titre { grid-area: titre; font-family: var(--serif); font-size: 18px; align-self: end; } .alaune__lire { grid-area: lire; font-size: 13px; color: var(--terre); align-self: start; } /* ------------------------------------------------------------- ma lettre à Dieu */ .lettre { margin-top: 30px; border-radius: var(--r-l); background: linear-gradient(180deg, var(--nuit-surface-2), var(--nuit-surface)); border: 1px solid var(--trait); overflow: hidden; } .lettre__img { width: 100%; height: 190px; object-fit: cover; object-position: center 38%; display: block; opacity: 0.9; } .lettre h2 { font-size: 20px; margin: 22px 22px 12px; } .lettre__corps { padding: 0 22px 4px; color: var(--texte); line-height: 1.75; } .lettre__corps p + p { margin-top: 12px; } .lettre__sign { margin: 12px 22px 24px; font-family: var(--serif); font-style: italic; color: var(--emeraude-clair); } /* ------------------------------------------------------ les valeurs qui motivent */ .valeurs { margin-top: 30px; } .valeurs h2 { font-size: 20px; margin-bottom: 14px; } .valeur { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--trait); } .valeur:first-of-type { border-top: none; } .valeur__num { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--emeraude); color: var(--emeraude-clair); font-family: var(--serif); font-size: 13px; } .valeur__nom { font-family: var(--serif); font-size: 16px; } .valeur__txt { color: var(--texte-doux); font-size: 13.5px; margin-top: 3px; } /* --------------------------------------------------------- carte de prière */ .priere-carte { position: relative; display: block; border-radius: var(--r-l); overflow: hidden; background: var(--creme); border: 1px solid var(--trait); box-shadow: 0 2px 6px var(--ombre), 0 18px 40px -18px var(--ombre); aspect-ratio: 4 / 5; } .priere-carte img { width: 100%; height: 100%; object-fit: cover; } .priere-carte--vedette { margin-top: 16px; } .priere-titre { font-family: var(--serif); font-size: 20px; margin-top: 18px; } .priere-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--texte-doux); font-size: 13px; } .pastille { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--trait); font-size: 12px; letter-spacing: 0.03em; color: var(--texte-doux); } .pastille::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--emeraude); } .pastille--soir::before { background: var(--foret-clair); } /* --------------------------------------------------------------- le verset */ .verset { margin: 30px 0 8px; padding: 22px 20px; border-left: 2px solid var(--emeraude); background: var(--nuit-surface); border-radius: 0 var(--r-m) var(--r-m) 0; } .verset p { font-family: var(--serif); font-size: 16px; font-style: italic; color: var(--texte); } .verset cite { display: block; margin-top: 8px; font-style: normal; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-tres-doux); } /* ----------------------------------------------------------- accès rapides */ .raccourcis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; } .raccourci { padding: 16px 12px; border-radius: var(--r-m); background: var(--nuit-surface); border: 1px solid var(--trait); text-align: center; font-size: 13px; color: var(--texte-doux); transition: border-color 0.15s, color 0.15s; } .raccourci:hover { border-color: var(--emeraude); color: var(--texte); } .raccourci .n { display: block; font-family: var(--serif); font-size: 19px; color: var(--texte); } /* --------------------------------------------------------------- grille */ .section-titre { display: flex; align-items: baseline; justify-content: space-between; margin: 34px 0 16px; } .section-titre h2 { font-size: 21px; } .section-titre a { font-size: 13px; color: var(--emeraude-clair); } .grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .grille .priere-carte { border-radius: var(--r-m); } .grille figcaption { margin-top: 8px; font-size: 12.5px; color: var(--texte-doux); } .grille figcaption b { display: block; font-family: var(--serif); font-weight: 500; color: var(--texte); font-size: 14px; } /* ----------------------------------------------------- détail d'une prière */ .detail-image { border-radius: var(--r-l); overflow: hidden; background: var(--creme); border: 1px solid var(--trait); box-shadow: 0 2px 8px var(--ombre), 0 24px 56px -22px var(--ombre); } .detail-actions { display: flex; gap: 10px; margin-top: 18px; } .btn { flex: 1; padding: 13px 12px; border-radius: var(--r-m); background: var(--nuit-surface); border: 1px solid var(--trait); text-align: center; font-size: 13.5px; color: var(--texte); transition: background 0.15s, border-color 0.15s; } .btn:hover { border-color: var(--emeraude); } .btn--plein { background: var(--emeraude); border-color: var(--emeraude); color: var(--sur-accent); font-weight: 500; } .btn--actif { border-color: var(--emeraude); color: var(--emeraude-clair); } .transcription { margin-top: 22px; border-top: 1px solid var(--trait); padding-top: 18px; } .transcription summary { cursor: pointer; font-family: var(--serif); color: var(--texte-doux); font-size: 14px; letter-spacing: 0.03em; } .transcription p { margin-top: 14px; white-space: pre-line; color: var(--texte); } .pagination { display: flex; justify-content: space-between; margin-top: 30px; font-size: 13px; color: var(--texte-doux); } /* ----------------------------------------------------- barre de navigation */ .nav-bas { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--pied) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--nav-fond); backdrop-filter: blur(14px); border-top: 1px solid var(--trait); display: flex; z-index: 20; } .nav-bas a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10.5px; letter-spacing: 0.02em; color: var(--texte-tres-doux); text-align: center; } .nav-bas a.actif { color: var(--emeraude-clair); } .nav-bas svg { width: 21px; height: 21px; stroke-width: 1.6; } .nav-ico { position: relative; display: inline-flex; } .nav-ico .point { position: absolute; top: -2px; right: -4px; width: 8px; height: 8px; border-radius: 999px; background: var(--terre); border: 1.5px solid var(--nuit); display: none; } .nav-bas a.a-du-neuf .nav-ico .point { display: block; } /* ----------------------------------------------------------------- divers */ .vide { text-align: center; color: var(--texte-doux); padding: 60px 20px; font-style: italic; } .overlay { position: fixed; inset: 0; background: rgba(26, 21, 13, 0.92); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 50; } .overlay.ouvert { display: flex; } .overlay img { max-height: 92dvh; border-radius: 8px; } /* --------------------------------------------------- bandeau d'installation */ .installer { position: fixed; left: 12px; right: 12px; bottom: calc(var(--pied) + 12px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-m); background: var(--nuit-surface-2); border: 1px solid var(--emeraude); box-shadow: 0 12px 36px var(--ombre); font-size: 13px; } .installer span { flex: 1; } .installer #installer-oui { padding: 8px 14px; border-radius: 999px; background: var(--emeraude); color: var(--sur-accent); font-weight: 500; white-space: nowrap; } .installer #installer-non { color: var(--texte-doux); padding: 4px 6px; } /* --------------------------------------------------- intentions & témoignages */ .carte-intention { display: block; margin: 14px 0; padding: 18px 18px 14px; border-radius: var(--r-m); background: var(--nuit-surface); border: 1px solid var(--trait); border-left: 2px solid var(--emeraude); transition: border-color 0.15s, background 0.15s; } .carte-intention:hover { background: var(--nuit-surface-2); } .carte-intention__titre { font-family: var(--serif); font-size: 15px; margin-bottom: 4px; } .carte-intention__texte { color: var(--texte); font-size: 14.5px; } .carte-intention__pied { display: block; margin-top: 10px; font-size: 12px; letter-spacing: 0.03em; color: var(--texte-tres-doux); } .carte-intention__pied b { color: var(--emeraude-clair); } .intention-plein { margin-top: 18px; padding: 22px 20px; border-radius: var(--r-m); background: var(--nuit-surface); border-left: 2px solid var(--emeraude); } .intention-plein p { font-size: 16px; line-height: 1.7; } .intention-plein__reponse { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--trait); font-style: italic; color: var(--emeraude-clair); } .intention-plein__reponse span { font-style: normal; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-tres-doux); } .compteur { margin-top: 18px; color: var(--texte-doux); font-size: 13.5px; } .compteur b { color: var(--emeraude-clair); font-family: var(--serif); font-size: 16px; } /* --------------------------------------------------------------- paramètres */ .param-bloc { margin-top: 22px; padding: 20px; border-radius: var(--r-l); background: var(--nuit-surface); border: 1px solid var(--trait); } .param-bloc h3 { font-family: var(--serif); font-size: 17px; font-weight: 500; } .param-aide { margin-top: 12px; font-size: 12.5px; color: var(--emeraude-clair); } .param-details { margin-top: 8px; border-top: 1px solid var(--trait); padding-top: 6px; } .bascule { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; font-size: 14px; cursor: pointer; } .bascule + .bascule { border-top: 1px solid var(--trait); } .bascule--maitre { margin-top: 16px; font-family: var(--serif); font-size: 15px; } .bascule input { position: absolute; opacity: 0; pointer-events: none; } .bascule__piste { flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--nuit-surface-2); border: 1px solid var(--trait); position: relative; transition: background 0.15s, border-color 0.15s; } .bascule__piste::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 999px; background: var(--knob); transition: transform 0.15s, background 0.15s; } .bascule input:checked + .bascule__piste { background: var(--emeraude); border-color: var(--emeraude); } .bascule input:checked + .bascule__piste::after { transform: translateX(18px); background: var(--sur-accent); } .bascule input:disabled + .bascule__piste { opacity: 0.4; } .onglets { display: flex; gap: 6px; margin: 0 0 18px; padding: 4px; border-radius: 999px; background: var(--nuit-surface); border: 1px solid var(--trait); } .onglet { flex: 1; padding: 9px 10px; border-radius: 999px; font-size: 13.5px; color: var(--texte-doux); } .onglet.actif { background: var(--emeraude); color: var(--sur-accent); font-weight: 500; } .lien-plat { color: var(--emeraude-clair); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; } .sv-code { font-family: var(--serif); font-size: 26px; letter-spacing: 0.12em; color: var(--texte); margin: 6px 0 4px; } .sv-champ { width: 100%; font: inherit; font-size: 18px; letter-spacing: 0.1em; text-align: center; color: var(--texte); background: var(--nuit-surface-2); border: 1px solid var(--trait); border-radius: var(--r-s); padding: 12px; margin-top: 8px; } .sv-champ:focus { outline: none; border-color: var(--emeraude); } /* ---------------------------------------------------------------- messages */ .lien-retour { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 12px; padding: 7px 12px 7px 8px; border-radius: 999px; border: 1px solid var(--trait); background: var(--nuit-surface); font-size: 13px; color: var(--texte-doux); } .lien-retour:hover { color: var(--texte); border-color: var(--emeraude); } .lien-retour svg { width: 16px; height: 16px; } .messages { margin: 6px 0 8px; } .message { padding: 14px 16px; border-radius: var(--r-m); background: color-mix(in srgb, var(--emeraude) 13%, transparent); border: 1px solid color-mix(in srgb, var(--emeraude) 42%, transparent); color: var(--emeraude-clair); font-size: 14px; } /* ------------------------------------------------------------- formulaires */ .formulaire { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; } .champ { display: flex; flex-direction: column; gap: 6px; } .champ-nom { font-size: 13px; color: var(--texte-doux); letter-spacing: 0.02em; } .champ-nom em { color: var(--texte-tres-doux); font-style: normal; } .formulaire input, .formulaire textarea { width: 100%; font: inherit; color: var(--texte); background: var(--nuit-surface); border: 1px solid var(--trait); border-radius: var(--r-s); padding: 12px 13px; resize: vertical; } .formulaire input:focus, .formulaire textarea:focus { outline: none; border-color: var(--emeraude); } .formulaire input::placeholder, .formulaire textarea::placeholder { color: var(--texte-tres-doux); } .champ-erreur { color: #cf5f4c; font-size: 12.5px; }