/* site.css — Site public du CTT Collex-Bossy (module Site, ctt-suite)
   Polices système uniquement (aucun service tiers). */
:root{
  /* Couleurs : toutes modifiables dans Administration → Réglages → Apparence */
  --paper:#ffffff; --wash:#f3f4f6; --line:#dcdfe4;
  --text:#111111; --title:#111111;
  --muted:color-mix(in srgb,var(--text) 58%,var(--paper)); --ink2:color-mix(in srgb,var(--text) 82%,var(--paper));
  --red:#cc1a1a; --red-dark:color-mix(in srgb,var(--red) 80%,#000); --btn-text:#ffffff;
  --link:var(--red-dark); --link-hover:var(--red);
  --ink:#111111; --on-dark:#ffffff; --on-dark-soft:color-mix(in srgb,var(--on-dark) 91%,#000); --dark-line:#2b2d36; --dark-muted:#8b8e99;
  --table:#17406d; --table-text:#ffffff; --table-border:#ffffff; --table-hover:color-mix(in srgb,var(--table) 88%,#fff);
  --field-bg:#ffffff; --field-text:#111111; --field-border:#b9bdc6;
  --ok:#17703a; --ok-bg:#e4f4ea; --ok-border:#b5dfc3; --err:var(--red-dark); --err-bg:#fbe6e6; --err-border:#f0bcbc;
  --banner-bg:#ffe8a3; --banner-text:#4a3500;
  --lg-bg:#111111; --lg-card:#1a1a1a; --lg-border:#333333; --lg-text:#f0f0f0; --lg-title:#ffffff; --lg-muted:#aaaaaa; --lg-foot:#8a8a8a;
  --lg-field:#222222; --lg-field-border:#444444; --lg-hover:#2e2e2e; --lg-icon:#3a3a3a; --lg-head-from:#0e0e0e; --lg-head-to:#222222;
  --lg-accent-text:#ff8f8f; --lg-err:#ff8080; --lg-ok:#3a9e4a; --lg-btn-hover:color-mix(in srgb,var(--red) 88%,#fff);
  --r:3px;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --serif:Charter,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:var(--fs,1.0625rem)/1.68 var(--serif);color:var(--text);background:var(--paper);display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:.15em}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--on-dark);padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}

h1,h2,h3,h4{font-family:var(--sans);line-height:1.15;letter-spacing:-.02em;color:var(--title);margin:0 0 .6em}
h1{font-size:clamp(2rem,5vw,3rem);font-weight:800}
h2{font-size:clamp(1.5rem,3.2vw,2rem);font-weight:800;margin-top:2.2em}
h3{font-size:1.2rem;font-weight:700}
.prose>h2:first-child{margin-top:0}

/* ── En-tête ── */
.site-header{background:var(--ink);color:var(--on-dark);border-bottom:3px solid var(--red);position:sticky;top:0;z-index:50}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--on-dark);text-decoration:none}
.brand img{width:46px;height:46px;object-fit:contain}
.brand span{display:flex;flex-direction:column;line-height:1.1;font-family:var(--sans)}
.brand strong{font-size:1.1rem;font-weight:800;letter-spacing:-.01em}
.brand small{font-size:.78rem;color:var(--on-dark-soft);opacity:.8}
.menu,.sub{list-style:none;margin:0;padding:0}
.menu{display:flex;gap:.15rem;align-items:center}
.menu>li{position:relative;display:flex;align-items:center}
.menu a{font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--on-dark-soft);text-decoration:none;padding:.55rem .8rem;border-radius:var(--r);display:block}
.menu a:hover{background:color-mix(in srgb,var(--on-dark) 10%,transparent);color:var(--on-dark)}
.menu li.current>a{color:var(--on-dark);box-shadow:inset 0 -3px 0 var(--red)}
.menu-label{font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--on-dark-soft);background:none;border:0;cursor:pointer;padding:.55rem .8rem;border-radius:var(--r)}
.menu-label:hover,.has-sub.open>.menu-label{background:color-mix(in srgb,var(--on-dark) 10%,transparent);color:var(--on-dark)}
.sub-toggle{background:none;border:0;color:var(--on-dark-soft);cursor:pointer;padding:.4rem .5rem;margin-left:-.5rem;font-size:.8rem}
.sub{position:absolute;top:100%;right:0;min-width:15rem;background:var(--ink);border:1px solid var(--dark-line);border-top:3px solid var(--red);padding:.4rem;display:none;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.has-sub:hover>.sub,.has-sub:focus-within>.sub,.has-sub.open>.sub{display:block}
.nav-toggle{display:none;background:none;border:1px solid color-mix(in srgb,var(--on-dark) 30%,transparent);border-radius:var(--r);width:44px;height:44px;cursor:pointer;color:var(--on-dark)}
.bars,.bars::before,.bars::after{display:block;width:20px;height:2px;background:var(--on-dark);position:relative;margin:auto}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-6px}.bars::after{top:6px}

