/*
Theme Name: Avon'ânes
Theme URI: https://avonanes.com
Author: Association Avon'ânes
Description: Thème minimaliste pour l'association Avon'ânes
Version: 1.0
*/

/* ===== VARIABLES ===== */
:root{
  --bg: #f7f3ea;
  --sage: #2f6b4f;
  --text: #2a241d;
  --muted:#6b6257;
  --border:#e6ded2;
  --radius: 18px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{
  width:min(1120px, calc(100% - 2rem));
  margin-inline:auto;
}

/* ===== HEADER ===== */
.header{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid var(--border);
  z-index:10;
}
.header__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:900;
}
.brand img{
  height:42px;
}

/* ===== HERO ===== */
.hero-photo__img{
  width:100%;
  height:70vh;
  object-fit:cover;
}

/* ===== INTRO ===== */
.intro{
  padding:2.5rem 0;
}
.intro h1{
  margin:0 0 .5rem;
}
.intro p{
  color:var(--muted);
  font-size:1.05rem;
}

/* ===== FOOTER ===== */
.footer{
  border-top:1px solid var(--border);
  padding:1rem 0;
  background:#fff;
  margin-top:3rem;
}

/* ===== MENU ===== */
.menu,
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu {
  display: flex;
  gap: 1.2rem;
}

.menu li a {
  font-weight: 600;
  color: var(--text);
}

.menu li a:hover {
  text-decoration: underline;
}

/* ===== HEADER RIGHT ===== */
.header__right{
  display:flex;
  align-items:center;
  gap:1.2rem;
}

/* ===== SOCIALS IN HEADER ===== */
.socials--header{
  display:flex;
  gap:.6rem;
}

.socials--header a{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--sage);
  color:#fff;
  transition:transform .2s ease, opacity .2s ease;
}

.socials--header a:hover{
  transform:scale(1.05);
  opacity:.9;
}

.socials--header svg{
  width:16px;
  height:16px;
  fill:currentColor;
}

/* ===== HOME LAYOUT (content + right block) ===== */
.intro__layout{
  display:flex;
  align-items:flex-start;
  gap:2rem;
}

.intro__content{
  flex:1;
  min-width:0;
}

/* ===== Signup block ===== */
.signup{
  width:min(340px, 100%);
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem;
}

.signup__title{
  margin:0 0 .4rem;
  font-size:1.15rem;
}

.signup__text{
  margin:0 0 .9rem;
  color:var(--muted);
  font-size:.98rem;
}

.signup__form{
  display:flex;
  gap:.6rem;
}

.signup__form input{
  flex:1;
  padding:.75rem .85rem;
  border-radius:12px;
  border:1px solid var(--border);
  outline:none;
}

.signup__form input:focus{
  border-color:rgba(47,107,79,.6);
  box-shadow:0 0 0 3px rgba(47,107,79,.15);
}

.signup__form button{
  padding:.75rem .9rem;
  border-radius:12px;
  border:0;
  background:var(--sage);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

.signup__fine{
  margin:.8rem 0 0;
  color:var(--muted);
  font-size:.85rem;
}

/* mobile: block goes under content */
@media (max-width: 860px){
  .intro__layout{
    flex-direction:column;
  }
  .signup{
    width:100%;
  }
}