/* ===================================================================== Creattero : design jaune, crème et noir, celui du logo. Polices système (CSP-safe, aucune dépendance externe), sauf Lemon pour le logo, servie par le site. ⚠️ LES NOMS DE LITTERO SONT GARDÉS, PAS LEURS COULEURS. « beige » et « mauve » nomment des paliers que tout le reste de la feuille utilise : les renommer toucherait des centaines de règles pour rien. Le beige est devenu une crème, le mauve une gamme de jaune. Le jaune du logo (#ffc42e) est le palier 400 ; comme couleur de TEXTE il est illisible sur la crème (contraste 1,6), d'où un primaire ambre foncé (600) pour les liens et les textes de marque, et le jaune réservé aux FONDS (en-tête, boutons, pastilles), où le noir s'y lit à 11,7. ===================================================================== */ :root { /* Crème (neutres chauds) */ --beige-50: #fffdf6; --beige-100: #fff9e8; --beige-200: #fdf0cc; --beige-300: #f0dfae; --beige-400: #d6c08a; --beige-500: #a8925c; --paper: #ffffff; /* Jaune (marque) */ --mauve-100: #fff6d6; --mauve-200: #ffeaa3; --mauve-300: #ffd866; --mauve-400: #ffc42e; /* jaune du logo, en fond seulement */ --mauve-500: #e0a400; --mauve-600: #8a5d00; /* primaire : texte et liens (5,5 sur la crème) */ --mauve-700: #6e4a00; --mauve-800: #4a3200; /* Encre (le noir du logo) */ --ink-900: #15120c; --ink-700: #3b352b; --ink-500: #625a4c; --ink-300: #9a917f; /* Sémantique */ --bg: var(--beige-100); --surface: var(--paper); --surface-2: var(--beige-50); --border: var(--beige-300); --border-soft: var(--beige-200); --fg: var(--ink-900); --fg-2: var(--ink-700); --fg-3: var(--ink-500); /* Composantes RVB de la marque : indispensables aux rgba() (voiles, halos). Sans elles, ces règles restent écrites en dur et ne suivent pas le thème. */ --brand-rgb: 138, 93, 0; /* Le jaune du logo et le texte qui s'y pose, pour les fonds de marque. */ --sun: var(--mauve-400); --sun-hover: #ffb300; --on-sun: var(--ink-900); --brand: var(--mauve-600); --brand-hover: var(--mauve-700); --brand-soft: var(--mauve-100); --accent: var(--mauve-500); --danger: #b3402f; --success: #2f7d4f; --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; --r-2: 6px; --r-3: 9px; --r-4: 12px; --r-5: 16px; --r-6: 22px; --r-full: 999px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --shadow-sm: 0 1px 2px rgba(21,18,12,.06), 0 2px 6px rgba(21,18,12,.05); --shadow-md: 0 4px 10px rgba(21,18,12,.08), 0 12px 30px rgba(21,18,12,.10); --shadow-lg: 0 10px 28px rgba(21,18,12,.14), 0 30px 60px rgba(21,18,12,.12); --ease: cubic-bezier(.22,1,.36,1); --container: 1180px; } * { box-sizing: border-box; } /* Hauteur de l'en-tête collant. Elle ne dépend pas de la largeur (69 px en mobile comme en grand écran) mais tout ce qui colle SOUS lui doit s'y accrocher : sans ça, la barre de lettres des index passait dessous et disparaissait dès qu'on défilait. */ :root { --hdr-h: 69px; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 86px; scrollbar-color: var(--beige-400) transparent; } /* Barre de défilement aux teintes de la page, tout le site (Chrome/Safari ; Firefox via scrollbar-color ci-dessus). Purement cosmétique : sans impact SEO. Les zones scrollables internes plus spécifiques gardent leur propre style grâce à leur sélecteur de classe. */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--beige-400); border-radius: 999px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--beige-500); } body { margin: 0; position: relative; overflow-x: clip; /* Sticky footer : le pied de page reste collé au bas même quand le contenu est court (sinon vide sous le footer). main grandit pour remplir. */ display: flex; flex-direction: column; min-height: 100vh; font-family: var(--font-sans); color: var(--fg); background-color: var(--bg); /* Texture papier très discrète (grain en gradients, pas d'image externe) */ background-image: radial-gradient(circle at 18% 12%, rgba(255,196,46,.07), transparent 38%), radial-gradient(circle at 85% 8%, rgba(196,178,144,.10), transparent 40%), repeating-linear-gradient(0deg, rgba(21,18,12,.012) 0 1px, transparent 1px 4px); line-height: 1.6; font-size: 16px; } main { flex: 1 0 auto; } /* pousse le footer en bas quand le contenu est court */ img { max-width: 100%; display: block; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-hover); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; color: var(--fg); margin: 0 0 .4em; letter-spacing: -.01em; } h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); } h3 { font-size: 1.35rem; } p { margin: 0 0 1em; } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); } .skipLink { position: absolute; left: -9999px; top: 0; background: var(--brand); color: #fff; padding: 8px 14px; z-index: 999; } .skipLink:focus { left: 0; } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--font-sans); font-weight: 600; font-size: .95rem; padding: 11px 20px; border-radius: var(--r-full); border: 1.5px solid transparent; transition: transform .15s var(--ease), background .2s, box-shadow .2s; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-sm { padding: 8px 15px; font-size: .85rem; } .btn-primary { background: var(--sun); color: var(--on-sun); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--sun-hover); color: var(--on-sun); box-shadow: var(--shadow-md); } .btn-ghost { background: transparent; color: var(--brand); border-color: var(--border); } .btn-ghost:hover { background: var(--brand-soft); border-color: var(--mauve-300); } .btn-block { width: 100%; justify-content: center; } /* ---------- Header ---------- */ .siteHeader { position: sticky; top: 0; z-index: 50; background: rgba(253,251,245,.86); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border-soft); } .hdr { display: flex; align-items: center; gap: var(--sp-4); padding: 14px var(--sp-6); } .brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--fg); letter-spacing: -.01em; white-space: nowrap; flex: none; } .brand em { font-style: normal; color: var(--brand); } /* Le logo Littero (police Lemon vectorisée) : le pied prend la variante blanche, dont le « o » passe en mauve clair pour rester lisible sur le fond. */ .brandLogo { display: block; height: 28px; width: auto; } /* Dans l'en-tête, le logo reste discret : à 32 px il écrasait la barre. ⚠️ CENTRER LA BOÎTE NE CENTRE PAS LE MOT. Les jambages de « l » et « tt » occupent le haut du dessin, la masse des lettres basses le bas : centré par flex, le logo avait sa ligne de base 3 px sous celle du menu et semblait tomber. -12 % de sa hauteur remet les deux lignes de base au même niveau (22 px ici, 20 px sur mobile). */ .siteHeader .brandLogo { height: 22px; transform: translateY(-12%); } .brandMark { color: var(--mauve-400); font-size: 1.1em; transform: translateY(-1px); } .hdrNav { display: flex; align-items: center; gap: 2px; margin-right: auto; } .hdrNav a { color: var(--fg-2); font-weight: 500; font-size: .95rem; padding: 8px 11px; border-radius: var(--r-full); transition: .15s; white-space: nowrap; } .hdrNav a:hover { background: var(--beige-200); color: var(--fg); } .hdrNav a.is-active { color: var(--brand); background: var(--brand-soft); } /* « Rejoindre l'équipe » : entre le menu mobile (760 px) et 1080 px, la barre déborde avec ce lien (mesuré le 2026-10-23) ; il s'efface là, et reste dans le menu mobile en dessous. */ @media (min-width: 761px) and (max-width: 1080px) { .hdrNav .navJoin { display: none; } } .navCta { display: none; } .hdrSearch { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-full); padding: 8px 14px; color: var(--fg-3); flex: 0 1 230px; min-width: 150px; transition: .2s; } .hdrSearch:focus-within { border-color: var(--mauve-300); box-shadow: 0 0 0 4px var(--brand-soft); } .hdrSearch input { border: none; background: transparent; outline: none; font-size: .92rem; color: var(--fg); width: 100%; } .hdrRight { display: flex; align-items: center; gap: 10px; flex: none; } .hdrCta { white-space: nowrap; } /* Sélecteur de LANGUE : même grammaire visuelle que le sélecteur d'univers : chip à globe dans la barre, liste lisible (nom natif + code) au clic. */ .langPick { position: relative; } .langBtn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-full); padding: 6px 10px; font-weight: 600; font-size: .8rem; cursor: pointer; color: var(--fg-2); transition: .15s; } .langBtn:hover { background: var(--beige-200); color: var(--fg); } .langPick.is-open .langBtn { background: var(--brand-soft); border-color: var(--mauve-300); color: var(--brand); } .langBtnIcon { flex: none; opacity: .8; } .langBtnCaret { font-size: .95rem; line-height: 1; color: var(--fg-3, var(--fg-2)); } .langPop { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); box-shadow: var(--shadow-md); padding: 8px; display: none; min-width: 232px; z-index: 50; } .langPick.is-open .langPop { display: block; } .langPopTitle { margin: 0 0 6px; padding: 2px 12px; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); font-weight: 700; } .langOpt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--r-2); color: var(--fg); line-height: 1.25; } .langOpt + .langOpt { margin-top: 2px; } .langOpt:hover { background: var(--beige-200); } .langOpt.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 600; } .langOptCode { font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: var(--fg-3); background: var(--surface-2); border-radius: var(--r-full); padding: 2px 8px; flex: none; } .langOpt.is-active .langOptCode { color: var(--brand); background: #fff; } /* Sélecteur d'UNIVERS (section) : chip discret, séparé du wordmark. */ .sectionPick { position: relative; padding-left: var(--sp-5); border-left: 1px solid var(--border); } .sectionBtn { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-full); padding: 6px 11px; font-weight: 600; font-size: .8rem; cursor: pointer; color: var(--fg-2); transition: .15s; white-space: nowrap; } .sectionBtn:hover { background: var(--beige-200); color: var(--fg); } .sectionBtnIcon { font-size: .95rem; line-height: 1; } .sectionBtnLabel { font-weight: 600; } .sectionBtnCaret { font-size: .95rem; line-height: 1; color: var(--fg-3, var(--fg-2)); } .sectionPop { position: absolute; left: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); box-shadow: var(--shadow-md); padding: 8px; display: none; min-width: 240px; z-index: 50; } .sectionPick.is-open .sectionPop { display: block; } .sectionPop a { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: var(--r-2); color: var(--fg); border-left: 3px solid transparent; line-height: 1.25; } .sectionPop a + a { margin-top: 2px; } .sectionPop a:hover, .sectionPop a.is-active { background: var(--brand-soft); border-left-color: var(--secAccent, var(--brand)); } .sectionPopIcon { font-size: 1.2rem; line-height: 1; flex: none; } /* Sélecteur d'univers DANS le menu mobile (le widget du header est masqué <760px). */ .navSections { display: none; } .hdrNavSearch { display: none; } .hdrNavSearch input { width: 100%; padding: 11px 16px; border: 1.5px solid var(--border); border-radius: var(--r-full); background: #fff; font-size: .95rem; color: var(--fg); outline: none; } .hdrNavSearch input:focus { border-color: var(--mauve-300); box-shadow: 0 0 0 4px var(--brand-soft); } .navToggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 6px; } .navToggle span { width: 22px; height: 2px; background: var(--fg); border-radius: 2px; } /* ---------- Hero ---------- */ .hero { position: relative; padding: var(--sp-16) 0 var(--sp-12); overflow: hidden; } .heroInner { position: relative; max-width: 760px; } .heroKicker { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); font-weight: 700; margin-bottom: var(--sp-4); } .hero h1 { margin-bottom: var(--sp-4); } .hero h1 .ink { color: var(--brand); font-style: italic; } .heroLead { font-size: 1.2rem; color: var(--fg-2); max-width: 580px; margin-bottom: var(--sp-6); } .heroSearch { display: flex; gap: 10px; max-width: 560px; } .heroSearch input { flex: 1; padding: 15px 22px; border-radius: var(--r-full); border: 1.5px solid var(--border); background: var(--surface); font-size: 1rem; outline: none; } .heroSearch input:focus { border-color: var(--mauve-300); box-shadow: 0 0 0 4px var(--brand-soft); } /* Sous la recherche, la porte des lecteurs (la Pioche). Même entrée que le reste du hero (voir .reveal-on plus bas). */ .heroActions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-4); } /* ---------- Sections ---------- */ /* padding-block (et non le raccourci `padding … 0`) pour ne pas écraser le padding horizontal de .container quand un élément porte .section ET .container. */ .section { padding-block: var(--sp-12); } .sectionHead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-8); } .sectionHead h2 { margin: 0; } .sectionHead .moreLink { font-weight: 600; font-size: .95rem; white-space: nowrap; } .sectionLabel { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); font-weight: 700; margin-bottom: 6px; } .ornRule { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: var(--sp-12) 0; position: relative; } /* ---------- Hub tiles ---------- */ .hubGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); } .hubTile { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-5); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s; position: relative; overflow: hidden; } .hubTile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .hubTileIcon { font-size: 1.8rem; color: var(--tile-accent); font-family: var(--font-display); } .hubTileTitle { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--fg); } .hubTileTag { font-size: .9rem; color: var(--fg-3); } /* ---------- Generator cards ---------- */ .genGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); } .genGrid--home { grid-template-columns: repeat(4, 1fr); } .genCard { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-5); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; } .genCard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--mauve-300); } .genCardIcon { flex: none; width: 50px; height: 50px; display: grid; place-items: center; font-size: 1.6rem; line-height: 1; border-radius: var(--r-4); background: var(--brand-soft); color: var(--accent); font-family: var(--font-display); } .genCardBody { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .genCardTitle { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--fg); line-height: 1.2; } .genCardCta { font-size: .85rem; font-weight: 600; color: var(--accent); opacity: .85; } @media (max-width: 920px) { .genGrid--home { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .genGrid, .genGrid--home { grid-template-columns: 1fr; } } /* En-tête de page (index générateurs + générateur solo). */ .pageHead { margin-bottom: var(--sp-8); } .pageHeadLead { max-width: 680px; font-size: 1.1rem; color: var(--fg-2); margin: var(--sp-3) 0 0; } .genCatTitle { margin: var(--sp-10) 0 var(--sp-5); } .emptyState { color: var(--fg-3); } /* Page générateur solo : la scène des 10 propositions. */ .genStage { margin: var(--sp-6) 0; padding: var(--sp-6) var(--sp-8) var(--sp-8); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-6); box-shadow: var(--shadow-sm); } .genStageHead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--sp-4); } .genStageTitle { margin: 0; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); font-family: inherit; font-weight: 700; } .genResults { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-8); } .genResult { font-family: var(--font-display); font-size: 1.5rem; color: var(--mauve-700); padding: var(--sp-3) 0; border-bottom: 1px dashed var(--border); counter-increment: gen; display: flex; align-items: baseline; gap: var(--sp-3); } .genResult::before { content: counter(gen); font-size: .8rem; font-family: var(--font-sans); color: var(--mauve-300); font-weight: 700; min-width: 1.4em; } .genResults { counter-reset: gen; } .genResult--empty { color: var(--fg-3); font-family: inherit; font-size: 1rem; grid-column: 1 / -1; } .genResult--empty::before { content: ""; min-width: 0; } /* Clic-pour-copier : la sélection manuelle traversait les deux colonnes et embarquait le compteur ::before. On copie au clic à la place. */ .genResult { position: relative; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: color .15s var(--ease); } .genResult::before { user-select: none; } .genResult--empty { cursor: default; } .genResult .genResultName { flex: 1 1 auto; min-width: 0; } @media (hover: hover) { .genResult:not(.genResult--empty):hover { color: var(--brand); } } .genResult.is-copied { color: var(--brand); } .genCopyFlag { position: absolute; right: 0; top: 50%; font-family: var(--font-sans); font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--brand); padding: 2px 9px; border-radius: var(--r-full); box-shadow: var(--shadow-sm); pointer-events: none; white-space: nowrap; opacity: 0; transform: translateY(calc(-50% + 2px)); transition: opacity .15s var(--ease), transform .15s var(--ease); } .genResult.is-copied .genCopyFlag { opacity: 1; transform: translateY(-50%); } @media (max-width: 620px) { .genResults { grid-template-columns: 1fr; } .genResult { font-size: 1.3rem; } } /* Accueil : on resserre l'écart entre les sections. */ body[data-route="home"] .section { padding-block: var(--sp-8); } body[data-route="home"] .ornRule { margin: var(--sp-6) 0; } /* ---------- Card grid ---------- */ .cardGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-5); } /* Encart maison dans la grille : par défaut une bannière pleine largeur. La card de bannière d'événement (`adSlot--infeed`, event_modules.php) occupe UNE cellule comme une card. */ .cardGridAd { grid-column: 1 / -1; } .cardGridAd:has(.adSlot--infeed) { grid-column: auto; margin: 0; display: flex; align-items: center; } .card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-5); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s; display: flex; flex-direction: column; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card--premium { border-color: var(--mauve-300); box-shadow: 0 0 0 1px var(--mauve-200), var(--shadow-sm); } .cardShot { position: relative; display: block; aspect-ratio: 16/10; background: var(--beige-200); overflow: hidden; } .cardShot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .card:hover .cardShot img { transform: scale(1.05); } .cardShotPlaceholder { display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--font-display); font-size: 3rem; color: var(--beige-500); } .cardBadge { position: absolute; top: 10px; left: 10px; background: var(--sun); color: var(--on-sun); font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: var(--r-full); } .cardBody { padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; flex: 1; } .cardTitle { font-size: 1.15rem; margin: 0; } .cardTitle a { color: var(--fg); } .cardTitle a:hover { color: var(--brand); } .cardDomain { font-size: .8rem; color: var(--fg-3); font-family: var(--font-mono); } .cardDesc { font-size: .9rem; color: var(--fg-2); margin: 0; flex: 1; } .cardTags { display: flex; flex-wrap: wrap; gap: 5px; } .tag { font-size: .72rem; background: var(--beige-200); color: var(--fg-2); padding: 3px 9px; border-radius: var(--r-full); text-decoration: none; transition: background .15s var(--ease), color .15s; } a.tag:hover { background: var(--brand-soft); color: var(--brand); } .tagChecks { display: flex; flex-wrap: wrap; gap: 8px; } .tagCheck { display: inline-flex; align-items: center; font-size: .9rem; line-height: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); padding: 9px 16px; cursor: pointer; user-select: none; transition: background .15s var(--ease), border-color .15s, color .15s; } .tagCheck[hidden] { display: none; } .tagCheck input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .tagCheck:hover { border-color: var(--mauve-400); } .tagCheck:has(input:checked) { background: var(--brand); border-color: var(--brand); color: #fff; } .cropWrap { margin-top: 10px; } .cropCanvas { display: block; max-width: 220px; width: 100%; height: auto; border-radius: var(--r-3); border: 1px solid var(--border); cursor: grab; touch-action: none; background: var(--beige-200); } .cropCanvas:active { cursor: grabbing; } .cropZoom { display: block; width: 220px; max-width: 100%; margin: 10px 0 4px; accent-color: var(--brand); } .cropHint { font-size: .82rem; margin: 0; } .blogFilter { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp-6) 0 0; } .blogFilter a { padding: 7px 16px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); color: var(--fg-2); font-weight: 600; font-size: .9rem; transition: .15s; } .blogFilter a:hover { border-color: var(--mauve-300); color: var(--brand); } .blogFilter a.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } /* margin-top:auto → le bouton reste collé en bas quand les cartes d'une rangée sont étirées à la même hauteur (grille alignée, pas de blanc sous le bouton). */ .cardCta { margin-top: auto; align-self: flex-start; } /* ---------- List header (catégorie) ---------- */ .listHead { display: flex; align-items: baseline; gap: 12px; margin: var(--sp-8) 0 var(--sp-5); flex-wrap: wrap; } .listHead h2 { margin: 0; } .listCount { color: var(--brand); font-family: var(--font-display); font-size: 1.4rem; } .listUpdated { font-size: .82rem; color: var(--fg-3); } .listSort { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } .listSort label { font-size: .82rem; color: var(--fg-3); } .listSort select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 6px 34px 6px 14px; border: 1px solid var(--border); border-radius: var(--r-full); background-color: var(--surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23736b7a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; color: var(--fg); font: inherit; font-size: .85rem; cursor: pointer; } /* ---------- Ads ---------- */ .adBanner, .cardGridAd { margin: var(--sp-6) 0; } /* Bannières responsives PLAFONNÉES à 728px (largeur leaderboard max) : l'encart s'adapte à la largeur dispo et rétrécit sur mobile, rien n'est figé. Centré par défaut ; .adBanner--left cale à gauche (générateurs, tags/catégories). Exceptions : home_top (.homeAdWrap) et « Entre les cards » (.cardGridAd). */ .adBanner { max-width: 728px; margin-left: auto; margin-right: auto; } .adBanner--left { margin-left: 0; margin-right: auto; } /* home_top : cas SPÉCIAL : calé à gauche sur la colonne de texte du hero (580px). */ .homeAdWrap { max-width: 760px; } .homeAdWrap .adBanner { max-width: 580px; margin-left: 0; margin-right: 0; } .adSlot { display: flex; align-items: center; justify-content: center; min-height: 90px; background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-4); padding: 10px; overflow: hidden; } .adSlot--house { border-style: solid; } /* Card native maison : elle porte déjà son cadre (.card), donc le wrapper .adSlot ne re-cadre pas (sinon double bordure). La mention « Annonce » dit au lecteur que c'est un encart promotionnel. */ .adSlot--native { background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0; } .adNative { position: relative; width: 100%; text-decoration: none; color: inherit; } .adNative .cardTitle { color: var(--fg); } .adNativeTag { position: absolute; top: 8px; right: 8px; z-index: 1; font-size: .66rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); background: var(--surface); border: 1px solid var(--border-soft); padding: 3px 6px; border-radius: 4px; } /* Les règles génériques `.adSlot a` (display:block, line-height:0) et `.adSlot img` (height:auto, border-radius) (pensées pour les créas image « brutes ») écrasent sinon le layout .card de la native. On les rétablit avec plus de spécificité : card en colonne + image recadrée 16/10 comme les vraies cards. */ .adSlot--native .adNative { display: flex; flex-direction: column; line-height: normal; } .adSlot--native .cardShot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } /* Card d'événement « entre les cards » : se fond parmi les cards (même surface, bordure et rayon), taille compacte et constante (min-height). */ .adSlot--infeed { width: 100%; min-height: 250px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-5); box-shadow: var(--shadow-sm); padding: 0; overflow: hidden; } /* Créa rédactionnelle au format LEADERBOARD (728x90) : le visuel sert de fond, le titre, le texte et le bouton se posent dessus sur UNE ligne. La card verticale (.adSlot--native) est réservée à « entre les cards » : dans un emplacement large, son image recadrée 16/10 donnait un pavé de 580 px. Les règles sont préfixées .adSlot car `.adSlot a { display:block }` bat une classe seule et ferait retomber le texte sous l'image. */ .adSlot--bar { padding: 0; min-height: 0; border: 0; background: transparent; } .adSlot .adBar { position: relative; display: flex; align-items: center; width: 100%; max-width: 728px; height: 90px; margin: 0 auto; line-height: normal; text-decoration: none; overflow: hidden; border-radius: var(--r-4); background: var(--brand) center/cover no-repeat; } .adSlot .adBar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,10,22,.82) 0%, rgba(16,10,22,.62) 55%, rgba(16,10,22,.42) 100%); } .adSlot .adBarBody { position: relative; z-index: 1; display: flex; flex-direction: row; align-items: center; gap: var(--sp-4); width: 100%; padding: 0 var(--sp-6); min-width: 0; text-align: left; } .adSlot .adBarBody b { flex: 0 1 auto; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.15; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adSlot .adBarBody i { flex: 1 1 auto; font-style: normal; font-size: .88rem; color: rgba(255,255,255,.85); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adSlot .adBarBody .btn { flex: none; margin-left: auto; align-self: center; } @media (max-width: 560px) { .adSlot .adBar { height: 80px; } .adSlot .adBarBody { padding: 0 var(--sp-4); gap: var(--sp-3); } .adSlot .adBarBody i { display: none; } .adSlot .adBarBody b { font-size: 1rem; white-space: normal; } } .adSlot a { display: block; line-height: 0; } .adSlot img { border-radius: var(--r-3); max-width: 100%; height: auto; display: block; } /* ---------- Prose / SEO text ---------- */ .prose { max-width: 760px; font-size: 1.05rem; color: var(--fg-2); } .prose h2, .prose h3 { color: var(--fg); margin-top: 1.4em; } .prose a { text-decoration: underline; text-underline-offset: 2px; } .bannerBox { background: var(--surface); border: 1px solid var(--border-soft); border-left: 4px solid var(--brand); border-radius: var(--r-4); padding: var(--sp-6); box-shadow: var(--shadow-sm); } /* ---------- Novels ---------- */ .novelGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-6); } .novelCard { display: flex; flex-direction: column; gap: 10px; } .novelCover { aspect-ratio: 2/3; border-radius: var(--r-3); overflow: hidden; background: var(--mauve-100); box-shadow: var(--shadow-md); display: block; transition: transform .25s var(--ease); } .novelCard:hover .novelCover { transform: translateY(-5px) rotate(-1deg); } .novelCover img { width: 100%; height: 100%; object-fit: cover; } .novelCoverFallback { display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--font-display); font-size: 3rem; color: var(--mauve-400); } .novelMeta h3 { font-size: 1.05rem; margin: 0; } .novelAuthor { color: var(--fg-3); font-size: .88rem; } /* L'auteur mène à sa page. Discret par défaut (une carte a DÉJÀ deux liens vers le livre : la couverture et le titre) ; il ne se signale qu'au survol, sinon trois liens colorés se disputent l'œil sur une vignette de 190 px. */ .novelAuthor a { color: inherit; text-decoration: none; } .novelAuthor a:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 2px; } .novelDate { font-size: .82rem; color: var(--brand); font-weight: 600; } /* ---------- Forms ---------- */ .formCard { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-5); padding: var(--sp-8); box-shadow: var(--shadow-sm); max-width: 640px; } .field { margin-bottom: var(--sp-5); } .field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--fg); } .field input, .field textarea, .field select { width: 100%; padding: 12px 15px; border: 1.5px solid var(--border); border-radius: var(--r-3); background: var(--surface-2); font-size: .95rem; font-family: inherit; color: var(--fg); outline: none; transition: .2s; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--mauve-300); box-shadow: 0 0 0 4px var(--brand-soft); background: var(--surface); } .field .hint { font-size: .8rem; color: var(--fg-3); margin-top: 5px; } .field--honey { position: absolute; left: -9999px; } /* Case à cocher en ligne (ex. acceptation du règlement). */ .field--check { margin-bottom: var(--sp-5); } /* Sélecteur préfixé par .field--check : sinon `.field label { display:block }` (plus spécifique que `.checkLine`) écrase le flex et le texte retombe sous la case au lieu d'être centré dessus. */ .field--check .checkLine { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: .92rem; line-height: 1.4; color: var(--fg-2); cursor: pointer; margin: 0; } .field--check .checkLine input[type="checkbox"] { width: 18px; height: 18px; padding: 0; margin: 0; flex: none; border: 0; border-radius: 0; background: none; accent-color: var(--brand); cursor: pointer; } .field--check .checkLine a { color: var(--brand); font-weight: 600; } /* Encadré informatif (rappel, aide, renvoi vers une autre page). */ .callout { border: 1px solid var(--border); border-left: 3px solid var(--brand); background: var(--surface-2); border-radius: var(--r-3); padding: 16px 20px; margin-bottom: var(--sp-5); font-size: .92rem; line-height: 1.55; color: var(--fg-2); } .callout a { color: var(--brand); font-weight: 600; } .callout--info { border-left-color: var(--mauve-400, var(--brand)); max-width: 640px; } /* Aligné sur la largeur du texte de la page (.prose) pour ne pas déborder à droite. */ .callout--promo { background: var(--brand-soft); border-color: var(--mauve-300, var(--brand)); border-left-width: 3px; max-width: 760px; margin: var(--sp-6) 0; padding: 18px 22px; } .callout strong { color: var(--fg); margin-right: 4px; } .flash { padding: 14px 18px; border-radius: var(--r-3); margin-bottom: var(--sp-5); font-weight: 500; max-width: 640px; } .flash--ok { background: #e8f5ed; color: var(--success); border: 1px solid #bfe3cd; } .flash--err { background: #fbeae7; color: var(--danger); border: 1px solid #f0cabf; } /* ---------- Comments ---------- */ .comments { margin-top: var(--sp-10); } /* Formulaire de commentaire : largeur de lecture confortable, pas pleine colonne. */ .comments form.formCard { max-width: 620px; } .comment { padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-4); margin-bottom: var(--sp-4); } .comment--reply { margin-left: var(--sp-8); border-left: 3px solid var(--mauve-200); } .commentHead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .commentAvatar { width: 36px; height: 36px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display); } .commentName { font-weight: 600; } .commentDate { font-size: .8rem; color: var(--fg-3); } .commentBody { color: var(--fg-2); } .commentActions { display: flex; gap: 14px; margin-top: 8px; font-size: .85rem; } .commentActions button { background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: .85rem; padding: 0; } .commentActions button:hover { color: var(--brand); } /* ---------- Footer ---------- */ .siteFooter { margin-top: var(--sp-16); background: var(--mauve-800); color: var(--beige-200); padding: var(--sp-12) 0 var(--sp-6); } .footGrid { display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: start; } .footBrand { flex: 2 1 320px; } .footCol { flex: 1 1 150px; } .footBrand .brand { color: #fff; margin-bottom: 10px; } .footBrand em { color: var(--mauve-300); } .footBrand p { color: var(--mauve-200); opacity: .85; max-width: 420px; line-height: 1.6; } .footCol h2 { color: #fff; font-family: var(--font-sans); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 12px; } .footCol a { display: block; color: var(--mauve-200); padding: 5px 0; } .footCol a:hover { color: #fff; } .footBar { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; color: var(--mauve-300); } /* L'éditeur du réseau : à droite du nom du site, à la même taille que lui. Le nom de l'éditeur est le lien. */ .footEditeur { text-align: center; } .footEditeur a { color: var(--mauve-300); text-decoration: underline; text-underline-offset: 3px; } .footEditeur a:hover { color: #fff; } /* Mobile : on empile, centré. */ @media (max-width: 760px) { .footBar { flex-direction: column; gap: 10px; text-align: center; } } /* ---------- Icônes (sprite SVG inline, backend/src/icones.php) ---------- Calées sur la taille et la couleur du texte, comme l'étaient les glyphes de Font Awesome : 1em, fill currentColor, légèrement sous la ligne de base. */ .ico { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; overflow: visible; } /* ---------- Reveal animation (anti-flicker) ---------- Visible par défaut (sûr sans JS / SEO, et premier paint complet). L'état caché n'est posé QUE par app.js, une fois GSAP chargé et juste avant d'animer : le contenu ne reste jamais invisible en attendant un script. */ .reveal { opacity: 1; transform: none; } .reveal-on .reveal { opacity: 0; transform: translateY(22px); } @media (prefers-reduced-motion: reduce) { .reveal-on .reveal { opacity: 1; transform: none; } } /* Hero : pré-état posé AVANT le paint (évite le flash visible→caché→révélé que provoquait gsap.from sur des éléments non cachés). Le

(élément LCP probable) garde son opacité (on ne le cache JAMAIS, on ne fait qu'un léger glissé) pour ne pas dégrader le LCP/SEO. Les autres font un fondu+glissé. */ .reveal-on .hero .heroKicker, .reveal-on .hero .heroLead, .reveal-on .hero .heroSearch, .reveal-on .hero .heroActions { opacity: 0; transform: translateY(16px); } .reveal-on .hero h1 { transform: translateY(18px); } @media (prefers-reduced-motion: reduce) { .reveal-on .hero .heroKicker, .reveal-on .hero h1, .reveal-on .hero .heroLead, .reveal-on .hero .heroSearch, .reveal-on .hero .heroActions { opacity: 1; transform: none; } } /* ---------- Cards taxonomie (catégorie / tag) : image de fond, pas d'icône ni de barre ---------- */ .taxoGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin: var(--sp-6) 0 var(--sp-8); } .taxoCard { position: relative; display: flex; align-items: flex-end; min-height: 150px; border-radius: var(--r-5); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--mauve-100); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s; } .taxoCard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .taxoCardImg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--mauve-200); transition: transform .4s var(--ease); } .taxoCard:hover .taxoCardImg { transform: scale(1.06); } .taxoCardOverlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,18,12,0) 35%, rgba(21,18,12,.78) 100%); } .taxoCardBody { position: relative; padding: var(--sp-4); width: 100%; } .taxoCardTitle { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: #fff; line-height: 1.1; } .taxoCardSub { display: block; font-size: .82rem; color: rgba(255,255,255,.85); margin-top: 3px; } @media (max-width: 900px) { .taxoGrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .taxoGrid { grid-template-columns: 1fr; } } /* Rang horizontal de tags (optionnel). */ .taxoRow { display: flex; gap: var(--sp-4); overflow-x: auto; padding: 4px 4px var(--sp-4); margin: var(--sp-5) 0 var(--sp-8); scroll-snap-type: x proximity; scrollbar-width: thin; } .taxoRow .taxoCard { flex: 0 0 248px; scroll-snap-align: start; } @media (max-width: 520px) { .taxoRow .taxoCard { flex-basis: 80%; } } /* Hub SEO : tags groupés par dimension (« Par territoire », « Par genre »…). */ .tagDimension { margin: var(--sp-10) 0; } .tagDimension h2 { margin-bottom: var(--sp-3); } .dimensionIntro { max-width: 72ch; margin: 0 0 var(--sp-2); color: var(--muted); } .dimensionIntro + .taxoGrid { margin-top: var(--sp-4); } .tagList { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; } .tagList a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); color: var(--fg); font-weight: 600; font-size: .95rem; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), background .15s, border-color .15s; } .tagList a:hover { background: var(--brand-soft); border-color: var(--mauve-300); color: var(--brand); transform: translateY(-2px); } .tagCount { background: var(--brand-soft); color: var(--brand); border-radius: var(--r-full); font-size: .78rem; padding: 1px 8px; font-weight: 700; } /* ---------- Detail page (site) ---------- */ .detailHero { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-8); align-items: start; margin: var(--sp-8) 0; } .detailHero--cover { grid-template-columns: 300px 1fr; } .bookFacts { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: 7px; color: var(--fg-2); } .bookFacts .ico { color: var(--mauve-400); width: 1.1em; } .bookGenres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); } /* Couverture de la fiche + overlay « Épingler sur Pinterest ». */ .novelCover--detail { position: relative; box-shadow: var(--shadow-md); } .pinOverlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 14px; border-radius: inherit; text-decoration: none; opacity: 0; transition: opacity .2s var(--ease); background: linear-gradient(to top, rgba(21,18,12,.6), transparent 55%); } .novelCover--detail:hover .pinOverlay, .pinOverlay:focus-visible, .pinOverlay:focus-within { opacity: 1; } .pinOverlayBtn { display: inline-flex; align-items: center; gap: 7px; background: #e60023; color: #fff; font-weight: 600; font-size: .9rem; padding: 9px 16px; border-radius: var(--r-full); box-shadow: var(--shadow-md); } @media (hover: none) { .pinOverlay { opacity: 1; background: linear-gradient(to top, rgba(21,18,12,.5), transparent 62%); } } /* ---------- Bandeau « coups de cœur » ---------- La mise en avant d'une œuvre EST cet emplacement : une rangée nommée, hors de la grille, avec des couvertures plus grandes. Réutilise .novelCard telle quelle : seule la largeur de colonne change, donc rien à ré-entretenir. */ .featStrip { margin: var(--sp-6) 0 var(--sp-8); } .featStripTitle { font-size: 1.15rem; margin: 0 0 var(--sp-5); display: flex; align-items: center; gap: 10px; } .featStripTitle::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); } .featStripGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-6); } /* Sur mobile, deux colonnes plutôt qu'une seule card géante qui mange l'écran et repousse la grille sous la ligne de flottaison. */ @media (max-width: 600px) { .featStripGrid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } } /* Badge de statut sur les couvertures. */ .novelCover { position: relative; } .novelBadge { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: var(--r-full); color: #fff; box-shadow: var(--shadow-sm); } .novelBadge--soon { background: var(--mauve-500); } .novelBadge--week { background: #c8893b; } .novelBadge--fresh { background: #2f7d4f; } .novelBadge--out { background: #717684; } /* Barre filtre (genres) + tri des listes de livres. */ .booksBar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); } .genreChips { display: flex; flex-wrap: wrap; gap: 8px; } .genreChip { display: inline-block; padding: 6px 13px; border-radius: var(--r-full); border: 1.5px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: .88rem; font-weight: 600; transition: .15s; } .genreChip:hover { border-color: var(--mauve-300); color: var(--brand); background: var(--brand-soft); } .genreChip.is-active { background: var(--brand); color: #fff; border-color: var(--brand); } .booksSort { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--fg-3); white-space: nowrap; } .booksSort select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 8px 34px 8px 14px; border-radius: var(--r-full); border: 1.5px solid var(--border); background-color: var(--surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23736b7a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; font: inherit; color: var(--fg); cursor: pointer; } /* Boutons de partage (fiche livre). */ .shareRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: var(--sp-10) 0; } .shareLabel { font-size: .85rem; color: var(--fg-3); font-weight: 600; } .shareBtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-full); font-size: .85rem; font-weight: 600; line-height: 1; color: #fff; transition: .15s; } .shareBtn .ico { width: 1.1em; font-size: 1.05em; } .shareBtn:hover { color: #fff; opacity: .92; transform: translateY(-1px); } .shareBtn--pin { background: #e60023; } .shareBtn--fb { background: #1877f2; } .shareBtn--x { background: #111; } .formSectionLabel { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--fg); margin: var(--sp-5) 0 var(--sp-3); padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); } .formSectionLabel:first-child { margin-top: 0; } .shareBtn--wa { background: #25d366; } .shareBtn--li { background: #0a66c2; } .shareBtn--mail { background: #6b7280; } /* Article (post) : en-tête, méta, couverture. */ .postHead { margin-bottom: var(--sp-5); } .postMeta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--fg-3); font-size: .9rem; margin: var(--sp-3) 0 0; } .postMeta span { display: inline-flex; align-items: center; gap: 6px; } .postMeta .ico { color: var(--mauve-400); } .postCover { width: 100%; height: auto; max-height: 380px; object-fit: cover; border-radius: var(--r-5); margin: var(--sp-6) 0; box-shadow: var(--shadow-md); } /* Corps d'article élargi : profite de la pleine largeur de .postArticle. */ .postBody { font-size: 1.08rem; max-width: none; } /* Table des matières (longs articles) : sans cadre. */ .postToc { margin: var(--sp-8) 0; } .postTocTitle { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); font-family: var(--font-display); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #000; } .postTocTitle .ico { color: var(--mauve-400); } .postTocList { list-style: none; margin: 0; padding: 0; } .postTocItem { margin: 4px 0; line-height: 1.4; } .postTocItem--h3 { padding-left: var(--sp-5); } .postTocItem a { color: var(--fg-2); text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s var(--ease), border-color .15s var(--ease); } .postTocItem a:hover { color: var(--brand); border-bottom-color: var(--brand-soft); } /* Décale l'ancre sous un header fixe le cas échéant. */ .postBody :is(h2, h3)[id] { scroll-margin-top: 90px; } /* Carte « à la une » du blog. */ .postFeature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-6); overflow: hidden; box-shadow: var(--shadow-sm); margin-top: var(--sp-8); transition: transform .2s var(--ease), box-shadow .2s; } .postFeature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .postFeatureShot { background: var(--beige-200); min-height: 240px; } .postFeatureShot img { width: 100%; height: 100%; object-fit: cover; } .postFeatureBody { padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); justify-content: center; } .postFeatureTitle { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; line-height: 1.15; color: var(--fg); } .postFeatureExcerpt { color: var(--fg-2); } @media (max-width: 700px) { .postFeature { grid-template-columns: 1fr; } .postFeatureShot { min-height: 180px; } .postFeatureBody { padding: var(--sp-6); } .postFeatureTitle { font-size: 1.4rem; } } .detailShot { border-radius: var(--r-5); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md); background: var(--beige-200); } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .85rem; color: var(--fg-3); margin: var(--sp-4) 0 var(--sp-8); } .breadcrumb a { color: var(--fg-3); text-decoration: none; border-radius: var(--r-2); transition: color .15s; } .breadcrumb a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } .breadcrumbSep { color: var(--beige-500); user-select: none; } .breadcrumbCurrent { color: var(--fg-2); font-weight: 600; } /* ---------- Démo embarquée (blog) ---------- */ .demoEmbed { margin: var(--sp-6) 0; } /* ---------- Pagination ---------- */ .pager { display: flex; align-items: center; gap: 8px; justify-content: center; margin: var(--sp-12) 0; flex-wrap: wrap; } .pagerNums { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; } .pagerBtn, .pagerNum { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border-radius: var(--r-full); border: 1.5px solid var(--border); background: var(--surface); color: var(--fg-2); font-weight: 600; font-size: .92rem; text-decoration: none; transition: .15s; } a.pagerBtn:hover, a.pagerNum:hover { background: var(--brand-soft); border-color: var(--mauve-300); color: var(--brand); } .pagerNum.is-current { background: var(--brand); color: #fff; border-color: var(--brand); } .pagerBtn.is-disabled { opacity: .4; cursor: default; } .pagerGap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--fg-3); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .detailHero, .detailHero--cover { grid-template-columns: 1fr; gap: var(--sp-6); } .footGrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .navToggle { display: flex; order: 3; margin-left: auto; } .hdrNav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--sp-4); box-shadow: var(--shadow-md); } .hdrNav.is-open { display: flex; } .hdrNav a { padding: 11px 13px; } .hdrSearch { display: none; } .hdrCta { display: none; } .hdrNavSearch { display: block; margin-top: 8px; } .hdrNav .navCta { display: block; margin-top: 6px; background: var(--brand); color: #fff; text-align: center; font-weight: 600; border-radius: var(--r-full); padding: 11px 14px; } .hdrNav .navCta:hover { background: var(--mauve-700); color: #fff; } /* Header mobile : barre plus haute et plus lisible. */ .hdr { gap: var(--sp-4); padding: 18px var(--sp-5); min-height: 68px; } .brand { font-size: 1.35rem; } .hdrRight { gap: 10px; } /* L'univers passe DANS le menu : on masque le widget du header. */ .sectionPick { display: none; } .navSections { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .navSectionsLabel { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); font-weight: 700; padding: 4px 13px; } .navSectionLink { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: var(--r-2); border-left: 3px solid transparent; color: var(--fg-2); } .navSectionLink:hover { background: var(--beige-200); color: var(--fg); } .navSectionLink.is-active { background: var(--brand-soft); border-left-color: var(--secAccent, var(--brand)); color: var(--brand); } .navSectionLink .sectionPopIcon { font-size: 1.1rem; } .navToggle { padding: 10px; margin-left: auto; } .navToggle span { width: 26px; height: 2.5px; } .hero { padding: var(--sp-10) 0 var(--sp-8); } .footGrid { grid-template-columns: 1fr; gap: var(--sp-6); } } /* Tablette/petit desktop : on resserre la grille des œuvres. */ @media (max-width: 640px) { .novelGrid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } .genStage { padding: var(--sp-5); } .genStageHead { gap: var(--sp-3); } /* En-tête de section : on empile titre + lien pour que le titre garde toute la largeur (sinon « Générateurs de noms » passe sur deux lignes). */ .sectionHead { flex-direction: column; align-items: flex-start; gap: var(--sp-2); } /* Le saut de ligne du titre du hero (nl2br) gêne en mobile : on le supprime. */ .hero h1 br { display: none; } } /* Petits téléphones : padding, hero et recherche adaptés. */ @media (max-width: 480px) { .container { padding: 0 var(--sp-5); } .section { padding-block: var(--sp-8); } .hdr { padding: 16px var(--sp-5); } .hero { padding: var(--sp-8) 0 var(--sp-6); } .heroLead { font-size: 1.05rem; } .heroSearch { flex-direction: column; gap: 8px; } .heroSearch input, .heroSearch .btn { width: 100%; } .heroSearch .btn { justify-content: center; } /* Sélecteur d'univers compact : on garde l'icône, on masque le libellé. */ .sectionPick { padding-left: var(--sp-3); } .sectionBtnLabel { display: none; } .brand { font-size: 1.25rem; } .siteHeader .brandLogo { height: 20px; } } /* ---- Sélection de livres dans un article ------------------------------- */ .postSelection { margin: var(--sp-10) 0 var(--sp-8); } .postSelection .sectionHead { margin-bottom: var(--sp-6); } .selectionNote { grid-column: 1 / -1; margin: -2px 0 var(--sp-4); color: var(--fg-3, #666); font-style: italic; font-size: .9rem; } .selectionLinks { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: flex; flex-direction: column; gap: 6px; } .selectionLinks a { font-weight: 600; } /* ---- Barre « Parcourir » (Catalogue / Séries / Auteurs) ---------------- */ .browseBar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: var(--sp-4) 0 var(--sp-6); } .browseBar__label { font-size: .95rem; font-weight: 600; color: var(--fg-2); margin-right: 6px; } .browseBar__link { padding: 7px 15px; border: 1.5px solid var(--border); border-radius: var(--r-full); font-weight: 600; font-size: .88rem; color: var(--fg-2); background: var(--surface, #fff); transition: .15s; } .browseBar__link:hover { border-color: var(--mauve-300); color: var(--brand); } .browseBar__link.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } /* ---- Index alphabétiques (séries, auteurs) ----------------------------- */ .indexList { list-style: none; padding: 0; margin: var(--sp-8) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; } .indexList a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 15px; border: 1px solid var(--hub-line, var(--border)); border-radius: 10px; background: var(--surface, #fff); transition: .15s; } .indexList a:hover { border-color: var(--mauve-300); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .indexName { font-weight: 600; color: var(--fg); } .indexCount { font-size: .8rem; color: var(--fg-3, #888); white-space: nowrap; } /* Barre de lettres : collante en haut, parce que son seul intérêt est d'être atteignable quand on est déjà descendu au milieu de la liste. */ .alphaBar { position: sticky; top: var(--hdr-h); z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; margin: var(--sp-6) 0 0; padding: 10px 0; background: var(--bg); } .alphaBar__l { min-width: 30px; padding: 4px 6px; text-align: center; border-radius: var(--r-2); font-weight: 600; font-size: .85rem; color: var(--fg-2); text-decoration: none; transition: .15s; } a.alphaBar__l:hover { background: var(--brand); color: #fff; } .alphaBar__l.is-off { color: var(--border); } /* L'ancre doit se poser sous l'en-tête ET sous la barre de lettres, qui reste collée par-dessus le contenu : sinon on saute à une lettre dont le titre est caché par la barre qu'on vient d'utiliser. */ .alphaGroup { scroll-margin-top: calc(var(--hdr-h) + 58px); } .alphaGroupTitle { font-family: var(--font-display); font-size: 1.5rem; color: var(--brand-hover); margin: var(--sp-8) 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); } .alphaGroupTitle--wide { margin-top: var(--sp-6); } .alphaGroup .indexList { margin-top: var(--sp-4); } /* ---- Recherche : autocomplétion (dropdown live) ------------------------ */ .searchSuggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 200; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); box-shadow: var(--shadow-lg); padding: 6px; max-height: 70vh; overflow-y: auto; } /* Variante « portal » : montée sur en fixed par le JS (position/top/left/ width/max-height posés en inline). z-index très haut pour passer AU-DESSUS du contenu. */ .searchSuggest--portal { position: fixed; right: auto; top: auto; z-index: 2000; } .searchSuggestGroup + .searchSuggestGroup { border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 4px; } .searchSuggestLabel { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--fg-3); padding: 6px 10px 3px; } .searchSuggestItem { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--r-2); text-decoration: none; color: var(--fg); } .searchSuggestItem.is-active, .searchSuggestItem:hover { background: var(--brand-soft); } .searchSuggestTitle { font-weight: 600; font-size: .92rem; line-height: 1.25; } .searchSuggestSub { font-size: .78rem; color: var(--fg-3); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Le header a des barres étroites : on élargit le panneau au survol. */ .hdrSearch .searchSuggest, .hdrNavSearch .searchSuggest { min-width: 300px; } /* ---- Recherche : page de résultats ------------------------------------- */ .searchPageForm { position: relative; } .searchTabs { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp-4) 0 var(--sp-6); } .searchTab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-full); border: 1.5px solid var(--border); background: var(--surface-2); color: var(--fg-2); font-size: .9rem; font-weight: 600; text-decoration: none; transition: .15s var(--ease); } .searchTab:hover { border-color: var(--mauve-300); color: var(--fg); } .searchTab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } .searchTabCount { font-size: .74rem; font-weight: 700; padding: 1px 7px; border-radius: var(--r-full); background: var(--beige-200); color: var(--fg-3); } .searchTab.is-active .searchTabCount { background: rgba(255, 255, 255, .25); color: #fff; } .searchGroup { margin-bottom: var(--sp-8); } .searchGroupHead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-4); } .searchGroupTitle { font-size: 1.15rem; margin: 0; } .searchGroupMore { font-size: .85rem; font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; } .searchGroupMore:hover { text-decoration: underline; } .searchAuthors { display: flex; flex-wrap: wrap; gap: 8px; } .searchAuthors .tag { font-size: .85rem; padding: 6px 12px; } .searchAuthorCount { font-weight: 700; opacity: .6; margin-left: 3px; } /* Méga menu « Lire » / « Écrire ». Un
par entrée : il s'ouvre et se ferme AU CLIC sans JavaScript, et le `name` partagé n'en laisse qu'un ouvert à la fois (accordéon natif là où le navigateur le sait ; ailleurs les deux peuvent s'ouvrir, sans casse). Le imite EXACTEMENT les liens .hdrNav a (hauteur incluse). */ .navMega{ position:relative; } .navMega > summary{ list-style:none; cursor:pointer; color:var(--fg-2); font-weight:500; font-size:.95rem; line-height:inherit; padding:8px 11px; border-radius:var(--r-full); transition:.15s; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; user-select:none; } .navMega > summary::-webkit-details-marker{ display:none; } .navMega > summary:hover{ background:var(--beige-200); color:var(--fg); } .navMega > summary.is-active, .navMega[open] > summary{ color:var(--brand); background:var(--brand-soft); } .navMegaCaret{ font-size:1.05em; line-height:1; opacity:.7; transition:transform .15s ease; } .navMega[open] .navMegaCaret{ transform:rotate(180deg); } /* Le panneau : une grille dont chaque colonne est un public (ou les outils). */ /* ⚠️ `width:max-content` N'EST PAS DÉCORATIF. Le panneau est en absolu dans un
large comme son seul mot (« Écrire ») : sans largeur, il se calcule à sa largeur MINIMALE, et dès qu'une colonne en contient deux (l'anglais et ses quatorze catégories), la seconde sort du fond. Mesuré en prod le 2026-09-12 : 546 px de fond pour 694 px de contenu. */ .navMegaPanel{ position:absolute; left:0; top:calc(100% + 8px); width:max-content; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-3); box-shadow:var(--shadow-md); padding:10px; z-index:50; display:grid; grid-auto-flow:column; gap:6px 14px; } .navMegaCol{ display:flex; flex-direction:column; gap:2px; min-width:210px; } /* Les catégories d'auteurs : un titre, puis une ou deux colonnes selon le nombre (le gabarit tranche au-delà de neuf). */ .navMegaGroupCols{ display:grid; grid-auto-flow:column; gap:0 10px; } .navMegaGroupCols .navMegaCol{ min-width:180px; } .navMegaLabel{ padding:6px 13px 4px; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--fg-3); font-weight:700; } .hdrNav .navMegaPanel a{ display:block; padding:8px 13px; border-radius:var(--r-2); color:var(--fg-2); font-size:.92rem; white-space:nowrap; } .hdrNav .navMegaPanel a:hover, .hdrNav .navMegaPanel a.is-active{ background:var(--brand-soft); color:var(--brand); } /* Le lien « tout voir » ferme la colonne, en retrait. */ .hdrNav .navMegaPanel a.navMegaMore{ margin-top:6px; padding-top:10px; border-top:1px solid var(--border-soft); border-radius:0 0 var(--r-2) var(--r-2); color:var(--fg-3); font-size:.85rem; } @media (max-width:760px){ /* Menu mobile : accordéon. Le panneau se déplie EN LIGNE sous son titre, colonnes empilées ; le caret reste pour signaler qu'on peut déplier. */ .navMega{ display:block; text-align:center; } .navMega > summary{ width:100%; justify-content:center; padding:11px 13px; } .navMegaPanel{ position:static; width:auto; box-shadow:none; border:0; border-radius:0; margin:4px 0 0; padding:0; grid-auto-flow:row; gap:0; } .navMegaCol{ min-width:0; } .navMegaGroupCols{ grid-auto-flow:row; gap:0; } .hdrNav .navMegaPanel a{ padding:11px 13px; white-space:normal; } .hdrNav .navMegaPanel a.navMegaMore{ border-top:0; margin-top:0; padding-top:11px; } } /* ---------- Affiliation ---------- */ /* Bouton d'achat restreint à un pays (Les Libraires ne livre qu'au Canada). Masqué par CLASSE et non par [hidden] : .btn pose un display:inline-flex d'auteur qui l'emporterait sur la règle de l'attribut. */ .is-ccHidden{ display:none !important; } /* ---------- Bandeau « La Pioche » (accueils) ---------- Trois dos de carte en éventail + l'invitation à jouer. Dans styles.css et non pioche.css : il s'affiche sur les accueils, qui ne chargent pas les assets du jeu. */ .piocheBand{ display:flex; align-items:center; gap:clamp(24px, 5vw, 56px); background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-6); box-shadow:var(--shadow-sm); padding:clamp(24px, 4vw, 44px); } .piocheBandCards{ display:flex; flex:none; } .piocheBandCards img{ width:clamp(72px, 9vw, 104px); aspect-ratio:2 / 3; object-fit:cover; border-radius:8px; box-shadow:var(--shadow-md); border:1px solid rgba(255,255,255,.25); transition:transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s ease; } .piocheBandCards img:nth-child(1){ transform:rotate(-8deg) translateY(6px); } .piocheBandCards img:nth-child(2){ transform:rotate(1deg) translateY(-4px); position:relative; z-index:1; } .piocheBandCards img:nth-child(3){ transform:rotate(9deg) translateY(8px); } .piocheBandCards img + img{ margin-left:-18px; } /* Survol du bandeau : l'éventail s'ouvre et la carte du milieu se soulève, comme une main qu'on écarte avant de piocher. Le survol porte sur TOUT le bandeau (pas seulement les cartes) : c'est le bloc entier qui est cliquable du regard. Retardé légèrement pour la 2e et la 3e carte → l'éventail s'ouvre en cascade plutôt que d'un bloc. */ @media (hover: hover) and (prefers-reduced-motion: no-preference){ .piocheBand:hover .piocheBandCards img:nth-child(1), .piocheBand:focus-within .piocheBandCards img:nth-child(1){ transform:rotate(-17deg) translate(-12px, -2px); box-shadow:var(--shadow-lg); } .piocheBand:hover .piocheBandCards img:nth-child(2), .piocheBand:focus-within .piocheBandCards img:nth-child(2){ transform:rotate(0deg) translateY(-16px) scale(1.05); box-shadow:var(--shadow-lg); transition-delay:.05s; } .piocheBand:hover .piocheBandCards img:nth-child(3), .piocheBand:focus-within .piocheBandCards img:nth-child(3){ transform:rotate(18deg) translate(12px, -1px); box-shadow:var(--shadow-lg); transition-delay:.1s; } } .piocheBandBody h2{ font-family:var(--font-display); margin:.1em 0 .35em; } .piocheBandBody p{ margin:0 0 var(--sp-5); color:var(--fg-2); max-width:52ch; } @media (max-width: 640px){ .piocheBand{ flex-direction:column; text-align:center; } .piocheBandBody p{ margin-inline:auto; } } /* ---------- Cartes de la page du badge ---------- */ /* Les cartes, rangées et cases du générateur de badge (badge.php). */ .compteCard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: var(--sp-6); } .compteCard h2 { margin: 0 0 var(--sp-3); font-size: 1.25rem; } .compteRow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .compteRow select { padding: 9px 36px 9px 12px; border: 1.5px solid var(--border); border-radius: var(--r-2); font: inherit; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml;utf8,") no-repeat right 13px center; } .compteMeta { color: var(--fg-3); font-size: .88rem; } .compteCheck { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; cursor: pointer; } .compteCheck input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; } /* Dans un .field, `.field label { display:block }` gagnerait : la case et son texte restent alignés au centre. */ .field label.compteCheck { display: flex; align-items: center; gap: 10px; margin-bottom: 0; font-weight: 500; } /* Les champs d'une carte : fond blanc, la même couleur d'un écran à l'autre. */ .compteCard .field input, .compteCard .field select { background: #fff; } /* ---------- Page du badge ---------- */ /* Le générateur de badge : aperçu et code à gauche, réglages à droite. */ .pageHeadLead.badgeIntro { max-width: none; } .badgeGenGrille { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); align-items: start; } @media (min-width: 960px) { .badgeGenGrille { grid-template-columns: minmax(0, 1fr) 380px; } } .badgeGenColonne { display: grid; gap: var(--sp-5); } .badgeApercuZone { display: flex; justify-content: center; padding: var(--sp-8) var(--sp-4); background: #fff; border: 1px dashed var(--border); border-radius: var(--r-2); margin-bottom: var(--sp-4); } .badgeApercu img { display: block; max-width: 100%; height: auto; } .badgeCopieRow { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-3); } .badgeGenReglages h2 { margin-top: var(--sp-5); } .badgeGenReglages h2:first-child { margin-top: 0; } .badgePalettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .badgePalette { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; border: 1.5px solid var(--border); border-radius: var(--r-3); background: #fff; cursor: pointer; font: inherit; font-size: .76rem; line-height: 1.2; color: var(--fg-2); text-align: center; } .badgePalette:hover { border-color: var(--fg-3); } .badgePalette.is-active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); color: var(--brand); } .badgePaletteChip { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 4px; background: var(--f); border: 3px solid var(--b); color: var(--t); font-family: var(--font-display); font-weight: 700; font-size: 1rem; } .badgePaletteNom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badgeCouleur { display: grid; grid-template-columns: minmax(0, 1fr) 44px 120px; align-items: center; gap: 10px; margin-bottom: 8px; } .badgeCouleur input[type="color"] { width: 44px; height: 38px; padding: 2px; border: 1.5px solid var(--border); border-radius: var(--r-2); background: #fff; cursor: pointer; } .badgeCouleur input[type="text"] { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--r-2); font: inherit; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9rem; background: #fff; color: var(--fg); } .badgeRef { margin: var(--sp-4) 0; } .badgeCode { width: 100%; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .82rem; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--r-2); background: var(--beige-200); color: var(--fg); resize: vertical; } /* L'intro de la page du badge : hors d'un .pageHead, elle collait au formulaire ou à la carte qui la suit (mesuré : 0 px entre les deux). */ .compteIntro { margin: 0 0 var(--sp-6); } /* ---------- Cartes produits ---------- */ /* Une photo de produit est montrée ENTIÈRE, sur fond blanc, dans un carré : les images des marchands n'ont ni le même cadrage ni le même format, et un `cover` couperait le produit. Le zoom au survol de .cardShot reste. */ .cardShot--produit { aspect-ratio: 1 / 1; background: #fff; border-bottom: 1px solid var(--border-soft); } .cardShot--produit img { object-fit: contain; padding: var(--sp-3); } /* L'initiale d'un produit sans image : brune, pas jaune (le jaune ne sert pas au texte). */ .cardShot--produit .cardShotPlaceholder { color: var(--beige-500); } .cardBrand { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); } /* Le prix en encre, jamais en jaune : le jaune n'est qu'une couleur de fond. */ .cardPrice { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; } .cardProduit .cardCta { margin-top: auto; } /* Les grandes lignes : 2 ou 3 points courts, puce jaune (fond, pas texte). */ .cardPoints { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; color: var(--fg-2); } .cardPoints li { position: relative; padding-left: 16px; } .cardPoints li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1px var(--mauve-500); } /* La mention d'affiliation, avant les cartes d'une page et en pied de page. */ .mentionAffiliation { margin: 0 0 var(--sp-4); font-size: .85rem; color: var(--fg-3); } .footAffiliation { margin-top: var(--sp-8); margin-bottom: 0; font-size: .8rem; color: var(--beige-200); opacity: .85; } /* ---------- Le jeu « Find the perfect gift » ---------- */ /* Le gros bouton du jeu (accueil, pages de métier) : jaune en fond, texte noir. */ .btn-lg { padding: 15px 28px; font-size: 1.05rem; } .heroGame { margin: 0 0 var(--sp-6); } .hubGame { margin: var(--sp-6) 0 var(--sp-8); } .navGame { font-weight: 600; } /* Sans JavaScript, les cinq questions se suivent ; avec, une par écran (assets/gift-finder.js pose .is-js et cache les autres). */ .game { max-width: 720px; } /* ⚠️ `hidden` PERD CONTRE UN `display` D'AUTEUR : `.btn` est en inline-flex, et les boutons « Back » et « Copy link » cachés s'affichaient quand même. */ .game [hidden], .gameShare [hidden] { display: none !important; } .gameQ { border: 0; margin: 0 0 var(--sp-8); padding: 0; min-width: 0; } .game.is-js .gameQ { margin-bottom: var(--sp-6); } .gameQTitle { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 600; line-height: 1.15; color: var(--fg); margin-bottom: var(--sp-5); padding: 0; } .gameQNum { color: var(--brand); } .game.is-js .gameQNum { display: none; } .gameStep { margin: 0 0 var(--sp-3); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); font-weight: 700; } .gameOpts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); } .gameOpt { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: 16px 18px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-4); cursor: pointer; font-weight: 600; color: var(--fg); transition: border-color .15s, background .15s, box-shadow .15s; } .gameOpt:hover { border-color: var(--mauve-500); box-shadow: var(--shadow-sm); } .gameOpt input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink-900); } /* La réponse choisie : le jaune en FOND, le texte reste noir. */ .gameOpt:has(input:checked) { background: var(--sun); border-color: var(--ink-900); color: var(--on-sun); } .gameOpt:has(input:focus-visible) { outline: 3px solid var(--ink-900); outline-offset: 2px; } .gameActions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } .gameAnswers { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp-6); padding: 0; } .gameAnswers .tag { font-size: .85rem; padding: 5px 12px; } .gameNote { margin: 0 0 var(--sp-4); color: var(--fg-2); } .gameShare { margin-top: var(--sp-10); max-width: 640px; } .gameShare label { display: block; font-weight: 700; margin-bottom: var(--sp-2); } .gameShareRow { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .gameShareRow input { flex: 1 1 240px; min-width: 0; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--r-full); background: var(--surface); font-size: .9rem; color: var(--fg-2); } .gameRestart { margin-top: var(--sp-6); } @media (max-width: 520px) { .gameOpts { grid-template-columns: 1fr; } .btn-lg { width: 100%; justify-content: center; } }