/* Archers du Tréry — maquette « La ligne de tir » */
:root{
  --encre:#17191C;      /* silhouette du logo */
  --gris:#5A6168;
  --ciel:#4DAEE0;       /* vagues du logo */
  --bleu:#1B5E8C;       /* liens, actions (AA sur blanc) */
  --pre:#3F6B2A;        /* prairie de Charroi */
  --givre:#EEF3F5;      /* fond froid, sol du boulodrome */
  --blanc:#FFFFFF;
  --or:#F2B705; --rouge:#D7262E; --bleucible:#2E8BD0; /* blason FITA, signature seulement */
  --titre:"Sansita",Georgia,serif;
  --texte:"Atkinson Hyperlegible",Verdana,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--texte);font-size:1.0625rem;line-height:1.6;color:var(--encre);background:var(--blanc)}
img{max-width:100%;display:block;height:auto}
a{color:var(--bleu);text-underline-offset:.18em}
a:hover{color:var(--encre)}
:focus-visible{outline:3px solid var(--ciel);outline-offset:3px}
h1,h2,h3{font-family:var(--titre);font-weight:800;line-height:1.05;margin:0 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:1.45rem;font-weight:700}
p{margin:0 0 1em;max-width:66ch}
.demo{margin:0;background:var(--encre);color:#fff;font-size:.85rem;text-align:center;padding:.45rem 1rem}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}

/* En-tête */
.tete{border-bottom:2px solid var(--encre)}
.tete .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.marque{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--encre)}
.marque img{width:52px}
.marque b{font-family:var(--titre);font-size:1.35rem;font-weight:800;display:block;line-height:1}
.marque span{font-size:.9rem;color:var(--gris)}
.nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.nav a{color:var(--encre);text-decoration:none;font-weight:700;padding:.3rem 0;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--ciel)}

