/* ════════════════════════════════════════════
   PAGE D'ACCUEIL — reprise du visuel arsenelepain.fr
   ════════════════════════════════════════════ */

@font-face {
  font-family: "AguilaBold";
  src: url('/static/webfonts/guilaBold/font.woff2') format('woff2'),
       url('/static/webfonts/guilaBold/font.woff') format('woff');
  font-display: swap;
}

.accueil-body {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 100vh;
  font-family: var(--font);
}

.accueil-hero {
  background: url('/static/images/getty.jpg') no-repeat center 15% fixed;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Grandes fenêtres larges (PC, plein écran) : le recadrage `cover` d'une
   photo portrait pousse le sujet beaucoup plus bas à mesure que la fenêtre
   s'élargit — un décalage supplémentaire est nécessaire ici pour garder le
   même cadrage visuel qu'en fenêtre plus étroite. */
@media (min-width: 1200px) {
  .accueil-hero { background-position: center 18%; }
}

.accueil-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #00427f;
  position: sticky;
  top: 0;
  z-index: 20;
}
.accueil-logo { width: 2em; height: auto; display: block; }

.accueil-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-self: start;
}
.accueil-logo-account { width: 1.5em; transform: scaleX(-1); }

.accueil-account-icon {
  grid-column: 3;
  justify-self: end;
  color: #fff;
  display: flex;
  align-items: center;
}
.accueil-account-icon:hover { color: #718daa; }

.accueil-header-centre {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}

.accueil-brand-titre {
  font-family: var(--font-display);
  color: #fff;
  font-size: 1.5rem;
  white-space: nowrap;
}

@media (min-width: 769px) {
  .accueil-brand-titre { font-size: 2.6rem; }
}

.accueil-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1rem;
  margin: 0;
  padding: 0;
}
.accueil-nav a {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  padding: .3rem .6rem;
}
.accueil-nav a:hover { color: #718daa; }
.accueil-nav a.is-active { text-decoration: underline; }

.accueil-announcement {
  text-align: center;
  padding: .5rem .75rem;
  background-color: #FDC500; /* jaune ciré breton */
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a1400;
}

.accueil-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  /* Pousse le texte sous le visage du personnage (photo identique à
     arsenelepain.fr) plutôt que de le centrer verticalement — sans ce
     décalage, le titre recouvre les yeux. */
  padding: 38vh 1.25rem 2.25rem;
}

.accueil-titre {
  font-family: var(--font-display);
  color: #fff;
  margin: 0;
  line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
  text-align: left;
}
.accueil-titre-grand { font-size: 2.1rem; }
.accueil-titre-petit { font-size: 1.3rem; }

.accueil-desc {
  color: #fff;
  max-width: 26rem;
  margin: .35rem 0 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
  font-size: 1.05rem;
  line-height: 1.3;
  text-align: left;
}
.accueil-sous-titre {
  font-family: var(--font-display);
  color: #fff;
  font-size: 2rem;
  margin: -.4rem 0 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.accueil-cta {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 1em 2em;
  border-radius: 5px;
  background-color: #00427f;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  transition: background-color .2s;
}
.accueil-cta:hover { background-color: #718daa; opacity: 1; }

@media (min-width: 769px) {
  .accueil-titre-grand { font-size: 4.2rem; }
  .accueil-titre-petit { font-size: 2.6rem; }
  .accueil-sous-titre { font-size: 2rem; }
}