/* ============================================================================= Pack de style « Site anniversaire » — implémentation Memphis Pop : six couleurs, deux polices, contours noirs épais, ombres dures, angles vifs, une seule colonne. ========================================================================== */ :root { --creme: #f4efe6; --encre: #0e0e0e; --rouge: #ff4b3e; --jaune: #ffc93c; --bleu: #2d7dd2; --turquoise: #17bebb; --blanc: #ffffff; --gris: #cfc8b8; --gris-texte: #8b8474; /* Rôles réassignés par le thème nuit. */ --fond: var(--creme); --encre-texte: var(--encre); --trait: var(--encre); --surface: var(--blanc); --surface-douce: var(--creme); --ombre: 4px 4px 0 var(--trait); --ombre-forte: 5px 5px 0 var(--trait); --ombre-carte: 6px 6px 0 var(--trait); --marge: 20px; --police-titre: 'Archivo Black', 'Arial Black', sans-serif; --police-texte: 'Poppins', system-ui, sans-serif; --police-mono: 'Space Mono', ui-monospace, monospace; } /* Inversion nuit : mêmes composants, contours crème au lieu de noirs. */ .theme-nuit { --fond: var(--encre); --encre-texte: var(--creme); --trait: var(--creme); --surface: var(--encre); --surface-douce: #1a1a1a; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--fond); color: var(--encre-texte); font-family: var(--police-texte); font-weight: 500; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-wrap: pretty; overflow-x: hidden; } h1, h2, h3 { font-family: var(--police-titre); font-weight: 400; letter-spacing: -0.01em; margin: 0; } a { color: var(--rouge); } .theme-nuit a { color: var(--jaune); } /* Le contour noir sert de focus visible — renforcé en bleu au clavier (règle d'accessibilité du pack). */ :focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; } /* ------------------------------------------------------------- mise en page */ .wrap { max-width: 560px; margin: 0 auto; padding: 24px var(--marge) 32px; position: relative; z-index: 1; } /* Colle la barre d'action en bas quand le contenu est plus court que l'écran. Surtout PAS d'`overflow:hidden` ici : sur , l'overflow se propage au viewport au lieu de rogner l'élément — le décor déborderait quand même et, pire, le défilement tactile serait bloqué sur les écrans longs. Le rognage du décor se fait dans .decor, qui n'est pas . */ .screen { min-height: 100dvh; display: flex; flex-direction: column; position: relative; } .screen > .wrap { flex: 1; width: 100%; display: flex; flex-direction: column; } .spacer { flex: 1; min-height: 24px; } .stack { display: flex; flex-direction: column; gap: 14px; } .row { display: flex; gap: 12px; } .row > * { flex: 1; } /* -------------------------------------------------------------- typographie */ .display { font-family: var(--police-titre); font-size: 44px; line-height: 0.98; } .titre { font-family: var(--police-titre); font-size: 28px; line-height: 1.05; } .sous-titre { font-weight: 700; font-size: 20px; line-height: 1.3; } .corps { font-size: 16px; line-height: 1.6; font-weight: 500; } .aide { font-size: 13px; font-weight: 600; color: var(--gris-texte); line-height: 1.45; } /* Sur fond encre, #8b8474 tombe sous le seuil de 4,5:1 exigé par le pack : on passe au gris clair, qui lui est largement au-dessus. */ .theme-nuit .aide, .theme-nuit .champ__aide { color: var(--gris); } .etiquette { font-family: var(--police-titre); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; } .mono { font-family: var(--police-mono); } /* Le gros chiffre de la couverture. */ .age { font-family: var(--police-titre); font-size: clamp(96px, 34vw, 132px); line-height: 0.82; color: var(--jaune); -webkit-text-stroke: 5px var(--encre); margin: 6px 0 0; } /* Badge noir incliné « TU ES INVITÉ·E ». */ .tag { display: inline-block; align-self: flex-start; background: var(--encre-texte); color: var(--fond); font-family: var(--police-titre); font-size: 11px; letter-spacing: 0.16em; padding: 7px 13px; transform: rotate(-2deg); } .chip { display: inline-block; align-self: flex-start; background: var(--jaune); color: var(--encre); border: 3px solid var(--encre); box-shadow: 4px 4px 0 var(--encre); font-weight: 700; font-size: 16px; padding: 10px 16px; transform: rotate(-1.5deg); } /* Pastilles de statut. Seuls éléments arrondis du système, avec les cercles. */ .pill { display: inline-block; border-radius: 22px; font-weight: 700; font-size: 13px; padding: 6px 13px; border: 2px solid var(--trait); background: var(--surface); color: var(--encre-texte); white-space: nowrap; } .pill--ok { background: var(--turquoise); border-color: var(--encre); color: var(--encre); } .pill--info { background: var(--bleu); border-color: var(--encre); color: var(--creme); } .pill--non { background: var(--rouge); border-color: var(--encre); color: var(--creme); } .pill--attente { background: transparent; border-style: dashed; border-color: var(--gris-texte); color: var(--gris-texte); } /* ------------------------------------------------------------------ boutons */ .btn { display: flex; align-items: center; justify-content: center; min-height: 52px; width: 100%; padding: 15px 18px; border: 3px solid var(--trait); background: var(--surface); color: var(--encre-texte); font-family: var(--police-titre); font-size: 17px; letter-spacing: 0.03em; text-align: center; text-decoration: none; cursor: pointer; box-shadow: var(--ombre-forte); transition: transform 0.06s linear, box-shadow 0.06s linear; -webkit-tap-highlight-color: transparent; } /* Enfoncement au tap : l'ombre disparaît, le bouton descend d'autant. */ .btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--trait); } .btn--principal { background: var(--rouge); color: var(--creme); border-color: var(--encre); } .theme-nuit .btn--principal { border-color: var(--creme); box-shadow: 5px 5px 0 var(--creme); } .btn--secondaire { background: var(--jaune); color: var(--encre); border-color: var(--encre); } .theme-nuit .btn--secondaire { border-color: var(--creme); box-shadow: 5px 5px 0 var(--creme); } .btn--valide { background: var(--turquoise); color: var(--encre); border-color: var(--encre); } .theme-nuit .btn--valide { border-color: var(--creme); box-shadow: 5px 5px 0 var(--creme); } .btn--fantome { background: transparent; box-shadow: none; font-size: 15px; } .btn--fantome:active { transform: translate(2px, 2px); } .btn--sombre { background: var(--encre); color: var(--creme); border-color: var(--encre); box-shadow: 5px 5px 0 var(--gris); } .btn--petit { min-height: 44px; font-size: 14px; padding: 10px 14px; box-shadow: var(--ombre); } .btn[disabled], .btn--desactive { background: var(--gris); color: var(--gris-texte); border-color: var(--gris-texte); box-shadow: none; cursor: not-allowed; pointer-events: none; } /* --------------------------------------------------------- champs de saisie */ .champ { display: block; margin-bottom: 16px; } .champ__label { display: block; font-family: var(--police-titre); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 7px; } .champ__aide { font-size: 13px; font-weight: 600; color: var(--gris-texte); margin-top: 7px; line-height: 1.45; } /* 16px minimum : en dessous, iOS zoome au focus et casse la mise en page. */ .champ input, .champ textarea, .champ select { width: 100%; min-height: 52px; padding: 14px; font-family: var(--police-texte); font-size: 16px; font-weight: 600; color: var(--encre); background: var(--blanc); border: 3px solid var(--encre); border-radius: 0; box-shadow: none; transition: box-shadow 0.08s linear, border-color 0.08s linear; -webkit-appearance: none; appearance: none; } .champ textarea { min-height: 110px; line-height: 1.5; resize: vertical; } .champ input::placeholder, .champ textarea::placeholder { color: var(--gris-texte); font-weight: 600; } .champ input:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 4px 4px 0 var(--bleu); } .champ--erreur input, .champ--erreur textarea { border-color: var(--rouge); box-shadow: 4px 4px 0 var(--rouge); } .champ__erreur { color: var(--rouge); font-size: 13px; font-weight: 700; margin-top: 7px; } .theme-nuit .champ input, .theme-nuit .champ textarea { border-color: var(--creme); } /* Le sélecteur de fichier natif casse la charte : on habille son bouton plutôt que de le remplacer, pour garder l'accessibilité du contrôle. */ .champ input[type='file'] { padding: 10px; font-weight: 600; cursor: pointer; } .champ input[type='file']::file-selector-button { font-family: var(--police-titre); font-size: 14px; color: var(--encre); background: var(--jaune); border: 3px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); padding: 10px 14px; margin-right: 12px; cursor: pointer; border-radius: 0; } .champ input[type='file']::file-selector-button:active { transform: translate(3px, 3px); box-shadow: none; } /* Choix binaire OUI / NON — deux boutons radio déguisés. */ .choix { display: flex; gap: 12px; } .choix input { position: absolute; opacity: 0; width: 0; height: 0; } .choix label { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 16px 10px; text-align: center; background: var(--blanc); color: var(--gris-texte); border: 3px solid var(--encre); font-family: var(--police-titre); font-size: 17px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .choix input:checked + label { background: var(--turquoise); color: var(--encre); box-shadow: var(--ombre); } .choix--info input:checked + label { background: var(--bleu); color: var(--creme); } .choix input:focus-visible + label { outline: 3px solid var(--bleu); outline-offset: 2px; } /* ------------------------------------------------------- cartes & bandeaux */ .carte { background: var(--surface); border: 3px solid var(--trait); box-shadow: var(--ombre-forte); padding: 18px; } .carte--plate { box-shadow: none; } .carte--douce { background: var(--surface-douce); } .carte__titre { font-family: var(--police-titre); font-size: 18px; line-height: 1.15; } .banner { border: 3px solid var(--encre); padding: 13px 15px; font-weight: 700; font-size: 14px; line-height: 1.45; background: var(--blanc); color: var(--encre); } .banner--ok { background: var(--turquoise); } .banner--attention { background: var(--jaune); } .banner--erreur { background: var(--rouge); color: var(--creme); } .banner--info { background: var(--bleu); color: var(--creme); } .banner__list { margin: 0; padding-left: 18px; } .theme-nuit .banner { border-color: var(--creme); } /* Bandeau d'action collé en bas, zone sûre iPhone respectée. */ .sticky-bar { position: sticky; bottom: 0; margin: 16px calc(var(--marge) * -1) 0; padding: 16px var(--marge) calc(16px + env(safe-area-inset-bottom)); background: var(--fond); border-top: 3px solid var(--trait); display: flex; flex-direction: column; gap: 10px; } /* Barre de progression à segments. */ .steps { display: flex; gap: 6px; margin-bottom: 24px; } .steps__seg { flex: 1; height: 12px; background: var(--blanc); border: 3px solid var(--encre); } .steps__seg.is-done { background: var(--rouge); } /* Séparateur épais. */ .regle { height: 3px; background: var(--trait); border: 0; margin: 26px 0 22px; } /* ------------------------------------------- formes Memphis décoratives */ /* Calque de décor : rogne les formes qui dépassent des bords sans créer de conteneur de défilement sur (ce qui casserait `position: sticky` de la barre d'action). */ .decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } /* Décor pur : jamais d'information, jamais sous un bloc de texte long. */ .shape { position: absolute; display: block; pointer-events: none; z-index: 0; } .shape--disque { border-radius: 50%; } .shape--anneau { border-radius: 50%; background: none !important; } .shape--carre { transform: rotate(-8deg); } .shape--flotte { animation: floatY 7s ease-in-out infinite; } .shape--balance { animation: wiggle 9s ease-in-out infinite; } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes wiggle { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } @keyframes spinSlow { to { transform: rotate(360deg); } } /* Apparition « pop » des cartes de confirmation. */ @keyframes pop { 0% { transform: scale(0.92); opacity: 0; } 70% { transform: scale(1.02); } 100% { transform: scale(1); opacity: 1; } } .pop { animation: pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; } .spinner { width: 38px; height: 38px; border: 6px solid var(--trait); border-top-color: var(--rouge); border-radius: 50%; animation: spinSlow 1s linear infinite; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ------------------------------------------------- écran de confirmation */ .confirm { background: var(--turquoise); } .confirm .wrap { text-align: center; align-items: stretch; } .confirm .tag { align-self: center; } .attribution { background: var(--creme); border: 4px solid var(--encre); box-shadow: var(--ombre-carte); padding: 18px 16px; margin-top: 20px; text-align: left; } /* Contour plus fin que les 2,5 px du pack : ses exemples tiennent en deux mots (« DES CHIPS & DIPS »), alors que les libellés réels sont longs et se replient — un contour épais y bouche les contreformes. */ .attribution__item { font-family: var(--police-titre); font-size: 30px; line-height: 1.06; color: var(--rouge); -webkit-text-stroke: 2px var(--encre); paint-order: stroke fill; margin-top: 8px; overflow-wrap: anywhere; } .attribution__item--plus { font-size: 22px; color: var(--bleu); -webkit-text-stroke: 1.5px var(--encre); } /* ------------------------------------------------------------ hub jour J */ .hub-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .hub-head__back { font-family: var(--police-titre); font-size: 26px; line-height: 1; /* Idem : on reprend la main sur la couleur de lien du thème nuit. */ color: var(--encre-texte) !important; text-decoration: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-left: -10px; } .hub-head__title { font-family: var(--police-titre); font-size: 24px; } .tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tuile { display: flex; flex-direction: column; justify-content: space-between; min-height: 112px; padding: 16px 14px; border: 3px solid var(--creme); box-shadow: 4px 4px 0 var(--creme); color: var(--encre); text-decoration: none; font-family: var(--police-titre); font-size: 16px; line-height: 1.1; } .tuile:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--creme); } .tuile--jaune { background: var(--jaune); } .tuile--turquoise { background: var(--turquoise); } .tuile--creme { background: var(--creme); box-shadow: 4px 4px 0 var(--rouge); } /* `.theme-nuit a` colore tous les liens en jaune et l'emporte sur `.tuile` (même spécificité, déclaré plus haut). Sans ces règles plus spécifiques, le libellé de la tuile jaune devient jaune sur jaune : invisible. */ .theme-nuit .tuile { color: var(--encre); } .theme-nuit .tuile--rouge { background: var(--rouge); color: var(--creme); } .theme-nuit .tuile--bleu { background: var(--bleu); color: var(--creme); } .tuile__glyphe { width: 26px; height: 26px; } .tuile__compte { font-family: var(--police-texte); font-weight: 700; font-size: 12px; opacity: 0.9; } /* Titres de la file d'attente du jukebox. */ .piste { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 3px solid var(--trait); background: transparent; color: var(--encre-texte); width: 100%; text-align: left; font-family: var(--police-texte); cursor: pointer; } .piste.is-voted { background: var(--jaune); color: var(--encre); box-shadow: var(--ombre); } .piste__titre { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; } .piste__par { font-size: 12px; font-weight: 600; opacity: 0.75; } .piste__votes { font-family: var(--police-titre); font-size: 22px; flex-shrink: 0; min-width: 32px; text-align: right; } /* Mots du mur, légèrement inclinés. */ .mot { border: 3px solid var(--trait); padding: 15px; color: var(--encre); } .mot:nth-child(3n + 1) { background: var(--jaune); transform: rotate(-1.5deg); } .mot:nth-child(3n + 2) { background: var(--turquoise); transform: rotate(1deg); } .mot:nth-child(3n + 3) { background: var(--creme); transform: rotate(-1deg); } .mot__texte { font-weight: 600; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; } .mot__auteur { font-family: var(--police-titre); font-size: 12px; margin-top: 9px; } .grille-photos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .grille-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: 3px solid var(--trait); } /* --------------------------------------------------------------- utilitaires */ .vide { border: 3px dashed var(--gris-texte); padding: 22px 16px; text-align: center; color: var(--gris-texte); font-weight: 600; font-size: 14px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .center { text-align: center; } .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; } .hidden { display: none !important; } .texte-rouge { color: var(--rouge); } /* Au-delà de 560px on ne passe jamais en multi-colonnes : le pack impose une seule colonne. On se contente de centrer et d'aérer. */ @media (min-width: 600px) { .wrap { padding-top: 40px; } }