/* ========================================================================== Cabinet de Maître Mélissa Merceret — Avocat au Barreau de Grasse Site statique HTML/CSS — aucun script serveur, aucune base de données. ========================================================================== */ /* ===================================================================== PALETTES — pour changer la couleur d'une page, modifiez simplement la classe de la balise dans le fichier .html : → bordeaux (page d'accueil) → noir & or (pages intérieures) Les couleurs elles-mêmes se règlent ci-dessous. ===================================================================== */ :root, body.palette-laiton{ /* — Noir & laiton (par défaut) — */ --ink: #15171c; /* noir de robe — bandeaux */ --ink-soft: #2b2f37; --paper: #fbfaf7; /* papier d'acte */ --stone: #5f636b; /* gris — texte secondaire */ --laiton: #9a7b33; /* or / laiton — accent */ --laiton-vif: #b5934a; --ligne: #e6e2d8; /* filets */ --voile: #f2efe7; /* fonds de section */ } body.palette-bordeaux{ /* — Bordeaux (accueil) — */ --ink: #2e2226; --ink-soft: #41333a; --paper: #faf8f7; --stone: #6b5f63; --laiton: #7d2f3f; --laiton-vif: #9a4456; --ligne: #e8e0e1; --voile: #f3edee; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} } body{ margin:0; font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif; font-size:1.05rem; line-height:1.65; color:var(--ink-soft); background:var(--paper); } img{max-width:100%;height:auto;display:block} a{color:var(--laiton);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--laiton-vif)} a:focus-visible,button:focus-visible{outline:2px solid var(--laiton);outline-offset:3px} h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;color:var(--ink);line-height:1.15;font-weight:600} h1{font-size:clamp(2.1rem,5vw,3.3rem);margin:0 0 .4em} h2{font-size:clamp(1.6rem,3.5vw,2.2rem);margin:1.6em 0 .5em} h3{font-size:1.3rem;margin:1.4em 0 .4em} .wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem} /* --- Bandeau de contact ------------------------------------------------- */ .topbar{background:var(--ink);color:#cfc9bd;font-size:.85rem} .topbar .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:flex-end;padding-top:.45rem;padding-bottom:.45rem} .topbar a{color:#e8e2d4;text-decoration:none} .topbar a:hover{color:var(--laiton-vif)} /* --- En-tête / navigation ----------------------------------------------- */ .site-header{background:var(--paper);border-bottom:1px solid var(--ligne);position:sticky;top:0;z-index:50} .site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;padding-bottom:.9rem} .brand{text-decoration:none;color:var(--ink)} .brand .nom{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.45rem;font-weight:600;display:block;line-height:1.1} .brand .role{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--laiton)} .nav-toggle{display:none;background:none;border:1px solid var(--ligne);border-radius:4px;padding:.45rem .7rem;font:inherit;color:var(--ink);cursor:pointer} nav.principal ul{list-style:none;display:flex;gap:1.6rem;margin:0;padding:0} nav.principal a{color:var(--ink);text-decoration:none;font-size:.95rem;padding:.3rem 0;border-bottom:2px solid transparent} nav.principal a:hover{border-bottom-color:var(--laiton)} nav.principal a[aria-current="page"]{border-bottom-color:var(--laiton);color:var(--laiton)} @media (max-width:820px){ .nav-toggle{display:block} nav.principal{display:none;width:100%} nav.principal.ouvert{display:block} nav.principal ul{flex-direction:column;gap:0;padding:.5rem 0 1rem} nav.principal a{display:block;padding:.6rem 0;border-bottom:1px solid var(--ligne)} .site-header .wrap{flex-wrap:wrap} } /* --- Héros & frise du serment ------------------------------------------- */ .hero{background:var(--ink);color:#ece8de;padding:4.5rem 0 3.5rem} .hero h1{color:#fff} .hero .surtitre{letter-spacing:.22em;text-transform:uppercase;font-size:.8rem;color:var(--laiton-vif);margin:0 0 1rem} .hero p.accroche{max-width:42rem;font-size:1.15rem;color:#cfc9bd;margin:.5rem 0 2rem} .hero .actions{display:flex;flex-wrap:wrap;gap:1rem} .btn{display:inline-block;padding:.75rem 1.6rem;border-radius:3px;text-decoration:none;font-size:.95rem;letter-spacing:.04em} .btn-or{background:var(--laiton);color:#fff} .btn-or:hover{background:var(--laiton-vif);color:#fff} .btn-contour{border:1px solid #5a5e66;color:#ece8de} .btn-contour:hover{border-color:var(--laiton-vif);color:var(--laiton-vif)} /* Diaporama du héros */ .hero .diapo{position:relative;justify-self:end;width:100%;max-width:340px;aspect-ratio:4/5; border:1px solid #3a3e46;outline:6px solid rgba(181,147,74,.25);outline-offset:-14px;overflow:hidden} .hero .diapo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity 1.2s ease} .hero .diapo img.visible{opacity:1} @media (max-width:760px){.hero .diapo{justify-self:start;max-width:260px}} /* Les cinq mots du serment — signature du site */ .serment-frise{background:var(--ink);border-top:1px solid #2c2f36;padding:1.1rem 0} .serment-frise ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.2rem} .serment-frise li{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.05rem;letter-spacing:.28em;text-transform:uppercase;color:var(--laiton-vif)} .serment-frise li::after{content:"·";margin-left:2.2rem;color:#4a4e57} .serment-frise li:last-child::after{content:""} /* --- Sections ------------------------------------------------------------ */ .section{padding:3.5rem 0} .section.voile{background:var(--voile)} .eyebrow{letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;color:var(--laiton);margin:0 0 .3rem} .grille-domaines{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.25rem;margin-top:1.5rem} .carte{background:#fff;border:1px solid var(--ligne);border-top:3px solid var(--laiton);padding:1.5rem;display:flex;flex-direction:column} .carte h3{margin:0 0 .5rem} .carte p{margin:0 0 1rem;font-size:.97rem;flex:1} .carte a{font-size:.92rem} .deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start} @media (max-width:760px){.deux-colonnes{grid-template-columns:1fr}} /* --- Pages intérieures ---------------------------------------------------- */ .entete-page{background:var(--ink);color:#ece8de;padding:2.8rem 0 2.2rem} .entete-page h1{color:#fff;margin:0} .entete-page .fil{font-size:.85rem;color:#9da1a9;margin:0 0 .6rem} .entete-page .fil a{color:#cfc9bd;text-decoration:none} .entete-page .fil a:hover{color:var(--laiton-vif)} .page-corps{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:3rem;padding:3rem 0 4rem} @media (max-width:820px){.page-corps{grid-template-columns:1fr}} article.contenu>*:first-child{margin-top:0} article.contenu ul{padding-left:1.2rem} article.contenu li{margin:.35rem 0} blockquote{margin:2rem 0;padding:1.2rem 1.5rem;border-left:3px solid var(--laiton);background:var(--voile);font-family:"Cormorant Garamond",Georgia,serif;font-size:1.25rem;color:var(--ink)} blockquote footer{font-family:"Source Sans 3",sans-serif;font-size:.85rem;color:var(--stone);margin-top:.5rem} aside.lateral .bloc{background:#fff;border:1px solid var(--ligne);padding:1.4rem;margin-bottom:1.4rem} aside.lateral h2{font-size:1.2rem;margin:0 0 .7rem} aside.lateral ul{list-style:none;margin:0;padding:0} aside.lateral li{padding:.35rem 0;border-bottom:1px solid var(--ligne)} aside.lateral li:last-child{border-bottom:none} aside.lateral a{text-decoration:none;color:var(--ink-soft);font-size:.95rem} aside.lateral a:hover{color:var(--laiton)} aside.lateral .bloc-contact{background:var(--ink);color:#ece8de;border:none} aside.lateral .bloc-contact h2{color:#fff} aside.lateral .bloc-contact a{color:var(--laiton-vif)} aside.lateral .bloc-contact p{margin:.3rem 0;font-size:.95rem} /* --- Tableaux & définitions ------------------------------------------------ */ table{border-collapse:collapse;width:100%;margin:1.5rem 0} th,td{border:1px solid var(--ligne);padding:.7rem .9rem;text-align:left;font-size:.97rem} th{background:var(--voile);font-weight:600;color:var(--ink)} dl.coordonnees{margin:1rem 0} dl.coordonnees dt{font-weight:600;color:var(--ink);margin-top:.8rem} dl.coordonnees dd{margin:0} /* --- Pied de page ----------------------------------------------------------- */ .site-footer{background:var(--ink);color:#b9b3a6;font-size:.92rem;margin-top:0} .site-footer .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;padding-top:3rem;padding-bottom:2rem} .site-footer h2{color:#fff;font-size:1.1rem;margin:0 0 .8rem} .site-footer ul{list-style:none;margin:0;padding:0} .site-footer li{margin:.3rem 0} .site-footer a{color:#d8d2c4;text-decoration:none} .site-footer a:hover{color:var(--laiton-vif)} .site-footer .legal{border-top:1px solid #2c2f36;padding:1rem 1.25rem;text-align:center;font-size:.82rem;color:#8a8579} .site-footer .legal a{color:#b9b3a6} /* --- Photos ----------------------------------------------------------------- */ .hero .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.8fr);gap:3rem;align-items:center} .hero .portrait{margin:0;justify-self:end} .hero .portrait img{width:100%;max-width:320px;aspect-ratio:4/5;object-fit:cover;border:1px solid #3a3e46;outline:6px solid rgba(181,147,74,.25);outline-offset:-14px} @media (max-width:760px){.hero .wrap{grid-template-columns:1fr}.hero .portrait{justify-self:start}.hero .portrait img{max-width:240px}} .valeurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;margin-top:1.5rem} .valeurs figure{margin:0;background:#fff;border:1px solid var(--ligne);display:flex;flex-direction:column} .valeurs img{width:100%;aspect-ratio:16/6;object-fit:cover} .valeurs figcaption{padding:1.2rem 1.4rem 1.4rem} .valeurs .mot{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.3rem;color:var(--ink);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem} .valeurs .mot::after{content:"";display:block;width:2.2rem;height:2px;background:var(--laiton);margin-top:.45rem} .valeurs blockquote{margin:0;padding:0;border:none;background:none;font-size:1.05rem} .valeurs blockquote footer{margin-top:.4rem} .cartes-photo{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin-top:1.5rem} .cartes-photo .carte{padding:0;overflow:hidden} .cartes-photo img{width:100%;aspect-ratio:16/10;object-fit:cover} .cartes-photo .texte{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1} .cartes-photo h3{margin:0 0 .4rem} .cartes-photo p{margin:0;font-size:.95rem} article.contenu .photo-page{margin:0 0 1.8rem} article.contenu .photo-page img{width:100%;aspect-ratio:16/5;object-fit:cover;border:1px solid var(--ligne)} article.contenu .photo-page img.codes{aspect-ratio:auto;max-width:440px} article.contenu .photo-page img.naturel{aspect-ratio:auto;width:100%} /* --- Affinage mobile ----------------------------------------------------- */ @media (max-width:640px){ body{font-size:1rem} .section{padding:2.4rem 0} .hero{padding:3rem 0 2.5rem} /* Bandeau du haut : on garde l'essentiel (appel direct + formulaire) */ .topbar .wrap{justify-content:space-between;gap:.4rem 1rem} .topbar .adresse{display:none} .topbar a[href^="tel"]{font-weight:600} /* Bandeaux photos : un peu plus hauts pour rester lisibles */ article.contenu .photo-page img{aspect-ratio:16/7} .valeurs img{aspect-ratio:16/8} /* Frise du serment plus compacte */ .serment-frise ul{gap:.4rem 1.2rem} .serment-frise li{font-size:.85rem;letter-spacing:.18em} .serment-frise li::after{margin-left:1.2rem} /* Tableaux et formulaire confortables au doigt */ th,td{padding:.6rem .6rem;font-size:.92rem} .formulaire{padding:1.3rem} .formulaire input,.formulaire textarea{padding:.75rem .8rem} .formulaire button{width:100%;padding:.95rem} .btn{display:block;text-align:center;margin-right:0} .hero .actions{flex-direction:column;align-items:stretch;max-width:22rem} } @media print{ .topbar,.site-header,.site-footer,.hero .actions,aside.lateral{display:none} body{background:#fff;color:#000} } /* --- Formulaire de contact --------------------------------------------------- */ .formulaire{background:#fff;border:1px solid var(--ligne);border-top:3px solid var(--laiton);padding:2rem;margin:2rem 0} .formulaire .champ{margin-bottom:1.1rem} .formulaire label{display:block;font-weight:600;color:var(--ink);margin-bottom:.3rem;font-size:.95rem} .formulaire input,.formulaire textarea{width:100%;padding:.65rem .8rem;border:1px solid var(--ligne);border-radius:3px;font:inherit;background:var(--paper);color:var(--ink-soft)} .formulaire input:focus,.formulaire textarea:focus{outline:2px solid var(--laiton);outline-offset:1px;border-color:var(--laiton)} .formulaire .deux{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} @media (max-width:560px){.formulaire .deux{grid-template-columns:1fr}} .formulaire .indication{font-size:.85rem;color:var(--stone);margin:.2rem 0 0} .formulaire button{background:var(--laiton);color:#fff;border:none;padding:.8rem 2rem;border-radius:3px;font:inherit;font-size:1rem;letter-spacing:.04em;cursor:pointer} .formulaire button:hover{background:var(--laiton-vif)} .piege{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .message-statut{padding:1rem 1.3rem;border-radius:3px;margin:1.5rem 0;display:none} .message-statut.ok{display:block;background:#e8f3e8;border:1px solid #b9d8b9;color:#2c5e2c} .message-statut.erreur{display:block;background:#f7e9e9;border:1px solid #dcb8b8;color:#7a3030}