/* ===================================================================== Littero — design beige + mauve, éditorial. Polices système (CSP-safe, aucune dépendance externe). ===================================================================== */ :root { /* Beige (neutres chauds) */ --beige-50: #fbf8f1; --beige-100: #f6f1e7; --beige-200: #ece3d2; --beige-300: #ddcfb6; --beige-400: #c4b290; --beige-500: #a3906c; --paper: #fdfbf5; /* Mauve (marque) */ --mauve-100: #efe9f5; --mauve-200: #ddd0ec; --mauve-300: #c3aedd; --mauve-400: #a081c6; --mauve-500: #7d5aa8; --mauve-600: #654a8b; /* primaire */ --mauve-700: #4f3a6e; --mauve-800: #3a2b50; /* Encre */ --ink-900: #241d2b; --ink-700: #423a4a; --ink-500: #6b6275; --ink-300: #9a91a3; /* 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); /* Ornement décoratif (❦ des pages) : variable À PART. Il vit à 50 % d'opacité sur du beige, donc le palier le plus délavé de la gamme y est invisible — pendant un événement, la couleur dominante ne se verrait pas changer. Le thème d'événement la surcharge avec un palier plus saturé. */ /* 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: 101, 74, 139; --ornament: var(--mauve-200); --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(58,43,80,.06), 0 2px 6px rgba(58,43,80,.05); --shadow-md: 0 4px 10px rgba(58,43,80,.08), 0 12px 30px rgba(58,43,80,.10); --shadow-lg: 0 10px 28px rgba(58,43,80,.14), 0 30px 60px rgba(58,43,80,.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 (ex. .ideagen-tree) 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(125,90,168,.05), transparent 38%), radial-gradient(circle at 85% 8%, rgba(196,178,144,.10), transparent 40%), repeating-linear-gradient(0deg, rgba(58,43,80,.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(--brand); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--brand-hover); color: #fff; 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: 32px; width: auto; } /* Dans l'en-tête, le logo reste discret : à 32 px il écrasait la barre. */ .siteHeader .brandLogo { height: 22px; } .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); } .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, deux portes : les idées de roman (auteurs) et la Pioche (lecteurs). Même entrée que le reste du hero (voir .reveal-on plus bas), puis la BORDURE du bouton des idées respire : elle passe du mauve pâle au mauve de la marque avec un halo doux, UNIFORME tout autour. Un reflet qui tournait (dégradé conique) s'entassait aux bouts arrondis de la pilule, Simon l'a refusé : le halo est le même en chaque point du contour. */ .heroActions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-4); } .heroIdea { border-color: var(--mauve-300); animation: heroGlow 2.6s ease-in-out 1.2s infinite alternate; } @keyframes heroGlow { from { border-color: var(--mauve-300); box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0); } to { border-color: var(--brand); box-shadow: 0 0 0 5px rgba(var(--brand-rgb), .14); } } @media (prefers-reduced-motion: reduce) { .heroIdea { animation: none; } } /* ---------- 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(--accent); 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; } .ornRule::after { content: "❦"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--bg); padding: 0 14px; color: var(--mauve-300); } /* ---------- 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); } /* Pub dans la grille : par défaut une bannière pleine largeur (Display). En in-feed (fluid), l'annonce native 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; } /* Repli maison caché PAR DÉFAUT. Le sélecteur compose .adSlot--infeed pour l'emporter sur la règle `.adSlot--infeed { display:flex }` définie plus bas (même spécificité sinon → sans ça le repli restait visible, superposé à l'AdSense). La révélation quand AdSense ne remplit pas est faite en JS (ads.js) : data-ad-status n'est pas fiable seul (souvent jamais posé), donc un sélecteur CSS `:has(ins[data-ad-status="unfilled"])` ne se déclenchait pas. */ .adSlot--infeed.adSlot--infeedFallback { display: none; } .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(--mauve-300); } .cardBadge { position: absolute; top: 10px; left: 10px; background: var(--mauve-600); color: #fff; 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'annonce s'adapte à la largeur dispo et rétrécit sur mobile — le responsive est conservé, rien n'est figé. La HAUTEUR se borne côté AdSense en choisissant le format « Horizontal » sur la variante (un format « auto »/« rectangle » peut sinon servir un grand pavé). Centré par défaut ; .adBanner--left cale à gauche (générateurs, tags/catégories). Exceptions : home_top (.homeAdWrap) et « Entre les cards » (.cardGridAd/.adSlot--infeed). */ .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, .adSlot--affiliate { border-style: solid; } /* AdSense responsive : le est un flex item ; vide et sans largeur il s'effondre à 0px, et une annonce responsive refuse de se remplir quand availableWidth=0. On passe l'emplacement en bloc pleine largeur. Une vraie annonce Google porte son propre visuel : on retire le fond beige (--surface-2), la bordure pointillée et le padding du placeholder — sinon un cadre beige entoure l'annonce (visible surtout quand le padding n'est pas nul, ex. home_top). Les emplacements maison/affiliation gardent leur cadre. */ .adSlot--adsense { display: block; background: transparent; border: 0; padding: 0; min-height: 0; } .adSlot--adsense .adsbygoogle { display: block; width: 100%; } /* Card native maison/affiliation : elle porte déjà son cadre (.card), donc le wrapper .adSlot ne re-cadre pas (sinon double bordure). La mention « Annonce » est requise pour la transparence, comme sur les annonces AdSense. */ .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; } /* In-feed : se fond parmi les cards (même surface/bordure/rayon), sans le cadre pointillé de placeholder ni le fond grisé des autres emplacements. Taille compacte et CONSTANTE (min-height) plutôt qu'étirée à la rangée — la cellule (flex align-items:center) la centre verticalement dans l'espace de la card la plus haute, sans bandes vides visibles au-dessus/en-dessous. */ .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); } .footOrn { letter-spacing: 6px; color: var(--mauve-400); } /* L'éditeur du réseau : au milieu de la barre, entre le nom du site et les ornements, à la même taille que le nom. 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 : trois éléments sur une ligne de 375 px, les ornements se cassaient sur deux lignes. On empile, centré, les ornements en dernier. */ .footOrn { white-space: nowrap; } @media (max-width: 760px) { .footBar { flex-direction: column; gap: 10px; text-align: center; } } /* ---------- Reveal animation (anti-flicker) ---------- Visible par défaut (sûr sans JS / SEO). L'état caché n'est posé QUE si JS est actif, via la classe `reveal-on` ajoutée dans AVANT le 1er paint — donc pas de flash « visible→caché→révélé ». GSAP anime ensuite vers visible. */ .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(36,29,43,0) 35%, rgba(36,29,43,.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; } /* Grosse feuille ❦ en haut à droite, sur TOUTES les pages (derrière le contenu). right:0 (et non -12px) : ne déborde pas du bord → pas de scroll horizontal de 12px qui laissait une bande à droite non couverte par le header/footer. */ .pageOrnament { position: absolute; right: 0; top: 88px; font-family: var(--font-display); font-size: 14rem; line-height: 1; color: var(--ornament); opacity: .5; pointer-events: none; z-index: -1; user-select: none; } @media (max-width: 760px) { .pageOrnament { display: none; } } /* ---------- 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 i { color: var(--mauve-400); width: 1.1em; text-align: center; } .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(40,28,60,.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(40,28,60,.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 i { display: inline-block; width: 1.1em; font-size: 1.05em; line-height: 1; text-align: center; } .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 i { color: var(--mauve-400); } .postCover { width: 100%; 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 i { 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(--mauve-300); 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; } } /* ============================ Le cadeau des lecteurs ==================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Bloc « nouvelle offerte » ----------------------------------------- La couverture porte l'offre : on donne un OBJET, pas une case à cocher. Elle est dessinée en CSS (.cadeauCouv) : rien à charger, rien à héberger, et le bloc ne saute pas pendant qu'une image arriverait. */ .magnet { display: grid; grid-template-columns: 180px 1fr; gap: var(--sp-8); align-items: center; background: linear-gradient(135deg, var(--brand-soft), var(--surface-2)); border: 1px solid var(--border-soft); border-radius: var(--r-6); padding: var(--sp-8); box-shadow: var(--shadow-sm); } .magnetVisual { position: relative; aspect-ratio: 3 / 4; } /* Posée de travers, comme sur une table : elle se lit comme un objet imprimé et pas comme une vignette de plus. */ .cadeauCouv { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; height: 100%; box-sizing: border-box; padding: 20px 18px; border-radius: 12px; color: #fff; text-align: left; background: linear-gradient(160deg, var(--brand), #241d2b); transform: rotate(-3deg); box-shadow: 0 14px 26px rgba(58,43,80,.28); transition: transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s ease; } /* Survol de l'encadré : la couverture se redresse et se soulève, comme on prend un livre sur la table. Même mécanique que l'éventail du bandeau de la Pioche : le survol porte sur TOUT le bloc, pas seulement la couverture, et le clavier (focus dans le formulaire) obtient le même geste. */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .magnet:hover .cadeauCouv, .magnet:focus-within .cadeauCouv { transform: rotate(0deg) translateY(-14px) scale(1.05); box-shadow: 0 26px 40px rgba(58,43,80,.34); } } .cadeauCouvForme { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; opacity: .78; } .cadeauCouv strong { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.15; font-weight: 700; } .cadeauCouvAuteur { font-size: .82rem; opacity: .85; } .magnetKicker { margin: 0 0 6px; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; color: var(--brand); } .magnetBody h2 { font-family: var(--font-display); margin: 0; font-size: 1.6rem; line-height: 1.14; } .magnetPoints { list-style: none; margin: var(--sp-4) 0 var(--sp-5); padding: 0; } .magnetPoints li { position: relative; padding-left: 24px; margin: 6px 0; color: var(--fg-2); font-size: .95rem; } .magnetPoints li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 700; } .magnetConsent { margin: var(--sp-3) 0 0; font-size: .82rem; color: var(--fg-3); } /* Sous 700 px la couverture passe au-dessus et se recentre : à 180 px de large dans une colonne étroite, elle écrasait le texte contre le bord. */ @media (max-width: 700px) { .magnet { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-6); } /* `width` explicite, PAS `max-width` : avec des marges automatiques, un élément de grille cesse d'être étiré et se réduit à son contenu. */ .magnetVisual { width: 150px; margin: 0 auto; } } /* La case de consentement au-dessus de la ligne adresse + bouton : UNE case, décochée, lisible, jamais implicite. */ .nlForm { display: flex; flex-direction: column; gap: 12px; } .nlFormRow { display: flex; gap: 10px; } .cadeauCase { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; line-height: 1.45; color: var(--fg-2); cursor: pointer; } .cadeauCase input { margin: 3px 0 0; flex: none; accent-color: var(--brand); } .nlForm input[type="email"] { width: 240px; min-width: 0; padding: 14px 20px; border-radius: var(--r-full); border: 1.5px solid var(--border); background: var(--surface); font-family: inherit; font-size: 1rem; color: var(--fg); outline: none; transition: .2s; } .nlForm input[type="email"]:focus { border-color: var(--mauve-300); box-shadow: 0 0 0 4px var(--brand-soft); } .nlForm .btn { border-radius: var(--r-full); white-space: nowrap; padding: 14px 26px; } @media (max-width: 760px) { .nlFormRow { flex-direction: column; } .nlForm input[type="email"] { width: auto; } .nlForm .btn { justify-content: center; } } /* ---- 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 et des iframes AdSense in-feed. */ .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; } /* ===================================================================== Biolink « /go » — page autonome (link-in-bio). Parti pris VISUEL, mais dans les couleurs claires du site (papier/mauve), en APLATS (aucun dégradé décoratif). Rangée de couvertures sans barre native. Mobile-first. ===================================================================== */ .goPage{ min-height:100vh; display:flex; justify-content:center; padding:34px 16px 52px; background:var(--beige-100); color:var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .goWrap{ width:100%; max-width:480px; } /* --- Profil (aligné à gauche) --- */ .goProfile{ display:flex; align-items:center; gap:15px; margin-bottom:24px; } .goPfp{ flex:none; width:72px; height:72px; border-radius:50%; object-fit:cover; border:1px solid var(--border); box-shadow:var(--shadow-sm); } .goPfp--mono{ display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.5rem; color:#fff; background:var(--brand); border:0; } .goName{ font-family:var(--font-display); font-size:1.45rem; line-height:1.2; margin:0 0 3px; } .goBio{ margin:0; color:var(--fg-3); font-size:.9rem; line-height:1.45; } /* --- Rangée de couvertures : scroll horizontal SANS barre native --- */ .goShelf{ margin:0 -16px 26px; } .goShelfHead{ padding:0 16px; margin-bottom:11px; } .goShelfTitle{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--fg-3); } .goShelfRail{ display:flex; gap:12px; overflow-x:auto; padding:2px 16px 4px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; } .goShelfRail::-webkit-scrollbar{ display:none; } .goCover{ flex:none; width:104px; scroll-snap-align:start; text-decoration:none; color:var(--fg); transition:transform .16s ease; } .goCover img{ width:104px; height:156px; object-fit:cover; border-radius:var(--r-3); display:block; background:var(--surface-2); border:1px solid var(--border); box-shadow:var(--shadow-sm); } .goCover:hover{ transform:translateY(-3px); } .goCoverCap{ display:-webkit-box; margin-top:7px; font-size:.76rem; line-height:1.25; color:var(--fg-3); overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; } /* --- Vignettes-liens (grille façon média, en aplats) --- */ .goTiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:28px; } .goTile{ position:relative; overflow:hidden; min-height:104px; padding:14px; border-radius:var(--r-4); display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; text-decoration:none; color:var(--fg); background:var(--surface); border:1px solid var(--border); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .goTile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md, 0 10px 24px rgba(58,43,80,.12)); border-color:var(--brand); } /* Vignette large (bouton « à fond ») */ .goTile--wide{ grid-column:1 / -1; min-height:150px; padding:18px; } /* Vignette large SANS image : aplat mauve pour la mettre en avant */ .goTile--wide:not(.goTile--img){ background:var(--brand); color:#fff; border-color:var(--brand); } .goTile--wide:not(.goTile--img) .goTileGlyph{ color:rgba(255,255,255,.5); } /* Vignette AVEC image de fond : voile sombre uni (pas de dégradé) + texte blanc */ .goTile--img{ color:#fff; border-color:rgba(0,0,0,.18); } .goTile--img::before{ content:""; position:absolute; inset:0; z-index:-2; background-image:var(--goBg); background-size:cover; background-position:center; transition:transform .4s ease; } .goTile--img::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(20,14,28,.42); } .goTile--img:hover::before{ transform:scale(1.06); } .goTileGlyph{ position:absolute; top:12px; right:13px; z-index:0; font-size:1.9rem; color:var(--accent); opacity:.45; } .goTileFoot{ position:relative; z-index:1; display:flex; flex-direction:column; gap:2px; } .goTileLabel{ font-family:var(--font-display); font-weight:600; font-size:1.06rem; line-height:1.2; } .goTile--img .goTileLabel{ text-shadow:0 1px 10px rgba(0,0,0,.4); } .goTile--wide .goTileLabel{ font-size:1.35rem; } .goTileLabel i{ font-size:.82em; margin-right:5px; opacity:.9; } .goTileSub{ font-size:.8rem; color:var(--fg-3); } .goTile--wide:not(.goTile--img) .goTileSub, .goTile--img .goTileSub{ color:rgba(255,255,255,.78); } /* --- Newsletter (carte claire compacte) --- */ .goNews{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-5); padding:20px 18px; } .goNewsTitle{ font-family:var(--font-display); font-size:1.2rem; margin:0 0 4px; } .goNewsLead{ margin:0 0 14px; color:var(--fg-2); font-size:.88rem; line-height:1.45; } .goNewsForm .flash{ margin-bottom:12px; font-size:.86rem; padding:10px 12px; border-radius:9px; } .goChips{ border:0; padding:0; margin:0 0 13px; display:flex; flex-wrap:wrap; gap:7px; } .goChip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; cursor:pointer; font-size:.86rem; color:var(--fg-2); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-full); transition:all .13s ease; } .goChip:hover{ color:var(--fg); border-color:var(--secAccent,var(--brand)); } .goChip input{ position:absolute; opacity:0; width:0; height:0; } .goChip:has(input:checked){ color:#fff; background:var(--secAccent,var(--brand)); border-color:var(--secAccent,var(--brand)); } .goChip:has(input:focus-visible){ outline:2px solid var(--brand); outline-offset:2px; } .goNewsForm .cadeauCase{ margin:0 0 12px; font-size:.86rem; } .goNewsRow{ display:flex; gap:8px; } .goNewsRow input[type="email"]{ flex:1 1 auto; min-width:0; padding:11px 13px; font:inherit; color:var(--fg); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-3); } .goNewsRow input[type="email"]:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); } .goNewsBtn{ flex:none; padding:11px 18px; font:inherit; font-weight:600; cursor:pointer; color:#fff; background:var(--brand); border:0; border-radius:var(--r-3); transition:background .13s ease; } .goNewsBtn:hover{ background:var(--brand-hover); } /* --- Pied --- */ .goFoot{ display:flex; gap:14px; align-items:center; justify-content:center; margin-top:26px; font-size:.82rem; color:var(--fg-3); } .goFootHome{ color:var(--fg-2); text-decoration:none; } .goFootHome:hover{ color:var(--brand); } .goFootLangs{ display:inline-flex; gap:9px; } .goFootLangs a{ color:var(--fg-3); text-decoration:none; font-weight:600; letter-spacing:.03em; } .goFootLangs a:hover{ color:var(--brand); } @media (max-width:380px){ .goTiles{ grid-template-columns:1fr; } .goNewsRow{ flex-direction:column; } .goNewsBtn{ width:100%; } } /* Encart promo vers le générateur d'idées (semé sur pages à trafic auteur). */ .genPromo{ margin:var(--sp-8,2rem) auto; } .genPromo-in{ max-width:760px; margin:0 auto; padding:1.4rem 1.6rem; text-align:center; background:linear-gradient(180deg,#fbf8f1,#f6f1e7); border:1px solid rgba(var(--brand-rgb),.22); border-radius:14px; box-shadow:0 10px 30px -20px rgba(36,29,43,.5); } .genPromo-k{ display:inline-block; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mauve-500); margin-bottom:.35rem; } .genPromo-h{ margin:.1rem 0 .35rem; font-size:1.35rem; } .genPromo-p{ margin:0 auto .9rem; max-width:52ch; color:var(--fg-3,#6b6275); } /* 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); } /* La colonne de tête d'Écrire est plus large : elle porte le bloc vedette. */ .navMegaCol--lead{ min-width:300px; } /* Le générateur d'idées en VEDETTE : une carte en dégradé mauve, titre en police d'affichage, accroche, faux bouton blanc. Ce n'est pas une ligne de menu, c'est la porte d'entrée du parcours auteur. */ .hdrNav .navMegaPanel a.navMegaFeature{ position:relative; overflow:hidden; display:block; padding:16px 18px 18px; margin-bottom:18px; border-radius:var(--r-3); color:#fff; white-space:normal; background:linear-gradient(135deg, var(--mauve-700) 0%, var(--brand) 55%, var(--mauve-400) 100%); box-shadow:0 14px 30px -16px rgba(var(--brand-rgb),.75); transition:transform .15s ease, box-shadow .15s ease; } .hdrNav .navMegaPanel a.navMegaFeature:hover{ color:#fff; background:linear-gradient(135deg, var(--mauve-700) 0%, var(--brand) 55%, var(--mauve-400) 100%); transform:translateY(-1px); box-shadow:0 18px 34px -16px rgba(var(--brand-rgb),.85); } .navMegaFeatureK{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; opacity:.85; margin-bottom:5px; } .navMegaFeatureT{ display:block; font-family:var(--font-display); font-size:1.2rem; line-height:1.2; margin-bottom:12px; } .navMegaFeatureBtn{ display:inline-block; background:#fff; color:var(--brand); font-weight:700; font-size:.82rem; padding:7px 13px; border-radius:var(--r-full); } /* 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; } } /* ---------- Compte par lien magique ---------- */ /* Le lien « Mon espace » est le MÊME pour tout le monde : le header ne lit jamais la session (le cache CDN y perdrait), c'est la page derrière qui décide. Icône dans la zone de droite ; ligne dans le menu mobile. */ .hdrAccount { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--r-full); color: var(--fg-2); transition: .15s; flex: none; } .hdrAccount:hover { background: var(--beige-200); color: var(--fg); } .navAccount { display: none; } @media (max-width: 760px) { .hdrAccount { display: none; } .hdrNav .navAccount { display: block; text-align: center; } } .compteGrid { display: grid; gap: var(--sp-5); max-width: 760px; margin-top: var(--sp-6); } .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; } .compteIdee { border-top: 1px solid var(--border-soft); padding: 12px 0; } .compteNav { margin: var(--sp-4) 0 var(--sp-5); } .compteNavSortie { margin-left: auto; } .compteNavSortieBtn { font: inherit; cursor: pointer; } /* L'accueil de l'espace : une tuile par outil, deux par rangée dès qu'il y a la place. */ .compteTuiles { display: grid; gap: var(--sp-4); max-width: 900px; margin-top: var(--sp-5); } @media (min-width: 720px) { .compteTuiles { grid-template-columns: 1fr 1fr; } } .compteTuile { display: flex; flex-direction: column; gap: 10px; } .compteTuile h2 { margin: 0; } .compteTuile .btn, .compteTuile .compteRow { margin-top: auto; } .compteTuileChiffre { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; } .compteTuileListe { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .compteTuileListe li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border-soft); font-size: .92rem; } .compteTuileListe li a { color: inherit; font-weight: 600; } .compteTuileListe small { color: var(--fg-3); font-size: .8rem; white-space: nowrap; } /* Les achats : une ligne par commande, la porte du dossier à droite. */ .achatListe { display: grid; gap: var(--sp-3); max-width: 760px; } .achat { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); } .achatTexte { display: grid; gap: 4px; } .achatEtat--done { color: var(--success); font-weight: 600; } /* Les idées gardées : une carte par idée, le texte replié, les gestes en bas. */ .ideesCompte { margin: 0 0 var(--sp-4); } /* L'exemple public de dossier : l'idée de départ à gauche, les six parties à droite, chacune ouverte par un grand numéro, et une barre de navigation flottante en bas au centre (partie courante, liste, précédente/suivante). */ .dossierEx { padding-bottom: 120px; } .dossierExGrille { display: grid; gap: var(--sp-8); margin-top: var(--sp-8); align-items: start; } @media (min-width: 960px) { .dossierExGrille { grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-12); } .dossierExCote { position: sticky; top: 90px; } } .dossierExIdee h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); margin: 0 0 8px; } .dossierExTitre { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; margin: 0 0 8px; } .dossierExPitch { font-size: .95rem; } /* 14 px + 10 px de retrait des liens = 24 px, la marge intérieure de la carte au-dessus : le sommaire s'aligne sur son texte. */ .dossierExCorps { display: grid; gap: 0; } .dossierExPartie { max-width: 760px; padding: var(--sp-16) 0; border-top: 1px solid var(--border); scroll-margin-top: 88px; } .dossierExPartie:first-child { border-top: 0; padding-top: 0; } .dossierExPartieTete { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; align-items: center; margin-bottom: var(--sp-8); padding-bottom: var(--sp-5); border-bottom: 2px solid var(--brand-soft); } .dossierExNum { grid-row: span 2; font-family: var(--font-display); font-size: 3.2rem; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; } .dossierExPartieSur { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); } .dossierExPartieTete h2 { margin: 0; font-size: 1.9rem; line-height: 1.15; } .dossierExTexte { line-height: 1.7; } .dossierExTexte p { margin: 0 0 var(--sp-4); } .dossierExTexte h2, .dossierExTexte h3 { font-size: 1.25rem; line-height: 1.3; margin: var(--sp-10) 0 var(--sp-3); padding-left: 14px; border-left: 3px solid var(--brand); } .dossierExTexte h4 { font-size: 1.05rem; margin: var(--sp-6) 0 var(--sp-2); } .dossierExTexte ul, .dossierExTexte ol { margin: 0 0 var(--sp-4); padding-left: 1.4em; } .dossierExTexte li { margin: 6px 0; } .dossierExTexte li > p { margin: 0; } .dossierExCta { max-width: 760px; text-align: center; margin-top: var(--sp-8); padding: var(--sp-10) var(--sp-6); } .dossierExCta h2 { margin: 0 0 var(--sp-2); } .dossierExCta p { margin: 0 0 var(--sp-5); color: var(--fg-2); } .dossierExBarre { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 2px; padding: 6px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); box-shadow: var(--shadow-md); } .dossierExBarreBtn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--r-full); background: transparent; color: var(--fg); cursor: pointer; } .dossierExBarreBtn:hover { background: var(--surface-2); } .dossierExBarreBtn:disabled { color: var(--fg-3); opacity: .4; cursor: default; background: transparent; } .dossierExBarreBtn svg { width: 18px; height: 18px; } .dossierExBarreMenu { position: relative; min-width: 0; } .dossierExBarreMenu summary { list-style: none; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--r-full); cursor: pointer; font-size: .95rem; font-weight: 600; color: var(--fg); white-space: nowrap; } .dossierExBarreMenu summary::-webkit-details-marker { display: none; } .dossierExBarreMenu summary:hover { background: var(--surface-2); } .dossierExBarreMenu summary span { overflow: hidden; text-overflow: ellipsis; max-width: min(420px, 52vw); } .dossierExBarreMenu summary svg { width: 14px; height: 14px; flex: none; color: var(--fg-3); transition: transform .15s; } .dossierExBarreMenu[open] summary svg { transform: rotate(180deg); } .dossierExBarreListe { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); margin: 0; padding: 6px; list-style: none; min-width: 280px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); box-shadow: var(--shadow-lg); counter-reset: partie; } .dossierExBarreListe li { counter-increment: partie; } .dossierExBarreListe a { display: flex; gap: 12px; align-items: baseline; padding: 9px 12px; border-radius: var(--r-2); color: var(--fg-2); text-decoration: none; white-space: nowrap; } .dossierExBarreListe a::before { content: counter(partie, decimal-leading-zero); font-family: var(--font-display); color: var(--fg-3); } .dossierExBarreListe a:hover { background: var(--surface-2); color: var(--fg); } .dossierExBarreListe a.is-active { background: var(--brand-soft); color: var(--brand); } .dossierExBarreListe a.is-active::before { color: var(--brand); } /* Chercher, filtrer, tourner les pages des idées. */ .ideesOutils { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); max-width: 760px; } .ideesLabel { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; } .ideesChercher input[type="text"] { flex: 1 1 220px; min-width: 200px; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--r-full); background: #fff; font: inherit; } .ideesGenres { display: flex; flex-wrap: wrap; gap: 6px; } .ideeChip, .ideeGenre { text-decoration: none; } a.ideeChip:hover, a.ideeGenre:hover { border-color: var(--mauve-300); color: var(--brand); } .ideesPages { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin: var(--sp-5) 0; max-width: 760px; } /* La carte vide (idées, achats) : au milieu de la page, comme celle des tableaux ; deux classes pour battre .compteCard. */ .compteCard.ideesVide { width: fit-content; min-width: min(480px, 100%); max-width: 100%; margin: 96px auto var(--sp-6); padding: var(--sp-6) 40px; text-align: center; } .compteCard.ideesVide .compteMeta { margin: 0 0 var(--sp-4); } @media (min-width: 900px) { .ideesVide .compteMeta { white-space: nowrap; } } .ideeCartes { display: grid; gap: var(--sp-4); max-width: 760px; } .ideeCarte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: var(--sp-5); } .ideeCarteTete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--fg-3); } .ideeChip { display: inline-block; padding: 3px 10px; border-radius: var(--r-full); background: var(--beige-200); color: var(--fg-2); font-size: .76rem; font-weight: 600; margin-left: 6px; } .ideeCarteTitre { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; margin: 10px 0 8px; } .ideeCarteGenres { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .ideeGenre { padding: 2px 9px; border: 1px solid var(--border); border-radius: var(--r-full); font-size: .78rem; color: var(--fg-2); } .ideeCarteTexte { margin: 0 0 4px; } .ideeCarteActions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; } .ideeCarteActions form { display: inline; margin: 0; } .compteDanger .btn { background: var(--danger); color: #fff; } /* ---------- Tableau de démarches ---------- */ /* La porte des tableaux : au milieu de la page, comme l'état vide ; deux classes pour battre .compteCard. */ .compteCard.tableauPorte { max-width: 560px; margin: 96px auto var(--sp-6); text-align: center; } .compteCard.tableauPorte .field label.compteCheck { justify-content: center; } .tableauOutils { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin: var(--sp-6) 0 var(--sp-4); } .tableauChercher label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; } .tableauChercher input { min-width: 220px; flex: 1 1 220px; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--r-full); background: #fff; font: inherit; } .tableauResultats { display: grid; gap: 6px; max-width: 640px; margin-bottom: var(--sp-5); } .tableauResultat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); } /* Le tableau déborde sur téléphone : il défile dans son cadre, jamais la page. */ .tableauWrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-3); background: var(--surface); } .tableau { width: 100%; min-width: 1080px; border-collapse: collapse; font-size: .9rem; } .tableau th, .tableau td { padding: 8px 8px; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: top; } .tableau th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); background: var(--beige-200); } .tableau input[type="text"], .tableau input[type="date"], .tableau select { width: 100%; min-width: 110px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-2); background: #fff; font: inherit; font-size: .88rem; } .tableau td.tableauCible input[type="text"] { min-width: 180px; } .tableauCibleWrap { position: relative; display: block; } .tableauCibleWrap--lien input[type="text"] { padding-right: 30px; } .tableauLienExt { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--r-2); color: var(--fg-3); } .tableauLienExt:hover { color: var(--brand); background: var(--beige-200); } .tableau .tableauSel { width: 28px; vertical-align: middle; } .tableau .tableauSel input { width: 16px; height: 16px; min-width: 0; } .tableauBarre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 var(--sp-3); } .tableauEtat { margin-left: auto; } .tableau select.tableauStatut { font-weight: 600; } .tableauStatut--envoye, .tableauStatut--relance { color: var(--mauve-700); } .tableauStatut--accepte { color: var(--success); } .tableauStatut--refuse { color: var(--danger); } .tableauActions { white-space: nowrap; } .tableauActions .btn + .btn { margin-left: 4px; } .tableauVide { margin: var(--sp-6) 0; } /* Le bilan du tableau : une tuile par état, chacune un filtre. */ .tableauBilan { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: var(--sp-5) 0 var(--sp-3); } .tableauBilanTuile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--r-3); background: var(--surface); color: var(--fg-2); text-decoration: none; transition: border-color .15s; } .tableauBilanTuile:hover { border-color: var(--mauve-300); } .tableauBilanTuile.is-active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .tableauBilanTuile strong { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--fg); } .tableauBilanTuile span { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .tableauBilanTuile--a_relancer strong { color: #9a6b00; } .tableauBilanTuile--accepte strong { color: var(--success); } .tableauBilanTuile--refuse strong { color: var(--danger); } .tableauFiltres, .tableauTri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--sp-3); } .tableauFiltresLabel { font-size: .85rem; font-weight: 600; color: var(--fg-3); margin-right: 4px; } .tableauChip { padding: 4px 12px; border: 1.5px solid var(--border); border-radius: var(--r-full); font-size: .82rem; font-weight: 600; color: var(--fg-2); background: var(--surface); text-decoration: none; transition: .15s; } .tableauChip:hover { border-color: var(--mauve-300); color: var(--brand); } .tableauChip.is-active { background: #fff; border-color: var(--brand); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .tableauChip small { opacity: .75; font-weight: 500; } .tableauCompte { margin-left: auto; } .tableauBadge { display: inline-block; margin-bottom: 4px; padding: 2px 9px; border-radius: var(--r-full); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--beige-200); color: var(--fg-2); } .tableauBadge--envoye, .tableauBadge--relance { background: #e9e3f5; color: var(--mauve-700); } .tableauBadge--accepte { background: #e8f5ed; color: var(--success); } .tableauBadge--refuse { background: #fbeae7; color: var(--danger); } .tableauLigne--due td { background: #fff8e1; } .tableauLigne--accepte td:first-child { box-shadow: inset 3px 0 0 var(--success); } .tableauLigne--refuse td { color: var(--fg-3); } .tableauHint { display: block; margin-top: 3px; font-size: .74rem; color: var(--fg-3); white-space: nowrap; } .tableauHint--due { color: #9a6b00; font-weight: 600; } .tableauLegende { margin: var(--sp-3) 0 0; font-size: .82rem; max-width: 760px; } .tableauActions .btn { margin: 0 4px 4px 0; } /* Les onglets des tableaux (un par type de cible) et le bouton d'ajout. */ .tableauOnglets { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); } .tableauOnglets .browseBar { margin: 0; } /* L'onglet et la pastille actifs : bordure mauve, fond blanc, pas d'aplat. */ .tableauOnglets .browseBar__link.is-active { background: #fff; border-color: var(--brand); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } /* Les champs de l'espace : fond blanc partout, la même couleur d'un écran à l'autre. */ .tableauDialog .field input, .tableauDialog .field select, .tableauDialog .field textarea, .compteCard .field input, .compteCard .field select, .tableau input, .tableau select { background: #fff; } .tableauOnglets .browseBar__link small { opacity: .7; font-weight: 500; margin-left: 2px; } .tableauOngletsBtns { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; } /* L'état vide, au milieu de la page ; la gestion des tableaux, une ligne par tableau. */ .tableauVide--centre { max-width: 560px; margin: var(--sp-6) auto; text-align: center; } .tableauVide--centre h2 { margin: 0 0 var(--sp-2); } .tableauVide--centre .compteMeta { margin: 0 0 var(--sp-4); } .tableauVideBtns { justify-content: center; } /* La section de suppression : à part, encadrée, avec sa couleur. */ .tableauDialogBloc.tableauDialogBloc--danger { margin-top: var(--sp-3); padding: var(--sp-4) var(--sp-5); border: 1px solid #f0cabf; border-radius: var(--r-3); background: #fdf5f3; } .tableauDialogBloc--danger h3 { color: var(--danger); } .tableauDialogBloc--danger .compteMeta { margin: 0 0 12px; } .tableauGestionSuppr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .tableauBtnDanger { background: var(--danger); color: #fff; border-color: var(--danger); } .tableauBtnDanger:hover { background: #8f1d16; color: #fff; } .tableauGestionNom input[type="text"] { flex: 1 1 200px; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--r-2); background: #fff; font: inherit; } .tableauGestionSuppr { font-size: .88rem; } /* Les variantes DOIVENT battre `.tableauDialog`, écrit plus bas : deux classes, pas une. */ .tableauDialog.tableauDialog--petit { width: min(460px, calc(100vw - 2rem)); } .tableauDialog.tableauDialog--confirm { width: min(320px, calc(100vw - 2rem)); padding: 28px 22px 20px; text-align: center; } .tableauDialog--confirm h2 { font-size: 1.02rem; line-height: 1.3; margin: 4px 0 14px; } .tableauDialog--confirm .btn { padding: 8px 18px; } .tableauDialog--confirm form { display: flex; justify-content: center; } .tableauSep { width: 1px; height: 18px; background: var(--border); margin: 0 6px; } /* La fenêtre d'ajout : native (), fond assombri, carte blanche. */ .tableauDialog { width: min(680px, calc(100vw - 2rem)); max-height: 90vh; padding: var(--sp-6); border: 0; border-radius: var(--r-3); background: var(--surface); box-shadow: 0 24px 60px -20px rgba(20,15,25,.5); } .tableauDialog::backdrop { background: rgba(20,15,25,.6); } .tableauDialog h2 { margin: 0 0 var(--sp-4); font-size: 1.35rem; } .tableauDialog h3 { margin: 0 0 4px; font-size: 1.02rem; } .tableauDialogFermer { position: absolute; top: 10px; right: 14px; margin: 0; } .tableauDialogX { background: none; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--fg-3); } .tableauDialogX:hover { color: var(--brand); } .tableauDialogBloc { padding: var(--sp-4) 0; border-top: 1px solid var(--border-soft); } .tableauDialogBloc:first-of-type { border-top: 0; padding-top: 0; } .tableauDialog .tableauChercher { margin-top: 8px; } .tableauDialog .tableauResultats { margin: var(--sp-3) 0 0; max-width: none; } .tableauResultatTexte { flex: 1 1 200px; } .tableauSuggest { display: grid; gap: 4px; margin-top: 8px; max-height: 260px; overflow: auto; padding: 6px; border: 1px solid var(--border); border-radius: var(--r-3); background: #fff; box-shadow: 0 12px 30px -18px rgba(20,15,25,.35); } .tableauSuggest[hidden] { display: none; } .tableauSuggestItem { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: var(--r-2); font-size: .92rem; } .tableauSuggestItem:hover { background: var(--beige-200); } .tableauResultat select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-2); background: #fff; font: inherit; font-size: .85rem; } .tableauNouveauForm { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 8px; } .tableauNouveauForm .field { margin: 0; } .tableauNouveauForm .btn { grid-column: 1 / -1; justify-self: start; } @media (max-width: 600px) { .tableauNouveauForm { grid-template-columns: 1fr; } } .tableauVide { max-width: 640px; } /* L'état vide centré doit battre `.tableauVide` et `.compteCard`, écrits ailleurs : trois classes. */ .compteCard.tableauVide.tableauVide--centre { max-width: 560px; margin: 96px auto var(--sp-6); text-align: center; } /* ---------- 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; } /* ---------- Encadré du tableau dans le formulaire de connexion ---------- */ .tableauCarte { margin: var(--sp-4) 0 var(--sp-5); padding: 14px 16px; border: 1px solid rgba(var(--brand-rgb), .25); border-radius: var(--r-3); background: linear-gradient(180deg, #fbf8f1, #f6f1e7); } .tableauCarteTitre { display: block; font-family: var(--font-display); font-size: 1.1rem; margin: 2px 0 4px; } .tableauCarteTexte { margin: 0 0 10px; font-size: .88rem; color: var(--fg-3); } /* L'intro des pages du compte (connexion, tableau, 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); }