/* Ouverture */
.ouv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:min(78vh,700px)}
.ouv-texte{padding:clamp(2rem,5vw,4.5rem) clamp(1.25rem,4vw,3.5rem);display:flex;flex-direction:column;justify-content:center}
.ouv h1{font-size:clamp(2.6rem,5.6vw,4.9rem)}
.ouv .chapo{font-size:1.2rem;color:#2b3035}
.ouv-photo{position:relative;margin:0;background:var(--givre)}
.ouv-photo img{width:100%;height:100%;object-fit:cover}
.ouv-photo figcaption{position:absolute;left:0;bottom:0;background:var(--blanc);font-size:.85rem;padding:.4rem .8rem;color:var(--gris)}
.btn{display:inline-block;background:var(--bleu);color:#fff;text-decoration:none;font-weight:700;padding:.8rem 1.2rem;border-radius:3px}
.btn:hover{background:var(--encre);color:#fff}
.btn-lien{font-weight:700;margin-left:1rem}
.actions{margin-top:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 0}

/* Prochain rendez-vous : bande de la ligne de tir */
.ligne{background:var(--encre);color:#fff}
.ligne .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem;padding:1.1rem 0}
.ligne strong{font-family:var(--titre);font-size:1.5rem;font-weight:700}
.ligne .quand{color:var(--ciel);font-weight:700}
.ligne a{color:#fff}

/* Deux terrains */
.section{padding:clamp(3rem,7vw,6rem) 0}
.terrains{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.salle{background:var(--givre);padding:clamp(1.25rem,3vw,2.25rem);border-left:8px solid var(--ciel)}
.horaires{border-collapse:collapse;margin:1rem 0 0;font-size:1rem}
.horaires th,.horaires td{text-align:left;padding:.35rem 1.2rem .35rem 0;border-bottom:1px solid #c9d4da}
.horaires th{font-weight:700}
.couloirs{margin:1.5rem 0 .25rem;width:100%;height:auto}
.legende{font-size:.9rem;color:var(--gris)}
.nature figure{margin:0 0 1rem}
.nature figcaption,.photos figcaption{font-size:.85rem;color:var(--gris);margin-top:.35rem}
.piquets{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;align-items:center;margin:1rem 0 1.4rem}
.piquets svg{width:100%;height:22px}
.piquets b{font-size:.95rem}
.bon{border-top:3px solid var(--pre);padding-top:.8rem;margin-top:1.2rem}
.bon b{color:var(--pre)}

/* Feuille de marque (agenda) */
.feuille{background:var(--givre)}
.marque-tete{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.score{width:100%;border-collapse:collapse;background:var(--blanc);border:2px solid var(--encre)}
.score th,.score td{border:1px solid #9fb0ba;padding:.85rem 1rem;text-align:left;vertical-align:top}
.score thead th{background:var(--encre);color:#fff;font-weight:700;font-size:.95rem;border-color:var(--encre)}
.score td:first-child{font-family:var(--titre);font-weight:700;font-size:1.2rem;white-space:nowrap;width:12.5rem}
.score .lieu{color:var(--gris);white-space:nowrap}
.score tr.passe td{color:#6b737a}
.score tr.passe td:first-child{text-decoration:line-through;text-decoration-color:var(--rouge)}
.score .impact{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;background:var(--or);border:2px solid var(--rouge);margin-right:.5rem;vertical-align:-.05rem}
.fleches{margin-top:1.4rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:baseline}
.fleches b{font-family:var(--titre);font-size:1.3rem}

/* Photos */
.photos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}
.photos figure{margin:0}
.photos img{width:100%;aspect-ratio:4/3;object-fit:cover}
.p-large{grid-column:span 7}.p-moy{grid-column:span 5}.p-tiers{grid-column:span 4}
.p-large img{aspect-ratio:16/10}
.p-moy img{aspect-ratio:auto;height:100%;max-height:100%}
.p-haute img{aspect-ratio:3/4}

/* Pages intérieures */
.page-tete{padding:clamp(2.5rem,6vw,4.5rem) 0 1.5rem;border-bottom:2px solid var(--encre)}
.page-tete h1{font-size:clamp(2.5rem,6vw,4.4rem)}
.deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem)}
.bureau{list-style:none;padding:0;margin:0}
.bureau li{display:grid;grid-template-columns:9rem 1fr;padding:.6rem 0;border-bottom:1px solid #d5dee3}
.bureau li span{color:var(--gris)}
.album h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.album{padding:2.5rem 0;border-top:1px solid #cdd8de}
.album .grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.album .grille img{aspect-ratio:1;object-fit:cover;width:100%}
.coord{font-size:1.1rem;font-weight:700}
.carte img{border:2px solid var(--encre)}

/* Pied */
.pied{background:var(--encre);color:#e9eef1;padding:3rem 0 2rem;margin-top:0}
.pied a{color:#fff}
.pied .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem}
.pied h2{font-size:1.8rem;color:#fff}
.pied-note{grid-column:1/-1;font-size:.85rem;color:#b8c2c8;border-top:1px solid #3a4046;padding-top:1rem;margin:1rem 0 0;max-width:none}

@media (max-width:900px){
  .ouv{grid-template-columns:1fr;min-height:0}
  .ouv-photo{order:-1;aspect-ratio:4/3}
  .terrains,.deux,.pied .wrap{grid-template-columns:1fr}
  .ligne .wrap{grid-template-columns:1fr;gap:.3rem}
  .p-large,.p-moy,.p-tiers{grid-column:span 12}
  .p-moy img{aspect-ratio:4/3;height:auto}
  .album .grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .tete .wrap{flex-direction:column;align-items:flex-start;gap:.5rem}
  .nav{gap:1rem}
  .score thead{display:none}
  .score,.score tbody,.score tr,.score td{display:block;width:100%}
  .score tr{border-bottom:2px solid var(--encre);padding:.6rem .2rem}
  .score td{border:0;padding:.15rem .8rem}
  .score td:first-child{width:auto}
  .bureau li{grid-template-columns:1fr}
  .btn-lien{margin-left:0;display:block;margin-top:.6rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.demo{max-width:none}
.salle{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-bottom:clamp(3rem,6vw,5rem)}
.salle-plan{margin:0}
.salle-plan .couloirs{margin:0 0 .4rem}
.terrains{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}
.nature-photo{margin:0}
.nature-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.nature-photo figcaption{font-size:.85rem;color:var(--gris);margin-top:.35rem}
@media (max-width:900px){.salle{grid-template-columns:1fr}}
@media (max-width:900px){.terrains{grid-template-columns:1fr}}