/* MAUSS CPA — Page "En construction"
   Palette: noir & gris (sobre, inspiré du logo)
   Typo: système (performant, professionnel)
*/
html { scroll-behavior: smooth; }

:root{
  --bg: #f5f5f5;
  --fg: #111;
  --muted:#5b5b5b;
  --card:#ffffff;
  --border: #e5e5e5;
  --shadow: 0 10px 30px rgba(0,0,0,.07);
  --header-h: 72px;
}

*{ box-sizing:border-box; }
html{ font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      color:var(--fg); background:var(--bg); }
body{ margin:0; line-height:1.35; }

/* Subtle background grid for depth */
.bg-grid{
  position:fixed; inset:0; pointer-events:none; opacity:.35;
  background-image: radial-gradient(#000 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.0) 60%);
}

/* Layout */
.container{
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
}

.wrapper{
  width:min(1120px, 92vw);
  margin-inline:auto;
  padding: clamp(16px, 2.2vw, 16px);
}

/* Header */
.header {
  display: flex;
  align-items: flex-end;
}
.brand {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto; /* Add this line to align logo right */
}
.brand img{ height:48px; width:auto; image-rendering:auto; }
.brand .tag{
  font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  border-left:1px solid var(--border); padding-left:14px;
}

/* Hero card */
.hero{
  position:relative;
  margin-top: clamp(22px, 6vh, 56px);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 5vw, 72px);
}
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
}

.kicker{
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.82rem;
  margin-bottom: 10px;
}

h1{
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height:1.05;
  margin:0 0 14px;
  font-weight:900;
}
h1 .thin{ font-weight:300; }
h1 .accent{ position:relative; white-space:nowrap; }

.subtitle{
  margin: 0 0 24px;
  color:#2a2a2a;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

.badges{ display:flex; flex-wrap:wrap; gap:10px; margin: 18px 0 26px; }
.badge{
  font-size:.88rem; color:#222; background:#f2f2f2; border:1px solid #e9e9e9;
  border-radius:999px; padding:8px 12px;
}

/* CTA buttons */
.cta{ display:flex; flex-wrap:wrap; gap:12px; }
.btn{
  appearance:none; border:none; cursor:pointer;
  padding:14px 18px; border-radius:14px; font-weight:700;
  text-decoration:none; display:inline-flex; align-items:center; gap:10px;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn.primary{
  color:#fff; background:#111; box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.btn.primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.btn.ghost{
  color:#111; background:#fff; border:1px solid var(--border);
}
.btn.ghost:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }

/* Info panel (right) */
.info{
  align-self:center;
  padding: clamp(18px, 1vw, 24px);
  border-left:1px solid var(--border);
}
.info .row{ display:flex; align-items:flex-start; gap:12px; margin: 12px 0; }
.info .label{ min-width:110px; color:var(--muted); font-size:.92rem; }
.info a{ color:inherit; text-decoration: none; border-bottom:1px dashed #999; }
.info a:hover{ border-bottom-color:#111; }

/* Signature footer */
.footer{
  color:var(--muted);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-block: 28px 36px;
  border-top:1px dashed var(--border);
  font-size:.95rem;
}
.footer .dots{
  display:flex; gap:10px; align-items:center;
}
.footer .dot{ width:12px; height:12px; border-radius:50%; background:#111; opacity:.9; }
.footer .dot:nth-child(2){ animation: bounce 1.8s infinite ease-in-out; }
.footer .dot:nth-child(1){ animation: bounce 1.8s infinite ease-in-out .2s; }

@keyframes bounce{
  0%, 100% { transform: translateY(0); opacity:.9; }
  50% { transform: translateY(-6px); opacity:1; }
}

/* Decorative twin dots floating on the right side of the hero */
.decor{
  position:absolute; right: clamp(16px, 3vw, 28px); top: 22px;
  display:flex; flex-direction:column; gap:16px; opacity:.08; filter:contrast(120%);
}
.decor .big{ width:68px; height:68px; border-radius:50%; background:#000; }
.decor .big:nth-child(1){ animation:float 6s ease-in-out infinite; }
.decor .big:nth-child(2){ animation:float 6s ease-in-out infinite 1.3s; }

@keyframes float{
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(8px) }
}

/* Utility */
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
hr{ border:none; border-top:1px dashed var(--border); margin:24px 0; }
.small{ font-size:.9rem; color:var(--muted); }


/* --- Contact/RDV cards --- */
.card{
  position:relative;
  margin-top: clamp(22px, 6vh, 56px);
  background:var(--card, #fff);
  border:1px solid var(--border, #e6e6e6);
  border-radius:24px;
  box-shadow: var(--shadow, 0 12px 40px rgba(0,0,0,.05));
  overflow:hidden;
  padding: clamp(28px, 5vw, 72px);
}
.contact-form{ margin-top: 16px; }
.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 700px){
  .form-grid{ grid-template-columns: 1fr; }
}
.field{ display:flex; flex-direction:column; gap:8px; }
label{ font-weight:600; font-size:.95rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea{
  appearance:none;
  border:1px solid var(--border, #e6e6e6);
  border-radius:12px;
  background:#fff;
  padding:14px 14px;
  font: inherit;
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease;
}
textarea{ resize:vertical; }
input:focus, select:focus, textarea:focus{ border-color:#c9c9c9; box-shadow: 0 0 0 4px rgba(0,0,0,.04); }
.small{ font-size:.95rem; opacity:.9; }
.visually-hidden{ position:absolute!important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }
.form-status{ margin-top: 10px; min-height: 1.2em; }
.form-status.success{ color: #0a7a2f; }
.form-status.error{ color: #a31212; }

/* CSS ANIMATION APPARITION FORMULAIRE*/

 /* Fallback si tu préfères masquer via classe en plus de [hidden] */
.is-hidden { display: hidden; } 

/* Petit effet */
#contact:not(.is-hidden), #rdv:not(.is-hidden) {
  animation: fadeIn .2s ease-out;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); }
                    to   { opacity: 1; transform: translateY(0); } }