/* =====================================================================
TelesCoop, base commune de design
Version 3
Un seul fichier CSS, un fichier JS optionnel, aucune dépendance.
clair, sombre, ou rien
...
Le JS n’ajoute que trois choses : la carte 3D qui suit la souris,
l’apparition des blocs au défilement, et le retour en haut de page.
Sans lui, tout reste lisible et utilisable.
===================================================================== */
/* ---------------------------------------------------------------------
1. POLICES
Les .woff2 sont dans fonts/, à côté de ce fichier.
Aucun appel à un service tiers.
--------------------------------------------------------------------- */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
src:url("fonts/anton-400.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:300;font-display:swap;
src:url("fonts/barlow-condensed-300.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:400;font-display:swap;
src:url("fonts/barlow-condensed-400.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;
src:url("fonts/barlow-condensed-500.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
src:url("fonts/barlow-condensed-600.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;
src:url("fonts/barlow-condensed-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;
src:url("fonts/ibm-plex-sans.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
src:url("fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
src:url("fonts/ibm-plex-mono-500.woff2") format("woff2")}
/* ---------------------------------------------------------------------
2. JETONS
--------------------------------------------------------------------- */
:root{
--font-titre:"Anton",Impact,sans-serif;
--font-texte:"Barlow Condensed",system-ui,-apple-system,sans-serif;
--font-technique:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
/* Cinq tailles, pas une de plus */
--t-geant:clamp(2.75rem,7vw,5.5rem); --lh-geant:1.02;
--t-titre:clamp(1.75rem,3.4vw,2.75rem); --lh-titre:1.04;
--t-petit-titre:1.5rem; --lh-petit-titre:1.2;
--t-texte:1.125rem; --lh-texte:1.6;
--t-sous-titre:1rem; --lh-sous-titre:1.5;
/* Formes */
--radius:4px;
--radius-sm:2px;
--radius-full:9999px;
--trait:2px;
--filet:1px;
/* Rythme, largement aéré */
--gap:2rem;
--section-y:clamp(4.5rem,10vw,9rem);
--bloc-y:clamp(2.5rem,5vw,4.5rem);
--container:74rem;
--mesure:66ch;
/* Mouvement */
--ease:cubic-bezier(.2,.7,.25,1);
--ease-doux:cubic-bezier(.33,1,.68,1);
--speed:260ms;
--speed-lent:700ms;
--grain:url("grain.webp");
}
/* -- Thème clair ----------------------------------------------------- */
:root,
:root[data-theme="clair"]{
--fond:#FFF9F0;
--surface:#FFF9F0;
--surface-2:#F3ECE0;
--encre:#000000;
--encre-douce:#5A534C;
--contre-encre:#FFF9F0;
--jaune:#FBD26B; --jaune-sombre:#4A3200;
--vert:#82E1A0; --vert-sombre:#0E4A26;
--beige-fonce:#C4B89E;
--filet-couleur:rgba(0,0,0,.18);
--filet-fort:rgba(0,0,0,.85);
--grain-opacity:.30;
--halo-1:rgba(52,38,18,.22);
--halo-2:rgba(52,38,18,.26);
--brillance:rgba(255,255,255,.9);
}
/* -- Thème sombre ---------------------------------------------------- */
:root[data-theme="sombre"]{
--fond:#141210;
--surface:#1C1917;
--surface-2:#242019;
--encre:#F5EFE6;
--encre-douce:#A9A099;
--contre-encre:#141210;
--jaune:#FBD26B; --jaune-sombre:#4A3200;
--vert:#82E1A0; --vert-sombre:#0E4A26;
--beige-fonce:#6B6157;
--filet-couleur:rgba(245,239,230,.22);
--filet-fort:rgba(245,239,230,.85);
--grain-opacity:.14;
--halo-1:rgba(0,0,0,.7);
--halo-2:rgba(0,0,0,.62);
--brillance:rgba(255,249,240,.11);
}
/* Le thème clair est le défaut. Pour suivre le réglage du système,
il faut le demander explicitement avec data-theme="auto". */
@media (prefers-color-scheme:dark){
:root[data-theme="auto"]{
--fond:#141210;
--surface:#1C1917;
--surface-2:#242019;
--encre:#F5EFE6;
--encre-douce:#A9A099;
--contre-encre:#141210;
--beige-fonce:#6B6157;
--filet-couleur:rgba(245,239,230,.22);
--filet-fort:rgba(245,239,230,.85);
--grain-opacity:.14;
--halo-1:rgba(0,0,0,.7);
--halo-2:rgba(0,0,0,.62);
--brillance:rgba(255,249,240,.11);
}
}
/* Labeur en IBM Plex */
:root[data-texte="plex"]{ --font-texte:var(--font-technique) }
/* ---------------------------------------------------------------------
3. SOCLE
--------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:7rem;scroll-behavior:smooth}
body{
margin:0;
background-color:var(--fond);
color:var(--encre);
font-family:var(--font-texte);
font-size:var(--t-texte);
line-height:var(--lh-texte);
-webkit-font-smoothing:antialiased;
transition:background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.grain-texture{position:relative}
.grain-texture::before{
content:"";position:fixed;inset:0;
background-image:var(--grain);background-repeat:repeat;
opacity:var(--grain-opacity);pointer-events:none;z-index:1;
}
.grain-texture > *{position:relative;z-index:2}
/* Anton : capitales systématiques, interlettrage normal */
h1,h2,h3,h4,h5,h6,
.geant,.titre,.petit-titre{
font-family:var(--font-titre);
font-weight:400;
text-transform:uppercase;
letter-spacing:normal;
margin:0 0 .4em;
text-wrap:balance;
}
h1,.geant {font-size:var(--t-geant); line-height:var(--lh-geant)}
h2,.titre {font-size:var(--t-titre); line-height:var(--lh-titre)}
h3,h4,h5,h6,
.petit-titre {font-size:var(--t-petit-titre);line-height:var(--lh-petit-titre)}
.texte {font-size:var(--t-texte); line-height:var(--lh-texte)}
.sous-titre {font-size:var(--t-sous-titre); line-height:var(--lh-sous-titre); color:var(--encre-douce)}
p{margin:0 0 1.15em;max-width:var(--mesure)}
.mesure{max-width:var(--mesure)}
.large{max-width:none}
code,kbd,samp,pre{font-family:var(--font-mono);font-size:.9em}
/* Lien : filet qui se trace sous le mot */
a{
color:var(--encre);text-decoration:none;
background-image:linear-gradient(currentColor,currentColor);
background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
transition:background-size var(--speed) var(--ease);
padding-bottom:2px;
}
a:hover,a:focus-visible{background-size:100% 1px}
a.lien-permanent{background-size:100% 1px}
a.lien-permanent:hover{background-size:100% 2px}
/* Anton monte à 1,5 em de haut alors que ses capitales n’en font que
0,86. Le surlignage est donc une boîte calée sur la hauteur de
capitale, sinon il déborde sur la ligne du dessus. */
.mark{
display:inline-block;
background:var(--encre);color:var(--contre-encre);
line-height:.86;padding:.1em .14em .08em;
}
/* Lettrine */
.lettrine::first-letter{
font-family:var(--font-titre);
float:left;font-size:3.4em;line-height:.78;
padding:.06em .12em 0 0;
}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px;border-radius:var(--radius-sm)}
/* Sélection de texte dans l’accent, jamais dans le bleu du navigateur */
::selection{background:var(--jaune);color:#000}
::-moz-selection{background:var(--jaune);color:#000}
/* ---------------------------------------------------------------------
4. FILETS TYPOGRAPHIQUES
Le principal outil de séparation du système. Ils remplacent
les contours partout où un contour ne sert à rien.
--------------------------------------------------------------------- */
/* Filet simple, plein largeur */
.filet{border:0;height:var(--filet);background:var(--filet-couleur);margin:0}
.filet-fort{border:0;height:var(--trait);background:var(--filet-fort);margin:0}
.filet-court{border:0;height:var(--trait);width:4rem;background:var(--filet-fort);margin:0}
/* Filet double, à l’ancienne */
.filet-double{
border:0;height:5px;margin:0;background:
linear-gradient(var(--filet-fort),var(--filet-fort)) top/100% 2px no-repeat,
linear-gradient(var(--filet-couleur),var(--filet-couleur)) bottom/100% 1px no-repeat;
}
/* Rubrique : une étiquette, puis un filet qui file jusqu’au bord */
.rubrique{
display:flex;align-items:center;gap:1rem;
margin:0 0 var(--bloc-y);
}
.rubrique > .libelle{
font-family:var(--font-titre);text-transform:uppercase;
font-size:var(--t-petit-titre);line-height:1;white-space:nowrap;
}
.rubrique > .libelle .num{color:var(--encre-douce);margin-right:.6em}
.rubrique::after{content:"";flex:1;height:var(--filet);background:var(--filet-couleur)}
/* Filet placé sous un titre, tracé à l’apparition */
.filet-titre{
border:0;height:var(--trait);background:var(--filet-fort);
margin:.25rem 0 var(--bloc-y);
transform-origin:left center;
}
/* Liste séparée par des filets, sans puces */
.liste-filets{list-style:none;margin:0;padding:0}
.liste-filets > li{
padding:1rem 0;
border-top:var(--filet) solid var(--filet-couleur);
display:flex;gap:1.5rem;align-items:baseline;
}
.liste-filets > li:last-child{border-bottom:var(--filet) solid var(--filet-couleur)}
.liste-filets .cle{
font-family:var(--font-titre);text-transform:uppercase;
font-size:var(--t-sous-titre);min-width:11rem;flex:none;color:var(--encre-douce);
}
/* Exergue, gros texte encadré de deux filets */
.exergue{
border-top:var(--trait) solid var(--filet-fort);
border-bottom:var(--filet) solid var(--filet-couleur);
padding:1.5rem 0;margin:var(--bloc-y) 0;
font-size:1.5rem;line-height:1.35;max-width:48ch;
}
/* ---------------------------------------------------------------------
5. MISE EN PAGE
--------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:1.75rem}
.section{padding-block:var(--section-y)}
.bloc{margin-block:var(--bloc-y)}
/* Bandeau pleine largeur, sans le moindre contour */
.section-jaune{background:var(--jaune);color:#000}
.section-vert {background:var(--vert); color:#000}
.section-encre{background:var(--encre);color:var(--contre-encre)}
.section-creuse{background:var(--surface-2)}
/* Une colonne, la mesure de lecture */
.colonne-1{max-width:var(--mesure)}
/* Deux ou trois colonnes de texte, séparées par un filet */
.colonnes-2,.colonnes-3{
column-gap:3rem;
column-rule:var(--filet) solid var(--filet-couleur);
}
@media (min-width:700px){ .colonnes-2{column-count:2} }
@media (min-width:1000px){ .colonnes-3{column-count:3} }
.colonnes-2 p:first-child,.colonnes-3 p:first-child{margin-top:0}
.colonnes-2 p,.colonnes-3 p{max-width:none}
/* Duo : un titre étroit à gauche, le texte à droite, filet entre les deux */
.duo{display:grid;gap:2rem;margin-top:1.5rem;align-items:start}
.duo > * > :first-child{margin-top:0}
@media (min-width:800px){
.duo{grid-template-columns:16rem 1fr;gap:3rem}
.duo > :last-child{border-left:var(--filet) solid var(--filet-couleur);padding-left:3rem}
.duo-inverse{grid-template-columns:1fr 16rem}
.duo-inverse > :last-child{border-left:0;border-right:0;padding-left:0}
}
/* Grille libre */
.grid{display:grid;gap:var(--gap)}
@media (min-width:640px){ .grid-2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)} }
/* ---------------------------------------------------------------------
6. COMPOSANTS
Les contours sont réservés à ce qui se clique ou se remplit.
--------------------------------------------------------------------- */
/* -- Navigation ----------------------------------------------------- */
.nav{
position:sticky;top:0;z-index:50;
background:color-mix(in srgb,var(--fond) 92%,transparent);
backdrop-filter:blur(8px);
border-bottom:var(--filet) solid var(--filet-couleur);
}
.nav-inner{
display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
max-width:var(--container);margin-inline:auto;padding:.9rem 1.75rem;
}
.nav-links{display:flex;align-items:center;gap:1.75rem;list-style:none;margin:0;padding:0}
.nav-links a{
font-family:var(--font-texte);font-weight:600;text-transform:uppercase;
letter-spacing:.03em;font-size:var(--t-sous-titre);
}
.logo{
font-family:var(--font-texte);font-weight:700;font-size:1.75rem;
line-height:1;color:var(--encre);background-image:none;
}
.logo span{font-weight:400}
/* -- Bouton ---------------------------------------------------------
Au survol, la couleur bascule franchement et le texte passe au blanc
sur les accents. Rien ne se déplace. */
.btn{
display:inline-block;cursor:pointer;
border:var(--trait) solid var(--encre);
border-radius:var(--radius);
background:transparent;
color:var(--encre);
font-family:var(--font-titre);font-weight:400;
font-size:var(--t-texte);line-height:1.4;
text-transform:uppercase;letter-spacing:normal;
background-image:none;
padding:.5rem 1.1rem;
transition:background-color var(--speed) var(--ease),
color var(--speed) var(--ease),
border-color var(--speed) var(--ease);
}
.btn:hover,.btn:focus-visible{background:var(--encre);color:var(--contre-encre)}
.btn:active{transform:none}
.btn-sm{padding:.28rem .7rem;font-size:var(--t-sous-titre)}
.btn-lg{padding:.75rem 1.6rem;font-size:1.35rem}
.btn-jaune{background:var(--jaune);color:#000;border-color:var(--jaune)}
.btn-jaune:hover,.btn-jaune:focus-visible{
background:var(--jaune-sombre);color:#fff;border-color:var(--jaune-sombre);
}
.btn-vert{background:var(--vert);color:#000;border-color:var(--vert)}
.btn-vert:hover,.btn-vert:focus-visible{
background:var(--vert-sombre);color:#fff;border-color:var(--vert-sombre);
}
.btn-encre{background:var(--encre);color:var(--contre-encre)}
.btn-encre:hover,.btn-encre:focus-visible{background:transparent;color:var(--encre)}
.btn-rond{border-radius:var(--radius-full);width:2.9rem;height:2.9rem;padding:0;
display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem}
/* -- Étiquette ------------------------------------------------------ */
.tag{
display:inline-block;
border:var(--filet) solid var(--filet-couleur);
border-radius:var(--radius);
background:transparent;color:var(--encre);
font-family:var(--font-titre);font-weight:400;
font-size:var(--t-sous-titre);line-height:1.5;
text-transform:uppercase;letter-spacing:normal;
padding:.2rem .6rem;
}
.tag-xl{padding:.35rem 1rem;font-size:var(--t-petit-titre)}
.tag-jaune{background:var(--jaune);color:#000;border-color:transparent}
.tag-vert {background:var(--vert); color:#000;border-color:transparent}
.tag-encre{background:var(--encre);color:var(--contre-encre);border-color:transparent}
/* -- Carte, sans contour par défaut --------------------------------- */
.carte{
border-radius:var(--radius);
background:var(--surface-2);
color:var(--encre);
padding:1.5rem;
}
.carte-fond{background:var(--fond)}
.carte-trait{background:transparent;border:var(--trait) solid var(--encre)}
.carte-filet{background:transparent;border-top:var(--trait) solid var(--filet-fort);
border-radius:0;padding:1.25rem 0 0}
.carte-jaune{background:var(--jaune);color:#000}
.carte-vert {background:var(--vert); color:#000}
/* -- Halo, la carte qui s’incline sous la souris --------------------
Deux variables sont pilotées par telescoop-ds.js :
--hx et --hy, la position du pointeur de -1 à 1, et --hp, l’état
de survol de 0 à 1. Sans JS, le halo reste posé, sans mouvement. */
.halo{
--hx:0; --hy:0; --hp:0;
position:relative;
transform-style:preserve-3d;
will-change:transform;
transform:
perspective(700px)
rotateX(calc(var(--hy) * -12deg))
rotateY(calc(var(--hx) * 12deg))
translateZ(calc(var(--hp) * 16px));
box-shadow:
calc(var(--hx) * -10px) calc(var(--hy) * -10px + 3px) 8px var(--halo-1),
calc(var(--hx) * -34px) calc(var(--hy) * -34px + 14px + var(--hp) * 16px)
calc(30px + var(--hp) * 30px) calc(var(--hp) * -4px) var(--halo-2);
transition:transform 520ms var(--ease-doux), box-shadow 520ms var(--ease-doux);
}
/* Pendant le survol, la carte colle au pointeur */
.halo.suit{transition:transform 90ms linear, box-shadow 90ms linear}
/* Reflet qui suit le pointeur, ce qui achève l’illusion de relief */
.halo::after{
content:"";position:absolute;inset:0;border-radius:inherit;
pointer-events:none;
background:radial-gradient(420px circle at var(--px,50%) var(--py,50%),
var(--brillance),transparent 62%);
opacity:calc(var(--hp) * .9);
transition:opacity 320ms var(--ease);
mix-blend-mode:soft-light;
}
/* Le contenu remonte légèrement dans la profondeur */
.halo > *{transform:translateZ(calc(var(--hp) * 18px))}
/* -- Champ, un filet plutôt qu’un contour ---------------------------- */
.champ{
font-family:var(--font-texte);font-size:var(--t-texte);
border:var(--trait) solid var(--encre);
border-radius:var(--radius);
background:var(--surface);color:var(--encre);
padding:.55rem .8rem;width:100%;
transition:border-color var(--speed) var(--ease),
background-color var(--speed) var(--ease);
}
.champ::placeholder{color:var(--encre-douce)}
.champ:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
.etiquette{
display:block;margin-bottom:.35rem;
font-family:var(--font-titre);text-transform:uppercase;
font-size:var(--t-sous-titre);color:var(--encre);
}
/* -- Tableau, uniquement des filets ---------------------------------- */
.tableau{width:100%;border-collapse:collapse}
.tableau th{
font-family:var(--font-titre);font-weight:400;text-transform:uppercase;
text-align:left;font-size:var(--t-sous-titre);
padding:.5rem .75rem .5rem 0;
border-bottom:var(--trait) solid var(--filet-fort);
}
.tableau td{padding:.7rem .75rem .7rem 0;border-bottom:var(--filet) solid var(--filet-couleur)}
.tableau tr:last-child td{border-bottom:0}
/* -- Lien d’évitement ------------------------------------------------ */
.skip-to-content{
position:absolute;left:1rem;top:-100%;z-index:100;
background:var(--jaune);color:#000;font-weight:700;
padding:.75rem 1.25rem;border-radius:0 0 var(--radius) var(--radius);
background-image:none;transition:top var(--speed) var(--ease);
}
.skip-to-content:focus{top:0}
/* -- Retour en haut -------------------------------------------------- */
.haut-de-page{
position:fixed;right:1.5rem;bottom:1.5rem;z-index:60;
display:inline-flex;align-items:center;gap:.5rem;
opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;
transition:opacity var(--speed) var(--ease), transform var(--speed) var(--ease),
background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.haut-de-page.visible{opacity:1;transform:none;pointer-events:auto}
.haut-de-page .fleche{display:inline-block;transition:transform var(--speed) var(--ease)}
.haut-de-page:hover .fleche{transform:translateY(-3px)}
/* ---------------------------------------------------------------------
7. ANIMATIONS
Tout est désactivé si le système demande moins d’animations.
--------------------------------------------------------------------- */
@keyframes montee{from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none}}
@keyframes glisse-gauche{from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:none}}
@keyframes trace{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes apparition{from{opacity:0} to{opacity:1}}
@keyframes pulsation{0%,100%{opacity:.35} 50%{opacity:1}}
/* Les animations sont actives par défaut. Elles ne se coupent que si
le système demande moins d’animations, et seulement si la page
n’impose pas data-anim="on" sur la balise racine. */
/* Bloc qui apparaît au défilement. Le JS pose la classe .vu. */
/* On anime la propriete translate, pas transform : ainsi un bloc
peut etre a la fois .apparait et .halo sans que l’un ecrase l’autre. */
.apparait{
opacity:0;translate:0 22px;
transition:opacity var(--speed-lent) var(--ease-doux),
translate var(--speed-lent) var(--ease-doux);
transition-delay:calc(var(--i,0) * 80ms);
}
.apparait.vu{opacity:1;translate:none}
/* Filet qui se trace de gauche à droite */
.trace{transform:scaleX(0);transform-origin:left center;
transition:transform 900ms var(--ease-doux);transition-delay:calc(var(--i,0) * 80ms)}
.trace.vu{transform:scaleX(1)}
/* Le grand titre monte à l’ouverture */
.anim-ouverture{animation:montee 900ms var(--ease-doux) both}
.anim-ouverture-2{animation:montee 900ms var(--ease-doux) 140ms both}
.anim-ouverture-3{animation:montee 900ms var(--ease-doux) 260ms both}
/* Point qui respire, pour signaler un état vivant */
.pastille{animation:pulsation 2.4s var(--ease) infinite}
@media (prefers-reduced-motion:reduce){
:root:not([data-anim="on"]) *{
animation-duration:.01ms !important;
transition-duration:.01ms !important;
}
:root:not([data-anim="on"]) .apparait{opacity:1;translate:none}
:root:not([data-anim="on"]) .trace{transform:none}
:root:not([data-anim="on"]) .halo{transform:none !important}
:root:not([data-anim="on"]) .halo::after{opacity:0 !important}
}
/* ---------------------------------------------------------------------
8. ACCESSIBILITÉ ET SOBRIÉTÉ
--------------------------------------------------------------------- */
body.monochrome-mode{filter:grayscale(100%)}
@media print{
.grain-texture::before,.haut-de-page,.nav{display:none}
.halo{box-shadow:none;transform:none}
.apparait{opacity:1;transform:none}
body{background:#fff;color:#000}
}