@charset "utf-8";

/* ==========================================================================
   Les Archers de Namur — feuille de styles
   Le gabarit reprend les métriques relevées sur le site d'origine
   (Google Sites) par mesure des styles calculés à 1440 / 1024 / 768 / 375 px.

   Modèle de mise en page :
     .section    padding vertical de 24px (56px pour le bandeau)
     .container  largeur max 1280px, gouttière 48px
     .grid       grille de 12 colonnes
     .col        cellule de colonne, retrait horizontal de 14.797px
     .block      bloc de texte, retrait de 8px
   ========================================================================== */

:root {
  --brand: #4b2c82;          /* violet du club */
  --on-brand: #f9f9f9;       /* texte sur violet */
  --ink: #1c1c1c;            /* texte courant */
  --accent: #ff0000;         /* astérisque des tarifs */
  --page: #fff;

  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;

  --content-max: 1280px;
  --content-pad: 48px;
  --col-pad: 14.797px;
  --block-pad: 8px;
  --header-h: 56px;
  --banner-h: 340px;
  --section-pad: 24px;
  --para-gap: 16px;
}

/* --------------------------------------------------------------- reset --- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;          /* pied de page collé en bas des pages courtes */
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/24px var(--font);
}

main { flex: 1 0 auto; }

img { border: 0; }

h1, h2, h3, p, figure, ul, ol, address { margin: 0; padding: 0; }

ul { list-style: none; }

a { color: inherit; }

/* ------------------------------------------------------- lien d'évitement - */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus { left: 0; }

/* ------------------------------------------------- conteneur et colonnes -- */

