/* ════════════════════════════════════════════
   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 {
  /* Sur mobile, le ratio portrait de la photo est proche de celui de la
     hero (82vh) : le cadrage `cover` est presque toujours bordé par la
     hauteur, pas par la largeur, donc l'enfant tient en entier verticalement
     et seuls les côtés de l'image sont rognés. */
  /* Voile sombre superposé à la photo (dégradé du coin haut-gauche, où se
     trouvent le titre et le texte blancs, vers transparent) : la photo étant
     recadrée différemment selon la largeur d'écran, une zone claire du mur
     en brique peut se retrouver sous le texte — le `text-shadow` seul ne
     suffit alors plus à garantir un contraste conforme WCAG 1.4.3. */
  background:
    linear-gradient(135deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,0) 65%),
    url('/static/images/getty.jpg') no-repeat center 8% fixed;
  background-size: cover;
  /* Volontairement moins que 100vh : le bas de la page suivante doit
     dépasser un peu à l'écran pour indiquer qu'il y a du contenu à
     découvrir sous la hero. */
  min-height: 82vh;
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) {
  .accueil-hero { background-position: center 15%; }
}

/* 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;
  padding: 3.5rem 1.25rem 2.25rem;
}

@media (min-width: 600px) {
  .accueil-main { padding-top: 2.25rem; }
}

@media (min-width: 1200px) {
  .accueil-main { padding-top: 3rem; }
}

.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;
  max-width: 42%;
}
.accueil-titre-grand { font-size: 2.1rem; }
.accueil-titre-petit { font-size: 1.3rem; }

.accueil-desc {
  color: #fff;
  max-width: 42%;
  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;
}

@media (min-width: 600px) {
  .accueil-titre, .accueil-desc { max-width: 26rem; }
}
.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; }
}

/* Remonte le bloc "Chaque semaine..." juste sous la hero, en réduisant
   l'espace généré par .content/h2 (padding pensé pour les pages de contenu
   classiques, pas pour enchaîner directement sur la hero plein écran). */
#contenu-principal.content { padding-top: 1em; }
#contenu-principal.content > h2:first-child { padding-top: 0; }