body {
  background-color: #a2ad93;
  color: #f4d1ac;
  font-family: "Baskervville", sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-box {
  text-align: center;
  max-width: 400px;
  width: 100%;
}

h1 {
  margin-bottom: 2rem;
  font-size: 3rem;
  color: #f4d1ac;
}

.btn-custom {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.9rem;
  font-size: 1.2rem;
  font-weight: 400;
  color: #f4d1ac;
  border: none;
  border-radius: 12px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-primary-custom {
  background-color: #da7417;
}

.btn-primary-custom:hover {
  background-color: #e5971e;
  transform: scale(1.03);
}

.btn-secondary-custom {
  background-color: #6a280a;
}

.btn-secondary-custom:hover {
  background-color: #da7417;
  transform: scale(1.03);
}

/* Fonts (TTF) - ajuster les noms de fichiers si différent */
@font-face {
  font-family: 'Baskervville';
  src: url('fonts/Baskervville-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Baskervville';
  src: url('fonts/Baskervville-VariableFont_wght.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FloralisCouture';
  src: url('fonts/Floralis Couture.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Couleurs demandées */
:root{
  --primary: #f4d1ac;   /* h1, tagline, boutons (background) */
  --btn-text: #692708;  /* texte des boutons et logos */
  --overlay-alpha: rgba(0,0,0,0.25);
}

/* Reset / Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Baskervville', serif;color:var(--primary);}

/* Background image */
body{
  background-image: url('images/background.jpg');
  background-size: cover;
  background-position: center;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow: hidden;
}
body::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.25);
    z-index:-1;
}

/* Card overlay */
.card-overlay{
  background: var(--overlay-alpha);
  border-radius:16px;
  max-width:350px;
  width:100%;
  margin:20px;
  padding:20px;
  text-align:center;
  backdrop-filter: blur(2px);
}

/* Avatar */
.avatar img{
  width:100px;
  height:100px;
  object-fit:cover;
  border-radius:50%;
  display:block;
  margin:0 auto 12px;
  border:3px solid rgba(255,255,255,0.06);
}

/* Titles */
h1{
  font-family:'FloralisCouture', serif;
  font-size:1.9rem;
  margin:0 0 8px;
  line-height:1;
  color:var(--primary);
}

.tagline{
  font-size:0.75rem;
  margin: 15px 0;
  color:var(--primary);
}
.tagline em{
  font-family:'Baskervville', serif;
  font-style:italic;
}

.links-vertical{
  display:flex;
  flex-direction:column;
  gap:15px;
  margin:6px 10px;
}
.btn{
  display:inline-block;
  text-decoration:none;
  padding:10px 12px;
  border-radius:10px;
  font-size:1rem;
  font-weight:600;
  color:var(--btn-text);
  background:var(--primary);
  transition:all .12s ease;
  text-align:center;
box-shadow: 4px 4px 0px 0px #e38463;
}
.btn:hover{
    transform:translate(2px, 2px);
    box-shadow: 2px 2px 0px 0px #e38463;

}

/* Social small round buttons (FontAwesome icons inside) */
.social-row{
  display:flex;
  gap:20px;
  justify-content:center;
  margin-top:20px;
}
.social-btn{
  width:35px;
  height:35px;
  color:var(--btn-text);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  text-decoration:none;
  transition: transform .12s ease-in-out;
  transform: scale(1);
  overflow:hidden;
}
.social-btn i{
  font-size:1.05rem;
}
.social-btn:hover{
  transform: scale(1.1);
}

/* Responsive tweaks */
@media (min-width:420px){
  h1{ font-size:2.2rem; }
  .avatar img{ width:120px; height:120px; }
}