/* Paris Adresse — fondations
   Palette tiree de la plaque de rue parisienne emaillee : vert fonce, lettres
   blanches, filet blanc. Fond pierre de taille froide (pas creme), accent
   laiton des portes cocheres, utilise avec parcimonie. */

:root{
  --plaque:      #0d3b2f;   /* vert emaille des plaques de rue */
  --plaque-deep: #072520;   /* fond le plus sombre */
  --plaque-soft: #17584a;   /* vert eclairci, filets et etats actifs */
  --stone:       #eceae4;   /* pierre de taille, fond de page */
  --stone-warm:  #e3e0d7;   /* pierre plus soutenue, aplats */
  --paper:       #ffffff;
  --ink:         #131b18;   /* texte courant */
  --zinc:        #5c6663;   /* texte secondaire, toitures de zinc */
  --zinc-line:   #cdccc4;   /* filets */
  --brass:       #a8762b;   /* laiton, accent rare */

  --serif: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans:  "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gut: clamp(1.1rem, 4vw, 2.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
                        transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.1;
             margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:clamp(2.6rem, 6.5vw, 4.9rem); }
h2{ font-size:clamp(1.9rem, 4vw, 2.9rem); }
h3{ font-size:clamp(1.25rem, 2.2vw, 1.6rem); }
h4{ font-size:1.0625rem; font-family:var(--sans); font-weight:600; letter-spacing:0; }

p{ margin:0 0 1.15em; max-width:68ch; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
ul{ margin:0 0 1.15em; padding-left:1.15em; }
li{ margin-bottom:.35em; }

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

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--plaque); color:#fff; padding:.7rem 1.1rem;
}
.skip:focus{ left:0; }

/* ------------------------------------------------------------------ */
/* La plaque de rue. C'est l'objet central du site : elle nomme chaque  */
/* appartement par son adresse reelle. Filet blanc interieur compris.   */
/* ------------------------------------------------------------------ */
.plaque{
  position:relative; display:inline-block;
  background:var(--plaque); color:#fff;
  padding:.5rem .9rem .55rem; border-radius:5px;
  text-align:center; text-decoration:none;
  font-family:var(--sans); line-height:1.15;
}
.plaque::after{
  content:""; position:absolute; inset:3px;
  border:1px solid rgba(255,255,255,.8); border-radius:3px;
  pointer-events:none;
}
.plaque__arr{
  display:block; font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; opacity:.82; margin-bottom:.12em;
}
.plaque__street{
  display:block; font-size:.9rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
}
/* Precision ajoutee quand deux appartements partagent la meme adresse. */
.plaque__note{
  display:block; margin-top:.22em; padding-top:.22em;
  border-top:1px solid rgba(255,255,255,.35);
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; opacity:.85;
}
.plaque--sm .plaque__street{ font-size:.74rem; }
.plaque--sm .plaque__arr{ font-size:.53rem; }
.plaque--sm .plaque__note{ font-size:.5rem; }
.plaque--lg .plaque__note{ font-size:.66rem; }
.plaque--lg{ padding:.75rem 1.4rem .85rem; }
.plaque--lg .plaque__street{ font-size:1.25rem; }
.plaque--lg .plaque__arr{ font-size:.68rem; }

/* Boutons ---------------------------------------------------------- */
.btn{
  display:inline-block; font-family:var(--sans); font-size:.97rem; font-weight:600;
  padding:.85rem 1.6rem; border:1px solid transparent; border-radius:3px;
  text-decoration:none; cursor:pointer; background:none;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid{ background:var(--plaque); color:#fff; }
.btn--solid:hover{ background:var(--plaque-soft); }
.btn--light{ background:var(--stone); color:var(--plaque-deep); }
.btn--light:hover{ background:#fff; }
.btn--line{ border-color:currentColor; }
.btn--line:hover{ background:var(--plaque); color:#fff; border-color:var(--plaque); }
.btn--wide{ display:block; width:100%; text-align:center; }