1471 lines
33 KiB
CSS
1471 lines
33 KiB
CSS
:root {
|
||
color-scheme: light dark;
|
||
|
||
--page-gap: 12px;
|
||
|
||
/* valeurs mises à jour par JS */
|
||
--sticky-header-h: 108px;
|
||
--followbar-h: 0px;
|
||
--sticky-offset-px: 120;
|
||
|
||
/* offset réel pour scroll-margin-top (header + bandeau) */
|
||
--sticky-offset: calc(var(--sticky-header-h) + var(--followbar-h));
|
||
|
||
/* bandeau aligné sur le reading */
|
||
--reading-left: 0px;
|
||
--reading-width: 100%;
|
||
|
||
/* tailles exactes du reading (injectées par JS) */
|
||
--rf-h1-size: 2rem;
|
||
--rf-h1-lh: 1.2;
|
||
--rf-h1-fw: 800;
|
||
|
||
--rf-h2-size: 1.5rem;
|
||
--rf-h2-lh: 1.25;
|
||
--rf-h2-fw: 700;
|
||
|
||
--rf-h3-size: 1.25rem;
|
||
--rf-h3-lh: 1.25;
|
||
--rf-h3-fw: 650;
|
||
|
||
/* ===== Polish (non destructif) ===== */
|
||
--ease-out: cubic-bezier(.2,.9,.2,1);
|
||
--ease-soft: cubic-bezier(.2,.8,.2,1);
|
||
|
||
--focus-ring: 2px solid rgba(140,140,255,0.60);
|
||
--focus-ring-offset: 2px;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
||
line-height: 1.6;
|
||
|
||
/* polish */
|
||
text-rendering: optimizeLegibility;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
a { text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
|
||
/* ===== Focus (accessibilité + feel premium) ===== */
|
||
:focus { outline: none; }
|
||
:focus-visible{
|
||
outline: var(--focus-ring);
|
||
outline-offset: var(--focus-ring-offset);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce){
|
||
*{ transition: none !important; animation: none !important; }
|
||
}
|
||
|
||
/* Header sticky */
|
||
header{
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1000;
|
||
isolation: isolate;
|
||
|
||
background: rgba(0,0,0,.82);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
|
||
border-bottom: 1px solid rgba(127,127,127,0.28);
|
||
padding: 10px 16px;
|
||
}
|
||
|
||
@media (prefers-color-scheme: light){
|
||
header{
|
||
background: rgba(255,255,255,.90);
|
||
}
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark){
|
||
header{ background: rgba(0,0,0,.72); }
|
||
}
|
||
|
||
.site-nav{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 13px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.site-nav span[aria-hidden="true"]{
|
||
display: none;
|
||
}
|
||
|
||
.site-nav a{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 30px;
|
||
padding: 5px 10px;
|
||
border: 1px solid transparent;
|
||
border-radius: 999px;
|
||
color: #00d9ff;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
opacity: .94;
|
||
transition:
|
||
transform 120ms var(--ease-out),
|
||
background 120ms var(--ease-out),
|
||
border-color 120ms var(--ease-out),
|
||
opacity 120ms var(--ease-out);
|
||
}
|
||
|
||
/* ===== SiteNav : lien actif ===== */
|
||
.site-nav a[aria-current="page"],
|
||
.site-nav a.is-active,
|
||
.site-nav a[data-active="true"]{
|
||
position: relative;
|
||
color: #00d9ff;
|
||
border-color: rgba(0,217,255,0.42);
|
||
background:
|
||
radial-gradient(circle at 50% 50%, rgba(0,217,255,0.16), transparent 68%),
|
||
rgba(0,217,255,0.075);
|
||
box-shadow:
|
||
0 0 0 1px rgba(0,217,255,0.12),
|
||
0 0 14px rgba(0,217,255,0.18),
|
||
inset 0 0 14px rgba(0,217,255,0.045);
|
||
opacity: 1;
|
||
}
|
||
|
||
.site-nav a:hover{
|
||
transform: translateY(-1px);
|
||
background: rgba(0,217,255,.08);
|
||
border-color: rgba(0,217,255,.22);
|
||
opacity: 1;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.site-nav a:active{
|
||
transform: translateY(0);
|
||
}
|
||
|
||
@media (max-width: 760px){
|
||
.site-nav{
|
||
gap: 5px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.site-nav a{
|
||
min-height: 28px;
|
||
padding: 4px 8px;
|
||
}
|
||
}
|
||
|
||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||
.site-nav{
|
||
gap: 4px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.site-nav a{
|
||
min-height: 24px;
|
||
padding: 3px 7px;
|
||
}
|
||
}
|
||
|
||
main { padding: 0; }
|
||
|
||
.reading {
|
||
max-width: 78ch;
|
||
margin: 0 auto;
|
||
|
||
/* polish */
|
||
font-size: 16px;
|
||
letter-spacing: 0.005em;
|
||
}
|
||
|
||
.reading > h1{
|
||
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
|
||
line-height: 1.15;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.reading p { margin: 0 0 12px; }
|
||
|
||
/* petits ajustements de respiration */
|
||
.reading h2 { margin-top: 18px; }
|
||
.reading h3 { margin-top: 14px; }
|
||
|
||
.edition-bar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px 16px;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
padding-top: 10px;
|
||
border-top: 1px dashed rgba(127,127,127,0.35);
|
||
font-size: 14px;
|
||
}
|
||
/* Edition-bar: cacher des badges (non destructif) */
|
||
.edition-bar [data-badge="edition"],
|
||
.edition-bar [data-badge="status"],
|
||
.edition-bar [data-badge="version"]{
|
||
display: none;
|
||
}
|
||
|
||
.badge {
|
||
padding: 2px 8px;
|
||
border: 1px solid rgba(127,127,127,0.45);
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.resume-btn{
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
border: 1px solid rgba(127,127,127,0.55);
|
||
border-radius: 999px;
|
||
padding: 5px 12px;
|
||
transition: transform 120ms var(--ease-out), background 120ms var(--ease-out);
|
||
}
|
||
.resume-btn:hover{
|
||
background: rgba(127,127,127,0.10);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* Jump by paragraph id */
|
||
.jump-form{
|
||
display: inline-flex;
|
||
gap: 6px;
|
||
align-items: center;
|
||
}
|
||
.jump-input{
|
||
border: 1px solid rgba(127,127,127,0.55);
|
||
background: transparent;
|
||
padding: 4px 10px;
|
||
border-radius: 999px;
|
||
font-size: 13px;
|
||
width: 320px;
|
||
transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
|
||
}
|
||
.jump-input:focus-visible{
|
||
border-color: rgba(140,140,255,0.65);
|
||
box-shadow: 0 0 0 3px rgba(140,140,255,0.18);
|
||
}
|
||
.jump-input.is-error{
|
||
outline: 2px solid rgba(127,127,127,0.55);
|
||
outline-offset: 2px;
|
||
}
|
||
.jump-btn{
|
||
border: 1px solid rgba(127,127,127,0.55);
|
||
background: transparent;
|
||
padding: 4px 10px;
|
||
border-radius: 999px;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
transition: transform 120ms var(--ease-out), background 120ms var(--ease-out);
|
||
}
|
||
.jump-btn:hover{
|
||
background: rgba(127,127,127,0.10);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* Toggle niveaux (legacy, non bloquant) */
|
||
.level-toggle { display: inline-flex; gap: 6px; }
|
||
.lvl-btn {
|
||
border: 1px solid rgba(127,127,127,0.55);
|
||
background: transparent;
|
||
padding: 4px 10px;
|
||
border-radius: 999px;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
transition: transform 120ms var(--ease-out), background 120ms var(--ease-out), border-color 120ms var(--ease-out);
|
||
}
|
||
.lvl-btn:hover{
|
||
background: rgba(127,127,127,0.10);
|
||
transform: translateY(-1px);
|
||
}
|
||
.lvl-btn[aria-pressed="true"] {
|
||
border-color: rgba(127,127,127,0.9);
|
||
font-weight: 650;
|
||
}
|
||
|
||
/* Règles niveaux */
|
||
body[data-reading-level="1"] .level-2,
|
||
body[data-reading-level="1"] .level-3,
|
||
body[data-reading-level="1"] .level-4 { display: none; }
|
||
|
||
body[data-reading-level="2"] .level-3,
|
||
body[data-reading-level="2"] .level-4 { display: none; }
|
||
|
||
body[data-reading-level="3"] .level-2,
|
||
body[data-reading-level="3"] .level-4 { display: none; }
|
||
|
||
body[data-reading-level="4"] .level-2,
|
||
body[data-reading-level="4"] .level-3 { display: none; }
|
||
|
||
/* ==========================
|
||
Scroll offset (anchors / headings / paras)
|
||
========================== */
|
||
|
||
.reading p[id]{
|
||
position: relative;
|
||
padding-right: 14rem;
|
||
scroll-margin-top: var(--sticky-offset);
|
||
}
|
||
|
||
/* Anchres + titres */
|
||
.para-alias,
|
||
.details-anchor{
|
||
display: block;
|
||
height: 0;
|
||
scroll-margin-top: var(--sticky-offset);
|
||
}
|
||
|
||
.reading h1,
|
||
.reading h2[id],
|
||
.reading h3[id]{
|
||
scroll-margin-top: var(--sticky-offset);
|
||
}
|
||
|
||
.para-tools{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 8px;
|
||
opacity: 0;
|
||
transition: opacity 120ms ease-in-out;
|
||
}
|
||
|
||
.para-tools-row{
|
||
display: inline-flex;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.reading p[id]:hover .para-tools,
|
||
.reading p[id]:focus-within .para-tools { opacity: 1; }
|
||
|
||
.para-anchor,
|
||
.para-propose,
|
||
.para-cite{
|
||
font-size: 12px;
|
||
border: 1px solid rgba(127,127,127,0.45);
|
||
border-radius: 999px;
|
||
padding: 2px 8px;
|
||
background: transparent;
|
||
transition: transform 120ms var(--ease-out), background 120ms var(--ease-out);
|
||
}
|
||
.para-anchor:hover,
|
||
.para-propose:hover,
|
||
.para-cite:hover{
|
||
background: rgba(127,127,127,0.10);
|
||
transform: translateY(-1px);
|
||
}
|
||
.para-cite{ cursor: pointer; }
|
||
|
||
.para-bookmark{
|
||
font-size: 13px;
|
||
border: 1px solid rgba(127,127,127,0.65);
|
||
border-radius: 999px;
|
||
padding: 4px 12px;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
transition: transform 120ms var(--ease-out), background 120ms var(--ease-out);
|
||
}
|
||
.para-bookmark:hover{
|
||
background: rgba(127,127,127,0.10);
|
||
transform: translateY(-1px);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Highlight (jump / resume / arrivée hash) */
|
||
.para-highlight{
|
||
background: rgba(127,127,127,0.10);
|
||
border-radius: 10px;
|
||
box-shadow: 0 0 0 2px rgba(127,127,127,0.35);
|
||
transition: box-shadow 160ms ease;
|
||
}
|
||
|
||
.build-stamp {
|
||
margin-top: 28px;
|
||
padding-top: 14px;
|
||
border-top: 1px solid rgba(127,127,127,0.25);
|
||
opacity: 0.85;
|
||
}
|
||
|
||
/* Accordéon */
|
||
.details-section {
|
||
border: 1px solid rgba(127,127,127,.25);
|
||
border-radius: 16px;
|
||
padding: 10px 12px;
|
||
margin: 14px 0;
|
||
position: relative;
|
||
}
|
||
|
||
/* ✅ Handle minimal pour sections fermées : pas de titre visible, mais ouvrable */
|
||
.details-summary{
|
||
list-style: none;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
border: 1px dashed rgba(127,127,127,.25);
|
||
border-radius: 999px;
|
||
padding: 6px 10px;
|
||
margin: 10px 0;
|
||
|
||
background: rgba(127,127,127,0.06);
|
||
position: relative;
|
||
|
||
/* cache le texte réel (souvent le titre), sans casser l’accessibilité */
|
||
color: transparent;
|
||
}
|
||
.details-summary::-webkit-details-marker { display: none; }
|
||
|
||
.details-summary::before{
|
||
content: "▸ Ouvrir la section";
|
||
color: rgba(127,127,127,0.85);
|
||
font-size: 12px;
|
||
font-weight: 850;
|
||
}
|
||
@media (prefers-color-scheme: dark){
|
||
.details-summary::before{ color: rgba(220,220,220,0.82); }
|
||
}
|
||
|
||
details[open] > .details-summary{
|
||
/* une fois ouvert, on le rend “SR-only” pour éviter le doublon visuel */
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|
||
|
||
.details-body { margin-top: 10px; }
|
||
|
||
/* Smooth scroll */
|
||
html{ scroll-behavior: smooth; }
|
||
@media (prefers-reduced-motion: reduce){
|
||
html{ scroll-behavior: auto; }
|
||
}
|
||
|
||
/* ==========================
|
||
Reading-follow (H1/H2/H3 only)
|
||
========================== */
|
||
|
||
.reading-follow{
|
||
position: fixed;
|
||
|
||
left: var(--reading-left);
|
||
width: var(--reading-width);
|
||
right: auto;
|
||
|
||
top: var(--sticky-header-h);
|
||
|
||
z-index: 60;
|
||
pointer-events: none;
|
||
|
||
opacity: 0;
|
||
transform: translateY(-6px);
|
||
transition: opacity 160ms ease, transform 160ms ease;
|
||
}
|
||
|
||
.reading-follow.is-on{
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.reading-follow__inner{
|
||
pointer-events: auto;
|
||
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
|
||
padding: 8px 12px;
|
||
padding-right: 84px;
|
||
|
||
border: 1px solid rgba(127,127,127,.20);
|
||
border-top: 0;
|
||
border-radius: 0 0 14px 14px;
|
||
|
||
background: rgba(255,255,255,.86);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
|
||
box-shadow: 0 10px 22px rgba(0,0,0,.06);
|
||
|
||
position: relative;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark){
|
||
.reading-follow__inner{
|
||
background: rgba(0,0,0,.58);
|
||
box-shadow: 0 10px 22px rgba(0,0,0,.18);
|
||
}
|
||
}
|
||
|
||
.rf-line{
|
||
width: 100%;
|
||
text-align: left;
|
||
border: 0;
|
||
background: transparent;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
margin: 0;
|
||
}
|
||
.rf-line[hidden]{ display: none !important; }
|
||
|
||
.rf-h1{
|
||
font-size: var(--rf-h1-size);
|
||
line-height: var(--rf-h1-lh);
|
||
font-weight: var(--rf-h1-fw);
|
||
}
|
||
.rf-h2{
|
||
font-size: var(--rf-h2-size);
|
||
line-height: var(--rf-h2-lh);
|
||
font-weight: var(--rf-h2-fw);
|
||
opacity: .96;
|
||
}
|
||
.rf-h3{
|
||
font-size: calc(var(--rf-h2-size, 1.5rem) * 0.72);
|
||
line-height: calc(var(--rf-h2-lh, 1.25) * 0.9);
|
||
font-weight: var(--rf-h3-fw, 650);
|
||
opacity: .86;
|
||
}
|
||
.rf-line:hover{ text-decoration: underline; }
|
||
|
||
/* Actions */
|
||
.rf-actions{
|
||
position: absolute;
|
||
right: 10px;
|
||
bottom: 8px;
|
||
display: inline-flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.rf-btn{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 34px;
|
||
height: 30px;
|
||
border-radius: 10px;
|
||
border: 1px solid rgba(127,127,127,0.35);
|
||
background: rgba(127,127,127,0.10);
|
||
cursor: pointer;
|
||
transition: background 120ms ease, transform 120ms ease;
|
||
}
|
||
|
||
.rf-btn:hover{
|
||
background: rgba(127,127,127,0.16);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* ==========================
|
||
PATCH CRUCIAL : éviter les “rectangles vides”
|
||
(details fermés + summary handle minimal)
|
||
========================== */
|
||
|
||
.reading details.details-section:not([open]){
|
||
border: 0;
|
||
padding: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
/* ==========================
|
||
Landscape boost (mobile/tablet)
|
||
CSS-only, non destructif
|
||
- iOS + Android
|
||
- élargit la lecture en paysage sur petits écrans
|
||
- ne touche pas au desktop
|
||
========================== */
|
||
|
||
/* 1) Quand on est en paysage sur “petits” devices,
|
||
on évite une colonne unique trop “étroite” et on retire le max-width 78ch. */
|
||
@media (orientation: landscape) and (max-width: 1024px){
|
||
/* La grille (EditionLayout) utilise .page-shell ; on la rend plus “fluide” */
|
||
.page-shell{
|
||
max-width: calc(100vw - 16px) !important; /* respire mais exploite la largeur */
|
||
}
|
||
|
||
/* La lecture ne doit pas rester “bridée” à 78ch en paysage */
|
||
.reading{
|
||
max-width: none !important;
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
|
||
/* 2) Cas extrême : petits téléphones en paysage (hauteur faible).
|
||
On réduit légèrement les paddings pour gagner de la place utile. */
|
||
@media (orientation: landscape) and (max-width: 820px) and (max-height: 520px){
|
||
header{
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
/* allège un peu la barre d’édition (sans la casser) */
|
||
.edition-bar{
|
||
margin-top: 8px;
|
||
padding-top: 8px;
|
||
gap: 8px 12px;
|
||
}
|
||
|
||
/* champ jump un peu moins large, pour éviter de “manger” la nav */
|
||
.jump-input{
|
||
width: min(260px, 48vw);
|
||
}
|
||
}
|
||
|
||
/* 3) iOS Safari : le viewport peut être “bizarre” en paysage (barres).
|
||
Cette règle aide à éviter des layouts coincés quand l’UI Safari bouge. */
|
||
@supports (height: 100dvh){
|
||
@media (orientation: landscape) and (max-width: 1024px){
|
||
.page-shell{
|
||
min-height: 100dvh;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ==========================
|
||
Glossaire
|
||
========================== */
|
||
|
||
.glossary-intro{
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.glossary-section{
|
||
margin: 24px 0;
|
||
}
|
||
|
||
.glossary-section-nav{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
margin: 18px 0 12px;
|
||
}
|
||
|
||
.glossary-section-nav a,
|
||
.glossary-alpha-nav a{
|
||
border: 1px solid rgba(127,127,127,0.35);
|
||
border-radius: 999px;
|
||
padding: 4px 10px;
|
||
transition: background 120ms ease, transform 120ms ease;
|
||
}
|
||
|
||
.glossary-section-nav a:hover,
|
||
.glossary-alpha-nav a:hover{
|
||
background: rgba(127,127,127,0.10);
|
||
transform: translateY(-1px);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.glossary-grid{
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
gap: 14px;
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.glossary-card{
|
||
border: 1px solid rgba(127,127,127,0.22);
|
||
border-radius: 16px;
|
||
padding: 14px;
|
||
background: rgba(127,127,127,0.05);
|
||
}
|
||
|
||
.glossary-card h3{
|
||
margin-top: 0;
|
||
margin-bottom: 8px;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.glossary-card__def{
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.glossary-meta{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
opacity: .85;
|
||
}
|
||
|
||
.glossary-meta span{
|
||
border: 1px solid rgba(127,127,127,0.28);
|
||
border-radius: 999px;
|
||
padding: 2px 8px;
|
||
}
|
||
|
||
.glossary-alpha-nav{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin: 12px 0 18px;
|
||
}
|
||
|
||
.glossary-alpha-group{
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.glossary-alpha-group h3{
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* ==========================
|
||
Landing pages
|
||
========================== */
|
||
|
||
.reading:has(> .landing){
|
||
max-width: min(1180px, calc(100vw - 32px));
|
||
padding: 0;
|
||
}
|
||
|
||
.landing{
|
||
--landing-accent: #00cfea;
|
||
--landing-accent-strong: #00d9ff;
|
||
--landing-panel-border: rgba(127,127,127,0.19);
|
||
--landing-panel-bg: rgba(127,127,127,0.038);
|
||
--landing-panel-glow: rgba(0,217,255,0.075);
|
||
--landing-card-bg: rgba(127,127,127,0.036);
|
||
--landing-card-hover-bg: rgba(127,127,127,0.064);
|
||
--landing-card-hover-border: rgba(0,217,255,0.18);
|
||
|
||
display: grid;
|
||
gap: clamp(18px, 2.6vw, 28px);
|
||
width: 100%;
|
||
padding: 12px 0 10px;
|
||
}
|
||
|
||
.landing-hero,
|
||
.landing-section,
|
||
.edition-note{
|
||
position: relative;
|
||
z-index: 0;
|
||
overflow: hidden;
|
||
border: 1px solid var(--landing-panel-border);
|
||
border-radius: 22px;
|
||
background:
|
||
radial-gradient(circle at 12% 0%, var(--landing-panel-glow), transparent 38%),
|
||
var(--landing-panel-bg);
|
||
}
|
||
|
||
.landing-hero{
|
||
padding: clamp(22px, 3.6vw, 42px);
|
||
}
|
||
|
||
.landing-kicker{
|
||
margin: 0 0 8px;
|
||
color: var(--landing-accent);
|
||
font-size: .76rem;
|
||
line-height: 1.2;
|
||
font-weight: 850;
|
||
letter-spacing: .075em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.landing-hero h1{
|
||
margin: 0;
|
||
font-size: clamp(2.35rem, 6.2vw, 4.85rem);
|
||
line-height: .98;
|
||
letter-spacing: -.048em;
|
||
text-shadow: 0 0 28px rgba(0,217,255,.075);
|
||
}
|
||
|
||
.landing-lead{
|
||
max-width: 66ch;
|
||
margin: 18px 0 0;
|
||
font-size: clamp(1.02rem, 2vw, 1.28rem);
|
||
line-height: 1.55;
|
||
opacity: .94;
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
.landing-actions{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.landing-btn{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 38px;
|
||
padding: 7px 14px;
|
||
border: 1px solid rgba(127,127,127,0.34);
|
||
border-radius: 999px;
|
||
background: rgba(127,127,127,0.052);
|
||
font-weight: 850;
|
||
text-decoration: none;
|
||
transition:
|
||
transform 120ms var(--ease-out),
|
||
background 120ms var(--ease-out),
|
||
border-color 120ms var(--ease-out);
|
||
}
|
||
|
||
.landing-btn:hover{
|
||
transform: translateY(-1px);
|
||
background: rgba(127,127,127,0.11);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.landing-btn--primary{
|
||
border-color: rgba(0,217,255,0.34);
|
||
background: rgba(0,217,255,0.075);
|
||
color: var(--landing-accent-strong);
|
||
}
|
||
|
||
.landing-section,
|
||
.edition-note{
|
||
padding: clamp(18px, 2.7vw, 26px);
|
||
}
|
||
|
||
.landing-section__head,
|
||
.edition-note .landing-kicker{
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.landing-section h2,
|
||
.edition-note h2{
|
||
margin: 0;
|
||
font-size: clamp(1.45rem, 3vw, 2.25rem);
|
||
line-height: 1.05;
|
||
letter-spacing: -.035em;
|
||
}
|
||
|
||
.edition-note p:not(.landing-kicker){
|
||
max-width: 78ch;
|
||
margin: 14px 0 0;
|
||
line-height: 1.62;
|
||
opacity: .93;
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
.landing-grid{
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.landing-card{
|
||
display: grid;
|
||
gap: 8px;
|
||
min-width: 0;
|
||
padding: 15px 16px;
|
||
border: 1px solid var(--landing-panel-border);
|
||
border-radius: 17px;
|
||
background: var(--landing-card-bg);
|
||
text-decoration: none;
|
||
transition:
|
||
transform 120ms var(--ease-out),
|
||
background 120ms var(--ease-out),
|
||
border-color 120ms var(--ease-out);
|
||
}
|
||
|
||
.landing-card:hover{
|
||
transform: translateY(-1px);
|
||
background: var(--landing-card-hover-bg);
|
||
border-color: var(--landing-card-hover-border);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.landing-card strong{
|
||
color: var(--landing-accent);
|
||
font-size: 1.02rem;
|
||
line-height: 1.22;
|
||
}
|
||
|
||
.landing-card span{
|
||
color: inherit;
|
||
line-height: 1.5;
|
||
opacity: .92;
|
||
}
|
||
|
||
.landing-card small{
|
||
color: var(--landing-accent);
|
||
font-weight: 800;
|
||
opacity: .86;
|
||
}
|
||
|
||
.presentation-next{
|
||
margin-top: 42px;
|
||
padding-top: 24px;
|
||
border-top: 1px solid rgba(127,127,127,0.25);
|
||
}
|
||
|
||
@media (max-width: 760px){
|
||
.reading:has(> .landing){
|
||
max-width: none;
|
||
width: auto;
|
||
margin: 0;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.landing{
|
||
gap: 18px;
|
||
padding-top: 8px;
|
||
}
|
||
|
||
.landing-hero,
|
||
.landing-section,
|
||
.edition-note{
|
||
border-radius: 18px;
|
||
}
|
||
|
||
.landing-hero,
|
||
.landing-section,
|
||
.edition-note{
|
||
padding: 18px 16px;
|
||
}
|
||
|
||
.landing-hero h1{
|
||
font-size: clamp(2.15rem, 13vw, 3.25rem);
|
||
}
|
||
|
||
.landing-lead{
|
||
font-size: .98rem;
|
||
line-height: 1.42;
|
||
}
|
||
|
||
.landing-grid{
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.landing-card{
|
||
padding: 14px;
|
||
border-radius: 15px;
|
||
}
|
||
|
||
.edition-note p:not(.landing-kicker){
|
||
line-height: 1.52;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 460px){
|
||
.landing-actions{
|
||
display: grid;
|
||
}
|
||
|
||
.landing-btn{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||
.reading:has(> .landing){
|
||
max-width: none;
|
||
width: auto;
|
||
margin: 0;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.landing{
|
||
gap: 14px;
|
||
padding-top: 6px;
|
||
}
|
||
|
||
.landing-hero,
|
||
.landing-section,
|
||
.edition-note{
|
||
padding: 14px 16px;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.landing-hero h1{
|
||
font-size: clamp(2.2rem, 6vw, 4.6rem);
|
||
}
|
||
|
||
.landing-lead{
|
||
margin-top: 12px;
|
||
font-size: .94rem;
|
||
line-height: 1.38;
|
||
}
|
||
|
||
.landing-actions{
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.edition-note p:not(.landing-kicker){
|
||
margin-top: 10px;
|
||
line-height: 1.45;
|
||
}
|
||
}
|
||
|
||
.search-hero h1{
|
||
font-size: clamp(1.9rem, 4.5vw, 2.8rem);
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.reading h1{
|
||
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
|
||
line-height: 1.15;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
@media (max-width: 760px){
|
||
.landing-hero h1{
|
||
font-size: clamp(2rem, 10vw, 3.2rem);
|
||
}
|
||
|
||
.search-hero h1{
|
||
font-size: clamp(1.7rem, 7vw, 2.3rem);
|
||
}
|
||
}
|
||
/* =========================================================
|
||
MANIFESTE — page éditoriale intégrale
|
||
Alignée sur les landing pages du corpus.
|
||
========================================================= */
|
||
|
||
.manifeste-page{
|
||
scroll-margin-top: 96px;
|
||
}
|
||
|
||
.manifeste-hero h1{
|
||
max-width: 18ch;
|
||
}
|
||
|
||
.manifeste-note p:not(.landing-kicker){
|
||
max-width: 78ch;
|
||
}
|
||
|
||
/* ==========================
|
||
Manifeste — texte intégral premium
|
||
========================== */
|
||
|
||
.manifeste-article{
|
||
padding-bottom: clamp(30px, 4vw, 52px);
|
||
}
|
||
|
||
.manifeste-article .landing-kicker{
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.manifeste-article .manifest-body{
|
||
width: min(100%, 92ch);
|
||
max-width: 92ch;
|
||
margin-top: 28px;
|
||
}
|
||
|
||
.manifeste-article .manifest-body p{
|
||
width: 100%;
|
||
max-width: none;
|
||
margin: 0 0 20px;
|
||
font-size: 1.035rem;
|
||
line-height: 1.74;
|
||
opacity: .91;
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
.manifeste-article .manifest-body p:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.manifeste-article .manifest-section-title{
|
||
max-width: 34ch;
|
||
margin: clamp(42px, 4.5vw, 62px) 0 18px;
|
||
padding-top: 26px;
|
||
border-top: 1px solid rgba(0,217,255,0.22);
|
||
color: #f5f7fb;
|
||
font-size: clamp(1.55rem, 2.45vw, 2.1rem);
|
||
line-height: 1.08;
|
||
font-weight: 850;
|
||
letter-spacing: -0.04em;
|
||
}
|
||
|
||
.manifeste-article .manifest-section-title:first-child{
|
||
margin-top: 0;
|
||
padding-top: 0;
|
||
border-top: 0;
|
||
}
|
||
|
||
.manifeste-article .manifest-subsection-title{
|
||
max-width: 38ch;
|
||
margin: 32px 0 13px;
|
||
color: #00d9ff;
|
||
font-size: clamp(1.12rem, 1.55vw, 1.34rem);
|
||
line-height: 1.16;
|
||
font-weight: 850;
|
||
letter-spacing: -0.025em;
|
||
}
|
||
|
||
.manifeste-page .landing-section{
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* =========================================================
|
||
EDITORIAL REVEAL — seuil de lecture définitif
|
||
Manifeste + Commencer
|
||
========================================================= */
|
||
|
||
/*
|
||
Point critique :
|
||
le paragraphe placé juste avant le reveal ne doit PAS ajouter
|
||
sa marge basse habituelle. Sinon l’ouverture crée un trou.
|
||
*/
|
||
|
||
.manifeste-article .manifest-body > p:has(+ .editorial-reveal),
|
||
.commencer-genese > p:has(+ .editorial-reveal){
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Reveal fermé : respiration courte avant le bouton */
|
||
|
||
.editorial-reveal{
|
||
max-width: min(100%, 82ch);
|
||
margin-top: clamp(6px, .75vw, 10px);
|
||
}
|
||
|
||
/* Reveal ouvert : le composant devient transparent dans le flux */
|
||
|
||
.editorial-reveal.is-open{
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* Bouton fermé */
|
||
|
||
.editorial-reveal__button{
|
||
display: inline-flex;
|
||
width: auto;
|
||
max-width: 100%;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 10px;
|
||
min-height: 42px;
|
||
margin: 0;
|
||
padding: 9px 17px;
|
||
border: 1px solid rgba(0,217,255,0.36);
|
||
border-radius: 999px;
|
||
background: rgba(0,217,255,0.035);
|
||
color: #00d9ff;
|
||
font: inherit;
|
||
font-weight: 850;
|
||
line-height: 1.2;
|
||
letter-spacing: -0.012em;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
transition:
|
||
opacity 260ms var(--ease-out),
|
||
transform 260ms var(--ease-out),
|
||
max-height 420ms var(--ease-out),
|
||
min-height 420ms var(--ease-out),
|
||
padding 420ms var(--ease-out),
|
||
margin 420ms var(--ease-out),
|
||
border-width 420ms var(--ease-out),
|
||
border-color 160ms var(--ease-out),
|
||
background 160ms var(--ease-out);
|
||
}
|
||
|
||
.editorial-reveal__button::before{
|
||
content: "+";
|
||
display: inline-block;
|
||
color: #00d9ff;
|
||
font-weight: 950;
|
||
line-height: 1;
|
||
}
|
||
|
||
.editorial-reveal__button:hover{
|
||
background: rgba(0,217,255,0.06);
|
||
border-color: rgba(0,217,255,0.58);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.editorial-reveal__label{
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Bouton effacé à l’ouverture */
|
||
|
||
.editorial-reveal.is-open > .editorial-reveal__button{
|
||
max-height: 0;
|
||
min-height: 0;
|
||
margin: 0;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
border-width: 0;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
/* Corps révélé : aucune boîte visuelle, aucune marge autonome */
|
||
|
||
.editorial-reveal__body{
|
||
height: 0;
|
||
overflow: hidden;
|
||
opacity: 0;
|
||
transform: translateY(8px);
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
transition:
|
||
height 820ms cubic-bezier(.22, 1, .36, 1),
|
||
opacity 460ms var(--ease-out),
|
||
transform 460ms var(--ease-out);
|
||
}
|
||
|
||
.editorial-reveal.is-open > .editorial-reveal__body{
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
}
|
||
|
||
/* =========================================================
|
||
Seuil révélé — Manifeste
|
||
La suite commence par un h2 : respiration de section,
|
||
mais sans trou typographique.
|
||
========================================================= */
|
||
|
||
.manifeste-article .editorial-reveal__body > .manifest-section-title:first-child{
|
||
margin-top: clamp(6px, 1vw, 12px) !important;
|
||
padding-top: 0 !important;
|
||
border-top: 0 !important;
|
||
}
|
||
|
||
/* Les grands titres suivants du manifeste gardent leur hiérarchie normale */
|
||
|
||
.manifeste-article .editorial-reveal__body > .manifest-section-title:not(:first-child){
|
||
margin-top: clamp(42px, 4.5vw, 62px);
|
||
}
|
||
|
||
/* =========================================================
|
||
Seuil révélé — Commencer
|
||
La suite commence par un paragraphe : continuité directe.
|
||
========================================================= */
|
||
|
||
/*
|
||
Important :
|
||
Les règles spécifiques à .commencer-genese sont centralisées plus bas
|
||
dans le bloc "COMMENCER — stabilisation définitive".
|
||
On ne met ici aucune marge négative, pour éviter les contradictions
|
||
de cascade entre état fermé, état ouvert, mobile et desktop.
|
||
*/
|
||
|
||
/* Titres internes de la genèse */
|
||
.commencer-reveal-heading{
|
||
max-width: 42ch;
|
||
margin: 34px 0 14px;
|
||
padding-top: 24px;
|
||
border-top: 1px solid rgba(0,217,255,0.13);
|
||
color: rgba(255,255,255,0.96);
|
||
font-size: clamp(1.12rem, 1.45vw, 1.28rem);
|
||
line-height: 1.14;
|
||
font-weight: 850;
|
||
letter-spacing: -0.024em;
|
||
}
|
||
|
||
.commencer-reveal-heading:first-of-type{
|
||
margin-top: clamp(28px, 3vw, 38px);
|
||
}
|
||
|
||
/* =========================================================
|
||
Mobile — Manifeste + reveal générique
|
||
========================================================= */
|
||
|
||
@media (max-width: 760px){
|
||
.manifeste-article .manifest-body{
|
||
width: 100%;
|
||
max-width: none;
|
||
margin-top: 22px;
|
||
}
|
||
|
||
.manifeste-article .manifest-body p{
|
||
font-size: 1rem;
|
||
line-height: 1.62;
|
||
}
|
||
|
||
.manifeste-article .manifest-section-title{
|
||
max-width: none;
|
||
margin-top: 36px;
|
||
padding-top: 22px;
|
||
}
|
||
|
||
.manifeste-article .manifest-subsection-title{
|
||
max-width: none;
|
||
margin-top: 26px;
|
||
}
|
||
|
||
.editorial-reveal{
|
||
max-width: 100%;
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.editorial-reveal.is-open{
|
||
margin-top: 0;
|
||
}
|
||
|
||
.editorial-reveal__button{
|
||
max-width: 100%;
|
||
padding: 10px 15px;
|
||
border-radius: 16px;
|
||
white-space: normal;
|
||
}
|
||
|
||
.manifeste-article .editorial-reveal__body > .manifest-section-title:first-child{
|
||
margin-top: 10px !important;
|
||
}
|
||
|
||
.commencer-reveal-heading{
|
||
max-width: none;
|
||
margin-top: 28px;
|
||
}
|
||
}
|
||
|
||
/* =========================================================
|
||
Landing pages — retrait éditorial interne
|
||
Pages d’accueil, essai-thèse, cas pratique, manifeste, commencer
|
||
========================================================= */
|
||
|
||
.landing-home{
|
||
--landing-inner-inset: clamp(14px, 2vw, 28px);
|
||
}
|
||
|
||
/* Notes au lecteur : on conserve le kicker comme repère,
|
||
mais on décale légèrement le titre et le texte. */
|
||
.landing-home .edition-note > h2,
|
||
.landing-home .edition-note > p:not(.landing-kicker){
|
||
margin-left: var(--landing-inner-inset);
|
||
}
|
||
|
||
/* On évite que le retrait ne pousse les lignes trop loin à droite. */
|
||
.landing-home .edition-note > p:not(.landing-kicker){
|
||
max-width: min(78ch, calc(100% - var(--landing-inner-inset)));
|
||
}
|
||
|
||
/* Sections d’index : même axe éditorial que les notes. */
|
||
.landing-home .landing-section__head{
|
||
margin-left: var(--landing-inner-inset);
|
||
}
|
||
|
||
/* La grille suit le même retrait pour que le titre et les cartes respirent ensemble. */
|
||
.landing-home .landing-grid{
|
||
margin-left: var(--landing-inner-inset);
|
||
width: calc(100% - var(--landing-inner-inset));
|
||
}
|
||
|
||
/* Mobile : on supprime le retrait pour préserver la largeur utile. */
|
||
@media (max-width: 760px){
|
||
.landing-home{
|
||
--landing-inner-inset: 0px;
|
||
}
|
||
|
||
.landing-home .edition-note > h2,
|
||
.landing-home .edition-note > p:not(.landing-kicker),
|
||
.landing-home .landing-section__head,
|
||
.landing-home .landing-grid{
|
||
margin-left: 0;
|
||
}
|
||
|
||
.landing-home .landing-grid{
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* =========================================================
|
||
COMMENCER — stabilisation définitive de la colonne révélée
|
||
========================================================= */
|
||
|
||
/*
|
||
Objectif :
|
||
- même colonne optique avant et après ouverture ;
|
||
- aucun saut horizontal ;
|
||
- aucun correctif par marge négative ;
|
||
- une seule source de vérité pour .commencer-genese.
|
||
*/
|
||
|
||
.commencer-genese{
|
||
--commencer-content-inset: clamp(18px, 2.2vw, 28px);
|
||
--commencer-text-measure: 78ch;
|
||
}
|
||
|
||
/* Colonne interne stable de la carte "Genèse conceptuelle". */
|
||
.commencer-genese > .landing-kicker,
|
||
.commencer-genese > h2,
|
||
.commencer-genese > p,
|
||
.commencer-genese > .editorial-reveal{
|
||
margin-left: var(--commencer-content-inset);
|
||
margin-right: var(--commencer-content-inset);
|
||
}
|
||
|
||
/* Paragraphes visibles avant ouverture. */
|
||
.commencer-genese > p{
|
||
max-width: var(--commencer-text-measure);
|
||
}
|
||
|
||
/* Le reveal hérite de la même colonne, sans créer une colonne autonome. */
|
||
.commencer-genese > .editorial-reveal{
|
||
max-width: var(--commencer-text-measure);
|
||
}
|
||
|
||
/* Bouton fermé : aucune marge interne parasite. */
|
||
.commencer-genese .editorial-reveal__button{
|
||
margin-left: 0;
|
||
}
|
||
|
||
/* Corps ouvert : même colonne, même largeur, aucune marge autonome. */
|
||
.commencer-genese .editorial-reveal__body{
|
||
max-width: var(--commencer-text-measure);
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
}
|
||
|
||
/* Paragraphes révélés : rythme identique, sans saut à l’ouverture. */
|
||
.commencer-genese .editorial-reveal__body > p{
|
||
max-width: var(--commencer-text-measure);
|
||
margin: 0 0 20px;
|
||
line-height: 1.62;
|
||
opacity: .93;
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
/* Premier paragraphe révélé : continuité immédiate après disparition du bouton. */
|
||
.commencer-genese .editorial-reveal.is-open > .editorial-reveal__body > p:first-child{
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
/* Dernier paragraphe révélé : pas de marge basse fantôme. */
|
||
.commencer-genese .editorial-reveal__body > p:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Titres internes révélés : même colonne, hiérarchie préservée. */
|
||
.commencer-genese .commencer-reveal-heading{
|
||
max-width: min(42ch, var(--commencer-text-measure));
|
||
}
|
||
|
||
/* Mobile : pas de retrait, largeur utile maximale. */
|
||
@media (max-width: 760px){
|
||
.commencer-genese{
|
||
--commencer-content-inset: 0px;
|
||
--commencer-text-measure: 100%;
|
||
}
|
||
|
||
.commencer-genese > .landing-kicker,
|
||
.commencer-genese > h2,
|
||
.commencer-genese > p,
|
||
.commencer-genese > .editorial-reveal{
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
}
|
||
|
||
.commencer-genese .editorial-reveal__body > p{
|
||
margin-bottom: 18px;
|
||
line-height: 1.52;
|
||
}
|
||
|
||
.commencer-genese .editorial-reveal.is-open > .editorial-reveal__body > p:first-child{
|
||
margin-top: 0 !important;
|
||
}
|
||
} |