/* ============================================================================= Fiche d'un événement du club (/ev/) — la feuille de club-event.html, sortie de la page le 21/10/2026 (audit du 20/10, §3 Performance) : elle était recopiée en ligne dans chacune des fiches pré-rendues (ev//), 39 Ko de plus à chaque page. Appelée avec ?v=, que scripts/build-fiches.mjs recalcule et repose dans club-event.html et dans chaque fiche : changer ce fichier, c'est relancer le build. ========================================================================== */ :root{ --navy:#052139; --ice:#eff9fe; --cyan:#2ac2de; --sky:#c7eafb; --electric:#3c5eab; --amber:#f6923e; --line: rgba(5,33,57,.12); /* Meme regle que l'agenda : le sol de la fiche est blanc. */ --fond: #ffffff; --shadow: 0 10px 40px rgba(5,33,57,.18); --r-btn:4px; --r-tile:12px; --r-card:16px; --r-pill:100px; --container:1080px; } *{box-sizing:border-box} /* `hidden` ne vaut `display:none` que dans la feuille du navigateur : la moindre classe qui pose `display:flex` le bat, et le bloc reste à l'écran. C'est ce qui affichait « Cet évènement se lance collectivement — dès que 25 personnes se seront inscrites » sur TOUTES les fiches, y compris celles d'un événement payant à date fixe. Une ligne, et la page entière redevient franche. */ [hidden]{ display:none !important } body{ margin:0; background:var(--fond); color:var(--navy); font-family:"aktiv-grotesk","Archivo",sans-serif; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none } .wrap{ max-width:var(--container); margin:0 auto; padding:0 28px } @media (max-width: 480px) { .wrap { padding: 0 16px; max-width: 100%; box-sizing: border-box; } } @media (max-width: 390px) { .wrap { padding: 0 12px; } } button{ font-family:inherit; cursor:pointer } header.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--line) } .nav-inner{ max-width:var(--container); margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px } .wordmark{ display:inline-flex; align-items:center; text-decoration:none } .wordmark img{ display:block; height:20px; width:auto } .wordmark-club{ font-size:10.5px; font-weight:700; line-height:1; align-self:flex-start; margin-left:2px; color:var(--navy) } @media(max-width:600px){ .wordmark img{ height:18px } } .nav-links{ display:flex; gap:28px; font-size:14px; font-weight:600 } .nav-links a{ opacity:.7 } .nav-links a:hover{ opacity:1 } .nav-cta{ background:var(--navy); color:var(--ice); font-weight:700; font-size:13.5px; padding:10px 18px; border-radius:var(--r-btn); border:none; white-space:nowrap } .nav-right{ display:flex; align-items:center; gap:18px } .lang-switch{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800 } .lang-switch button{ background:none; border:0; padding:4px 2px; color:rgba(5,33,57,.4); font-weight:800 } .lang-switch button.on{ color:var(--navy) } .lang-switch span{ color:rgba(5,33,57,.25) } /* SUR TÉLÉPHONE, LE MENU SE DÉPLIE. Les liens disparaissaient sous 860 px sans rien pour les remplacer : depuis une fiche, on ne pouvait plus aller nulle part. Le bouton ouvre la même liste, « Rejoindre le club » compris, et une cible de 44 px se touche du pouce. */ .nav-inner{ position:relative } .nav-burger, .nav-links .nav-join{ display:none } /* à 320 px, logo + FR/EN + menu dépassaient de 2 px : la page défilait de côté */ @media (max-width:480px){ .nav-inner{ padding:14px 20px; gap:12px } .nav-right{ gap:12px } } @media (max-width:860px){ .nav-links, .nav-right > .nav-cta{ display:none } .nav-burger{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:1px solid var(--line); border-radius:var(--r-btn); color:var(--navy); font-size:20px } .nav.open .nav-links{ display:flex; flex-direction:column; gap:18px; position:absolute; top:100%; left:0; right:0; background:#fff; padding:20px 28px 24px; border-bottom:1px solid var(--line); box-shadow:0 12px 24px rgba(5,33,57,.08) } .nav.open .nav-links a{ opacity:1 } .nav.open .nav-links .nav-join{ display:inline-block; align-self:flex-start } } /* CONTRASTE (21/10/2026, audit §3) : à .55, « Maison de l'IA » dans le fil d'Ariane tombait à 3,8:1 sur blanc ; .7 donne 6,1:1 (WCAG 1.4.3 : 4,5). */ .breadcrumb{ padding:20px 0 0; font-size:13.5px; font-weight:600; color:rgba(5,33,57,.7) } .breadcrumb a{ color:var(--electric) } .hero{ position:relative; margin:18px 0 0; border-radius:var(--r-card); overflow:hidden; min-height:320px; background: radial-gradient(circle at 25% 25%, rgba(42,194,222,.35), transparent 55%), radial-gradient(circle at 85% 80%, rgba(60,94,171,.55), transparent 60%), linear-gradient(150deg,#0a3455,#052139 65%); display:flex; align-items:flex-end; padding:36px 40px; } .hero::before{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,33,57,.6), transparent 55%) } .hero-tag{ display:inline-block; background:var(--amber); color:var(--navy); font-weight:700; font-size:12px; padding:6px 14px; border-radius:var(--r-pill); margin-bottom:14px } .hero-meta{ display:flex; gap:20px; flex-wrap:wrap; font-size:14px; color:rgba(239,249,254,.88) } .hero-meta span{ display:flex; align-items:center; gap:7px } .hero-meta svg{ width:15px; height:15px; opacity:.9 } /* LA DATE EST CE QU'ON CHERCHE EN PREMIER (CHG-033, « la date plus grand ») : elle passe devant l'heure et le lieu, en gras. */ .hero-meta .meta-date{ font-size:19px; font-weight:800; letter-spacing:-.01em } .hero-meta .meta-date svg{ width:18px; height:18px } /* UNE SÉANCE PASSÉE OU RETIRÉE (21/10/2026) : le bandeau se lit avant tout le reste, sous le titre, et mène aux prochaines dates. */ .ev-etat{ margin:18px 0 0; padding:14px 18px; border-radius:var(--r-tile); background:rgba(246,146,62,.14); border:1px solid rgba(246,146,62,.45); font-size:14.5px; line-height:1.55; color:var(--navy) } .ev-etat p{ margin:0 } .ev-etat a{ color:var(--electric); font-weight:700; text-decoration:underline; text-underline-offset:2px } /* L'ATTENTE A LA TAILLE D'UN ÉCRAN (21/10/2026, CLS 0,70 sur mobile). La fiche, cachée tant que la base n'a pas répondu, ne laissait que cette ligne : le pied de page remontait sous elle, puis redescendait d'un bloc quand la fiche s'affichait. Un écran plein le garde hors de vue pendant ce temps. */ #evLoading{ min-height:100vh; padding:80px 28px; text-align:center; color:rgba(5,33,57,.7) } .ev-missing-titre{ font-size:26px; font-weight:800; margin:0 0 10px; line-height:1.2 } /* Précédent / suivant (CHG-037). */ .ev-suite{ display:flex; justify-content:space-between; gap:12px; margin:18px 0 0; font-size:13.5px; font-weight:700 } .ev-suite a{ color:var(--electric); text-decoration:none; max-width:48%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .ev-suite a:hover{ text-decoration:underline } .ev-suite[hidden]{ display:none } /* Les photos du lieu (CHG-039). */ .venue-photos-btn{ margin-top:10px; background:none; border:1px solid var(--line, rgba(5,33,57,.12)); border-radius:100px; padding:7px 14px; font-weight:700; font-size:13px; color:var(--navy, #052139); cursor:pointer } .venue-photos-btn:hover{ border-color:currentColor } .venue-photos-btn[hidden]{ display:none } /* ---------- galerie photo (cover) ---------- */ .event-gallery{ margin:18px 0 0; display:grid; gap:8px; height:380px; border-radius:var(--r-card); overflow:hidden; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:1fr 1fr; } /* SUR TÉLÉPHONE, LA COUVERTURE N'AVAIT PAS DE HAUTEUR. `height:auto` demandait à la tuile de se dimensionner sur son contenu — or la photo est posée en `position:absolute` : elle ne compte pour rien. Il ne restait que la gouttière entre les deux rangées que `grid-row:1/3` réclamait encore, soit un ruban de huit pixels où passait une tranche d'image. Une bande de couverture a une FORME, pas une hauteur devinée : 16/9, la même que partout ailleurs sur le site. */ @media (max-width:760px){ .event-gallery{ height:auto; aspect-ratio:16/9; grid-template-columns:1fr; grid-template-rows:1fr; gap:0 } .event-gallery .gallery-tile:not(.gallery-main){ display:none } .event-gallery .gallery-main{ grid-row:1; grid-column:1 } /* Deux sélecteurs, pas un : la règle qui masque ce compteur est écrite plus bas dans la feuille, et à poids égal c'est la dernière qui gagne. */ .event-gallery .gallery-btn-mobile{ display:flex } } /* UNE SEULE PHOTO SE REGARDE AUSSI EN GRAND. Elle devenait un simple décor non cliquable — la seule image de la fiche était la seule qu'on ne pouvait pas ouvrir. */ .event-gallery.solo{ grid-template-columns:1fr; grid-template-rows:1fr } .gallery-tile{ position:relative; overflow:hidden; cursor:pointer; border:none; padding:0; display:block; display:flex; align-items:center; justify-content:center; background:#f2f5f8; } .gallery-tile svg.deco{ position:absolute; inset:0; width:100%; height:100%; opacity:.9 } .gallery-tile .tile-icon{ position:relative; z-index:1; width:34px; height:34px; color:rgba(239,249,254,.55) } .gallery-main{ grid-row:1 / 3; grid-column:1 } .gallery-tile:nth-child(2){ grid-column:2; grid-row:1 } .gallery-tile:nth-child(3){ grid-column:3; grid-row:1 } .gallery-tile:nth-child(4){ grid-column:2; grid-row:2 } .gallery-tile:nth-child(5){ grid-column:3; grid-row:2 } .gallery-btn{ position:absolute; bottom:14px; right:14px; z-index:2; background:rgba(255,255,255,.95); color:var(--navy); font-weight:700; font-size:13px; padding:9px 16px; border-radius:var(--r-pill); border:none; cursor:pointer; display:flex; align-items:center; gap:7px; box-shadow:0 4px 14px rgba(5,33,57,.25); } .gallery-btn svg{ width:15px; height:15px } .gallery-btn:hover{ background:#fff } /* Le compteur vivait sur la DERNIÈRE tuile — celle que le téléphone masque. Rien n'y disait donc qu'il restait quatre photos à voir. Il y en a un second, posé sur la couverture, et le CSS n'en montre qu'un à la fois. */ .gallery-btn-mobile{ display:none } /* AUCUNE IMAGE N'EST ROGNEE — PLUS JAMAIS, ET SANS CONDITION. Deux croyances sont tombees l'une apres l'autre. D'abord que rogner ne coutait qu'un bord de mur : le logotype « ChatGPT », deux fois plus large que sa tuile, y perdait ses dernieres lettres. On a donc mesure la forme du fichier, et pose entier tout ce qui n'avait pas la forme de sa tuile. Puis le logo « Claude » est arrive : un carre de 447 px, un mot large couche au milieu, du blanc autour. Sa forme ne s'ecartait de rien, la regle le laissait passer, et la tuile lui a mange les deux cotes. La lecon est que LA FORME D'UN FICHIER NE DIT RIEN DE CE QU'IL Y A DEDANS. Aucun seuil ne saura ou l'image supporte d'etre coupee, parce que la reponse n'est pas dans ses dimensions. On cesse donc de deviner : l'image est posee ENTIERE, et le vide autour d'elle est comble par la meme image floutee et agrandie. Ce n'est pas une bande noire : c'est le prolongement de ce qu'on regarde. Une photo au format de sa tuile ne laisse rien voir de ce fond ; un logotype se pose sur sa propre couleur. La regle vaut pour les images d'aujourd'hui et pour celles qu'on deposera demain, sans y revenir. */ .media-fond{ position:absolute; inset:0; overflow:hidden; z-index:0 } .media-fond img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; /* Le fond doit passer pour le PROLONGEMENT de la photo, pas pour un voile posé derrière elle : trop transparent, il virait au bleu pâle et l'image semblait flotter au milieu de rien. */ filter:blur(28px) saturate(1.15); transform:scale(1.3); opacity:.92; } .media-sujet{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1 } /* Une vidéo n'a pas d'image de fond avant d'être chargée : elle se pose sur la couleur de la maison. */ video.media-sujet{ background:var(--navy) } /* La visionneuse ne rognait déjà jamais. Elle garde son fond sombre : à cette taille, un flou plein cadre se remarquerait plus que l'image. */ .lightbox-main .media-fond img{ filter:blur(34px) saturate(1.2); opacity:.38 } .lightbox-main .media-sujet{ border-radius:18px } /* Sur une vignette de 64 px, 26 px de flou ne sont plus un fond : c'est une tache. Le flou suit la taille de ce qu'il accompagne. */ .lightbox-thumb .media-fond img{ filter:blur(7px) saturate(1.25); transform:scale(1.3) } /* CE QU'ON REGARDE DOIT ETRE DIT. Sans ce bandeau, l'apercu est indiscernable de la page en ligne — et l'on croirait l'evenement publie. */ .apercu-bandeau{ background:var(--navy); color:var(--ice); font-size:12.5px; font-weight:700; text-align:center; padding:9px 16px; letter-spacing:.01em; } .apercu-bandeau[hidden]{ display:none } .event-header{ margin:24px 0 0 } .event-header h1{ font-size:clamp(26px,4vw,38px); font-weight:800; letter-spacing:-.02em; margin:10px 0 12px; line-height:1.08; color:var(--navy) } /* La ligne date · heure · lieu : 4,4:1 à .6, 6,1:1 à .7. */ .event-header .hero-meta{ color:rgba(5,33,57,.7) } /* Le sujet d'une séance (« Session 2/4 · Produire avec Claude ») sous le nom de son module. */ .event-header .ev-sujet{ font-size:clamp(17px,2.2vw,21px); font-weight:700; color:rgba(5,33,57,.78); margin:-4px 0 12px; line-height:1.3 } .event-header .hero-meta svg{ opacity:.75 } /* ---------- visionneuse (lightbox) ---------- */ .lightbox{ position:fixed; inset:0; background:rgba(5,33,57,.94); z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px } .lightbox[hidden]{ display:none } .lightbox-close{ position:absolute; top:22px; right:28px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:var(--ice); font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center } .lightbox-close:hover{ background:rgba(255,255,255,.22) } .lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:var(--ice); cursor:pointer; display:flex; align-items:center; justify-content:center } .lightbox-nav:hover{ background:rgba(255,255,255,.22) } .lightbox-nav svg{ width:20px; height:20px } .lightbox-prev{ left:24px } .lightbox-next{ right:24px } /* Ouverte dans la modale de l'agenda, la visionneuse n'a que la hauteur de l'encart : sans ce plafond, l'image débordait sous les vignettes. */ .lightbox-main{ position:relative; width:100%; max-width:760px; aspect-ratio:4/3; max-height:62vh; border-radius:18px; overflow:hidden; display:flex; align-items:center; justify-content:center } .embed .lightbox{ padding:18px } .embed .lightbox-close{ top:12px; right:14px } .lightbox-main svg.deco{ position:absolute; inset:0; width:100%; height:100%; opacity:.9 } .lightbox-main .tile-icon{ position:relative; z-index:1; width:56px; height:56px; color:rgba(239,249,254,.5) } .lightbox-counter{ margin-top:16px; background:rgba(255,255,255,.12); color:var(--ice); font-size:12.5px; font-weight:700; padding:5px 14px; border-radius:100px } .lightbox-thumbs{ display:flex; gap:10px; margin-top:16px; max-width:100%; overflow-x:auto; padding-bottom:4px; flex-wrap: nowrap; overflow-x: hidden; } @media (max-width: 480px) { .lightbox-main, .lightbox-thumbs { max-width: 100%; overflow-x: hidden; } .content p, .prose-espace p { max-width: 100%; overflow-x: hidden; } } .lightbox-thumb{ position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; cursor:pointer; flex-shrink:0; border:2px solid transparent; opacity:.55; transition:opacity .15s, border-color .15s } .lightbox-thumb.active{ opacity:1; border-color:var(--cyan) } .lightbox-thumb svg.deco{ position:absolute; inset:0; width:100%; height:100%; opacity:.9 } .funding-banner{ display:flex; gap:14px; align-items:flex-start; background:var(--sky); border-radius:var(--r-tile); padding:16px 20px; margin-top:18px; font-size:13.5px; line-height:1.55; color:var(--navy); } .funding-banner-icon{ width:34px; height:34px; border-radius:50%; background:var(--navy); color:var(--ice); display:flex; align-items:center; justify-content:center; flex-shrink:0 } .funding-banner-icon svg{ width:17px; height:17px } .funding-banner b{ color:var(--electric) } .progress-block{ margin-bottom:18px } .progress-label{ display:flex; justify-content:space-between; font-size:13px; font-weight:700; margin-bottom:8px } .progress-label .count{ color:var(--electric) } .progress-track{ height:10px; border-radius:100px; background:var(--sky); overflow:hidden } /* La barre se remplit par transform, pas par width : animer une largeur fait recalculer la mise en page a chaque image, une transformation ne touche qu'a la composition. L'extremite droite devient droite — un rayon mis a l'echelle horizontalement s'ecraserait en ellipse — et c'est la piste du dessous, elle, qui garde sa forme de gelule et decoupe les bords. */ .progress-fill{ height:100%; width:100%; background:var(--cyan); transform:scaleX(0); transform-origin:left center; transition:transform .4s ease; will-change:transform } @media (prefers-reduced-motion:reduce){ .progress-fill{ transition:none } } .progress-note{ font-size:12px; color:rgba(5,33,57,.55); margin-top:8px; line-height:1.5 } /* LA CARTE DE RÉSERVATION N'EST PAS UNE COLONNE, C'EST UN ENCART. En `1.65fr 1fr`, elle s'étirait avec l'écran : à 1 440 px elle faisait 420 px de large pour porter un prix, un bouton et deux icônes. Le contenu y flottait, et dans l'encart de l'agenda — plus étroit — le déséquilibre sautait aux yeux. Elle prend maintenant la largeur dont elle a besoin, bornée, et rend le reste au texte de l'événement. */ .layout{ display:grid; grid-template-columns:minmax(0,1.85fr) minmax(268px,344px); gap:40px; margin:44px 0 60px; align-items:start } /* Empilée, la carte gardait la largeur de la page : 827 px dans l'encart de l'agenda, pour porter un prix et un bouton. Elle garde donc sa taille de carte — sur un téléphone, 420 px dépasse l'écran, elle y redevient pleine largeur toute seule. */ @media (max-width:860px){ .layout{ grid-template-columns:1fr } .booking{ max-width:420px; position:static } } /* LE TITRE D'UNE SECTION N'EST PAS UN TITRE DE PAGE. À 21 px en 800, chaque « Infos pratiques » pesait autant que le nom de l'événement ; six d'affilée, la fiche n'avait plus de hiérarchie du tout. Un filet au-dessus fait le travail de séparation que faisaient trente-six pixels de vide. Et ces libellés deviennent des intitulés, pas des titres : « À propos de cet événement » annonçait en gras un texte dont le PREMIER MOT était déjà un titre écrit par l'organisateur — deux titres l'un sur l'autre, le nôtre plus gros que le sien. Le nôtre se range donc au-dessus, en petites capitales grises, et c'est le contenu qui parle. */ /* `> h2` : uniquement le libellé de la section. Un h2 écrit par l'organisateur vit dans `.prose-espace`, un cran plus bas dans l'arbre — sans ce chevron, le sélecteur l'attrapait aussi et mettait le titre de sa description en petites capitales. */ /* LISIBLE, MÊME DISCRET (21/10/2026, audit §3). À 11,5 px et .45, ces intitulés tombaient à 2,84:1 — et à 9,2 px réels sur desktop, où scale.css réduit tout à 80 %. 13 px (10,4 px réduits, en capitales espacées) et .72 (6,6:1) : ils restent sous le contenu, sans disparaître. */ .content .content-block > h2{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(5,33,57,.72); margin:0 0 14px } .content p{ font-size:15.5px; line-height:1.7; color:rgba(5,33,57,.8); margin:0 0 16px; max-width:640px } .content-block{ margin:0 0 30px; padding-top:30px; border-top:1px solid var(--line) } .content-block.is-first{ padding-top:0; border-top:0 } .content-block:last-child{ margin-bottom:0 } /* Description enrichie : l'organisateur la met en forme dans /espace/, elle se lit ici dans la même graisse et le même rythme que le reste de la fiche. */ .prose-espace h1{ font-size:21px; font-weight:800; line-height:1.25; letter-spacing:-.015em; margin:28px 0 10px } .prose-espace h2{ font-size:18px; font-weight:800; line-height:1.3; letter-spacing:-.01em; margin:26px 0 9px } .prose-espace h3{ font-size:15.5px; font-weight:700; line-height:1.35; margin:22px 0 7px } .prose-espace h1:first-child, .prose-espace h2:first-child, .prose-espace h3:first-child, .prose-espace p:first-child{ margin-top:0 } .prose-espace p{ font-size:15.5px; line-height:1.7; color:rgba(5,33,57,.8); margin:0 0 16px; max-width:640px } .prose-espace ul, .prose-espace ol{ margin:0 0 16px 22px; font-size:15.5px; line-height:1.7; color:rgba(5,33,57,.8); max-width:640px } .prose-espace ul{ list-style:disc } /* LES PUCES ONT UNE FORME, ET ELLE VOYAGE. Le marqueur est posé dans l'Espace comme un attribut sur la liste (`data-marqueur`), pas comme un style en ligne : un attribut traverse le nettoyage HTML sans ouvrir la porte à du CSS arbitraire sur un site public. Ces règles sont donc DUPLIQUÉES à l'identique dans espace/index.html et club-event.html — l'auteur doit voir en écrivant exactement ce que le visiteur lira. */ .prose-espace ul[data-marqueur="cercle"]{ list-style-type:circle } .prose-espace ul[data-marqueur="carre"]{ list-style-type:square } .prose-espace ul[data-marqueur="tiret"]{ list-style:none; padding-left:1.1em } .prose-espace ul[data-marqueur="tiret"] > li::before{ content:"\2013"; margin-left:-1.1em; width:1.1em; display:inline-block; color:inherit } .prose-espace ul[data-marqueur="fleche"]{ list-style:none; padding-left:1.1em } .prose-espace ul[data-marqueur="fleche"] > li::before{ content:"\203A"; margin-left:-1.1em; width:1.1em; display:inline-block; font-weight:700; color:var(--electric, #3c5eab) } .prose-espace ul[data-marqueur="coche"]{ list-style:none; padding-left:1.35em } .prose-espace ul[data-marqueur="coche"] > li::before{ content:"\2713"; margin-left:-1.35em; width:1.35em; display:inline-block; font-weight:700; color:var(--electric, #3c5eab) } .prose-espace ol[data-marqueur="alpha"]{ list-style-type:lower-alpha } .prose-espace ol[data-marqueur="ALPHA"]{ list-style-type:upper-alpha } .prose-espace ol[data-marqueur="romain"]{ list-style-type:lower-roman } .prose-espace ol[data-marqueur="ROMAIN"]{ list-style-type:upper-roman } /* « 1) » n'existe pas comme list-style : on le dessine. */ .prose-espace ol[data-marqueur="paren"]{ list-style:none; counter-reset:paren; padding-left:1.5em } .prose-espace ol[data-marqueur="paren"] > li{ counter-increment:paren } .prose-espace ol[data-marqueur="paren"] > li::before{ content:counter(paren) ") "; margin-left:-1.5em; width:1.5em; display:inline-block } .prose-espace ol{ list-style:decimal } .prose-espace li{ margin:4px 0 } .prose-espace blockquote{ border-left:2px solid var(--line); padding-left:14px; margin:0 0 16px; color:rgba(5,33,57,.7) } .prose-espace a{ color:var(--electric); text-decoration:underline; text-underline-offset:2px } .prose-espace mark{ background:#fff3c4; color:inherit; padding:.05em .18em; border-radius:2px } .prose-espace hr{ border:0; border-top:1px solid var(--line); margin:26px 0 } .prose-espace code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; background:rgba(5,33,57,.06); padding:.1em .3em; border-radius:3px } .prose-espace ul ul{ list-style:circle } .prose-espace ul ul ul{ list-style:square } .prose-espace ol ol{ list-style:lower-alpha } /* UNE FICHE TECHNIQUE, PAS DOUZE BOÎTES. « Parking — Yes » n'a pas besoin d'un cadre, d'une ombre et de trente-quatre pixels de marge : il a besoin d'être lu d'un coup d'œil, à côté des autres. Un seul cadre, des filets entre les lignes, la clef à gauche et la valeur à droite — et la valeur cesse d'être en gras, puisque tout ne peut pas être important. */ .spec-list{ background:#fff; border:1px solid var(--line); border-radius:var(--r-tile); overflow:hidden } .spec-row{ display:grid; grid-template-columns:minmax(110px,32%) 1fr; gap:18px; padding:13px 18px; border-top:1px solid var(--line) } .spec-row:first-child{ border-top:0 } .spec-row .k{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:rgba(5,33,57,.7); padding-top:2px } .spec-row .v{ font-size:14.5px; font-weight:500; line-height:1.55; color:var(--navy) } @media (max-width:520px){ .spec-row{ grid-template-columns:1fr; gap:3px } } /* Le programme se lit dans l'ordre des heures : la colonne de gauche les aligne, chiffres de même chasse, et c'est elle qui porte la couleur. */ .prog-list .k{ text-transform:none; font-size:13.5px; font-weight:700; color:var(--electric); font-variant-numeric:tabular-nums } /* Un module n'a pas UNE date : il en a quatre à six. La fiche les liste, avec leur lieu, et chacune se réserve d'ici. */ /* UNE LIGNE DE DATE EST UNE LIGNE, PAS UNE CARTE. Quatre dates au même format prenaient la hauteur d'un écran : la liste se lit d'un coup d'œil, et chaque ligne n'a que trois choses à dire — quand, où, et le bouton. */ .date-list{ list-style:none; margin:0; padding:0; display:grid; gap:7px } .date-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:var(--r-tile); padding:9px 8px 9px 14px } .date-row .when{ font-size:13.5px; font-weight:700 } .date-row .where{ flex:1 1 120px; min-width:0; font-size:12.5px; color:rgba(5,33,57,.7) } .date-row .btn{ flex:0 0 auto; width:auto; margin-left:auto; padding:7px 15px; font-size:12.5px; white-space:nowrap } /* UNE DATE A SON SUJET (24/09/2026). Les quatre dates d'un cycle ChatGPT ne se valent pas : « Session 1/4 · Configurer votre ChatGPT » n'est pas « Session 3/4 · Connecter vos outils ». La ligne porte ce sous-titre, et le texte de la date se déplie dessous — la fiche du module, elle, reste le texte commun. */ .date-row .sujet{ flex:1 1 100%; display:flex; align-items:baseline; gap:6px 12px; flex-wrap:wrap; font-size:13px; font-weight:600; color:var(--navy); margin:-2px 0 0 } .date-row .sujet button{ background:none; border:0; padding:0; font:inherit; font-size:12.5px; font-weight:700; color:var(--electric); cursor:pointer; text-decoration:underline; text-underline-offset:2px } .date-row .date-detail{ flex:1 1 100%; border-top:1px solid var(--line); padding:12px 6px 4px 0 } .date-row .date-detail[hidden]{ display:none } .date-row .date-detail.prose-espace p, .date-row .date-detail.prose-espace ul{ font-size:14px } .date-row .date-detail.prose-espace h2{ font-size:15.5px; margin-top:16px } /* MODE ENCART. La fiche s'ouvre aussi dans la modale d'une autre page — les sessions de la Maison de l'IA. On retire alors ce qui appartient à la page qui l'entoure (barre, fil d'Ariane, pied, « À voir aussi ») et on ne garde que la fiche. Même page, même code : c'est le seul moyen qu'elle ne dérive pas de celle que /ev/ affiche. */ html.embed{ background:#fff } .embed body{ background:#fff } .embed header.nav, .embed .breadcrumb, .embed footer.footer, .embed .related{ display:none !important } /* Ouverte dans une vue du shell (une carte de l'agenda y mène), la barre du shell suffit : celle de la page dirait la même chose une ligne plus bas. */ .embedded header.nav{ display:none } .embed .wrap{ padding:0 4px } .embed .event-gallery{ margin-top:0 } /* UNE VRAIE CARTE. « Attitude Hotels (Salle) » ne se trouve pas en cherchant son nom : l'aplat dégradé et son lien au petit bonheur ne disaient donc rien de plus que la ligne d'adresse au-dessus. Le lieu porte maintenant son point, posé depuis /espace/, et c'est lui qui est montré. */ .map-tile{ border-radius:var(--r-tile); overflow:hidden; border:1px solid var(--line); background:#fff } .map-frame{ display:block; width:100%; height:260px; border:0; background:var(--sky) } .map-frame[hidden]{ display:none } .map-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px } .map-frame + .map-foot{ border-top:1px solid var(--line) } .map-foot .where{ font-weight:700; font-size:14.5px } .map-foot .addr{ font-size:13px; color:rgba(5,33,57,.7); margin-top:2px } .map-foot a{ margin-left:auto; font-weight:700; color:var(--electric); font-size:13.5px; white-space:nowrap } .map-pin{ display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; min-height:150px; background:linear-gradient(135deg, var(--sky), var(--ice)) } /* La carte attend le clic (voir club-event.html) : une cible de 44 px. */ .map-show{ min-height:44px; padding:10px 18px; border-radius:var(--r-pill); border:1px solid var(--electric); background:#fff; color:var(--electric); font-weight:700; font-size:13.5px } .map-show:hover{ background:var(--electric); color:#fff } .map-pin[hidden]{ display:none } .map-pin svg{ width:28px; height:28px; color:var(--electric) } .organizer{ display:flex; align-items:center; gap:14px } .organizer .avatar{ width:48px; height:48px; border-radius:50%; background:var(--navy); color:var(--ice); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; flex-shrink:0; overflow:hidden } .organizer .name{ font-weight:700; font-size:14.5px } .organizer .role{ font-size:13px; color:rgba(5,33,57,.7) } .organizer .supported-by{ font-size:12.5px; color:var(--electric); margin-top:3px } .organizer .supported-by b{ color:var(--navy) } /* UN SEUL INTERVENANT NE TIENT PAS DANS UNE DEMI-COLONNE. Figée à deux colonnes, la grille coupait une bio de six lignes en un ruban de vingt-cinq caractères pendant que la moitié droite restait vide. `auto-fit` laisse une personne occuper toute la largeur, et deux se ranger côte à côte. */ .speakers-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:14px } /* La bio prend toute la largeur de la carte, sous le nom. Coincée à droite d'une photo de 58 px, elle se lisait en colonnes de dix mots — sur mobile, de six. */ .speaker-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-tile); padding:18px 20px; display:flex; flex-wrap:wrap; gap:0 16px; align-items:center } .speaker-card .photo{ width:58px; height:58px; border-radius:50%; flex-shrink:0; background:var(--electric); color:var(--ice); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; } .speaker-card .who{ min-width:0; flex:1 1 140px } .speaker-card .name{ font-weight:700; font-size:15.5px; line-height:1.3; margin-bottom:1px } .speaker-card .role{ font-size:12.5px; color:var(--electric); font-weight:600 } .speaker-card .bio{ flex:1 1 100%; font-size:13.5px; color:rgba(5,33,57,.68); line-height:1.6; margin:14px 0 0 } .speaker-card .bio p{ margin:0 0 8px; font-size:inherit; color:inherit; max-width:none } .speaker-card .bio p:last-child{ margin-bottom:0 } .speaker-card .bio ul, .speaker-card .bio ol{ font-size:inherit; margin:0 0 8px 20px } /* ---------- sidebar sticky ---------- */ .booking{ position:sticky; top:96px; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:22px; box-shadow:var(--shadow) } /* L'état et le prix sur une même ligne : ce sont les deux choses qu'on lit avant de décider, et les séparer par un filet les faisait lire deux fois. */ .booking-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap } .booking .pill-status{ display:inline-block; background:var(--sky); color:var(--navy); font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:var(--r-pill) } /* 22 px, pas 24 : à 24 le prix et la pastille ne tenaient plus sur la même ligne dans une carte de 344 px, et la pastille passait dessous. */ .booking .price-wrap{ font-size:22px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:tabular-nums } .booking .price-wrap .tax{ font-size:10.5px; font-weight:700; color:rgba(5,33,57,.45); margin-left:5px; text-transform:uppercase; letter-spacing:.03em } .access{ margin:18px 0 16px } .access-label{ display:block; font-size:13.5px; font-weight:700; color:rgba(5,33,57,.7) } .access-note{ margin:3px 0 0; font-size:13.5px; color:rgba(5,33,57,.7); line-height:1.45 } .booking .date-row{ display:flex; align-items:center; gap:12px; margin-bottom:18px } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:14.5px; padding:14px 20px; border-radius:var(--r-btn); border:none; width:100%; transition:.2s } .btn-cyan{ background:var(--cyan); color:var(--navy) } .btn-cyan:hover{ background:#22b0cb } .btn[aria-busy="true"]{ opacity:.6; cursor:progress } .btn-outline-navy{ background:transparent; color:var(--navy); border:1px solid var(--line); margin-top:10px } .btn-outline-navy:hover{ border-color:var(--navy) } /* « Partager » nommé : deux ronds muets au centre d'une carte ne disent pas ce qu'ils font, et personne ne clique pour le découvrir. */ .share{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line) } .share-label{ font-size:13px; color:rgba(5,33,57,.55) } .share-row{ display:flex; gap:10px } .share-row button{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--navy) } .share-row button:hover{ border-color:var(--navy) } .share-row svg{ width:16px; height:16px } /* LA BILLETTERIE. Un événement peut avoir plusieurs catégories et plusieurs paliers ; la barre latérale montre ce qui se vend AUJOURD'HUI, et laisse choisir quand il y a le choix. */ .tickets{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px } .ticket-opt{ position:relative; display:block; border:1px solid var(--line); border-radius:var(--r-tile); padding:12px 14px; cursor:pointer; transition:border-color .15s, background .15s } .ticket-opt:hover{ border-color:rgba(5,33,57,.28) } .ticket-opt.on{ border-color:var(--electric); background:rgba(60,94,171,.04) } .ticket-opt.solo{ cursor:default; border-color:var(--line); background:transparent; padding:0; border:0 } .ticket-opt input{ position:absolute; opacity:0; width:0; height:0 } .ticket-opt .row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px } .ticket-opt .nom{ font-weight:700; font-size:14.5px } .ticket-opt .prix{ font-weight:800; font-size:16px; white-space:nowrap } .ticket-opt.solo .prix{ font-size:19px } .ticket-opt .tax{ font-size:10.5px; font-weight:700; color:rgba(5,33,57,.45); margin-left:5px; text-transform:uppercase; letter-spacing:.03em } /* Ce sont des dans un