/* ========================================================================= Laporte Avocats — Page d’attente (site en cours de refonte) Feuille de style unique, sans framework. Conception « mobile-first », responsive, conforme RGAA 4 / WCAG 2.1 AA. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Variables de thème Palette sobre accordée à la photographie : ivoire, anthracite, or vieilli. ------------------------------------------------------------------------- */ :root { /* Couleurs du texte */ --ivoire: #f4efe4; /* texte principal */ --ivoire-attenue: #d8d2c4; /* texte secondaire et pied de page */ /* Accents */ --or: #c6a968; /* or vieilli */ --or-clair: #e0c890; /* or éclairci : survol et focus */ /* Fond */ --anthracite: #1b1a17; /* couleur de repli avant chargement de l’image */ /* Voile d’assombrissement posé sur la photographie (dégradé vertical) */ --voile-haut: rgba(18, 16, 14, 0.68); --voile-centre: rgba(18, 16, 14, 0.55); --voile-bas: rgba(18, 16, 14, 0.82); /* Panneau « verre dépoli » */ --panneau-fond: rgba(30, 27, 23, 0.80); --panneau-fond-opaque: rgba(27, 24, 20, 0.96); /* repli sans backdrop-filter */ /* Polices */ --serif: 'Cormorant Garamond', 'Hoefler Text', Garamond, 'Times New Roman', serif; --lineale: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color-scheme: dark; } /* ------------------------------------------------------------------------- 2. Réinitialisation légère ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, p, dl, dd { margin: 0; } /* Surlignage de sélection accordé à la palette */ ::selection { background-color: rgba(198, 169, 104, 0.30); color: var(--ivoire); } /* ------------------------------------------------------------------------- 3. Mise en page générale Le porte la photographie de fond et le voile d’assombrissement ; il occupe au minimum toute la hauteur visible et empile son contenu. ------------------------------------------------------------------------- */ body { min-height: 100vh; min-height: 100dvh; /* hauteur dynamique : tient compte des barres mobiles */ display: flex; flex-direction: column; font-family: var(--lineale); font-size: 100%; line-height: 1.5; color: var(--ivoire); background-color: var(--anthracite); /* visible tant que l’image n’est pas chargée */ /* Voile sombre (dégradé) PUIS photographie : la photographie étant riche et contrastée, le voile garantit la lisibilité du texte. */ background-image: linear-gradient( 180deg, var(--voile-haut) 0%, var(--voile-centre) 38%, var(--voile-centre) 62%, var(--voile-bas) 100% ), url('assets/fond-cabinet.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: scroll; /* défaut mobile ; voir § 8 pour les grands écrans */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Zone centrale : centre le panneau sur les deux axes */ .page { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); } /* ------------------------------------------------------------------------- 4. Panneau translucide — effet « verre dépoli » ------------------------------------------------------------------------- */ .panneau { position: relative; width: 100%; max-width: 34rem; padding: clamp(2.25rem, 1.5rem + 3.4vw, 3.6rem) clamp(1.6rem, 0.9rem + 3.4vw, 3.2rem); text-align: center; background-color: var(--panneau-fond); border: 1px solid rgba(244, 239, 228, 0.10); /* arête de verre discrète */ border-radius: 6px; box-shadow: 0 28px 64px -22px rgba(0, 0, 0, 0.78), 0 1px 3px rgba(0, 0, 0, 0.5); /* Flou de l’arrière-plan : c’est lui qui produit le « verre dépoli » */ -webkit-backdrop-filter: blur(16px) saturate(115%); backdrop-filter: blur(16px) saturate(115%); } /* Filet doré en retrait : rappel discret de l’encadrement des documents officiels */ .panneau::before { content: ""; position: absolute; inset: clamp(0.55rem, 0.35rem + 0.6vw, 0.85rem); border: 1px solid rgba(198, 169, 104, 0.22); border-radius: 3px; pointer-events: none; } /* Repli : si « backdrop-filter » n’est pas pris en charge, on opacifie le panneau afin de préserver le contraste du texte. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .panneau { background-color: var(--panneau-fond-opaque); } } /* Logo du cabinet (monogramme « C·L ») : inséré en SVG, recoloré en ivoire par la propriété « fill » afin de se détacher sur le fond sombre. */ .logo { display: block; height: clamp(3.25rem, 2.7rem + 2.4vw, 4.6rem); width: auto; margin: 0 auto clamp(0.95rem, 0.75rem + 0.9vw, 1.45rem); fill: var(--ivoire); } /* ------------------------------------------------------------------------- 5. Typographie du contenu ------------------------------------------------------------------------- */ /* Sur-titre : courte ligne en capitales espacées */ .surtitre { margin-bottom: 0.55rem; font-size: clamp(0.7rem, 0.64rem + 0.3vw, 0.8rem); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; text-indent: 0.24em; /* compense le crénage pour un centrage optique */ color: var(--or); } /* Nom du cabinet — unique titre de niveau 1 de la page */ .nom-cabinet { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 1.5rem + 3.4vw, 3.6rem); line-height: 1.08; letter-spacing: 0.015em; color: var(--ivoire); } /* Filet décoratif : fine ligne dorée qui s’estompe à ses extrémités */ .filet { width: 74px; height: 1px; margin: clamp(1.3rem, 1rem + 1vw, 1.9rem) auto; border: 0; background-image: linear-gradient(90deg, transparent, var(--or), transparent); } /* Message d’attente principal */ .message { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.2rem, 1.02rem + 0.85vw, 1.6rem); line-height: 1.5; color: var(--ivoire); } /* Note secondaire */ .note { margin-top: 0.7rem; font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1rem); color: var(--ivoire-attenue); } /* ------------------------------------------------------------------------- 6. Bloc de coordonnées ------------------------------------------------------------------------- */ .coordonnees { margin-top: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); font-style: normal; /*

est affiché en italique par défaut */ } .coordonnees dl { display: flex; flex-direction: column; gap: clamp(0.55rem, 0.45rem + 0.4vw, 0.8rem); } /* Une ligne = un intitulé suivi de sa valeur, affichés en continu et centrés */ .coordonnees dt, .coordonnees dd { display: inline; } .coordonnees dt { font-weight: 600; color: var(--or); } .coordonnees dd { color: var(--ivoire); overflow-wrap: break-word; /* garde-fou anti-débordement sur très petit écran */ } /* Liens téléphone et courriel : soulignés (repère non chromatique) */ .coordonnees a { color: var(--ivoire); text-decoration: underline; text-decoration-color: rgba(198, 169, 104, 0.65); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color 0.2s ease, text-decoration-color 0.2s ease; } .coordonnees a:hover { color: var(--or-clair); text-decoration-color: var(--or-clair); } /* Prise de focus au clavier nettement visible (RGAA 10.7 / WCAG 2.4.7) */ .coordonnees a:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; border-radius: 2px; } /* ------------------------------------------------------------------------- 7. Pied de page ------------------------------------------------------------------------- */ .pied { padding: clamp(1rem, 0.8rem + 0.8vw, 1.6rem); text-align: center; font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem); letter-spacing: 0.05em; color: var(--ivoire-attenue); /* Légère ombre portée : confort de lecture sur la photographie */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } /* ------------------------------------------------------------------------- 8. Adaptation aux grands écrans La photographie reste fixe au défilement. Volontairement écarté sur petit écran, où « background-attachment: fixed » provoque des saccades (iOS). ------------------------------------------------------------------------- */ @media (min-width: 1024px) { body { background-attachment: fixed; } } /* ------------------------------------------------------------------------- 9. Préférences d’accessibilité — mouvement réduit ------------------------------------------------------------------------- */ /* Apparition douce du panneau, uniquement si l’utilisateur l’accepte */ @media (prefers-reduced-motion: no-preference) { .panneau { animation: apparition 0.9s ease-out both; } @keyframes apparition { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } } /* Mouvement réduit demandé : on fige aussi la photographie de fond */ @media (prefers-reduced-motion: reduce) { body { background-attachment: scroll; } }