/* Identité visuelle dérivée du logo officiel CJBB (fichier CJBB-2lignes.png, échantillonné) : rouge brique #A51C18, anthracite #353535, typographie Montserrat. La police est auto-hébergée (/fonts) : aucune requête vers un CDN, la page ne dépend d'aucun tiers le soir de l'ouverture. */ @font-face{ font-family:'Montserrat'; src:url('/fonts/montserrat-var-latin.woff2') format('woff2-variations'); font-weight:400 900; font-style:normal; font-display:swap; } :root{ --paper:#F7F5F2; --surface:#FFFFFF; --ink:#26282A; --ink-soft:#6A6E72; --line:#C7C4BF; --line-soft:#E7E4DF; --accent:#A51C18; /* rouge du logo */ --accent-strong:#A51C18; /* fond des boutons (reste foncé même en mode sombre) */ --accent-hover:#8A1512; --accent-soft:#F7E8E7; --accent-ink:#7C110E; --ok:#2F6B44; --ok-soft:#E3EFE7; --warn:#8A5D12; --warn-soft:#F5EAD3; --err:#8C2B20; --err-soft:#F6E0DC; --radius-s:4px; --radius-m:10px; --display:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --serif:var(--display); /* héritage : d'anciens styles inline référencent encore --serif */ --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace; --shadow:0 1px 2px rgba(38,40,42,.05), 0 4px 14px rgba(38,40,42,.04); } /* Mode sombre. Deux voies : - automatique : préférence du système, sauf si l'utilisateur a explicitement choisi « clair » ; - manuel : data-theme="dark" posé sur par le bouton de bascule, qui l'emporte toujours. Le bloc est dupliqué à dessein — CSS ne permet pas de partager des déclarations entre une règle sous media-query et une règle d'attribut. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#141416; --surface:#1D1E21; --ink:#ECEBE9; --ink-soft:#A5A7AA; --line:#3E4044; --line-soft:#292B2F; --accent:#E0645C; --accent-strong:#B23530; --accent-hover:#C4423C; --accent-soft:#39201E; --accent-ink:#F0A6A0; --ok:#7FBE9B; --ok-soft:#1D2B23; --warn:#D9A94C; --warn-soft:#2E2617; --err:#E08B7A; --err-soft:#3A2320; --shadow:none; } } :root[data-theme="dark"]{ --paper:#141416; --surface:#1D1E21; --ink:#ECEBE9; --ink-soft:#A5A7AA; --line:#3E4044; --line-soft:#292B2F; --accent:#E0645C; --accent-strong:#B23530; --accent-hover:#C4423C; --accent-soft:#39201E; --accent-ink:#F0A6A0; --ok:#7FBE9B; --ok-soft:#1D2B23; --warn:#D9A94C; --warn-soft:#2E2617; --err:#E08B7A; --err-soft:#3A2320; --shadow:none; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper); border-top:4px solid var(--accent-strong); /* filet rouge institutionnel, couleur du logo */ -webkit-font-smoothing:antialiased; line-height:1.55; } a{color:var(--accent); text-underline-offset:2px;} :focus-visible{outline:2px solid var(--accent); outline-offset:2px;} .meta{font-family:var(--mono); font-size:.74rem; color:var(--ink-soft);} .wrap{max-width:760px; margin:0 auto; padding:1.6rem 1.25rem 5rem;} .wrap.wide{max-width:1080px;} /* ---- En-tête : marque officielle + langues ---------------------------------------------- */ header.top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.4rem 1.25rem .4rem; max-width:760px; margin:0 auto; } header.top.wide{max-width:1080px;} .brand{display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--ink);} .brand-mark{width:44px; height:44px; border-radius:10px; display:block;} .brand-text{display:flex; flex-direction:column; line-height:1.15;} .brand-name{font-family:var(--display); font-weight:800; font-size:1.02rem; letter-spacing:-.01em;} .brand-sub{font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); margin-top:.2rem;} .kicker{font-family:var(--display); font-weight:700; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 .5rem;} h1{font-family:var(--display); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.7rem, 4.5vw, 2.15rem); line-height:1.15; margin:.2rem 0 .6rem; color:var(--ink);} h2{font-family:var(--display); font-weight:700; letter-spacing:-.01em; font-size:1.22rem; margin:1.8rem 0 .8rem; color:var(--ink);} .lede{max-width:62ch; color:var(--ink-soft); font-size:1rem; margin:.4rem 0 1.6rem;} nav.lang{display:flex; gap:.35rem; font-family:var(--display); font-weight:600; font-size:.72rem;} nav.lang a{color:var(--ink-soft); text-decoration:none; padding:.3rem .55rem; border-radius:6px;} nav.lang a.active{color:var(--accent-ink); background:var(--accent-soft);} nav.lang a:hover{color:var(--accent);} /* ---- Cartes et formulaires ---------------------------------------------------------------- */ .card{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:1.5rem; margin-bottom:1.1rem; box-shadow:var(--shadow);} .field{margin-bottom:1.1rem;} .field label{display:block; font-size:.82rem; font-weight:600; margin-bottom:.35rem; color:var(--ink);} .field .hint{font-size:.74rem; color:var(--ink-soft); margin-top:.3rem;} input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search], select, textarea{ width:100%; padding:.62rem .75rem; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); font-family:var(--sans); font-size:.94rem; } textarea{min-height:6rem; resize:vertical;} input:focus, select:focus, textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft);} .chk{display:flex; align-items:flex-start; gap:.55rem; font-size:.92rem; cursor:pointer;} .chk input{margin-top:.25rem; accent-color:var(--accent-strong);} .btn{ display:inline-block; padding:.7rem 1.4rem; background:var(--accent-strong); color:#fff; border:none; border-radius:8px; font-family:var(--display); font-weight:700; font-size:.88rem; letter-spacing:.01em; cursor:pointer; text-decoration:none; transition:background .12s ease; } .btn:hover{background:var(--accent-hover);} .btn.ghost{background:transparent; color:var(--accent); border:1.5px solid var(--accent); font-weight:600;} .btn.ghost:hover{background:var(--accent-soft);} .btn.block{display:block; width:100%; text-align:center;} .btn[disabled]{opacity:.5; cursor:not-allowed;} .badge{display:inline-block; font-family:var(--display); font-weight:600; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; padding:.22rem .55rem; border-radius:99px; background:var(--line-soft); color:var(--ink-soft);} .badge-ok{background:var(--ok-soft); color:var(--ok);} .badge-warn{background:var(--warn-soft); color:var(--warn);} .badge-err{background:var(--err-soft); color:var(--err);} .note{font-size:.82rem; color:var(--ink); background:var(--accent-soft); border-left:3px solid var(--accent-strong); border-radius:0 6px 6px 0; padding:.75rem 1rem; margin:1rem 0;} .note a{color:var(--accent-ink);} .alert-err{background:var(--err-soft); color:var(--err); border-left:3px solid var(--err); border-radius:0 6px 6px 0; padding:.8rem 1rem; margin-bottom:1.2rem; font-size:.88rem;} table.list{width:100%; border-collapse:collapse; font-size:.85rem;} table.list th{text-align:left; font-family:var(--display); font-weight:700; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); border-bottom:2px solid var(--line); padding:.5rem .6rem;} table.list td{padding:.55rem .6rem; border-bottom:1px solid var(--line-soft);} /* ---- Programme ------------------------------------------------------------------------------ */ .activity-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.1rem; border:1px solid var(--line-soft); border-left:3px solid var(--accent-strong); border-radius:var(--radius-m); margin-bottom:.7rem; background:var(--surface); box-shadow:var(--shadow); } .activity-row .meta{font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); text-align:right; white-space:nowrap;} .activity-row > div:first-child .meta{text-align:left; white-space:normal;} .total-line{display:flex; justify-content:space-between; font-family:var(--display); font-weight:700; font-size:1.05rem; padding:.9rem 0; border-top:2px solid var(--line); margin-top:.6rem;} /* ---- File d'attente ------------------------------------------------------------------------- */ .queue-box{text-align:center; padding:3.5rem 1.5rem;} .queue-position{font-family:var(--display); font-weight:800; font-variant-numeric:tabular-nums; font-size:3.4rem; letter-spacing:-.02em; color:var(--accent); margin:.5rem 0;} .queue-box .lede{margin-left:auto; margin-right:auto;} /* ---- Pied de page ---------------------------------------------------------------------------- */ footer.site{ max-width:760px; margin:2rem auto 0; padding:1.4rem 1.25rem 2rem; display:flex; align-items:center; gap:.7rem; font-size:.76rem; color:var(--ink-soft); border-top:1px solid var(--line-soft); } footer.site img{width:26px; height:26px; border-radius:6px; opacity:.9;} @media (max-width:560px){ header.top{padding-top:1rem;} .brand-mark{width:38px; height:38px;} .card{padding:1.15rem;} .activity-row{flex-direction:column; align-items:flex-start; gap:.4rem;} .activity-row .meta{text-align:left; white-space:normal;} } /* ---- Accueil ---------------------------------------------------------------------------------- */ .actions{display:flex; gap:.7rem; flex-wrap:wrap; margin:1.4rem 0 2.2rem;} .organizer{display:flex; flex-direction:column; gap:.6rem; margin-top:3rem;} /* Plaque claire : le logo officiel (texte anthracite) reste lisible même en mode sombre. */ .logo-plaque{display:inline-block; background:#FFFFFF; border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:1rem 1.3rem; width:fit-content;} .logo-plaque img{display:block; height:52px; width:auto;}