/* ========================================================================== SÉSAME — Design system Palette et composants repris du logiciel SaaS (source de vérité). Deux thèmes : nuit (par défaut) et jour — pilotés par des variables CSS. Règle performance : les animations n'utilisent que transform et opacity. ========================================================================== */ /* ---- Typographies (locales, copiées depuis le Mac — licence Fontshare) ---- */ @font-face { font-family: "Chillax"; src: url("../assets/fonts/Chillax-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; } @font-face { font-family: "Chillax"; src: url("../assets/fonts/Chillax-Semibold.otf") format("opentype"); font-weight: 600; font-display: swap; } @font-face { font-family: "Chillax"; src: url("../assets/fonts/Chillax-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("../assets/fonts/Satoshi-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("../assets/fonts/Satoshi-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("../assets/fonts/Satoshi-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; } /* ---- Thème NUIT (par défaut) : couleurs relevées sur le logiciel Sésame ---- */ :root { --bleu-nuit: #050718; /* fond principal */ --surface: #0d1130; /* cartes */ --surface-2: #131740; /* cartes, variante claire */ --bleu: #1200ff; /* bleu électrique (header du SaaS, boutons) */ --rose: #f0426c; /* rose corail : CTA et accents */ --creme: #fffbf0; /* crème de la charte */ --bleu-clair: #83cdff; /* bleu clair de la charte */ --texte: var(--creme); --texte-2: rgba(255, 251, 240, 0.7); /* texte secondaire */ /* Palette stricte (demande du propriétaire) : rose, bleu électrique ou beige — le bleu clair de l'ancienne charte est banni. */ --accent: var(--rose); /* accents textuels (liens, étiquettes) */ --bordure: rgba(255, 251, 240, 0.16); /* liserés subtils des cartes */ --header-fond: rgba(5, 7, 24, 0.82); /* header une fois scrollé */ --verre: rgba(5, 7, 24, 0.55); /* blocs « glassmorphisme » (notices…) */ --nav-mobile-fond: rgba(5, 7, 24, 0.97); /* menu mobile plein écran */ --contour-btn: rgba(255, 251, 240, 0.35); --contour-btn-survol: rgba(255, 251, 240, 0.7); /* Halos lumineux — signature visuelle du logiciel (mode nuit uniquement) */ --glow-rose: 0 0 24px rgba(240, 66, 108, 0.45); --glow-rose-survol: 0 0 36px rgba(240, 66, 108, 0.65); --glow-bleu: 0 0 24px rgba(18, 0, 255, 0.55); --police-titres: "Chillax", "Arial Rounded MT Bold", sans-serif; --police-texte: "Satoshi", "Helvetica Neue", sans-serif; --rayon-carte: 20px; /* coins arrondis des cartes */ --largeur-max: 1200px; /* largeur de contenu */ } /* ---- Thème JOUR (classe posée sur , choix mémorisé par main.js) ---- */ html.theme-jour { --bleu-nuit: #fffbf0; /* le fond devient crème */ --surface: #ffffff; --surface-2: #f6f1e4; --texte: #0d1130; /* texte bleu nuit */ --texte-2: rgba(13, 17, 48, 0.68); --accent: var(--bleu); /* accents en bleu électrique */ --bordure: rgba(18, 0, 255, 0.14); --header-fond: rgba(255, 251, 240, 0.85); /* Verre très léger en jour : l'effet de flou doit se voir (demande) */ --verre: rgba(255, 251, 240, 0.42); --nav-mobile-fond: rgba(255, 251, 240, 0.97); --contour-btn: rgba(13, 17, 48, 0.35); --contour-btn-survol: rgba(13, 17, 48, 0.7); /* Pas de néon en mode jour : ombres douces et neutres à la place */ --glow-rose: 0 6px 16px rgba(13, 17, 48, 0.14); --glow-rose-survol: 0 10px 22px rgba(13, 17, 48, 0.18); --glow-bleu: 0 4px 12px rgba(13, 17, 48, 0.14); } /* ---- Base ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bleu-nuit); color: var(--texte); font-family: var(--police-texte); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Bascule douce entre les thèmes jour/nuit */ transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4 { font-family: var(--police-titres); font-weight: 600; line-height: 1.15; } a { color: var(--accent); text-decoration: none; } img { max-width: 100%; height: auto; /* garde les proportions quand l'image est réduite */ display: block; } /* Conteneur centré commun à toutes les sections */ .conteneur { max-width: var(--largeur-max); margin: 0 auto; padding: 0 24px; } /* ---- Boutons « pilule » ---- */ .btn { display: inline-block; font-family: var(--police-titres); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 15px 32px; border-radius: 999px; border: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } /* Rose corail + halo : action principale */ .btn-rose { background: var(--rose); color: var(--creme); box-shadow: var(--glow-rose); } .btn-rose:hover { box-shadow: var(--glow-rose-survol); } /* Crème : action sur fond sombre (comme « Partager mon carnet » dans le SaaS). En mode jour, il s'inverse en bleu électrique pour rester lisible. */ .btn-creme { background: var(--creme); color: var(--bleu); } html.theme-jour .btn-creme { background: var(--bleu); color: var(--creme); } /* Contour : action secondaire discrète */ .btn-contour { background: transparent; color: var(--texte); box-shadow: inset 0 0 0 1.5px var(--contour-btn); } .btn-contour:hover { box-shadow: inset 0 0 0 1.5px var(--contour-btn-survol); } /* ---- Cartes ---- */ .carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); padding: 28px; } /* ---- Étiquette (petit badge au-dessus des titres) ---- */ .etiquette { display: inline-block; font-family: var(--police-titres); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--bordure); border-radius: 999px; padding: 7px 16px; } /* ========================================================================== HEADER — commun à toutes les pages ========================================================================== */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background-color 0.3s ease, box-shadow 0.3s ease; } /* Une fois qu'on a scrollé : fond translucide + flou (classe posée par main.js) */ .header--plein { background: var(--header-fond); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--bordure); } .header-interieur { max-width: var(--largeur-max); margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 28px; } /* Logo SVG officiel — dessiné avec la couleur du texte via un masque CSS, il passe donc tout seul du crème (nuit) au bleu nuit (jour). */ .logo { display: inline-flex; color: var(--texte); } .logo-svg { width: 150px; height: 32px; background-color: currentColor; -webkit-mask: url("../assets/img/logo-sesame.svg") no-repeat left center / contain; mask: url("../assets/img/logo-sesame.svg") no-repeat left center / contain; } .nav-liens { display: flex; align-items: center; gap: 32px; list-style: none; /* Centré entre le logo et la bascule jour/nuit (demande du propriétaire) */ margin-left: auto; margin-right: auto; } .nav-liens a { color: var(--texte-2); font-weight: 500; font-size: 16px; transition: color 0.2s ease; } .nav-liens a:hover, .nav-liens a[aria-current="page"] { color: var(--texte); } /* Le CTA dupliqué dans le menu n'apparaît que sur mobile */ .nav-cta { display: none; } .header .btn { padding: 12px 24px; font-size: 13px; } /* Bouton jour/nuit (icône soleil ou lune selon le thème) */ .bouton-theme { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: transparent; border: 1px solid var(--contour-btn); color: var(--texte); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease, border-color 0.2s ease; } .bouton-theme:hover { transform: translateY(-2px); border-color: var(--contour-btn-survol); } /* En mode nuit on montre le soleil (= passer en jour), et inversement */ .icone-lune { display: none; } html.theme-jour .icone-soleil { display: none; } html.theme-jour .icone-lune { display: block; } /* Bouton hamburger (mobile uniquement) */ .burger { display: none; background: none; border: none; cursor: pointer; width: 40px; height: 40px; position: relative; flex-shrink: 0; } .burger span { position: absolute; left: 8px; right: 8px; height: 2px; background: var(--texte); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .burger span:nth-child(1) { top: 13px; } .burger span:nth-child(2) { top: 19px; } .burger span:nth-child(3) { top: 25px; } /* ========================================================================== FOOTER — commun à toutes les pages ========================================================================== */ .footer { border-top: 1px solid var(--bordure); padding: 64px 0 32px; margin-top: 120px; } .footer-colonnes { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer h4 { font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .footer ul { list-style: none; } .footer li { margin-bottom: 10px; color: var(--texte-2); } .footer a { color: var(--texte-2); transition: color 0.2s ease; } .footer a:hover { color: var(--texte); } .footer-slogan { color: var(--texte-2); max-width: 320px; margin-top: 12px; } .footer-bas { border-top: 1px solid var(--bordure); padding-top: 24px; display: flex; justify-content: space-between; color: var(--texte-2); font-size: 14px; } /* ========================================================================== Accessibilité : réduire les mouvements si l'utilisateur le demande ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== Mobile ========================================================================== */ @media (max-width: 860px) { .nav-liens { /* Menu plein écran, replié par défaut (déplié via .nav-ouverte posée par main.js) */ position: fixed; inset: 0; background: var(--nav-mobile-fond); flex-direction: column; align-items: center; justify-content: center; gap: 36px; font-size: 24px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; margin: 0; } body.nav-ouverte .nav-liens { opacity: 1; pointer-events: auto; } /* ⚠️ Le flou du header (backdrop-filter) crée un « containing block » : le menu fixé se retrouverait piégé dans la boîte du header (fond invisible, liens qui flottent sur la page). On retire donc le flou tant que le menu est ouvert — l'overlay opaque prend le relais. */ body.nav-ouverte .header { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; box-shadow: none; } .burger { display: block; z-index: 101; margin-left: auto; } /* Le burger devient une croix quand le menu est ouvert */ body.nav-ouverte .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.nav-ouverte .burger span:nth-child(2) { opacity: 0; } body.nav-ouverte .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Sur mobile : le CTA du header disparaît, il vit dans le menu plein écran */ .header > .header-interieur > .btn { display: none; } .nav-cta { display: block; } .bouton-theme { margin-left: auto; } .burger { margin-left: 0; } .footer-colonnes { grid-template-columns: 1fr; gap: 36px; } .footer-bas { flex-direction: column; gap: 8px; } }