/* ── Accueil : bandeau ── */
.hero{background:var(--ink);color:var(--on-dark);overflow:hidden;position:relative}
.hero-in{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:2rem;padding-top:3.5rem;padding-bottom:5rem;position:relative;z-index:1}
.hero h1{color:var(--on-dark);font-size:clamp(2.2rem,5.6vw,3.9rem);max-width:15ch;margin-bottom:.4em}
.nb{white-space:nowrap}
.tagline{font-family:var(--serif);font-size:1.2rem;color:var(--on-dark-soft);max-width:34ch;margin:0 0 1.6rem}
.hero-logo{justify-self:end;width:min(260px,100%);height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.bounce{position:absolute;left:0;right:0;bottom:0;width:100%;height:max(150px,12.5vw);pointer-events:none}
.bounce .tbl{stroke:var(--on-dark);stroke-width:3;opacity:.9}
.bounce .trail{fill:none;stroke:var(--red);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round}
.bounce .ball{fill:var(--on-dark);offset-path:path("M-20 20 Q 120 -40 260 112 Q 400 0 540 112 Q 680 30 820 112 Q 960 50 1100 112 Q 1180 70 1230 20");offset-rotate:0deg;animation:flight 2.4s cubic-bezier(.35,.1,.6,1) .3s both}
@keyframes flight{from{offset-distance:0%}to{offset-distance:100%}}
.bounce .trail{animation:draw 2.4s linear .3s both;stroke-dasharray:2 9}
@keyframes draw{from{opacity:0}to{opacity:1}}

/* ── Contenu ── */
.page{padding:2.75rem 0 4rem}
.page>.wrap>h1{margin-bottom:.8em}
.prose p,.prose ul,.prose ol,.prose blockquote{max-width:72ch}
.prose .sponsor p,.prose .notice p{max-width:none}
.home{padding-top:3rem;padding-bottom:4rem}
.prose img{border-radius:var(--r)}
.prose figure{margin:0 0 1rem}
.btn,.prose .btn{display:inline-block;font-family:var(--sans);font-weight:700;font-size:.98rem;line-height:1;text-decoration:none;color:var(--btn-text);background:var(--red);border:2px solid var(--red);border-radius:var(--r);padding:.85rem 1.3rem;cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover,.prose .btn:hover{background:var(--red-dark);border-color:var(--red-dark);color:var(--btn-text)}
.btn-outline,.prose .btn-outline{background:transparent;color:var(--text);border-color:var(--text)}
.btn-outline:hover,.prose .btn-outline:hover{background:var(--text);border-color:var(--text);color:var(--paper)}
.btn-outline-light{background:transparent;color:var(--on-dark);border-color:var(--on-dark)}
.btn-outline-light:hover{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}
.center{text-align:center}.center img{margin:0 auto}

.sponsor{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:1.75rem;align-items:start;margin:1.2rem 0}
.sponsor>img{width:100%}
.gallery{display:grid;gap:.6rem;margin:1.2rem 0}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover}
.cols-2,.cols-3,.cols-4{display:grid;gap:1.25rem}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4,.gallery.cols-4{grid-template-columns:repeat(4,1fr)}
.gallery.cols-2{grid-template-columns:repeat(2,1fr)}.gallery.cols-3{grid-template-columns:repeat(3,1fr)}
.card{border-left:4px solid var(--red);background:var(--wash);padding:1.1rem 1.3rem;border-radius:0 var(--r) var(--r) 0}
.card h3{margin-bottom:.4em}.card p{margin:0}
blockquote{margin:1.2rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:4px solid var(--red)}
blockquote p{font-size:1.12rem;font-style:italic;margin:0 0 .5rem}
cite{display:block;font-family:var(--sans);font-style:normal;font-size:.88rem;color:var(--muted)}
.notice{background:var(--wash);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.6rem;margin:2.5rem 0 0}
.notice h3{margin-top:0}
.person-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.5rem;margin-top:1.2rem}
.person img{aspect-ratio:1;object-fit:cover;width:100%;margin-bottom:.8rem}
.person h3{font-size:1rem;color:var(--red-dark);margin-bottom:.3em}
.person p{margin:0;font-family:var(--sans);font-weight:700;font-size:1.1rem}
.link-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin-top:1rem}
.link-cards p{margin:0;max-width:none}
.link-cards a{display:flex;flex-direction:column;gap:.8rem;height:100%;padding:1.2rem;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);font-family:var(--sans);font-weight:600}
.link-cards a:hover{border-color:var(--red);color:var(--red-dark)}
.link-cards img{height:56px;width:auto;max-width:100%;object-fit:contain;object-position:left}
.link-cards img.on-dark{background:var(--ink);padding:.5rem .8rem;border-radius:var(--r)}

