/* ============================================================================ LA LYSARDIÈRE — style.css Feuille de style centralisée, issue de l'audit visuel (audit-visuel.html). Voir ce fichier pour la correspondance avec les noms utilisés dans l'audit. MIGRATION : à ajouter en PLUS du CSS existant de chaque page, jamais en remplacement direct — vérifier qu'aucune page ne change visuellement avant de retirer le CSS dupliqué de cette page-là. Une page à la fois. ============================================================================ */ :root { /* Couleurs de base */ --forest: #18534F; --forest-mid: #226D68; --forest-light: #2A847E; --forest-rgb: 24,83,79; /* même couleur que --forest, en triplet R,G,B — pour les rgba(var(--forest-rgb),X) utilisés comme teintes d'ombre/fond semi-transparent un peu partout */ --mint: #ECF8F6; --mint-deep: #D4EFEB; --mint-mid: #A8D8D0; --gold: #FEEAA1; --gold-deep: #F5D96B; --gold-pale: #FFF7EC; --copper: #C77B5A; --copper-deep: #B87A45; --gold-rgb: 254,234,161; --copper-rgb: 199,123,90; --cream-light: #FFFDF6; /* plus clair que --gold-pale — pour les boutons/éléments posés sur une carte crème, afin qu'ils restent bien distincts du fond */ --bg: #F7F3EC; --card: #FFFFFF; --card2: #F8F6F2; --text: #1A2A28; --text-mid: #4A5E5C; --text-light: #7A8E8C; --border: #D8E0DE; --border-light: #E8EEEC; --red: #C0392B; --red-bg: #FDECEA; --red-mid: #e8877f; --green: #1B7A4A; --green-bg: #E4F5EC; --blue: #0077A8; --blue-bg: #E8F4FB; --purple: #6B3FA0; --purple-bg: #F3E8FB; --orange: #D97706; --orange-bg: #FEF3C7; /* Couleurs par gîte (utilisées dans suivi.html) */ --hu: #2E7D32; --hu-l: #E8F5E9; --hu-m: #A5D6A7; --si: #AD1457; --si-l: #FCE4EC; --si-m: #F48FB1; --en: #E65100; --en-l: #FFF3E0; --en-m: #FFCC80; --fl-c: #6A1B9A; --fl-l: #F3E5F5; --fl-m: #CE93D8; --ar: #1565C0; --ar-l: #E3F2FD; --ar-m: #90CAF9; /* Rayons & ombres */ --radius: 16px; --radius-sm: 10px; --radius-xs: 7px; --shadow-sm: 0 1px 3px rgba(24,83,79,0.06); --shadow-md: 0 4px 16px rgba(24,83,79,0.10); --shadow-lg: 0 8px 32px rgba(24,83,79,0.14); /* Propres à index.html (page de connexion, fond sombre) */ --login-ink: #1a3432; --login-cream: #F0EDE6; --login-mid: #4a6e6a; --login-light: #8aa8a4; --login-shadow: 0 24px 64px rgba(0,0,0,0.4); /* Couleurs des 6 cartes d'application sur index.html — même logique que les thèmes nuit/automne ci-dessous : chaque carte a SA PROPRE teinte (dégradé clair→foncé d'une seule couleur), et les 6 teintes forment ensemble une petite palette "forêt" cohérente (pin, miel, mousse, terre cuite, rouille, pierre) plutôt que de partager toutes la même base verte/cuivre (ce qui les faisait fondre en un même dégradé verdâtre-brun, indistinct d'une carte à l'autre). */ --app-c1a: #2A847E; --app-c1b: #18534F; /* pin (Transport) */ --app-c2a: #C9A227; --app-c2b: #8A6D1A; /* miel (Documents) */ --app-c3a: #7D8F3A; --app-c3b: #4A5D23; /* mousse (Suivi & Gîtes) */ --app-c4a: #A8624F; --app-c4b: #7A4335; /* terre cuite (Ressources Humaines) */ --app-c5a: #C4713F; --app-c5b: #96502A; /* rouille (Messagerie) */ --app-c6a: #4A5D5A; --app-c6b: #2E3B39; /* pierre (Comptabilité) */ } /* ============================================================================ THÈME ALTERNATIF "nuit" — palette fournie par l'utilisateur (6 couleurs), quelques nuances dérivées ajoutées pour couvrir tous les rôles (fonds clairs, texte, bordures). Les couleurs fonctionnelles (rouge erreur, vert succès, et les couleurs par gîte) restent inchangées volontairement, car elles portent un sens précis indépendant de l'identité visuelle du site. Activé en posant data-theme="nuit" sur (voir le sélecteur de thème sur index.html et le petit script de lecture ajouté sur chaque page). ============================================================================ */ :root[data-theme="nuit"] { --forest: #2E365B; --forest-mid: #3F5B8E; --forest-light: #6E5E83; --forest-rgb: 46,54,91; --mint: #E4E6F0; --mint-deep: #D2D5E6; --mint-mid: #ADB3D0; --gold: #D37980; --gold-deep: #C15D65; --gold-pale: #FBEEEF; --copper: #97A5C6; --copper-deep: #B091AA; --gold-rgb: 211,121,128; --copper-rgb: 151,165,198; --cream-light: #F5F3F8; --bg: #EEEDF3; --card: #FFFFFF; --card2: #F3F1F7; --text: #22283F; --text-mid: #5A6178; --text-light: #8890A3; --border: #D3D2E0; --border-light: #E4E3ED; --shadow-sm: 0 1px 3px rgba(46,54,91,0.10); --shadow-md: 0 4px 16px rgba(46,54,91,0.16); --shadow-lg: 0 8px 32px rgba(46,54,91,0.22); /* Propres à index.html (page de connexion, fond sombre) */ --login-ink: #1a2038; --login-cream: #EEF0F5; --login-mid: #6b7492; --login-light: #97A0BD; --login-shadow: 0 24px 64px rgba(0,0,0,0.4); /* Couleurs des 6 cartes d'application sur index.html, assorties à la palette */ --app-c1a: #3F5B8E; --app-c1b: #2E365B; --app-c2a: #D37980; --app-c2b: #B85D68; --app-c3a: #6E5E83; --app-c3b: #574764; --app-c4a: #97A5C6; --app-c4b: #3F5B8E; --app-c5a: #B091AA; --app-c5b: #D37980; --app-c6a: #4A5568; --app-c6b: #5A6178; } /* ============================================================================ THÈME ALTERNATIF "automne" — palette fournie par l'utilisateur (5 couleurs : Ember Brick, Teal Canopy, Golden Honey, Mahogany Roast, Slate Storm). Contrairement à un premier essai, les tons chauds (brique, acajou) sont ici les couleurs dominantes (--forest/--forest-mid, utilisées partout : en-têtes, textes, bordures), et le bleu/teal ne sert plus qu'en accent ponctuel (--copper) — pour éviter de retomber sur un rendu proche du thème forêt. Nuances moins éclaircies que la normale, pour un rendu plus sombre et intimiste ("fin de soirée") plutôt que pastel clair. Note : deux codes hexadécimaux de l'image source étaient illisibles ("#B243C" et "#C78AIE") — interprétés au mieux en #B2433C et #C78A1E. ============================================================================ */ :root[data-theme="automne"] { --forest: #4C1A17; --forest-mid: #7A2E28; --forest-light: #B2433C; --forest-rgb: 76,26,23; --mint: #E8D4C8; --mint-deep: #D9BEA8; --mint-mid: #C4A183; --gold: #C78A1E; --gold-deep: #A66F14; --gold-pale: #F7E9C9; --copper: #2F6F6A; --copper-deep: #1C2F3A; --gold-rgb: 199,138,30; --copper-rgb: 47,111,106; --cream-light: #F5E9D9; --bg: #EDE0CC; --card: #FBF6EE; --card2: #F0E4D0; --text: #2A1512; --text-mid: #6B5A4E; --text-light: #9C8C7E; --border: #D4BFA0; --border-light: #E5D5BC; --shadow-sm: 0 1px 3px rgba(76,26,23,0.10); --shadow-md: 0 4px 16px rgba(76,26,23,0.16); --shadow-lg: 0 8px 32px rgba(76,26,23,0.22); /* Propres à index.html (page de connexion, fond sombre) */ --login-ink: #2A0F0D; --login-cream: #F5E9D9; --login-mid: #8A6B5E; --login-light: #B89985; --login-shadow: 0 24px 64px rgba(0,0,0,0.4); /* Couleurs des 6 cartes d'application sur index.html, assorties à la palette */ --app-c1a: #7A2E28; --app-c1b: #4C1A17; --app-c2a: #C78A1E; --app-c2b: #A66F14; --app-c3a: #2F6F6A; --app-c3b: #1C2F3A; --app-c4a: #B2433C; --app-c4b: #7A2E28; --app-c5a: #C78A1E; --app-c5b: #B2433C; --app-c6a: #4A4038; --app-c6b: #6B5A4E; } :root[data-theme="automne"] body { background: radial-gradient(circle at 6% 8%, rgba(178,67,60,0.28) 0%, transparent 24%), radial-gradient(circle at 95% 4%, rgba(199,138,30,0.42) 0%, transparent 30%), radial-gradient(circle at 10% 92%, rgba(76,26,23,0.26) 0%, transparent 28%), radial-gradient(circle at 92% 88%, rgba(47,111,106,0.16) 0%, transparent 32%), radial-gradient(circle at 55% 40%, rgba(255,255,255,0.26) 0%, transparent 55%), linear-gradient(135deg,#F5E4BE 0%,#EACB88 35%,#DEB158 70%,#C99A3A 100%); } :root[data-theme="nuit"] body { background: radial-gradient(circle at 6% 8%, rgba(151,165,198,0.22) 0%, transparent 26%), radial-gradient(circle at 95% 4%, rgba(211,121,128,0.30) 0%, transparent 28%), radial-gradient(circle at 10% 92%, rgba(110,94,131,0.32) 0%, transparent 30%), radial-gradient(circle at 92% 88%, rgba(176,145,170,0.24) 0%, transparent 32%), radial-gradient(circle at 55% 40%, rgba(255,255,255,0.06) 0%, transparent 55%), linear-gradient(135deg,#1A2038 0%,#242C48 35%,#2E365B 70%,#3A3D5E 100%); } /* .section-title utilise un dégradé --forest-light → --gold basé sur des variables : s'adapte donc déjà automatiquement à chaque thème. Seule sa couleur de TEXTE a besoin d'une surcharge pour le thème automne : le --forest (acajou foncé) par défaut manque de lisibilité sur ce dégradé brique/doré chaud. */ :root[data-theme="automne"] .section-title { color: #FCEACB; } /* ── Fond de page (dégradé commun aux 5 pages) ── */ body { font-family: 'DM Sans', sans-serif; color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; background: radial-gradient(circle at 6% 8%, rgba(184,148,58,0.20) 0%, transparent 22%), radial-gradient(circle at 95% 4%, rgba(211,84,0,0.13) 0%, transparent 24%), radial-gradient(circle at 10% 92%, rgba(192,57,43,0.11) 0%, transparent 24%), radial-gradient(circle at 92% 88%, rgba(184,148,58,0.18) 0%, transparent 28%), radial-gradient(circle at 55% 40%, rgba(255,255,255,0.55) 0%, transparent 55%), linear-gradient(135deg,#FBF5E6 0%,#F5E9D8 40%,#EFDAC3 75%,#EAD2B8 100%); } /* ============================================================================ TITRES & TEXTES Audit : section 2 ============================================================================ */ .eyebrow { font-family:'Fraunces',serif; font-style:italic; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-deep); margin:0; } .h1 { font-family:'Fraunces',serif; font-size:30px; font-weight:700; color:var(--forest); margin:0; } .h2 { font-family:'Fraunces',serif; font-size:20px; font-weight:700; color:var(--text); margin:0; } .h3 { font-family:'Fraunces',serif; font-size:15px; font-weight:700; color:var(--forest); margin:0; } .label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-light); } .text-body { font-size:13px; color:var(--text); line-height:1.5; margin:0; } .text-muted { font-size:12px; color:var(--text-light); margin:0; } /* ============================================================================ STRUCTURE DU HEADER — identique sur les 5 pages désormais (structure HTML à 2 niveaux harmonisée : .header/.hdr = barre extérieure, .header-top = grille intérieure). ============================================================================ */ .header, .hdr { background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mid) 100%); padding-top: env(safe-area-inset-top); position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 24px rgba(var(--forest-rgb),0.28); } .header-top { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; padding: 0 20px; height: 56px; gap: 0; } .header-brand, .hdr-brand { justify-self: start; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } /* ============================================================================ LOGO & TITRE DE HEADER — identiques sur les 5 pages (référence : messagerie.html). Cible directement les différents noms de classe déjà utilisés par chaque page (jamais renommés en HTML, pour éviter toute casse) plutôt que d'en imposer un nouveau. ============================================================================ */ .header-brand img, .hdr-brand img { width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); flex-shrink:0; } .header-brand-text h1, .hd-title, .hdr-brand-text .title { font-family:'Fraunces',serif; font-size:16px; font-weight:600; color:var(--gold); line-height:1; } .header-brand-text span, .hd-sub, .hdr-brand-text .sub { display:block; font-size:8px; color:rgba(255,255,255,0.4); letter-spacing:2px; text-transform:uppercase; margin-top:2px; } /* ============================================================================ NAVIGATION DU HEADER & MENU HAMBURGER — identiques sur les 6 pages. Sous 1000px, seuls le logo et le bouton hamburger restent visibles ; les 6 liens passent dans un menu déroulant. ============================================================================ */ .hdr-quicknav{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-self:center} .hdr-nav-btn{padding:6px 14px;border-radius:18px;font-size:11.5px;font-weight:700;text-decoration:none;color:rgba(255,255,255,0.82);background:rgba(255,255,255,0.12);transition:all .2s;white-space:nowrap;border:none;cursor:pointer;font-family:inherit} .hdr-nav-btn:hover{background:rgba(255,255,255,0.22);color:#fff} .hdr-nav-btn.active{background:#fff;color:var(--forest);box-shadow:0 2px 8px rgba(0,0,0,0.18)} .hdr-hamburger { display:none; background:rgba(255,255,255,0.15); border:none; color:white; width:40px; height:40px; border-radius:10px; font-size:19px; cursor:pointer; align-items:center; justify-content:center; flex-shrink:0; } .hdr-mobile-menu { display:none; flex-direction:column; gap:6px; padding:10px 16px 14px; background:linear-gradient(135deg,var(--forest) 0%,var(--forest-mid) 100%); } .hdr-mobile-menu.open { display:flex; position:fixed; left:0; right:0; z-index:500; box-shadow:0 8px 20px rgba(0,0,0,0.25); max-height:calc(100vh - 70px); overflow-y:auto; } .hdr-mobile-menu .hdr-nav-btn { width:100%; text-align:center; padding:10px 14px; } @media (max-width: 1000px) { .header-top { grid-template-columns: auto 1fr auto; height:auto; padding: 12px 16px; } .header-brand, .hdr-brand { justify-self: start; grid-column: 1; } .hdr-quicknav { display: none; } .hdr-hamburger { display: flex; justify-self: end; grid-column: 3; } } /* ============================================================================ BOUTONS Audit : sections 3, 9, 12 (btn-a→f, btn-header-*, btn-state) Les états hover/pressé/désactivé sont de vraies pseudo-classes ici, pas des classes séparées à gérer manuellement — seul .btn-loading reste une classe, faute d'équivalent natif. ============================================================================ */ .btn-secondary { padding:8px 16px; border-radius:8px; border:1px solid var(--border); cursor:pointer; font-size:12px; font-weight:600; font-family:inherit; background:var(--card); color:var(--text); transition:all .15s; } .btn-secondary:hover { background:var(--mint); border-color:var(--forest-mid); } .btn-primary { padding:9px 18px; border-radius:10px; border:none; cursor:pointer; font-size:12.5px; font-weight:700; font-family:inherit; background:linear-gradient(135deg,var(--forest-light),var(--forest)); color:#fff; text-decoration:none; box-shadow:0 2px 8px rgba(var(--forest-rgb),0.3); transition:all .15s; } .btn-primary:hover { box-shadow:0 0 0 3px rgba(254,234,161,0.5), 0 4px 12px rgba(var(--forest-rgb),0.35); transform:translateY(-1px); } .btn-primary:active { background:var(--forest); box-shadow:inset 0 2px 6px rgba(0,0,0,0.25); transform:translateY(0); } .btn-primary:disabled { background:var(--border-light); color:var(--text-light); box-shadow:none; cursor:not-allowed; transform:none; } .btn-primary.btn-loading { display:inline-flex; align-items:center; gap:8px; opacity:0.85; cursor:wait; } .btn-accent { padding:8px 16px; border-radius:8px; border:1px solid var(--gold-deep); cursor:pointer; font-size:12px; font-weight:700; font-family:inherit; background:var(--gold); color:var(--forest); text-decoration:none; transition:all .15s; } .btn-accent:hover { background:var(--gold-deep); } .btn-danger { padding:8px 16px; border-radius:8px; border:1px solid #f5c6c2; cursor:pointer; font-size:12px; font-weight:600; font-family:inherit; background:var(--red-bg); color:var(--red); transition:all .15s; } .btn-danger:hover { background:#fbdcd8; } .btn-ghost { padding:8px 16px; border-radius:8px; border:1px solid transparent; cursor:pointer; font-size:12px; font-weight:600; font-family:inherit; background:transparent; color:var(--text-mid); transition:all .15s; } .btn-ghost:hover { background:var(--border-light); } .btn-mint { padding:5px 12px; border-radius:6px; border:1px solid var(--mint-deep); cursor:pointer; font-size:11px; font-weight:600; font-family:inherit; background:var(--mint); color:var(--forest); transition:all .15s; } .btn-mint:hover { background:var(--mint-deep); } .btn-mint-lg { padding:8px 16px; border-radius:8px; border:1px solid transparent; cursor:pointer; font-size:12px; font-weight:700; font-family:inherit; background:var(--mint); color:var(--forest); text-decoration:none; transition:all .15s; } .btn-mint-lg:hover { border-color:var(--forest); background:var(--mint-deep); } .btn-icon { width:28px; height:28px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--forest-light),var(--forest)); color:#fff; font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px rgba(var(--forest-rgb),0.35); transition:transform .15s; } .btn-icon:hover { transform:scale(1.08); } .btn-fab { width:52px; height:52px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--forest-light),var(--forest)); color:#fff; font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(var(--forest-rgb),0.4); transition:transform .18s, box-shadow .18s; } .btn-fab:hover { transform:translateY(-3px) scale(1.06); box-shadow:0 10px 24px rgba(var(--forest-rgb),0.5); } .spinner { width:13px; height:13px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } /* Variantes pour usage sur fond sombre (header vert) */ .btn-header-ghost { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.85); border:none; padding:7px 16px; border-radius:8px; font-size:12px; font-weight:600; font-family:inherit; cursor:pointer; transition:all .15s; } .btn-header-ghost:hover { background:rgba(255,255,255,0.2); color:#fff; } .btn-header-blue { background:rgba(14,165,233,0.18); color:#7dd3fc; border:1px solid rgba(125,211,252,0.25); padding:7px 16px; border-radius:8px; font-size:12px; font-weight:600; font-family:inherit; cursor:pointer; transition:all .15s; } .btn-header-blue:hover { background:rgba(14,165,233,0.3); color:#fff; } .btn-header-add { background:rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.22); padding:7px 16px; border-radius:8px; font-size:12px; font-weight:600; font-family:inherit; cursor:pointer; transition:all .15s; } .btn-header-add:hover { background:rgba(255,255,255,0.24); } .btn-header-gold { background:var(--gold); color:var(--forest); border:none; padding:7px 16px; border-radius:8px; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; transition:all .15s; } .btn-header-gold:hover { background:var(--gold-deep); } /* ============================================================================ CHAMPS DE FORMULAIRE Audit : section 4 ============================================================================ */ .input { width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:8px; padding:9px 12px; font-size:13px; color:var(--text); background:var(--card); outline:none; font-family:inherit; transition:border-color .2s, box-shadow .2s; } .input:focus { border-color:var(--forest-mid); box-shadow:0 0 0 3px rgba(34,109,104,0.12); } .textarea { width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:8px; padding:9px 12px; font-size:13px; font-family:inherit; resize:vertical; min-height:70px; outline:none; } .textarea:focus { border-color:var(--forest-mid); box-shadow:0 0 0 3px rgba(34,109,104,0.12); } .select-native { width:100%; box-sizing:border-box; border:1.5px solid var(--forest-mid); border-radius:10px; padding:9px 14px; font-size:12.5px; font-weight:600; color:var(--text); background:var(--card); outline:none; font-family:inherit; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 0 0 3px rgba(34,109,104,0.12); transition:border-color .15s, box-shadow .15s; } .select-native:hover { border-color:var(--forest); box-shadow:0 2px 6px rgba(var(--forest-rgb),0.08), 0 0 0 3px rgba(var(--forest-rgb),0.16); } /* Menu déroulant personnalisé — à préférer au natif s'élargit pour tenir sa plus longue