.container {
  max-width: var(--content-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.col { padding-inline: var(--col-pad); }

/* Largeurs relevées sur l'original */
.col--12 { grid-column: 1 / -1; }
.col--8  { grid-column: 3 / span 8; }
.col--6  { grid-column: span 6; }

.block { padding: var(--block-pad); }

/* Interligne entre paragraphes d'un même bloc */
.block > * + * { margin-top: var(--para-gap); }

/* ------------------------------------------------------------- bandeau --- */

.banner {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  min-height: var(--banner-h);
  padding-block: 56px;
  background: var(--brand);
  color: var(--on-brand);
  text-align: center;
}

.banner__media {
  position: absolute;
  inset: 0;
  background-image: url("../img/banner.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Le titre de page structure le document et sert aux lecteurs d'écran ;
   le bandeau d'origine n'affiche aucun texte. */
.banner h1,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------- entête --- */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--on-brand);
}

.site-header__logo {
  display: block;
  flex: none;
  margin-left: 16px;
}

.site-header__logo img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.site-nav {
  flex: 1 1 auto;
  padding-right: 48px;   /* aligne le texte du dernier lien sur la gouttière */
}

.site-nav__list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
}

.site-nav__list a {
  display: inline-block;
  max-width: 240px;
  padding: 10px 12px;
  color: var(--on-brand);
  font-size: 16px;
  line-height: 18px;
  text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible { opacity: .82; }

.site-nav__list a[aria-current="page"] { font-weight: 700; }

.nav-toggle {
  display: none;
  flex: none;
  margin-left: auto;
  margin-right: 12px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--on-brand);
  cursor: pointer;
}

.nav-toggle svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* ------------------------------------------------------------- sections -- */

.section { padding-block: var(--section-pad); }

/* Espace vide du gabarit d'origine, conservé pour respecter le rythme
   vertical de la page (bloc de texte vide de 40px + 2 x 24px). */
.section--spacer { height: 88px; }

/* Section sur fond violet (page « Équipe ») */
.section--brand {
  background: var(--brand);
  color: var(--on-brand);
}

.section.section--brand h2 { color: #fff; }

/* ----------------------------------------------------------- typographie - */

.text {
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

.section h2 {
  color: var(--brand);
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}

.text--brand  { color: var(--brand); }
.text--bold   { font-weight: 700; }
.text--15     { font-size: 20px; line-height: 30px; }      /* 15pt */
.text--14     { font-size: 18.6667px; line-height: 28px; } /* 14pt */
.text--italic { font-style: italic; }

.u { text-decoration: underline; }

.text--16pt { font-size: 21.3333px; line-height: 1.5; }   /* 16pt en ligne */

/* Rythme relevé sur la page « Adresse » : saut de ligne de 18px avant le
   libellé, puis une ligne vide de 19.2px avant l'adresse elle-même. */
.address-label { margin-top: 18px !important; line-height: 19.2px; }
.address-label + .address { margin-top: 19.2px !important; }

/* Le paragraphe reste en 16px : ce sont les éléments en ligne qui portent
   les corps (astérisque 14pt, texte 10pt), comme dans l'original. */
.note {
  font-size: 16px;
  line-height: 1.5;   /* relatif : les corps en ligne fixent la hauteur */
  font-style: italic;
  text-align: left;
}

.note__text { font-size: 13.3333px; }

/* L'astérisque est composé en 14pt dans l'original ; c'est lui qui fixe
   la hauteur de ligne de la note. */
.note__mark { color: var(--accent); font-style: italic; }
.note .note__mark { font-size: 18.6667px; }

.text a,
.note a,
.site-footer a { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------- tarifs - */

.pricing h2 { text-decoration: underline; }

/* Titres de la page « Tarifs » : corps de 14pt et marges relevées sur
   l'original (24px avant le premier titre, 29.333px entre les deux). */
.section h2.text--14 { font-size: 18.6667px; font-weight: 400; line-height: 28px; }

.tarifs-intro h2 { margin-top: 24px; }
.tarifs-intro h2 + h2 { margin-top: 29.333px; }
.tarifs-intro h2 + p { margin-top: 16px; }

/* Les blocs des colonnes tarifaires utilisent un retrait vertical de 14px
   (comme ceux du pied de page) et non de 8px. */
.pricing .block { padding-block: 14px; }

.pricing .price {
  color: var(--brand);
  font-weight: 700;
  text-align: center;
}

/* ---------------------------------------------------------------- équipe - */

/* Trois fiches de 2 unités : colonnes 3-4, 6-7 et 9-10. */
.team { display: contents; }

.team__member { padding-inline: 4.922px; }

.team__member:nth-child(1) { grid-column: 3 / span 2; }
.team__member:nth-child(2) { grid-column: 6 / span 2; }
.team__member:nth-child(3) { grid-column: 9 / span 2; }

.team__name {
  font-size: 18.6667px;   /* 14pt */
  font-weight: 400;
  line-height: 28px;
  text-align: center;
}

/* Reprend la ligne vide du gabarit d'origine entre le nom et la fonction
   (saut de ligne de 18px + retrait de 10.667px) */
.team__member .block > .team__name + .team__role { margin-top: 28.667px; }

.team__role {
  font-size: 13.3333px;   /* 10pt */
  line-height: 20px;
  text-align: center;
}

.team__role + .team__role { margin-top: 10.667px; }

/* -------------------------------------------------------------- adresse -- */

.address {
  font-style: normal;
  line-height: 19.2px;   /* 1.2 */
  text-align: center;
}

.address .city { font-style: italic; }

.map {
  position: relative;
  padding-top: 44.1074523397%;   /* ratio relevé sur l'original */
}

.map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------- contact - */

.contact-form {
  max-width: 592px;
  margin-inline: auto;
  text-align: left;
}

.contact-form label {
  display: block;
  margin-bottom: 4px;
  color: var(--brand);
  font-weight: 700;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--brand);
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-form button {
  padding: 12px 28px;
  border: 1px solid var(--brand);
  border-radius: 4px;
  background: var(--brand);
  color: var(--on-brand);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.contact-form button:hover { background: #3b2268; }

.required { color: var(--accent); }

/* -------------------------------------------------------- pied de page --- */

.site-footer {
  flex: none;
  padding-block: var(--section-pad);
  background: var(--brand);
  color: var(--on-brand);
}

/* Bloc de texte du pied de page : retrait vertical de 14px (relevé) */
.site-footer .block { padding-block: 14px; }

.social {
  display: flex;
  justify-content: center;
  align-items: center;
}

.social li { display: flex; }

.social a {
  display: block;
  margin: 9px;
}

.social img {
  display: block;
  width: 32px;
  height: 32px;
}

/* ------------------------------------------------------------ responsive - */

@media (max-width: 767px) {
  :root { --content-pad: 5px; }

  .nav-toggle { display: block; }

  .site-nav {
    position: absolute;
    top: var(--header-h);
    right: 0;
    left: 0;
    padding: 0;
    background: var(--brand);
  }

  .site-nav[hidden] { display: none; }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__list a {
    max-width: none;
    padding: 14px 16px;
  }

  .section h2 { font-size: 22.6667px; line-height: 34px; }

  .col--8,
  .col--6 { grid-column: 1 / -1; }

  .team__member:nth-child(1),
  .team__member:nth-child(2),
  .team__member:nth-child(3) {
    grid-column: 1 / -1;
    margin-bottom: 24px;
  }
}

@media (max-width: 479px) {
  :root { --banner-h: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header,
  .banner__media,
  .social { display: none; }

  body { color: #000; }
}