/* ====================================================================
* style.css — Le Morimont Team · Design System
* Phase T0b · 2026-05-14
*
* Basé sur app.lemorimont.com (portal + modules).
* Chaque module HTML complète ce fichier avec ses styles inline.
* Ne jamais redéfinir dans un module ce qui est ici.
*
* Google Fonts — ajouter dans le de chaque page HTML :
*
*
*
*
* Sections :
* 1. Variables 8. Page title
* 2. Reset 9. Navigation
* 3. Typographie 10. Alerte (top-banner)
* 4. Login 11. Feedback
* 5. Boutons 12. Pull-to-refresh
* 6. Formulaires 13. Utilitaires
* 7. Hero banner 14. Footer
* ==================================================================== */
/* ═══════════════════════════════════════════════════════════════════
* 1. VARIABLES
* ═══════════════════════════════════════════════════════════════════ */
:root {
/* Palette Le Morimont */
--ivory: #f8f4ec;
--cream: #f2ebdd;
--sand: #e7dcc6;
--earth: #8a6a45;
--terracotta: #b4623b;
--charcoal: #2a2620;
--muted: #746b5e;
/* Ombres */
--shadow: 0 1px 2px rgba(42,38,32,.04), 0 4px 16px rgba(42,38,32,.05);
--shadow-lg: 0 4px 8px rgba(42,38,32,.05), 0 16px 40px rgba(42,38,32,.10);
/* Hero photo par défaut (dashboard) — surcharger par module */
--hero-image: url('https://lemorimont.com/wp-content/uploads/2022/01/Morimont-101.jpg');
}
/* ═══════════════════════════════════════════════════════════════════
* 2. RESET
* ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
background: var(--ivory);
color: var(--charcoal);
font-family: 'Inter', system-ui, sans-serif;
font-weight: 400;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
body {
min-height: 100vh;
}
/* ═══════════════════════════════════════════════════════════════════
* 3. TYPOGRAPHIE
* ═══════════════════════════════════════════════════════════════════ */
.serif {
font-family: 'Cormorant Garamond', Georgia, serif;
letter-spacing: -0.01em;
}
em { font-style: italic; }
a {
color: var(--earth);
text-decoration: none;
}
a:hover {
color: var(--terracotta);
}
/* ═══════════════════════════════════════════════════════════════════
* 4. LOGIN
* Login card 20px radius, logo serif, input token centré,
* bouton oeil Montrer/Masquer (team uniquement)
* ═══════════════════════════════════════════════════════════════════ */
/* ── Écran plein viewport ──────────────────────────────────────── */
.login-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 5%;
}
/* ── Card login ────────────────────────────────────────────────── */
.login-card {
background: #fff;
border-radius: 20px;
padding: 3rem 2.5rem;
max-width: 440px;
width: 100%;
box-shadow: var(--shadow-lg);
text-align: center;
}
/* Logo serif : — Le Morimont — (seul endroit avec uppercase) */
.logo {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: .9rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--earth);
margin-bottom: .5rem;
}
.login-card h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 2.4rem;
line-height: 1.1;
margin-bottom: 1rem;
color: var(--charcoal);
}
.login-card p {
color: var(--muted);
margin-bottom: 2rem;
font-size: .95rem;
}
/* ── Formulaire login ──────────────────────────────────────────── */
.login-form {
display: flex;
flex-direction: column;
gap: .75rem;
}
.login-form input {
padding: .9rem 1.1rem;
border: 1px solid var(--sand);
background: var(--ivory);
border-radius: 10px;
font-size: 1rem; /* ← 1rem obligatoire (iOS zoom) */
font-family: inherit;
color: var(--charcoal);
text-align: center;
letter-spacing: .1em;
text-transform: uppercase;
}
.login-form input:focus {
outline: none;
border-color: var(--earth);
background: #fff;
}
/* ── Bouton oeil Montrer / Masquer (team portal uniquement) ──── */
.token-wrapper {
position: relative;
}
.token-wrapper input {
padding-right: 3rem;
}
.token-toggle {
position: absolute;
right: .7rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--muted);
cursor: pointer;
font-size: 1.15rem;
padding: .4rem;
line-height: 1;
transition: color .2s;
}
.token-toggle:hover {
color: var(--earth);
}
/* ── Erreur login ──────────────────────────────────────────────── */
.login-error {
color: var(--terracotta);
font-size: .85rem;
margin-top: .5rem;
}
/* ── Lien « Code d'accès oublié ? » ───────────────────────────── */
.forgot-link {
margin-top: 1.25rem;
background: none;
border: none;
color: var(--earth);
font-family: inherit;
font-size: .85rem;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.forgot-link:hover {
color: var(--terracotta);
}
/* ── Modal « Code oublié » ─────────────────────────────────────── */
.forgot-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(42,38,32,.55);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
padding: 1rem;
}
.forgot-modal {
background: #fff;
border-radius: 12px;
width: 100%;
max-width: 720px;
height: min(640px, calc(100vh - 2rem));
position: relative;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.forgot-close {
position: absolute;
top: .6rem;
right: .6rem;
background: rgba(255,255,255,.95);
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1.4rem;
cursor: pointer;
z-index: 3;
box-shadow: var(--shadow);
color: var(--charcoal);
}
/* ═══════════════════════════════════════════════════════════════════
* 5. BOUTONS
* ═══════════════════════════════════════════════════════════════════ */
/* ── Primary (charcoal → earth hover) ──────────────────────────── */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
background: var(--charcoal);
color: var(--ivory);
border: none;
padding: .9rem 1.5rem;
border-radius: 10px;
font-size: .95rem;
font-weight: 500;
letter-spacing: .02em;
cursor: pointer;
font-family: inherit;
transition: all .2s;
}
.btn-primary:hover {
background: var(--earth);
}
.btn-primary:disabled {
opacity: .5;
cursor: wait;
}
/* ── Ghost (bordure, transparent) ──────────────────────────────── */
.btn-ghost {
display: inline-flex;
align-items: center;
gap: .4rem;
background: transparent;
border: 1px solid var(--sand);
color: var(--charcoal);
padding: .55rem 1.1rem;
border-radius: 8px;
font-size: .85rem;
cursor: pointer;
font-family: inherit;
text-decoration: none;
transition: all .2s;
}
.btn-ghost:hover {
background: #fff;
border-color: var(--earth);
}
/* ═══════════════════════════════════════════════════════════════════
* 6. FORMULAIRES
* font-size: 1rem sur tous les inputs (iOS zoom sinon)
* ═══════════════════════════════════════════════════════════════════ */
.field-label {
font-size: .72rem;
letter-spacing: .08em;
color: var(--muted);
font-weight: 500;
margin-bottom: .35rem;
display: block;
}
.input, .textarea {
width: 100%;
background: #fff;
border: 1px solid var(--sand);
padding: .7rem .95rem;
border-radius: 8px;
font-size: 1rem; /* ← 1rem obligatoire (iOS zoom) */
font-family: inherit;
color: var(--charcoal);
transition: border-color .2s, background .2s;
}
.input:focus, .textarea:focus {
outline: none;
border-color: var(--earth);
background: #fff;
}
.input:disabled, .textarea:disabled {
background: transparent;
border-color: transparent;
color: var(--charcoal);
cursor: default;
opacity: .85;
}
.textarea {
resize: vertical;
min-height: 80px;
line-height: 1.5;
}
/* Sur desktop, légèrement plus petit (pas de zoom iOS) */
@media (min-width: 640px) {
.input, .textarea { font-size: .95rem; }
}
/* ── Card composant ────────────────────────────────────────────── */
.card {
background: var(--cream);
border: 1px solid var(--sand);
border-radius: 8px;
padding: 1rem;
box-shadow: var(--shadow);
transition: border-color .2s, box-shadow .2s;
}
.card:hover {
border-color: var(--earth);
}
/* ═══════════════════════════════════════════════════════════════════
* 7. HERO BANNER
* Photo clamp(220px, 32vw, 320px) + dégradé overlay
* Cohérent avec modules app.lemorimont.com (pattern prestataires)
* ═══════════════════════════════════════════════════════════════════ */
.hero-banner {
position: relative;
height: clamp(220px, 32vw, 320px);
background: var(--hero-image) center/cover no-repeat, var(--cream);
display: flex;
align-items: flex-end;
padding: 1.4rem 5% 1.6rem;
color: #fff;
}
/* Dégradé overlay sombre (lisibilité texte blanc) */
.hero-banner::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(42,38,32, 0) 0%,
rgba(42,38,32, .25) 50%,
rgba(42,38,32, .85) 100%
);
pointer-events: none;
}
/* ── Topbar absolue (back + logo ou hero-user) ─────────────────── */
.hero-topbar {
position: absolute;
top: 1.4rem;
left: 5%;
right: 5%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
.hero-topbar .logo {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: .85rem;
letter-spacing: .3em;
text-transform: uppercase;
color: #fff;
opacity: .92;
margin-bottom: 0;
}
/* ── Inner (titre + sous-date en bas du hero) ──────────────────── */
.hero-banner-inner {
position: relative;
width: 100%;
max-width: 880px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.hero-banner h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: clamp(2rem, 4vw, 2.9rem);
line-height: 1.05;
letter-spacing: -.01em;
color: #fff;
margin-top: .4rem;
}
.hero-banner h1 em {
font-style: italic;
color: #fff;
}
.hero-banner .subdate {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: 1.05rem;
color: #fff;
opacity: .92;
margin-top: .4rem;
}
/* ── Bouton retour (← dans le markup, PAS dans la traduction) ── */
.hero-back {
display: inline-flex;
align-items: center;
gap: .45rem;
font-size: .85rem;
font-family: inherit;
font-weight: 500;
letter-spacing: .02em;
color: #fff;
text-decoration: none;
background: transparent;
border: none;
cursor: pointer;
padding: .4rem 0;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
opacity: .9;
transition: opacity .2s, transform .2s;
}
.hero-back:hover {
opacity: 1;
color: #fff;
transform: translateX(-2px);
}
.hero-back .arr {
font-size: 1.1em;
}
/* ── Pastille équipe (dashboard + hub) ─────────────────────────── */
.hero-user {
font-size: .85rem;
font-weight: 500;
color: #fff;
background: rgba(255,255,255,.15);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: .4rem .9rem;
border-radius: 999px;
white-space: nowrap;
text-shadow: 0 1px 2px rgba(0,0,0,.3);
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════
* 8. PAGE TITLE
* Cormorant 600 sous le hero — ancre visuelle après l'image
* ═══════════════════════════════════════════════════════════════════ */
.page-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: clamp(1.7rem, 3.2vw, 2.2rem);
line-height: 1.1;
letter-spacing: -.01em;
color: var(--charcoal);
margin: .2rem 0 .5rem;
}
.intro-lede {
max-width: 44rem;
font-size: .95rem;
color: var(--muted);
line-height: 1.65;
margin-bottom: 1.4rem;
}
/* ═══════════════════════════════════════════════════════════════════
* 9. NAVIGATION
* App shell (max-width 880px) + sticky bar
* ═══════════════════════════════════════════════════════════════════ */
.app-shell {
max-width: 880px;
margin: 0 auto;
padding: 1.5rem 20px 4rem;
}
/* ── Sticky bar (onglets, filtres) ─────────────────────────────── */
.sticky-bar {
position: sticky;
top: 0;
z-index: 30;
margin: 0 -20px;
padding: 0 20px;
background: rgba(248,244,236, .92);
backdrop-filter: saturate(1.1) blur(8px);
-webkit-backdrop-filter: saturate(1.1) blur(8px);
border-bottom: 1px solid var(--sand);
transition: box-shadow .25s ease;
}
.sticky-bar.with-shadow {
box-shadow: 0 4px 14px rgba(42,38,32,.06);
}
.sticky-inner {
max-width: 880px;
margin: 0 auto;
}
/* ── Sections génériques ───────────────────────────────────────── */
.section {
margin-bottom: 2.5rem;
}
.section-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 1rem;
gap: .5rem;
}
.section-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 1.55rem;
letter-spacing: -.01em;
color: var(--charcoal);
}
.section-body {}
.empty-section {
color: var(--muted);
font-size: .92rem;
font-style: italic;
padding: .5rem 0;
}
/* ═══════════════════════════════════════════════════════════════════
* 10. TOP BANNER (alerte non-prioritaire)
* ═══════════════════════════════════════════════════════════════════ */
.top-banner {
background: #fdf3e7;
border: 1px solid #e9d9b9;
border-radius: 8px;
padding: .9rem 1.1rem;
margin: 0 0 1.4rem;
font-size: .9rem;
line-height: 1.5;
color: #7a5e2e;
}
.top-banner strong {
font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════════════
* 11. FEEDBACK
* Sync badge, loading spinner, toast
* ═══════════════════════════════════════════════════════════════════ */
/* ── Sync badge (bottom 24px right 24px, 3 états) ──────────────── */
.sync-badge {
position: fixed;
bottom: 24px;
right: 24px;
background: #fff;
padding: .45rem .9rem;
border-radius: 999px;
font-size: .82rem;
font-weight: 500;
color: var(--charcoal);
box-shadow: 0 4px 14px rgba(42,38,32,.18), 0 0 0 1px var(--sand);
z-index: 100;
display: inline-flex;
align-items: center;
gap: .45rem;
transition: opacity .3s, transform .3s;
}
.sync-badge.hidden {
opacity: 0;
transform: translateY(8px);
pointer-events: none;
}
/* État : enregistrement en cours */
.sync-badge.sync-saving {
color: var(--earth);
}
.sync-badge.sync-saving::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid var(--earth);
border-top-color: transparent;
border-radius: 50%;
animation: spin .7s linear infinite;
}
/* État : enregistré (vert) */
.sync-badge.sync-saved {
background: #e8f3e5;
color: #3a7a2d;
box-shadow: 0 4px 14px rgba(58,122,45,.2), 0 0 0 1px #b8d9b0;
}
/* État : erreur (rouge) */
.sync-badge.sync-err {
background: #fae7e0;
color: var(--terracotta);
box-shadow: 0 4px 14px rgba(180,98,59,.2), 0 0 0 1px #e9c0ac;
}
/* ── Loading spinner ───────────────────────────────────────────── */
.loading-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: spin .7s linear infinite;
vertical-align: middle;
margin-right: .4rem;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ── Toast « Annuler » (8 s, bottom center, tap ≥ 52 px) ──────── */
.toast {
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
background: var(--charcoal);
color: #fff;
padding: .75rem 1rem;
border-radius: 12px;
font-size: .9rem;
box-shadow: var(--shadow-lg);
z-index: 150;
display: flex;
align-items: center;
gap: 1rem;
max-width: calc(100vw - 2rem);
transition: opacity .3s, transform .3s;
}
.toast.hidden {
opacity: 0;
transform: translateX(-50%) translateY(12px);
pointer-events: none;
}
.toast-label {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Bouton Annuler — surface tap minimum 52 px */
.toast-undo {
background: rgba(255,255,255,.15);
color: #fff;
border: 1px solid rgba(255,255,255,.3);
border-radius: 8px;
padding: .5rem 1rem;
min-height: 52px;
min-width: 52px;
font-size: .85rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .2s;
flex-shrink: 0;
}
.toast-undo:hover {
background: rgba(255,255,255,.25);
}
/* ═══════════════════════════════════════════════════════════════════
* 12. PULL-TO-REFRESH INDICATOR
* ═══════════════════════════════════════════════════════════════════ */
.pull-indicator {
height: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: .82rem;
color: var(--muted);
background: var(--cream);
transition: height .25s ease;
will-change: height;
}
/* ═══════════════════════════════════════════════════════════════════
* 13. UTILITAIRES
* ═══════════════════════════════════════════════════════════════════ */
.hidden {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ═══════════════════════════════════════════════════════════════════
* 14. FOOTER
* Charcoal pleine largeur + signature agence.daiku.cloud
* Sort du app-shell (margin négatif ou placement hors shell)
* ═══════════════════════════════════════════════════════════════════ */
.site-footer {
margin-top: 3rem;
background: var(--charcoal);
color: rgba(255,255,255,.78);
padding: 2.2rem 5% 1.8rem;
text-align: center;
font-size: .86rem;
line-height: 1.6;
}
.site-footer .inner {
max-width: 880px;
margin: 0 auto;
}
.site-footer p {
margin-bottom: .4rem;
}
.site-footer a {
color: #fff;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.3);
}
.site-footer a:hover {
border-color: #fff;
color: #fff;
}
.site-footer .divider {
width: 48px;
height: 1px;
background: rgba(255,255,255,.2);
margin: 1.2rem auto;
}
.site-footer .signature {
font-size: .72rem;
color: rgba(255,255,255,.5);
letter-spacing: .06em;
}