/* =========================================================
   PM RENOVATIONS — thème commun
   (index.html, traceur-plan.html)

   Inspiré de pmrenovations.ch : fond sombre, dégradé
   bleu nuit en haut de page, cartes sombres à angles
   droits, texte blanc en capitales, boutons bleus,
   accent orange.
========================================================= */

:root{
  --pmr-dark:#212529;
  --pmr-navy:#01017a;
  --pmr-blue:#0d6efd;
  --pmr-blue-hover:#0b5ed7;
  --pmr-orange:#f36c01;
  --pmr-success:#3ddc84;
  --pmr-danger:#ff6b6b;

  --pmr-text:#ffffff;
  --pmr-muted:#adb5bd;

  --pmr-card:rgba(33,37,41,.92);
  --pmr-card-soft:rgba(255,255,255,.04);
  --pmr-field:rgba(255,255,255,.06);
  --pmr-border:rgba(255,255,255,.12);

  --pmr-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --pmr-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  color-scheme:dark;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  font-family:var(--pmr-font);
  color:var(--pmr-text);
  background:var(--pmr-dark);
}

/* Dégradé « linéaire simple » du site */
body{
  background:
    linear-gradient(
      to bottom,
      rgba(1,1,122,1) 0%,
      rgba(1,1,122,0) 70%
    )
    no-repeat,
    var(--pmr-dark);
  background-size:100% 100vh;
}

button,select,input,textarea{
  font:inherit;
}


/* ---------- Barre de navigation ---------- */

.pmr-nav{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  background:var(--pmr-dark);
  position:relative;
  z-index:10;
}

.pmr-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--pmr-text);
  text-decoration:none;
}

.pmr-brand img{
  width:42px;
  height:42px;
}

.pmr-brand strong{
  display:block;
  font-size:15px;
  font-weight:500;
  letter-spacing:.04em;
}

.pmr-brand small{
  display:block;
  font-size:9px;
  color:var(--pmr-muted);
  letter-spacing:.08em;
  margin-top:3px;
}

.pmr-links{
  display:flex;
  gap:26px;
}

.pmr-links a{
  color:rgba(255,255,255,.55);
  text-decoration:none;
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.pmr-links a:hover,
.pmr-links a.active{
  color:var(--pmr-text);
}


/* ---------- Cartes ---------- */

.pmr-card{
  background:var(--pmr-card);
  border:1px solid var(--pmr-border);
  border-radius:0;
}


/* ---------- Boutons ---------- */

.pmr-btn,
button.pmr-btn{
  border:1px solid var(--pmr-blue);
  border-radius:6px;
  background:var(--pmr-blue);
  color:#fff;
  padding:8px 14px;
  cursor:pointer;
  font-size:13px;
  letter-spacing:.02em;
  text-transform:uppercase;
  transition:background .15s ease,border-color .15s ease;
}

.pmr-btn:hover{
  background:var(--pmr-blue-hover);
  border-color:var(--pmr-blue-hover);
}

.pmr-btn.secondary{
  background:transparent;
  border-color:var(--pmr-border);
  color:var(--pmr-text);
}

.pmr-btn.secondary:hover{
  border-color:var(--pmr-blue);
  background:rgba(13,110,253,.12);
}

.pmr-btn.danger{
  background:transparent;
  border-color:rgba(255,107,107,.45);
  color:var(--pmr-danger);
}

.pmr-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}


/* ---------- Champs ---------- */

.pmr-label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--pmr-muted);
  margin-bottom:6px;
}

.pmr-field,
select.pmr-field,
input.pmr-field{
  width:100%;
  padding:8px 10px;
  background:var(--pmr-field);
  border:1px solid var(--pmr-border);
  border-radius:6px;
  color:var(--pmr-text);
}

.pmr-field:focus{
  outline:none;
  border-color:var(--pmr-blue);
  box-shadow:0 0 0 3px rgba(13,110,253,.25);
}

select.pmr-field option{
  background:var(--pmr-dark);
}


/* ---------- Titres de section ---------- */

.pmr-title{
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--pmr-text);
  margin:0 0 12px;
}

.pmr-accent{
  color:var(--pmr-orange);
}


/* ---------- Barres de défilement ---------- */

*{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.2) transparent;
}


/* ---------- Téléphone (modif. 2026-10-08) ----------
   Barre de navigation compacte sur toutes les pages : liens
   gardés (défilement horizontal) au lieu d'être masqués. */

@media(max-width:760px){

  .pmr-nav{
    height:56px;
    padding:0 12px;
    gap:12px;
  }

  .pmr-brand{
    gap:8px;
    flex-shrink:0;
  }

  .pmr-brand img{
    width:32px;
    height:32px;
  }

  .pmr-brand strong{
    font-size:12px;
  }

  .pmr-brand small{
    display:none;
  }

  .pmr-links{
    gap:14px;
    min-width:0;
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .pmr-links::-webkit-scrollbar{
    display:none;
  }

  .pmr-links a{
    font-size:11px;
    padding:8px 0;
  }
}

@media(max-width:420px){

  .pmr-brand span{
    display:none;
  }
}

/* Téléphone à l'horizontale : barre de navigation basse */
@media(max-height:500px) and (orientation:landscape){

  .pmr-nav{
    height:44px;
    padding:0 12px;
  }

  .pmr-brand img{
    width:28px;
    height:28px;
  }

  .pmr-brand small{
    display:none;
  }
}