/* ============================================================ SOCLE — jetons et base Fages Élagage · direction artistique figée dans 4 - Atelier/DA.md RÈGLE : aucune couleur, aucune taille et aucun espacement écrits en dur ailleurs que dans ce fichier. Une valeur en dur dans composants.css ou site.css est un bug de design system. ============================================================ */ /* ---------- 1. Jetons non chromatiques ---------- */ :root{ /* Familles */ --serif:'Newsreader', Georgia, 'Times New Roman', serif; --sans:'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --mono:'Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Échelle typographique */ --t-geant:clamp(2.75rem, 7vw, 5.25rem); --t-titre:clamp(2rem, 4.6vw, 3.4rem); --t-sous-titre:clamp(1.5rem, 2.8vw, 2.1rem); --t-h4:1.25rem; --t-chapeau:clamp(1.125rem, 1.7vw, 1.375rem); --t-corps:1.125rem; --t-petit:0.9375rem; --t-etiquette:0.75rem; /* Échelle d'espacement — la seule autorisée */ --e1:4px; --e2:8px; --e3:16px; --e4:24px; --e5:40px; --e6:64px; --e7:96px; --e8:128px; /* Grille */ --contenu:1180px; --gouttiere:24px; --mesure:68ch; /* Contexte « sur photographie ». Ces valeurs ne basculent pas avec le thème, et c'est voulu : le voile posé sur une photographie est sombre en clair comme en sombre. Elles vivent ici quand même, pour que socle.css reste le seul fichier où une couleur est écrite. */ --photo-fond:#0B160F; --photo-titre:#FFFDF9; --photo-accent:#E6D3A6; --photo-etiquette:#E9DCC0; --photo-filet:#C69A52; /* Rayons — trois, pas plus */ --r1:2px; --r2:4px; --r3:999px; /* Durées de mouvement */ --d-court:.2s; --d-moyen:.45s; --d-reveal:.7s; --courbe:cubic-bezier(.2,.7,.2,1); } /* ---------- 2. Jetons chromatiques — thème clair ---------- */ :root{ --fond:#F6F2E9; --fond-2:#EDE7DA; --fond-carte:#FFFCF6; --texte:#161B16; --texte-doux:#4C554A; --texte-faible:#5F675C; --accent:#1B4430; --accent-fort:#123021; --sur-accent:#F6F2E9; --signal:#3D6B2B; --reglementaire:#9C4A22; /* L'or, repris de la version du 24 juillet. Deux valeurs, et ce n'est pas un caprice : le doré chaud (#B3873C) ne fait que 2,9:1 sur le crème, donc il est réservé aux filets, aux étoiles et aux fonds de bouton. Dès qu'il porte du texte lu, c'est --accent-chaud-texte qui prend le relais (5,5:1 sur le crème). */ --accent-chaud:#B3873C; --accent-chaud-texte:#7E5C1E; --accent-chaud-vif:#C69A52; --sur-accent-chaud:#161B16; --etoile:var(--accent-chaud-texte); --ligne:#DDD6C6; --ligne-douce:#E9E3D5; /* Ombres — teintées à la couleur sombre de la palette, jamais noires */ --ombre-1:0 1px 2px rgba(21,41,28,.05), 0 8px 24px rgba(21,41,28,.07); --ombre-2:0 4px 12px rgba(21,41,28,.08), 0 24px 56px rgba(21,41,28,.12); --ombre-3:0 30px 80px rgba(21,41,28,.26); /* Voile posé sur les photographies de premier écran. Volontairement léger à la verticale : c'est le voile latéral qui protège la lisibilité du texte, à gauche. La photographie doit rester visible à droite, sinon autant mettre un aplat. */ --voile:linear-gradient(180deg, rgba(9,17,11,.34) 0%, rgba(9,17,11,.14) 38%, rgba(9,17,11,.28) 72%, rgba(9,17,11,.68) 100%); --voile-lateral:linear-gradient(90deg, rgba(9,17,11,.68) 0%, rgba(9,17,11,.42) 34%, rgba(9,17,11,.12) 62%, rgba(9,17,11,0) 80%); color-scheme:light only; } /* ---------- 3. (supprimé le 30 juillet 2026) ---------- Le thème sombre automatique et sa bascule ont été retirés à la demande de Tom. Le site a désormais UNE tenue : des bandes claires et des bandes sombres qui alternent, choisies à la construction. Ce que ça change concrètement, et c'est mieux : - plus de script dans le , donc plus de hash dans la CSP ; - plus rien écrit dans le navigateur du visiteur (le choix de thème était le seul stockage local du site) ; - une seule tenue à vérifier au lieu de deux. Les jetons sombres n'ont pas disparu pour autant : ils vivent dans `.inverse` ci-dessous, qui est exactement le mécanisme voulu ici. */ /* ---------- 4. Bande inversée ---------- Une bande sombre ne repeint pas ses enfants : elle bascule les jetons eux-mêmes. Tous les composants qu'elle contient suivent sans une seule règle de rattrapage. C'est ce qui rend les erreurs de contraste impossibles plutôt que corrigées. */ .inverse{ --fond:#15291C; --fond-2:#1B3323; --fond-carte:#1B3323; --texte:#EDE9DE; --texte-doux:#B9C3B4; --texte-faible:#96A292; --accent:#C6E39C; --accent-fort:#DCEFBF; --sur-accent:#15291C; --signal:#C6E39C; --reglementaire:#E4A277; --accent-chaud:#D8B26A; --accent-chaud-texte:#D8B26A; --accent-chaud-vif:#E8CE9A; --sur-accent-chaud:#15291C; --etoile:var(--accent-chaud-texte); --ligne:#2F4736; --ligne-douce:#263B2C; --ombre-1:0 0 0 1px var(--ligne-douce); --ombre-2:0 0 0 1px var(--ligne); background:var(--fond); color:var(--texte); } /* ---------- 5. Réinitialisation ---------- */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{ margin:0; background:var(--fond); color:var(--texte); font-family:var(--sans); font-size:var(--t-corps); font-weight:400; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background var(--d-court) linear, color var(--d-court) linear; } img,svg,video{display:block;max-width:100%;} img{height:auto;} button,input,select,textarea{font:inherit;color:inherit;} h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance;} p{margin:0 0 var(--e3);} /* Les listes portent la sémantique, jamais la puce. Toute liste de mise en page est dépuçotée par défaut : les seules listes à puces du site sont dans le texte courant, s'il y en a. */ ul,ol{margin:0;padding:0;list-style:none;} .contenu-redige ul{list-style:disc;padding-left:var(--e4);} .contenu-redige ol{list-style:decimal;padding-left:var(--e4);} a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px;} a:hover{color:var(--accent-fort);} hr{border:0;border-top:1px solid var(--ligne);margin:var(--e5) 0;} /* ---------- 6. Typographie ---------- */ .geant{font-family:var(--serif);font-size:var(--t-geant);line-height:1.02;letter-spacing:-.02em;max-width:16ch;} .titre{font-family:var(--serif);font-size:var(--t-titre);line-height:1.08;letter-spacing:-.015em;max-width:22ch;} .sous-titre{font-family:var(--serif);font-size:var(--t-sous-titre);line-height:1.18;letter-spacing:-.01em;} .h4{font-family:var(--sans);font-size:var(--t-h4);font-weight:700;line-height:1.3;letter-spacing:-.005em;} .chapeau{font-size:var(--t-chapeau);color:var(--texte-doux);max-width:var(--mesure);line-height:1.6;} .petit{font-size:var(--t-petit);color:var(--texte-faible);} .italique{font-style:italic;color:var(--signal);} /* Le traitement qui sépare ce site de ses concurrents : tout fait mesurable est en machine à écrire, jamais en texte courant. */ .fait{font-family:var(--mono);font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.02em;} /* ---------- 7. Grille ---------- */ .contenu{width:100%;max-width:var(--contenu);margin-inline:auto;padding-inline:var(--gouttiere);} .bande{padding-block:var(--e7);} .bande.serree{padding-block:var(--e6);} .bande.calme{background:var(--fond-2);} .mesure{max-width:var(--mesure);} /* ---------- 7 bis. Utilitaires d'espacement ---------- Ils remplacent les attributs `style=` inline, que la Content-Security-Policy (`style-src 'self'`) bloquerait en production. Un site dont la mise en page dépend d'un `style=` inline ne peut pas avoir de CSP stricte : il faut choisir. */ .h-2{margin-top:var(--e2);} .h-3{margin-top:var(--e3);} .h-4{margin-top:var(--e4);} .h-5{margin-top:var(--e5);} .h-6{margin-top:var(--e6);} .sans-marge-bas{margin-bottom:0;} .marge-bas-5{margin-bottom:var(--e5);} .bande-404{padding-block:calc(var(--e8) + var(--e4)) var(--e7);} .aligne-haut{align-items:start;} .en-ligne{display:flex;} /* ---------- 8. Accessibilité ---------- */ :focus-visible{outline:2.5px solid var(--signal);outline-offset:3px;border-radius:var(--r1);} .evitement{ position:absolute;left:var(--e3);top:calc(-1 * var(--e8));z-index:400; background:var(--accent);color:var(--sur-accent); padding:var(--e2) var(--e3);border-radius:var(--r1); font-weight:700;text-decoration:none; transition:top var(--d-court); } .evitement:focus{top:var(--e3);color:var(--sur-accent);} .lecteur-seul{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ---------- 9. Mouvement ---------- On ne doit pas voir bouger, on doit sentir que la page est vivante. */ .reveal{ opacity:0;transform:translateY(26px); transition:opacity var(--d-reveal) var(--courbe), transform var(--d-reveal) var(--courbe); } .reveal.vu{opacity:1;transform:none;} .reveal.r0{transition-delay:0s} .reveal.r1{transition-delay:.08s} .reveal.r2{transition-delay:.16s} .reveal.r3{transition-delay:.24s} .reveal.r4{transition-delay:.32s} .reveal.r5{transition-delay:.4s} @keyframes derive{ from{transform:scale(1) translate3d(0,0,0);} to{transform:scale(1.07) translate3d(-1%,-1%,0);} } @keyframes flottement{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} } @keyframes pulsation{ 0%,100%{opacity:1;} 50%{opacity:.35;} } @keyframes ruban{ from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);} } /* Aucune animation décorative, et surtout aucun contenu perdu. */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .reveal{opacity:1 !important;transform:none !important;} } /* ---------- 10. Repli sans JavaScript ---------- */ .sans-js .reveal{opacity:1;transform:none;}