/* ============================================================
   Club Taurin Prouvenço Aficioun — feuille de style
   Identité du club : BLEU & JAUNE
   ============================================================ */
:root{
  --blue:#0E8AC2;
  --blue-deep:#0A6C99;
  --blue-ink:#0B3A54;
  --yellow:#F7C600;
  --yellow-deep:#DDB000;
  --yellow-soft:#FFF6CE;
  --ink:#1B1B1A;
  --paper:#FFFFFF;
  --soft:#F2F7FA;
  --line:#E2E6EA;
  --muted:#586470;
  --maxw:1140px;
  --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.6;
}
img{max-width:100%; display:block}
a{color:var(--blue-deep); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
h1,h2,h3{font-family:"Zilla Slab",Georgia,serif; line-height:1.12; margin:0}
.eyebrow{
  font-family:"Inter",sans-serif; text-transform:uppercase; letter-spacing:.18em;
  font-size:12px; font-weight:700; color:var(--blue);
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:10px;
  font-weight:600; font-size:15px; text-decoration:none;
  transition:background .15s, color .15s, border-color .15s;
  border:1.5px solid transparent; cursor:pointer;
}
.btn:hover{text-decoration:none}
.btn-gold{background:var(--yellow); color:#3A2E00}
.btn-gold:hover{background:var(--yellow-deep)}
.btn-navy{background:var(--blue); color:#fff}
.btn-navy:hover{background:var(--blue-deep)}
.btn-ghost{border-color:rgba(255,255,255,.6); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-outline{border-color:var(--blue); color:var(--blue-deep)}
.btn-outline:hover{background:var(--blue); color:#fff}

/* ---------- En-tête / navigation ---------- */
.site-header{background:var(--blue); position:sticky; top:0; z-index:50;
  box-shadow:0 2px 12px rgba(11,58,84,.20)}
.site-header .wrap{max-width:1240px}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:74px}
.brand{display:flex; align-items:center; gap:12px; color:#fff}
.brand:hover{text-decoration:none}
.brand-logo{height:52px; width:auto}
.brand-txt{display:flex; flex-direction:column; line-height:1.1}
.brand-nom{font-family:"Zilla Slab",serif; font-weight:700; font-size:17px; color:#fff; white-space:nowrap}
.brand-lieu{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--yellow)}
.nav{display:flex; align-items:center; gap:2px}
.nav a{color:#EAF6FD; padding:9px 10px; border-radius:8px; font-size:14.5px; font-weight:500; white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.14); text-decoration:none}
.nav a.actif{color:#fff; background:rgba(255,255,255,.20)}
.nav .nav-cta{background:var(--yellow); color:#3A2E00; margin-left:8px; font-weight:700}
.nav .nav-cta:hover{background:var(--yellow-deep)}
.nav .nav-ins{display:inline-flex; align-items:center; gap:7px; background:#fff; color:var(--blue-ink);
  margin-left:8px; padding:9px 15px; border-radius:8px; font-weight:700; font-size:14.5px}
.nav .nav-ins:hover{background:#EAF6FD; text-decoration:none}
.nav .nav-ins svg{width:16px; height:16px}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer}
.nav-toggle span{width:26px; height:2.5px; background:#fff; border-radius:2px; transition:.2s}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(160deg,var(--blue) 0%, var(--blue-deep) 100%); color:#fff;
  position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; top:0; right:0; width:44%; height:100%;
  background:var(--yellow); opacity:.12; transform:skewX(-13deg); transform-origin:top right}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:linear-gradient(90deg,var(--yellow) 0 50%, var(--blue-ink) 50% 100%)}
.hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr;
  gap:40px; align-items:center; padding:56px 22px 62px}
.hero-logo img{width:100%; max-width:360px; margin:0 auto;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.32))}
.hero h1{font-size:clamp(30px,5vw,50px); color:#fff; letter-spacing:.005em}
.hero .lieu{margin:10px 0 0; color:#E7F4FB; font-size:16px; letter-spacing:.02em}
.hero .accroche{margin:18px 0 26px; color:#F1F9FD; font-size:17px; max-width:42ch}
.hero .actions{display:flex; flex-wrap:wrap; gap:12px}
.seal{display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
  border:1px solid rgba(247,198,0,.6); color:var(--yellow); padding:6px 14px; border-radius:999px;
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700}
.seal b{color:#fff; font-family:"Zilla Slab",serif; font-size:15px; letter-spacing:.02em; font-weight:700}

/* ---------- Sections ---------- */
.section{padding:62px 0}
.section-head{max-width:680px; margin:0 0 34px}
.section-head h2{font-size:clamp(24px,3.4vw,34px); color:var(--blue-ink); margin:8px 0 0}
.section-head p{color:var(--muted); margin:12px 0 0}
.section.alt{background:var(--soft)}

/* Temps forts (courses) */
.courses{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.course{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; border-top:4px solid var(--blue)}
.course .date{font-family:"Zilla Slab",serif; font-weight:700; color:var(--blue-ink); font-size:18px}
.course .heure{color:var(--blue); font-weight:700; font-size:13px; letter-spacing:.04em}
.course .titre{margin-top:8px; color:var(--ink); font-size:15px}
.course.fete{border-top-color:var(--yellow); background:#fff;
  box-shadow:0 6px 20px rgba(247,198,0,.20)}
.center{text-align:center}
.mt{margin-top:26px}

/* Cartes sections */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; color:var(--ink); transition:transform .12s, box-shadow .12s, border-color .12s}
.card:hover{text-decoration:none; transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(11,58,84,.12); border-color:var(--blue)}
.card h3{color:var(--blue-ink); font-size:20px; margin-bottom:8px}
.card p{color:var(--muted); font-size:14.5px; margin:0}
.card .fleche{color:var(--blue); font-weight:700; margin-top:14px; display:inline-block}

/* Bande soutien */
.band{background:linear-gradient(160deg,var(--blue) 0%, var(--blue-deep) 100%);
  color:#fff; text-align:center; padding:56px 22px}
.band .eyebrow{color:var(--yellow)}
.band h2{color:#fff; font-size:clamp(24px,3.4vw,32px); margin-top:8px}
.band p{color:#EAF6FD; max-width:52ch; margin:14px auto 24px}

/* ---------- Contenu générique (pages internes) ---------- */
.prose{max-width:760px; color:var(--ink)}
.prose h2{color:var(--blue-ink); font-size:26px; margin:34px 0 10px}
.prose h3{color:var(--blue-deep); font-size:19px; margin:24px 0 8px}
.prose p{margin:0 0 14px}

/* Agenda */
.agenda-embed{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 4px 18px rgba(11,58,84,.08)}
.agenda-embed iframe{display:block; width:100%; height:720px; border:0}

/* Actualités (affiches) */
.affiches{display:flex; flex-direction:column; gap:34px; max-width:820px; margin:0 auto}
.affiche{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 4px 18px rgba(11,58,84,.08)}
.affiche img{width:100%; height:auto}
.affiche figcaption{padding:14px 18px; color:var(--blue-ink); font-family:"Zilla Slab",serif;
  font-weight:600; font-size:17px; border-top:3px solid var(--yellow)}
.vide{text-align:center; color:var(--muted); padding:50px 20px; background:var(--soft);
  border:1px dashed var(--line); border-radius:var(--radius)}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--blue-ink); color:#D6E3EC}
.footer-inner{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:30px; padding:48px 22px 30px}
.footer-inner h3{font-family:"Zilla Slab",serif; color:#fff; font-size:16px; margin-bottom:12px}
.footer-inner a{color:#D6E3EC}
.footer-inner a:hover{color:var(--yellow)}
.footer-inner p{margin:6px 0}
.foot-logo{height:60px; width:auto; margin-bottom:12px}
.foot-nom{font-family:"Zilla Slab",serif; color:#fff; font-weight:600; font-size:16px; margin:0}
.foot-sub{font-size:13px; color:#A7B6C3; margin-top:4px}
.foot-affil{font-size:12.5px; color:#A7B6C3; margin-top:12px}
.foot-bas{border-top:1px solid rgba(255,255,255,.12); padding:16px 22px; font-size:12.5px; color:#93A3B1}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr; text-align:center; padding:40px 22px 48px}
  .hero::before{width:100%; opacity:.08}
  .hero-logo{order:-1} .hero-logo img{max-width:240px}
  .hero .accroche{margin-left:auto; margin-right:auto}
  .hero .actions{justify-content:center}
  .courses,.cards{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr; gap:22px}
  .agenda-embed iframe{height:600px}
}

/* Le header contient désormais 2 boutons : on bascule vers le menu mobile plus tôt */
@media (max-width:1240px){
  .nav-toggle{display:flex}
  .nav{position:absolute; top:74px; left:0; right:0; background:var(--blue);
    flex-direction:column; align-items:stretch; gap:2px; padding:10px 16px 18px;
    box-shadow:0 12px 20px rgba(0,0,0,.25); display:none}
  .nav.ouvert{display:flex}
  .nav a{padding:12px 12px; font-size:15px}
  .nav .nav-ins, .nav .nav-cta{margin:10px 0 0; justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto}}

/* ============================================================
   Pages internes : calendrier, présentation, remerciements
   ============================================================ */

/* Encadré "présentation de la saison" */
.callout{display:flex; gap:16px; align-items:center; background:var(--yellow-soft);
  border:1px solid #F0E4A8; border-left:5px solid var(--yellow); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:36px}
.callout .cal-ico{font-size:30px; line-height:1}
.callout .c-txt b{color:var(--blue-ink); font-family:"Zilla Slab",serif; font-size:17px; display:block}
.callout .c-txt span{color:var(--muted); font-size:14px}

/* Programme */
.prog{display:flex; flex-direction:column; gap:28px}
.prog-month h3{color:var(--blue); text-transform:uppercase; letter-spacing:.10em; font-size:15px;
  font-family:"Inter",sans-serif; font-weight:700; padding-bottom:8px;
  border-bottom:2px solid var(--yellow); margin-bottom:4px}
.prog-item{display:grid; grid-template-columns:210px 66px 1fr; gap:14px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--line)}
.prog-item .d{font-weight:600; color:var(--blue-ink)}
.prog-item .h{color:var(--blue); font-weight:700; font-size:14px}
.prog-item .t{color:var(--ink)}
.prog-item.fete{background:var(--yellow-soft); border-radius:10px; padding:14px 16px;
  border-bottom:0; grid-column:1 / -1; grid-template-columns:210px 66px 1fr}
.prog-item.fete .t strong{color:var(--blue-ink)}
.note{color:var(--muted); font-size:13.5px; margin-top:20px; font-style:italic}
@media (max-width:640px){
  .prog-item, .prog-item.fete{grid-template-columns:1fr; gap:2px}
  .prog-item .h{margin-bottom:2px}
}

/* Effectifs de la saison (chips) */
.rosters{display:flex; flex-direction:column; gap:28px}
.roster h3{color:var(--blue-ink); font-size:20px; margin-bottom:12px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 14px;
  font-size:14px; color:var(--blue-ink)}
.roster.tau .chip{border-color:#F0E4A8; background:var(--yellow-soft)}
.roster.man .chip{border-color:#BEE1F1; background:#EAF6FD}

/* Remerciements */
.sponsors{columns:2; column-gap:36px}
@media (max-width:720px){.sponsors{columns:1}}
.sponsor{break-inside:avoid; padding:11px 0; border-bottom:1px solid var(--line)}
.sponsor b{color:var(--blue-ink)}
.sponsor span{color:var(--muted); font-size:14px; display:block; margin-top:1px}
.merci-manades{margin-top:34px; background:var(--soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px}
.merci-manades h3{color:var(--blue-ink); margin-bottom:10px; font-size:20px}

/* ---------- Bande d'inscription (pré-footer, toutes pages) ---------- */
.inscription-band{background:var(--yellow); color:var(--blue-ink); padding:42px 0}
.inscription-band .ib-inner{max-width:var(--maxw); margin:0 auto; padding:0 22px;
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap}
.inscription-band .ib-txt{flex:1 1 360px}
.inscription-band .eyebrow{color:#7A5C00}
.inscription-band h2{color:var(--blue-ink); font-size:clamp(22px,3vw,30px); margin:6px 0 0}
.inscription-band p{color:#6A5200; margin:8px 0 0; font-size:15px; max-width:62ch}
.inscription-band .btn-navy{box-shadow:0 6px 18px rgba(11,58,84,.22)}
@media (max-width:640px){
  .inscription-band .ib-inner{flex-direction:column; align-items:flex-start}
}

/* ---------- Affiliations (logos fédérations, pied de page) ---------- */
.foot-affiliations{display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:20px 22px; border-top:1px solid rgba(255,255,255,.10)}
.foot-affil-label{font-family:"Zilla Slab",serif; color:#fff; font-size:14px;
  letter-spacing:.08em; text-transform:uppercase}
.foot-affil-logos{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.affil-chip{background:#fff; border-radius:10px; padding:8px 14px; display:inline-flex;
  align-items:center; box-shadow:0 2px 8px rgba(0,0,0,.18)}
a.affil-chip{transition:transform .12s ease, box-shadow .12s ease}
a.affil-chip:hover{transform:translateY(-2px); box-shadow:0 7px 18px rgba(0,0,0,.30); text-decoration:none}
.affil-chip img{width:auto; display:block}
.affil-chip.ffcc img{height:44px}
.affil-chip.uctf img{height:62px}
@media (max-width:640px){
  .foot-affiliations{flex-direction:column; align-items:flex-start; gap:14px}
}

/* ---------- Formulaire d'inscription aux actualités ---------- */
.ins-wrap{max-width:660px}
.ins-msg{padding:14px 16px; border-radius:10px; margin-bottom:20px; font-size:14.5px}
.ins-msg-ok{background:#EAF7EF; border:1px solid #BFE3CC; color:#1E6E3C}
.ins-msg-err{background:#FBEDEC; border:1px solid #F0C9C6; color:#B02E32}
.ins-msg-err ul{margin:6px 0 0; padding-left:18px}
.ins-form{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:0 4px 18px rgba(11,58,84,.06)}
.ins-grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ins-champ{margin-bottom:16px}
.ins-form label{display:block; font-family:"Inter",sans-serif; font-weight:600; font-size:12.5px;
  color:var(--blue-ink); text-transform:uppercase; letter-spacing:.05em; margin:0 0 6px}
.ins-form label .opt{color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0}
.ins-form input[type=text],.ins-form input[type=email],.ins-form input[type=tel]{
  width:100%; padding:12px 13px; font-size:16px; font-family:inherit; color:var(--ink);
  background:#FBFDFF; border:1px solid var(--line); border-radius:9px;
  transition:border-color .15s, box-shadow .15s}
.ins-form input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(14,138,194,.16)}
.ins-consent{margin-top:6px; border-top:1px solid var(--line); padding-top:18px}
.ins-consent > p{font-weight:600; color:var(--blue-ink); text-transform:uppercase;
  letter-spacing:.05em; font-size:12.5px; margin:0 0 12px}
.ins-case{display:flex; gap:12px; align-items:flex-start; padding:12px 13px; border:1px solid var(--line);
  border-radius:9px; margin-bottom:9px; cursor:pointer; transition:border-color .15s, background .15s}
.ins-case:hover{border-color:var(--blue); background:#F2FAFE}
.ins-case input{margin-top:2px; width:18px; height:18px; accent-color:var(--blue); flex:0 0 auto; cursor:pointer}
.ins-case span{font-size:14.5px; color:var(--ink)}
.ins-case span small{display:block; color:var(--muted); font-size:12.5px; margin-top:1px}
.ins-rgpd{font-size:12.5px; color:var(--muted); margin:16px 0 0; line-height:1.55}
.ins-rgpd a{color:var(--blue-deep)}
.ins-form .btn{width:100%; justify-content:center; margin-top:22px}
.ins-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.ins-retour{margin-top:16px; text-align:center}
@media (max-width:520px){ .ins-grid2{grid-template-columns:1fr} }