@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Karla:wght@400;500;700&family=Courier+Prime:wght@400;700&family=Crimson+Pro:wght@300;400;600&family=Pinyon+Script&display=swap'); /* ===================================================================== Charte « billet perforé » — reprise à l'identique du prototype. Palette papier/encre, Oswald + Karla + Courier Prime. --accent est la SEULE variable qui change selon le camp : elle est posée par l'attribut data-camp du (voir plus bas), et tout le reste — tampons, rails, boutons actifs, points de programme — en découle sans une seule règle dupliquée. ===================================================================== */ :root{ --paper:#DDE2DC;--card:#EFF1EC;--ink:#1B2A22;--soft:#5D6A63;--rule:#B7C0B8; --bleu:#1D4E89;--rouge:#A8322D;--ocre:#8A6414;--vert:#2C6E49;--accent:var(--ink); } body[data-camp="evg"] {--accent:var(--bleu)} body[data-camp="evjf"] {--accent:var(--rouge)} body[data-camp="temoins"]{--accent:var(--ink)} *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--paper);color:var(--ink);font-family:'Karla',system-ui,sans-serif; font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;padding:18px 14px 60px} .wrap{max-width:540px;margin:0 auto} .ticket{background:var(--card);border:1px solid var(--rule); box-shadow:0 1px 0 rgba(27,42,34,.10),0 10px 24px -18px rgba(27,42,34,.5)} .perf{position:relative;height:0;border-top:1px dashed var(--rule)} .perf::before,.perf::after{content:"";position:absolute;top:-9px;width:18px;height:18px; border-radius:50%;background:var(--paper);border:1px solid var(--rule)} .perf::before{left:-10px;clip-path:inset(0 0 0 50%)} .perf::after{right:-10px;clip-path:inset(0 50% 0 0)} .pad{padding:20px 20px 22px} .eyebrow{font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--soft)} h1{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(28px,8vw,40px); line-height:.98;letter-spacing:-.01em;text-transform:uppercase;margin:6px 0 0} h2{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;font-size:19px; letter-spacing:.03em;margin:0} h3{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;font-size:14px; letter-spacing:.11em;margin:0 0 4px;color:var(--soft)} .mono{font-family:'Courier Prime',monospace} a{color:var(--accent)} .stamp{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--accent); color:var(--accent);font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase; letter-spacing:.12em;font-size:12px;padding:5px 11px;transform:rotate(-2.4deg);opacity:.92} .stamp.set{animation:stampin .45s cubic-bezier(.2,1.5,.4,1) both} @keyframes stampin{0%{transform:rotate(-14deg) scale(1.5);opacity:0}60%{opacity:1} 100%{transform:rotate(-2.4deg) scale(1);opacity:.92}} input[type=password],input[type=text],input[type=tel],input[type=email],input[type=number], select,textarea{width:100%;font-family:'Courier Prime',monospace; font-size:17px;padding:13px 12px;background:#fff;color:var(--ink);border:1px solid var(--rule); border-radius:0;letter-spacing:.08em} textarea{font-family:'Karla',sans-serif;letter-spacing:0;line-height:1.55;resize:vertical} input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{ outline:2.5px solid var(--ocre);outline-offset:1px} button{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.09em;font-size:15px; font-weight:500;border:none;cursor:pointer;background:var(--ink);color:var(--card); padding:14px 18px;width:100%;margin-top:12px} button:active{transform:translateY(1px)} button.ghost{background:none;color:var(--soft);border:1px solid var(--rule)} .err{margin-top:12px;padding:10px 12px;border-left:3px solid var(--rouge); background:rgba(168,50,45,.07);font-size:14px} .hint{margin-top:22px;border-top:1px solid var(--rule);padding-top:14px;font-size:13px;color:var(--soft)} .hint code{font-family:'Courier Prime',monospace;color:var(--ink);background:rgba(27,42,34,.07);padding:1px 5px} .names{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .names button{width:auto;flex:1 1 44%;background:#fff;color:var(--ink);border:1px solid var(--rule); padding:12px 10px;margin:0;font-size:14px;letter-spacing:.05em} .names button:hover{border-color:var(--accent);color:var(--accent)} /* sections du carnet */ .sec{margin-top:28px;border-top:1px solid var(--rule);padding-top:18px} .sec:first-of-type{border-top:none;padding-top:0} .lead{font-size:14px;color:var(--soft);margin:0 0 12px} /* grille de dispos */ .dispo{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule)} .dispo .d{flex:1;font-family:'Oswald',sans-serif;font-size:15px;text-transform:uppercase;letter-spacing:.03em} .dispo .d small{display:block;font-family:'Karla',sans-serif;text-transform:none; letter-spacing:0;font-size:12.5px;color:var(--soft)} .trio{display:flex;flex:0 0 auto} .trio button{width:38px;margin:0;padding:9px 0;font-size:13px;background:#fff;color:var(--soft); border:1px solid var(--rule);border-right:none;letter-spacing:0} .trio button:last-child{border-right:1px solid var(--rule)} .trio button.o{background:var(--vert);border-color:var(--vert);color:#fff} .trio button.p{background:var(--ocre);border-color:var(--ocre);color:#fff} .trio button.n{background:var(--rouge);border-color:var(--rouge);color:#fff} .trio form{display:contents} /* barres d'agrégat */ .bar{height:22px;background:#fff;border:1px solid var(--rule);display:flex;overflow:hidden} .bar i{display:block;height:100%} .bar .o{background:var(--vert)}.bar .p{background:var(--ocre)}.bar .n{background:var(--rouge)} .win{border:2px solid var(--vert);padding:10px;background:rgba(44,110,73,.06);margin-top:4px} /* listes cochables */ .item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule)} .item .t{flex:1;font-size:15px} .item .t small{display:block;font-size:12.5px;color:var(--soft)} .item button{width:auto;margin:0;padding:7px 12px;font-size:12px;background:#fff; color:var(--ink);border:1px solid var(--rule)} .item button.mine{background:var(--accent);border-color:var(--accent);color:#fff} .item .taken{font-family:'Courier Prime',monospace;font-size:12.5px;color:var(--soft)} /* onglets — à cinq, ils ne tiennent plus sur 375 px de large. Plutôt que de rogner les libellés jusqu'à l'abréviation, la barre défile horizontalement ; le contenu de la page, lui, ne défile jamais de côté. */ .tabs{display:flex;border-bottom:1px solid var(--ink);margin-top:16px; overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tabs a,.tabs button{flex:1 0 auto;width:auto;margin:0;background:none;color:var(--soft); padding:11px 13px;white-space:nowrap; font-size:12px;letter-spacing:.06em;border-bottom:3px solid transparent;text-align:center; text-decoration:none;font-family:'Oswald',sans-serif;text-transform:uppercase;cursor:pointer} .tabs a.on,.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)} /* fiche invité dans l'onglet Invités */ .invite{border-bottom:1px solid var(--rule);padding:11px 0} .invite .haut{display:flex;align-items:center;gap:10px} .invite .nm{flex:1;font-size:15.5px} .invite .etat{font-family:'Courier Prime',monospace;font-size:11px;color:var(--soft); display:block;margin-top:2px} .invite summary{list-style:none;cursor:pointer;font-family:'Oswald',sans-serif; text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--soft); border:1px solid var(--rule);padding:5px 9px;background:none} .invite summary::-webkit-details-marker{display:none} .invite details[open] summary{background:var(--accent);border-color:var(--accent);color:#fff} .invite .form{background:#fff;border:1px solid var(--rule);padding:12px;margin-top:10px} .invite .form label{display:block} .invite .duo{display:flex;gap:8px;margin-top:10px} .invite .duo button{margin:0} .ok{margin-top:12px;padding:10px 12px;border-left:3px solid var(--vert); background:rgba(44,110,73,.08);font-size:14px} table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px} th{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;font-size:11px; letter-spacing:.09em;color:var(--soft);text-align:left;border-bottom:1px solid var(--ink);padding:6px 4px} td{padding:7px 4px;border-bottom:1px solid var(--rule);vertical-align:middle} td.num{font-family:'Courier Prime',monospace;text-align:right;white-space:nowrap} .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px} .mini{background:none;border:1px solid var(--rule);color:var(--soft);width:auto;margin:0; padding:5px 9px;font-size:11px;letter-spacing:.06em;font-family:'Oswald',sans-serif; text-transform:uppercase;text-decoration:none;display:inline-block;cursor:pointer} .mini.on{background:var(--vert);border-color:var(--vert);color:#fff} .mini.warn{border-color:var(--rouge);color:var(--rouge)} .calc{background:#fff;border:1px solid var(--rule);padding:14px;margin-top:16px; font-family:'Courier Prime',monospace;font-size:13.5px;line-height:1.7} .calc .r{border-top:1px solid var(--ink);margin-top:8px;padding-top:8px;display:block} .msg{background:#fff;border:1px dashed var(--rule);padding:12px;margin-top:8px; font-family:'Courier Prime',monospace;font-size:13px;white-space:pre-wrap;line-height:1.6} .voiture{background:#fff;border:1px solid var(--rule);padding:12px;margin-top:10px} .voiture .cond{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:15px;letter-spacing:.04em} .voiture .pax{font-size:14px;color:var(--soft);margin-top:3px} .orphelin{border-left:3px solid var(--rouge);background:rgba(168,50,45,.06)} .tag{display:inline-block;font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:.1em; text-transform:uppercase;padding:3px 8px;border:1px solid} .tag.ok{color:var(--vert);border-color:var(--vert)} .tag.no{color:var(--rouge);border-color:var(--rouge)} .line{display:flex;justify-content:space-between;gap:12px;font-family:'Courier Prime',monospace; font-size:14px;padding:5px 0} .line span:first-child{color:var(--soft)} /* Le montant ne se coupe jamais : sans ça, « 102,86 € » laisse le symbole tout seul à la ligne quand le libellé occupe deux lignes. */ .line span:last-child{white-space:nowrap;text-align:right} .line.total{border-top:1px solid var(--ink);margin-top:8px;padding-top:9px;font-weight:700;font-size:19px} .souche{background:#fff;border-top:1px solid var(--rule)} /* programme */ .day{margin-top:22px} .dayhead{display:flex;align-items:baseline;gap:10px;margin-bottom:2px} .dayhead .n{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.14em;color:#fff; background:var(--accent);padding:2px 7px;text-transform:uppercase} .dayhead.commun .n{background:var(--ocre)} .daysub{font-size:13px;color:var(--soft);margin:2px 0 12px} .rail{border-left:3px solid var(--accent);padding-left:16px;margin-left:6px} .rail.commun{border-left-color:var(--ocre)} .slot{position:relative;padding:0 0 16px} .slot::before{content:"";position:absolute;left:-22.5px;top:6px;width:9px;height:9px;border-radius:50%; background:var(--accent);border:2px solid var(--card)} .rail.commun .slot::before{background:var(--ocre)} .slot .h{font-family:'Courier Prime',monospace;font-size:13px;color:var(--soft)} .slot .t{font-family:'Oswald',sans-serif;font-size:17px;text-transform:uppercase;letter-spacing:.02em} .slot .l{font-size:14px;color:var(--soft)} .mergecap{font-family:'Courier Prime',monospace;font-size:12px;color:var(--soft);margin:-4px 0 14px 6px} .saved{font-size:13px;color:var(--vert);font-family:'Courier Prime',monospace;margin-top:10px;min-height:18px} .foot{margin-top:24px;text-align:center} .foot button{width:auto;padding:10px 16px;font-size:12px} .foot form{display:inline} .note{font-size:12.5px;color:var(--soft);margin-top:20px;line-height:1.6} /* ===================================================================== AJOUTS — module idées. Même vocabulaire graphique, rien de nouveau : le papier, le filet, la capitale Oswald et le monospace pour tout ce qui est chiffre ou métadonnée. ===================================================================== */ /* barre de navigation entre carnet et idées */ .nav{display:flex;gap:0;margin:0 0 16px;border:1px solid var(--rule);background:var(--card)} .nav a{flex:1;text-align:center;padding:12px 6px;text-decoration:none;color:var(--soft); font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:12.5px;letter-spacing:.09em; border-right:1px solid var(--rule)} .nav a:last-child{border-right:none} .nav a.on{background:var(--accent);color:#fff} /* une idée dans le fil */ .idee{display:block;text-decoration:none;color:inherit;background:var(--card); border:1px solid var(--rule);margin-top:12px;padding:14px 14px 12px;position:relative} .idee:hover{border-color:var(--accent)} .idee .cam{position:absolute;top:0;right:0;font-family:'Courier Prime',monospace;font-size:10px; letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;color:#fff;background:var(--soft)} .idee .cam.evg{background:var(--bleu)} .idee .cam.evjf{background:var(--rouge)} .idee .cam.commun{background:var(--ocre)} .idee h2{font-size:17px;padding-right:70px;line-height:1.2} .idee .par{font-family:'Courier Prime',monospace;font-size:11.5px;color:var(--soft);margin-top:5px} .idee .ex{font-size:14px;color:var(--soft);margin-top:8px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .idee .meta{display:flex;gap:14px;margin-top:10px;font-family:'Courier Prime',monospace; font-size:12px;color:var(--soft);align-items:center} .idee .vig{width:100%;height:150px;object-fit:cover;display:block;margin:10px 0 0; border:1px solid var(--rule);background:#fff} /* galerie de pièces jointes */ .pj{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-top:12px} .pj a{display:block;border:1px solid var(--rule);background:#fff;text-decoration:none;color:inherit} .pj a:hover{border-color:var(--accent)} .pj img{width:100%;aspect-ratio:1;object-fit:cover;display:block} .pj .doc{padding:12px 10px;text-align:center} .pj .doc .ic{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.12em; border:1px solid var(--rouge);color:var(--rouge);padding:2px 6px;display:inline-block} .pj .doc .nm{font-size:12px;margin-top:8px;line-height:1.35;word-break:break-word} .pj .doc .sz{font-family:'Courier Prime',monospace;font-size:11px;color:var(--soft);margin-top:4px} /* pouce consultatif */ .pouce{display:inline-flex;align-items:center;gap:7px;width:auto;margin:0; background:#fff;color:var(--soft);border:1px solid var(--rule);padding:9px 14px;font-size:13px} .pouce.on{background:var(--accent);border-color:var(--accent);color:#fff} .consultatif{font-size:12.5px;color:var(--soft);margin-top:8px;font-style:italic;line-height:1.5} /* commentaires */ .com{border-top:1px solid var(--rule);padding:11px 0} .com .qui{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:12.5px; letter-spacing:.08em;color:var(--accent)} .com .qd{font-family:'Courier Prime',monospace;font-size:11px;color:var(--soft);margin-left:7px} .com .tx{font-size:14.5px;margin-top:3px;white-space:pre-wrap;word-break:break-word} /* champ fichier — le natif est laid, on habille un label */ .fichiers{margin-top:12px} .fichiers input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden} .fichiers label{display:block;border:1px dashed var(--rule);background:#fff;padding:16px 12px; text-align:center;cursor:pointer;font-family:'Oswald',sans-serif;text-transform:uppercase; font-size:13px;letter-spacing:.08em;color:var(--soft)} .fichiers label:hover,.fichiers input:focus + label{border-color:var(--accent);color:var(--accent)} .fichiers .liste{font-family:'Courier Prime',monospace;font-size:12px;color:var(--soft); margin-top:8px;line-height:1.6} .vide{text-align:center;padding:30px 10px;color:var(--soft)} .vide .g{font-family:'Oswald',sans-serif;font-size:20px;text-transform:uppercase; letter-spacing:.06em;color:var(--rule)} /* ===================================================================== LE NOM DU COUPLE — d'après le logo fourni. Capitales en Crimson Pro, esperluette calligraphique posée en gros entre les deux lignes, exactement comme sur le fichier de Guillaume. ⚠ L'esperluette du logo est en NEW ICON SCRIPT, qui n'existe pas sur Google Fonts (fonte commerciale). En attendant le fichier, on utilise Pinyon Script — copperplate, hairlines fines, la plus proche de la forme du logo parmi les scripts libres. Pour basculer sur la vraie : déposer new-icon-script.woff2 dans public/fonts/, décommenter le @font-face ci-dessous, et remplacer le nom dans --script. ===================================================================== */ /* @font-face{ font-family:'New Icon Script'; src:url('/static/fonts/new-icon-script.woff2') format('woff2'); font-display:swap; } */ :root{--script:'Pinyon Script', cursive} .nom{text-align:center;margin:0} /* Le logo déposé en PNG. mix-blend-mode:multiply : le blanc du fichier se fond dans le papier, le noir reste noir. Un logo noir sur blanc devient donc « détouré » sans qu'on ait à produire un PNG à fond transparent — et si le fichier EST transparent, le rendu est identique, la règle ne gêne pas. */ /* 84 % et pas 100 % : le logo n'a aucune marge interne, collé aux bords du billet il étouffe. Le pourcentage tient aussi bien sur un petit téléphone que dans les 540 px du billet sur ordinateur. */ .nom .logo{display:block;width:min(400px,84%);height:auto;margin:6px auto 0; mix-blend-mode:multiply} .nom .l{display:block;font-family:'Crimson Pro',Georgia,serif;font-weight:400; text-transform:uppercase;color:var(--ink);line-height:.95; font-size:clamp(30px,10.5vw,52px);letter-spacing:.03em} /* La deuxième ligne se cale sous l'esperluette : c'est ce décalage qui fait la composition du logo, pas un simple centrage ligne à ligne. */ .nom .b{display:flex;align-items:center;justify-content:center;gap:.12em;margin-top:-.06em} .nom .amp{font-family:var(--script);font-weight:400;text-transform:none; font-size:clamp(52px,18vw,92px);line-height:.7;color:var(--ink); transform:translateY(.06em)} /* --- affiche vidéo (façade) --------------------------------------- Rien de YouTube n'est chargé tant qu'on n'a pas cliqué : une image servie par nos soins, un bouton, et l'iframe insérée seulement après. Sur un téléphone en 4G ça évite ~1 Mo de JavaScript au premier écran, et personne n'est signalé à Google pour avoir simplement ouvert le lien. */ /* La vidéo déborde des 20 px de marge du billet et va d'un bord à l'autre : sur un écran de téléphone, ces 40 px repris font une différence très visible, et le filet horizontal renforce la métaphore du ticket. */ .video{position:relative;display:block;padding:0; width:calc(100% + 40px);margin:22px -20px 0; border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); background:var(--ink);aspect-ratio:16/9;overflow:hidden;cursor:pointer} .video img{width:100%;height:100%;object-fit:cover;display:block; filter:saturate(.92) contrast(1.02);transition:transform .5s ease, filter .5s ease} .video:hover img,.video:focus-visible img{transform:scale(1.02);filter:saturate(1) contrast(1.04)} .video iframe{width:100%;height:100%;border:0;display:block} .video .play{position:absolute;inset:0;pointer-events:none} /* Le bouton reste au centre, la légende descend en bas : superposés, ils se disputaient le même espace et la légende devenait illisible. */ .video .rond{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:66px;height:66px;border-radius:50%;background:rgba(239,241,236,.93); display:flex;align-items:center;justify-content:center; box-shadow:0 6px 22px -8px rgba(27,42,34,.8);transition:transform .25s ease} .video:hover .rond{transform:translate(-50%,-50%) scale(1.08)} /* Triangle en CSS pur : pas d'icône à charger pour une seule flèche. */ .video .rond::after{content:"";border-left:19px solid var(--ink); border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px} .video .lgd{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px; font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--card); /* Dégradé plutôt qu'une ombre portée : lisible quel que soit le fond, et ça n'assombrit que le bas de l'image. */ background:linear-gradient(transparent, rgba(27,42,34,.62))} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}