/* Tableau (horaires) : surface de table de tennis de table */
.table-wrap{overflow-x:auto;margin:1.2rem 0}
table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:.98rem}
th,td{padding:.8rem 1rem;text-align:left}
thead th{background:var(--table);color:var(--table-text);font-weight:700;border:2px solid var(--table-border);outline:1px solid var(--table)}
tbody td{background:var(--table);color:var(--table-text);border:2px solid var(--table-border);outline:1px solid var(--table)}
tbody tr:hover td{background:var(--table-hover)}

/* ── Actualités ── */
.news-block{margin:0 0 3.5rem}
.news-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;border-bottom:3px solid var(--title);margin-bottom:.4rem}
.news-head h2{margin:0 0 .25em}
.news-head a{font-family:var(--sans);font-weight:600;font-size:.95rem}
.news-grid{display:block}
.news-card{display:grid;grid-template-columns:9.5rem 1fr;column-gap:1.4rem;row-gap:0;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.news-card .thumb{grid-column:3;grid-row:1}
.news-card .thumb img{width:150px;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.news-card:has(.thumb){grid-template-columns:9.5rem 1fr 150px}
.news-card time,.news-article time{font-family:var(--sans);font-weight:700;font-size:.88rem;color:var(--red-dark)}
.news-card .body{display:contents}
.news-card time{grid-column:1;grid-row:1}
.news-card h3{grid-column:2;grid-row:1;margin:0 0 .25em;font-size:1.25rem}
.news-card h3 a{color:var(--title);text-decoration:none}.news-card h3 a:hover{color:var(--red-dark);text-decoration:underline}
.news-card p{grid-column:2;grid-row:2;margin:0;color:var(--ink2)}
.news-card .more{grid-column:2;grid-row:3;font-family:var(--sans);font-weight:600;font-size:.92rem}
.news-article{max-width:780px}
.news-article h1{margin-top:.2em}
.news-img{margin:1.2rem 0}.news-img img{border-radius:var(--r)}
.back{font-family:var(--sans);font-size:.92rem}
.pager{display:flex;gap:.4rem;margin-top:2rem;font-family:var(--sans)}
.pager a,.pager span{padding:.45rem .85rem;border:1px solid var(--line);border-radius:var(--r);text-decoration:none}
.pager span{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.preview-banner{background:var(--banner-bg);color:var(--banner-text);text-align:center;font-family:var(--sans);font-weight:700;padding:.6rem 1rem}

/* ── Carte / calendrier ── */
.map{margin:1.2rem 0 2rem}
.map iframe{width:100%;height:380px;border:0;border-radius:var(--r);background:var(--wash)}
.map-link{display:inline-block;margin-top:.5rem;font-family:var(--sans);font-size:.92rem}
.calendar-frame iframe{width:100%;height:78vh;min-height:560px;border:1px solid var(--line);border-radius:var(--r)}

/* ── Formulaires ── */
.form-wrap{max-width:46rem;margin:1rem 0}
.site-form{display:grid;gap:1.15rem;font-family:var(--sans)}
.site-form label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem}
.site-form input[type=text],.site-form input[type=email],.site-form input[type=tel],.site-form input[type=date],.site-form select,.site-form textarea{
  font:inherit;font-weight:400;padding:.7rem .8rem;border:1.5px solid var(--field-border);border-radius:var(--r);background:var(--field-bg);color:var(--field-text);width:100%}
.site-form input:focus,.site-form select:focus,.site-form textarea:focus{border-color:var(--red);outline:3px solid color-mix(in srgb,var(--red) 18%,transparent)}
.site-form fieldset{border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem 1.1rem;display:grid;gap:1rem;margin:0;min-width:0}
.site-form legend{font-weight:800;padding:0 .4rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.req{color:var(--red)}
.check{display:flex!important;grid-template-columns:none;gap:.6rem;align-items:flex-start;font-weight:400!important}
.check input{margin-top:.3rem;width:1.1rem;height:1.1rem;accent-color:var(--red);flex:none}
.hint,.hint-inline{color:var(--muted);font-size:.9rem;font-weight:400;margin:0}
.pay{background:var(--wash);padding:.9rem 1rem;border-radius:var(--r);color:var(--ink2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.form-status{font-weight:600}.form-status.err{color:var(--err)}.form-status.ok{color:var(--ok)}
.flash{padding:.9rem 1.1rem;border-radius:var(--r);font-family:var(--sans);font-weight:600;margin-bottom:1rem}
.flash.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-border)}
.flash.err{background:var(--err-bg);color:var(--err);border:1px solid var(--err-border)}
.site-form [data-parents].is-hidden{display:none}

/* ── Connexion : même présentation que le portail de la Suite ── */
.login-page{background:var(--lg-bg);padding:3.5rem 1rem 4.5rem;display:flex;justify-content:center;font-family:var(--sans)}
.lcard{background:var(--lg-card);border:1px solid var(--lg-border);border-radius:12px;width:420px;max-width:100%;box-shadow:0 4px 24px rgba(0,0,0,.6);overflow:hidden;color:var(--lg-text);animation:lcardIn .55s cubic-bezier(.22,.9,.36,1) both}
.lhead{background:linear-gradient(135deg,var(--lg-head-from),var(--lg-head-to));padding:20px 28px 24px;text-align:center;border-bottom:2px solid var(--red)}
.lhead img{width:140px;height:140px;object-fit:contain;margin:0 auto 10px}
.lhead h1{font:900 19px var(--sans);color:var(--lg-title);margin:0 0 4px;letter-spacing:0}
.lhead p{font:400 12px var(--sans);color:var(--lg-muted);margin:0}
.lbody{padding:24px}
.lfg{margin-bottom:14px}
.lfg label{display:block;font:700 11.5px var(--sans);color:var(--lg-muted);margin-bottom:5px}
.lfc{padding:9px 12px;border:1px solid var(--lg-field-border);border-radius:6px;font:400 14px var(--sans);color:var(--lg-text);background:var(--lg-field);outline:none;width:100%;transition:border-color .2s}
.lfc:focus{border-color:var(--red)}
.lbtn{display:block;width:100%;padding:11px;border:none;border-radius:6px;background:var(--red);color:var(--btn-text);font:800 14px var(--sans);text-align:center;text-decoration:none;cursor:pointer;transition:background .15s}
.lbtn:hover{background:var(--lg-btn-hover);color:var(--btn-text)}
.lbtn:disabled{opacity:.6;cursor:not-allowed}
.lbtn-ghost{background:transparent;border:1px solid var(--lg-field-border);color:var(--lg-muted);margin-top:10px}
.lbtn-ghost:hover{background:var(--lg-hover);color:var(--lg-title)}
.lerr{display:none;background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--lg-err);border-radius:6px;padding:8px 12px;font:400 12.5px var(--sans);margin-bottom:14px}
.lyes p{margin:0 0 14px;color:var(--lg-text);font:400 14px var(--sans)}
.lfoot{padding:14px;text-align:center;font:400 11px var(--sans);color:var(--lg-foot);border-top:1px solid var(--lg-border)}
@keyframes lcardIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.lcard{animation:none}}

/* ── Pied de page ── */
.site-footer{background:var(--ink);color:var(--on-dark-soft);margin-top:auto;border-top:3px solid var(--red);font-family:var(--sans);font-size:.95rem}
.site-footer .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-top:2.5rem;padding-bottom:1.5rem}
.site-footer h2{color:var(--on-dark);font-size:1rem;margin:0 0 .6em}
.site-footer p{margin:0;line-height:1.7}
.site-footer a{color:var(--on-dark)}
.legal{padding-top:1rem;padding-bottom:1.5rem;border-top:1px solid var(--dark-line);color:var(--dark-muted);font-size:.85rem}

