/* =========================================================
MVPX CONCIERGERIE — IDENTITÉ VISUELLE V2
Ce fichier est le SEUL style à lier sur chaque page V2.
Il contient : couleurs, polices, menu, footer, boutons,
cartes, et les styles de contenu pour les pages intérieures.
---------------------------------------------------------
Pour lier ce fichier sur une page, mettre dans le :
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
/* =========================================================
1. VARIABLES — change une couleur ici = change partout
========================================================= */
:root{
--navy-deep:#0a1a2e; /* fond le plus foncé */
--navy:#12283b; /* bleu de base */
--navy-panel:#16344f; /* bleu clair du dégradé hero */
--gold:#e2a92c; /* doré principal (boutons, logo) */
--gold-soft:#e9bd57; /* doré clair (survol, accents) */
--white:#ffffff;
--muted:#b7c6d8; /* texte gris-bleu secondaire */
--line:rgba(255,255,255,.12);
--card:rgba(255,255,255,.035);
--serif:'Playfair Display', Georgia, 'Times New Roman', serif;
--sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--wrap:1180px; /* largeur maxi du contenu */
--radius:16px;
}
/* =========================================================
2. BASE
========================================================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:var(--sans);
background:#0a1521;
color:var(--white);
-webkit-font-smoothing:antialiased;
line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* =========================================================
3. BARRE DU HAUT + MENU
========================================================= */
.topbar{
position:sticky; top:0; z-index:1000;
background:var(--navy-deep);
border-bottom:1px solid var(--line);
}
.topbar-inner{
max-width:var(--wrap); margin:0 auto;
display:flex; align-items:center; gap:18px;
padding:14px 22px;
}
/* Logo texte */
.brand{display:flex; flex-direction:column; line-height:1; flex:0 0 auto}
.brand .name{
font-family:var(--serif); font-weight:700; font-size:24px;
color:var(--gold); letter-spacing:.5px;
}
.brand .sub{
font-size:9.5px; letter-spacing:3.5px; font-weight:600;
color:var(--muted); margin-top:5px;
}
/* (Option) logo image à la place du texte : mettre une ![]()
*/
.brand-img{height:40px;width:auto}
/* Navigation desktop */
.nav{display:flex; align-items:center; gap:4px; margin-left:14px}
.nav > .item{position:relative}
.nav > .item > a{
display:flex; align-items:center; gap:6px;
padding:11px 15px; border-radius:9px;
font-weight:600; font-size:15px; color:#e7eef6;
cursor:pointer; white-space:nowrap;
}
.nav > .item > a .chev{
width:9px; height:9px; border-right:2px solid var(--muted);
border-bottom:2px solid var(--muted); transform:rotate(45deg) translateY(-2px);
transition:transform .18s ease;
}
.nav > .item > a:hover{background:rgba(255,255,255,.07)}
.nav > .item:hover > a{color:#fff}
.nav > .item:hover > a .chev{transform:rotate(45deg) translateY(0); border-color:var(--gold)}
/* Sous-menu déroulant */
.drop{
position:absolute; top:calc(100% + 8px); left:0;
min-width:250px;
background:linear-gradient(180deg,#123252,#0e2942);
border:1px solid var(--line); border-radius:14px;
box-shadow:0 18px 40px rgba(0,0,0,.45);
padding:8px; opacity:0; visibility:hidden;
transform:translateY(6px); transition:.16s ease;
}
.nav > .item:hover > .drop,
.nav > .item:focus-within > .drop{opacity:1; visibility:visible; transform:translateY(0)}
.nav > .item::after{content:""; position:absolute; top:100%; left:0; right:0; height:10px}
.drop a{
display:block; padding:11px 13px; border-radius:9px;
font-size:14.5px; font-weight:500; color:#dbe6f2;
}
.drop a small{display:block; font-size:12px; color:#8ea6bf; font-weight:400; margin-top:2px}
.drop a:hover{background:rgba(255,255,255,.09); color:#fff}
/* Droite de la barre */
.nav-right{margin-left:auto; display:flex; align-items:center; gap:12px; flex:0 0 auto}
.btn-contact{
background:var(--gold); color:#1a1408; font-weight:700; font-size:14.5px;
padding:11px 20px; border-radius:10px;
}
.btn-contact:hover{background:var(--gold-soft)}
/* Bouton burger (mobile) */
.burger{
display:none; margin-left:auto;
width:44px; height:44px; border:1px solid var(--line);
background:transparent; border-radius:11px; cursor:pointer;
color:#fff; font-size:22px;
}
/* Overlay menu mobile */
.overlay{
position:fixed; inset:0; z-index:2000;
background:linear-gradient(180deg,#0e2942,#0a1a2c);
padding:24px 20px 40px; overflow:auto; display:none;
}
.overlay.open{display:block}
.overlay-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px}
.overlay-top .name{font-family:var(--serif); color:var(--gold); font-size:22px; font-weight:700}
.overlay .close{
width:44px; height:44px; border:1px solid var(--line);
background:transparent; color:#fff; font-size:22px;
border-radius:11px; cursor:pointer;
}
.acc{border-bottom:1px solid var(--line)}
.acc > button{
width:100%; text-align:left; background:transparent; border:0;
color:#fff; font-size:17px; font-weight:600; font-family:var(--sans);
padding:16px 4px; cursor:pointer;
display:flex; justify-content:space-between; align-items:center;
}
.acc > button .plus{color:var(--gold); font-size:22px; font-weight:400; transition:transform .18s ease}
.acc .acc-body{display:none; padding:0 4px 12px}
.acc.open .acc-body{display:block}
.acc.open > button .plus{transform:rotate(45deg)}
.acc .acc-body a{display:block; padding:11px 4px; color:var(--muted); font-size:15px}
.overlay .m-contact{
display:block; text-align:center; margin-top:26px;
background:var(--gold); color:#1a1408; font-weight:700;
padding:15px; border-radius:11px;
}
/* =========================================================
4. BOUTONS génériques
========================================================= */
.btn{
display:inline-flex; align-items:center; gap:8px;
padding:15px 26px; border-radius:11px;
font-weight:700; font-size:15.5px; cursor:pointer;
}
.btn-gold{background:var(--gold); color:#1a1408}
.btn-gold:hover{background:var(--gold-soft)}
.btn-ghost{border:1px solid rgba(255,255,255,.35); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
/* =========================================================
5. HERO (accueil)
========================================================= */
.hero{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.hero-panel{
margin-top:22px;
background:radial-gradient(120% 140% at 78% 22%, #1b3d5e 0%, #123048 42%, #0c2136 74%, #0a1a2c 100%);
border:1px solid var(--line); border-radius:22px;
padding:64px 58px 70px;
}
.badge{
display:inline-flex; align-items:center;
border:1px solid rgba(226,169,44,.55); border-radius:999px;
color:var(--gold-soft); font-weight:700; font-size:12px;
letter-spacing:2px; padding:8px 18px; margin-bottom:26px;
}
.hero h1{
font-family:var(--serif); font-weight:600;
font-size:56px; line-height:1.08; margin:0 0 22px; letter-spacing:.5px;
}
.hero p.lead{
font-size:18px; color:var(--muted); max-width:520px;
line-height:1.6; margin:0 0 34px;
}
.cta-row{display:flex; gap:16px; flex-wrap:wrap}
/* =========================================================
6. SECTION "QUI ÊTES-VOUS" + CARTES
========================================================= */
.who{max-width:var(--wrap); margin:0 auto; padding:0 22px 60px}
.who-panel{
background:var(--navy); border:1px solid var(--line); border-top:none;
border-radius:0 0 22px 22px;
margin-top:-22px; padding:46px 58px 54px; position:relative; z-index:1;
}
.who h2{text-align:center; color:var(--gold); font-size:26px; font-weight:700; margin:0 0 34px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{
background:var(--card); border:1px solid var(--line);
border-radius:var(--radius); padding:26px 24px; transition:.18s ease;
}
.card:hover{border-color:rgba(226,169,44,.5); transform:translateY(-3px)}
.card .ic{
width:44px; height:44px; border-radius:11px;
background:rgba(226,169,44,.14); color:var(--gold);
display:flex; align-items:center; justify-content:center;
font-size:22px; margin-bottom:16px;
}
.card h3{margin:0 0 8px; font-size:18px; color:#fff}
.card p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.55}
/* =========================================================
7. PAGES INTÉRIEURES — gabarit réutilisable
Utiliser pour toutes les autres pages :
...contenu...
========================================================= */
.page{max-width:900px; margin:0 auto; padding:40px 22px 60px}
.page .eyebrow{
color:var(--gold); font-weight:700; font-size:13px;
letter-spacing:2px; text-transform:uppercase; margin:0 0 10px;
}
.panel{
background:#ffffff; color:#132030;
border:1px solid rgba(0,0,0,.06); border-radius:18px;
padding:34px 34px; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.panel h1{
font-family:var(--serif); font-size:34px; font-weight:600;
color:#0c1a2b; margin:0 0 18px; line-height:1.15;
}
.panel h2{
font-family:var(--serif); font-size:24px; font-weight:600;
color:#0c1a2b; margin:28px 0 12px;
}
.panel h3{font-size:18px; color:#12283b; margin:22px 0 8px}
.panel p{color:#33475b; margin:0 0 14px; line-height:1.65}
.panel a{color:#0d6b8c; text-decoration:underline; text-decoration-thickness:1px}
.panel ul,.panel ol{color:#33475b; line-height:1.65; padding-left:22px}
.panel li{margin:6px 0}
/* --- Composants de contenu réutilisables (dans un .panel) --- */
/* Grille de services / points forts */
.features{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:22px 0 6px}
.feature{
border:1px solid rgba(0,0,0,.08); border-radius:14px;
padding:20px 20px; background:#fbfcfe;
}
.feature h3{margin:0 0 8px; color:#12283b; font-size:17px}
.feature p{margin:0; color:#33475b; font-size:14.5px; line-height:1.6}
/* Encadré "ce qui nous distingue" (accent doré) */
.callout{
border:1px solid rgba(226,169,44,.45);
background:rgba(226,169,44,.09);
border-radius:14px; padding:20px 22px; margin:16px 0;
}
.callout h3{margin:0 0 8px; color:#9a7614; font-size:17px}
.callout p{margin:0; color:#3d3a2c; font-size:14.5px; line-height:1.62}
/* Bandeau d'appel à l'action (fond bleu nuit, à placer sous le .panel) */
.cta-band{
margin-top:26px;
background:linear-gradient(135deg,#16344f,#0c2136);
border:1px solid var(--line); border-radius:18px;
padding:34px 28px; text-align:center;
}
.cta-band h2{font-family:var(--serif); color:#fff; font-size:24px; font-weight:600; margin:0 0 8px}
.cta-band p{color:var(--muted); margin:0 0 22px}
.cta-band .cta-row{justify-content:center}
/* --- Formulaires (dans un .panel) --- */
.form-section{margin:24px 0 0}
.form-section h3{margin:0 0 12px}
.form-field{margin:0 0 16px}
.form-field .lbl{display:block; font-weight:600; color:#12283b; margin:0 0 7px; font-size:14.5px}
.form-field .req{color:#c0392b}
.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=tel],
.form-field input[type=number],
.form-field input[type=password],
.form-field textarea{
width:100%; padding:13px 14px;
border:1px solid #ccd4de; border-radius:10px;
background:#fff; color:#132030; font-size:15px; font-family:inherit;
}
.form-field input:focus,
.form-field textarea:focus{
outline:none; border-color:var(--gold);
box-shadow:0 0 0 3px rgba(226,169,44,.16);
}
/* Garde un fond blanc quand le navigateur auto-remplit un champ */
.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:focus{
-webkit-box-shadow:0 0 0 1000px #fff inset;
-webkit-text-fill-color:#132030;
caret-color:#132030;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-hint{font-size:13px; color:#6b7a8d; margin:5px 0 0}
/* Choix cliquables (radios / cases) sous forme de pastilles */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{position:relative; cursor:pointer; display:inline-flex}
.chip input{position:absolute; inset:0; opacity:0; cursor:pointer; margin:0}
.chip span{
display:inline-block; padding:10px 16px;
border:1px solid #ccd4de; border-radius:999px;
background:#fff; color:#33475b; font-size:14px; user-select:none;
transition:.15s ease;
}
.chip input:checked + span{
border-color:var(--gold); background:rgba(226,169,44,.15);
color:#12283b; font-weight:600;
}
.chip input:focus-visible + span{outline:2px solid var(--gold); outline-offset:2px}
.chip:hover span{border-color:#9aa8b8}
.btn-block{width:100%; justify-content:center; margin-top:8px}
/* =========================================================
8. FOOTER
========================================================= */
#site-footer{
background:var(--navy-deep);
color:#fff;
border-top:1px solid var(--line);
padding:48px 30px 34px;
font-size:.95rem;
}
#site-footer .footer-wrap{max-width:var(--wrap); margin:0 auto}
#site-footer .footer-links{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
gap:28px; align-items:flex-start;
}
#site-footer h4{margin:0 0 12px; font-size:1rem; color:var(--gold)}
#site-footer h4 a{color:var(--gold)}
#site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
#site-footer a{color:#dbe6f2; text-decoration:none}
#site-footer a:hover{color:#fff; text-decoration:underline}
#site-footer .about{color:var(--muted); line-height:1.55}
#site-footer .sep{height:1px; background:var(--line); margin:28px 0 18px; border:0}
#site-footer .bottom{
display:flex; flex-wrap:wrap; gap:12px;
justify-content:space-between; align-items:center;
font-size:.85rem; color:var(--muted);
}
#site-footer .social-icons{display:flex; gap:14px}
#site-footer .social-icons img{
width:22px; height:22px; opacity:.8; transition:opacity .2s ease;
}
#site-footer .social-icons a:hover img{opacity:1}
/* =========================================================
9. RESPONSIVE
========================================================= */
@media (max-width:1024px){
.nav, .nav-right{display:none}
.burger{display:block}
.hero-panel{padding:48px 30px 54px}
.hero h1{font-size:44px}
.who-panel{padding:40px 30px}
.panel{padding:26px 22px}
}
@media (max-width:720px){
.cards{grid-template-columns:1fr}
.features{grid-template-columns:1fr}
.form-row{grid-template-columns:1fr}
.hero h1{font-size:36px}
.hero-panel{padding:40px 24px 46px}
.panel h1{font-size:28px}
}
/* Accessibilité : focus visible clavier */
a:focus-visible, button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}