/* ==========================================================================
   RABAT GARDEN — PAGE DE MAINTENANCE
   Esthétique marine nocturne : océan, pinède, laiton.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400;1,9..144,500&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --ink:   #0D1210;   /* vert-noir profond, fond */
  --sand:  #EDE6D6;   /* pierre chaude, texte principal */
  --mist:  #AFB8AE;   /* texte secondaire */
  --clay:  #B1673D;   /* terre cuite, CTA */
  --brass: #A9895A;   /* laiton, accents */
  --line:  rgba(250,247,240,.14);

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --wrap: 1240px;
}

*{ box-sizing:border-box; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .scene-video{ display:none; }
}

html,body{ height:100%; }

body{
  margin:0; min-height:100svh;
  display:flex; flex-direction:column;
  overflow-x:hidden;
  background:var(--ink);
  color:var(--sand);
  font-family:var(--sans);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

h1{ margin:0; font-family:var(--serif); font-weight:400; line-height:1.06; }
h1 em{ font-style:italic; color:var(--brass); }

/* ==========================================================================
   FOND SCÈNE — vidéo océan + voile + grain zellige
   ========================================================================== */
.scene{ position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--ink); }
.scene-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.3; filter:saturate(.8) contrast(1.05);
}
.scene-shade{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(47,74,64,.30) 0%, transparent 55%),
    linear-gradient(180deg, rgba(10,14,12,.80) 0%, rgba(10,14,12,.55) 42%, rgba(13,18,16,.88) 100%);
}
.scene-grain{
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(250,247,240,.05) 1px, transparent 0);
  background-size:26px 26px;
  animation:grain 90s linear infinite;
}
@keyframes grain{ to{ background-position:520px 520px; } }

/* filet lumineux tout en haut, effet "rafraîchissement en cours" */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:60; overflow:hidden; }
.progress span{
  display:block; height:100%; width:38%;
  background:linear-gradient(90deg, transparent, var(--brass) 40%, var(--clay) 60%, transparent);
  background-size:200% 100%;
  animation:rail 3.2s linear infinite;
}
@keyframes rail{ to{ background-position:-200% 0; } }

/* ==========================================================================
   EN-TÊTE
   ========================================================================== */
.masthead{
  width:100%;
  padding:clamp(20px,4vw,40px) clamp(20px,5vw,64px);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  animation:fade 1s ease both .05s;
}
.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand-logo{
  height:clamp(34px,4vw,42px); width:auto;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.45));
}
.brand span{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.35rem; letter-spacing:.01em; color:var(--sand);
}
.status{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 16px; white-space:nowrap;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(15,20,17,.45);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sand);
}
.status-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--clay); animation:beat 2.2s ease-out infinite;
}
@keyframes beat{
  0%{ box-shadow:0 0 0 0 rgba(177,103,61,.5); }
  70%{ box-shadow:0 0 0 9px rgba(177,103,61,0); }
  100%{ box-shadow:0 0 0 0 rgba(177,103,61,0); }
}

/* ==========================================================================
   CONTENU CENTRAL
   ========================================================================== */
.stage{
  flex:1 0 auto;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(40px,7vw,72px) clamp(20px,5vw,64px) clamp(48px,8vw,84px);
}
.eyebrow{
  margin:0;
  font-size:.76rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass);
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both .1s;
}
.ornament{
  display:flex; align-items:center; gap:14px; margin:22px 0 26px; color:var(--brass);
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both .2s;
}
.ornament span{ width:52px; height:1px; background:linear-gradient(90deg, transparent, var(--brass)); }
.ornament span:last-child{ transform:scaleX(-1); }
.ornament i{ width:7px; height:7px; background:var(--brass); transform:rotate(45deg); }
.stage h1{
  color:var(--sand);
  font-size:clamp(2.3rem, 5.4vw, 4.4rem);
  max-width:16ch;
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both .3s;
}
.stage .lede{
  margin:22px auto 0; max-width:48ch;
  color:var(--mist); font-size:1.02rem;
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both .4s;
}
.contact{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px;
  margin-top:clamp(28px,4vw,40px);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem, 2vw, 1.3rem);
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both .5s;
}
.contact a{
  color:var(--sand); text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid rgba(169,137,90,.45);
  transition:color .25s ease, border-color .25s ease;
}
.contact a:hover{ color:#fff; border-color:#fff; }
.contact-sep{ color:var(--brass); }

.cta-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  margin-top:clamp(28px,4vw,38px);
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both .6s;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:190px; padding:15px 30px;
  border:1px solid currentColor; border-radius:2px;
  font-family:var(--sans); font-size:.88rem; font-weight:500; letter-spacing:.03em;
  text-decoration:none;
  transition:transform .25s ease, background .25s ease, color .25s ease,
             border-color .25s ease, box-shadow .25s ease;
}
.btn-clay{
  background:var(--clay); border-color:var(--clay); color:#fff;
  box-shadow:0 18px 40px -18px rgba(177,103,61,.55);
}
.btn-clay:hover{
  background:#96502e; border-color:#96502e; transform:translateY(-2px);
  box-shadow:0 22px 44px -18px rgba(177,103,61,.6);
}
.btn-outline{
  color:var(--sand); border-color:rgba(237,230,214,.4);
  background:rgba(15,20,17,.3);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.btn-outline:hover{
  background:var(--sand); color:var(--ink); border-color:var(--sand); transform:translateY(-2px);
}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.mastfoot{
  flex-shrink:0; width:100%;
  padding:0 clamp(20px,5vw,64px) clamp(22px,3vw,34px);
  display:flex; flex-direction:column; align-items:center; gap:18px;
  animation:fade 1s ease both .7s;
}
.social{ display:flex; gap:14px; }
.social a{
  width:40px; height:40px;
  border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--sand);
  transition:border-color .3s ease, color .3s ease, transform .3s ease;
}
.social a:hover{ border-color:var(--brass); color:var(--brass); transform:translateY(-2px); }
.social svg{ width:16px; height:16px; }
.foot-line{
  margin:0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:#7F887D;
}
.foot-sep{ width:32px; height:1px; background:var(--line); }
.clock .js-clock{ color:var(--brass); font-variant-numeric:tabular-nums; }

/* ==========================================================================
   ANIMATIONS D'ENTRÉE
   ========================================================================== */
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:640px){
  .brand span{ font-size:1.15rem; }
  .status{ padding:8px 12px; letter-spacing:.1em; }
  .stage h1{ font-size:clamp(2rem, 9vw, 2.7rem); }
  .contact{ flex-direction:column; gap:8px; }
  .contact-sep{ display:none; }
  .cta-row{ flex-direction:column; width:100%; }
  .btn{ width:100%; }
}