/* ── Adaptation mobile ── */
/* ── Apparence réglable : en-tête centré / non fixe ── */
.hdr-static .site-header{position:static}
@media (min-width:821px){
  .hdr-center .bar{flex-direction:column;justify-content:center;padding-top:.8rem;padding-bottom:.4rem;gap:.35rem}
  .hdr-center #nav{width:100%}
  .hdr-center .menu{justify-content:center;flex-wrap:wrap}
  .hdr-center .sub{right:auto;left:0}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;padding-top:2.5rem;padding-bottom:4.5rem}
  .hero-logo{display:none}
  .cols-3,.cols-4,.gallery.cols-4,.gallery.cols-3{grid-template-columns:repeat(2,1fr)}
  .site-footer .cols{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav-toggle{display:block}
  #nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:3px solid var(--red);padding:.5rem 1.25rem 1rem}
  #nav.open{display:block}
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu>li{flex-wrap:wrap}
  .menu>li>a{flex:1;padding:.85rem .5rem}
  .menu li.current>a{box-shadow:inset 3px 0 0 var(--red);padding-left:.8rem}
  .sub{position:static;display:none;width:100%;border:0;border-left:2px solid var(--dark-line);box-shadow:none;margin:0 0 .4rem .5rem}
  .has-sub:hover>.sub,.has-sub:focus-within>.sub{display:none}
  .has-sub.open>.sub{display:block}
  .sub-toggle{padding:.7rem .9rem}
}
@media (max-width:640px){
  body{font-size:1rem}
  .sponsor{grid-template-columns:1fr}
  .cols-2,.cols-3,.row2{grid-template-columns:1fr}
  .cols-4,.gallery.cols-4,.gallery.cols-3,.gallery.cols-2{grid-template-columns:repeat(2,1fr)}
  .news-card,.news-card:has(.thumb){grid-template-columns:1fr;gap:.3rem}
  .news-card .thumb,.news-card time,.news-card h3,.news-card p,.news-card .more{grid-column:1;grid-row:auto}
  .news-card .thumb img{width:100%;aspect-ratio:16/9}
  .news-card .thumb{order:-1;margin-bottom:.5rem}
  th,td{padding:.65rem .7rem;font-size:.9rem}
  .bounce{height:110px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bounce .ball,.bounce .trail{animation:none}
  .bounce .ball{offset-distance:100%}
}

/* Tableaux sur petit écran : chaque ligne devient une fiche (libellés ajoutés par site.js) */
@media (max-width:560px){
  table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{margin:0 0 .8rem}
  table.stack tbody td{display:flex;justify-content:space-between;gap:1rem;text-align:right;padding:.55rem .8rem;border-width:1px 2px}
  table.stack tbody td::before{content:attr(data-label);font-weight:700;text-align:left;flex:0 0 36%}
  table.stack tbody td:empty{display:none}
}