/* Exuno, page web. Valeurs du socle, section 6 : aucune autre couleur. */
@font-face{font-family:"Jost";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/jost-600.woff2") format("woff2")}
@font-face{font-family:"Della Respira";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/della-respira-400.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/dm-mono-400.woff2") format("woff2")}
:root{
  --eteint:#0B0B0C;--facade:#16161A;--veille:#2A2A30;--lumiere:#FAFAF7;--signal:#FF3B2F;
  --demi:rgba(250,250,247,.55);
  --mono:"DM Mono",ui-monospace,Consolas,monospace;
  --serif:"Della Respira",Georgia,"Times New Roman",serif;
  --jost:"Jost","Helvetica Neue",Arial,sans-serif;
  --x0:24px;--y0:24px;--m:12px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--eteint);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--eteint);color:var(--lumiere);font-family:var(--mono);font-size:14px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--lumiere);text-decoration:none}
a:hover .txt,.bas a:hover,.retour:hover,.fermer:hover{text-decoration:underline;text-underline-offset:4px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.sr{position:fixed;top:0;left:0;margin:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Le lockup. Interlettrage 0,14 em sous 24 px de corps, 0,09 em au-dessus. */
.lockup{margin:0;font-family:var(--jost);font-weight:600;font-size:20px;line-height:1;white-space:nowrap;color:var(--lumiere)}
.lockup .mot{letter-spacing:.14em;margin-right:-.14em}
.lockup .carre{display:inline-block;vertical-align:baseline;width:.30em;height:.30em;margin-left:.22em;background:var(--signal)}
@media (min-width:700px){.lockup{font-size:28px}.lockup .mot{letter-spacing:.09em;margin-right:-.09em}}

/* Premier écran */
.ecran{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}
.js .ecran{height:100vh;height:100svh;min-height:520px}
.facade{position:absolute;inset:0}
.c{position:absolute;width:var(--m);height:var(--m);background:var(--facade);transition:background-color 1260ms linear,opacity 200ms linear var(--d,0ms)}
.c.veille{background:var(--veille);transition:background-color 840ms linear,opacity 200ms linear var(--d,0ms)}
.c.on{background:var(--lumiere);transition:background-color 125ms linear,opacity 200ms linear var(--d,0ms)}
.ecran .lockup{position:absolute;left:var(--x0);top:calc(var(--y0) - 4px)}
.ecran .lockup .mot b{font-weight:600}
.js .ecran .lockup .mot b{opacity:0}
.js .ecran .lockup .mot b.on{opacity:1;transition:opacity 1500ms cubic-bezier(.22,.61,.36,1)}
.js .ecran .lockup .carre{opacity:0}
.js .ecran .lockup.frappe .carre{opacity:1}
.phrase{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.3vw,63px);line-height:1.12}
.ecran .phrase{position:absolute;left:var(--x0);bottom:var(--bas-phrase,120px)}
.fenetres{padding:96px var(--x0) 0}
.js .fenetres{padding:0}
.fen{display:flex;align-items:center;gap:10px;height:44px;font-size:12px;letter-spacing:.06em;white-space:nowrap}
.js .fen{position:absolute}
.vitre{flex:none;width:var(--m);height:var(--m);background:var(--facade)}
html:not(.js) .fen-rouge .vitre,.allume .fen-rouge .vitre{background:var(--signal)}
html:not(.js) .fen-blanche .vitre,.allume .fen-blanche .vitre{background:var(--lumiere)}
.bas{position:absolute;left:var(--x0);right:var(--x0);top:var(--haut-bas,auto);bottom:var(--fond-bas,12px);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.06em}
.bas a,.bas button{display:flex;align-items:center;height:44px;color:var(--demi)}
@media (min-width:700px){.fen{font-size:14px}.bas{font-size:11px}}

/* Ouverture du manifeste : la façade s'éteint en vague, le rouge ne grandit pas */
.ecran .lockup,.ecran .phrase,.fen,.bas{transition:opacity 250ms linear}
.eteint .c{opacity:0}
.eteint .ecran .lockup,.eteint .ecran .phrase,.eteint .fen,.eteint .bas{opacity:0;transition-delay:350ms}

/* Le manifeste et la page de mentions */
.page{padding:22px 24px 72px;min-height:100vh;min-height:100svh}
.js .manifeste{display:none;position:fixed;inset:0;overflow:auto;background:var(--eteint);z-index:2}
.js .lecture .manifeste{display:block}
.barre{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.barre a,.fermer,.retour{display:flex;align-items:center;height:44px}
.fermer,.retour{font-size:12px;letter-spacing:.06em;color:var(--demi)}
html:not(.js) .fermer{display:none}
.colonne{display:flex;flex-direction:column;gap:22px;max-width:600px;padding-top:64px}
.repere{display:flex;align-items:center;gap:11px;margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--demi)}
.signe{position:relative;flex:none;width:14px;height:14px;overflow:hidden}
.signe::after{content:"";position:absolute;left:-3px;bottom:-3px;width:10px;height:10px;background:var(--signal)}
.titre{margin:8px 0 22px;font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.3vw,63px);line-height:1.12}
/* Un titre en plusieurs phrases : 1 phrase par ligne, sans mot seul en fin de phrase */
.titre span{display:block;text-wrap:balance}
.colonne p{margin:0;max-width:56ch}
sup{font-size:.68em;line-height:0;vertical-align:baseline;position:relative;top:-.5em}
.colonne .ne{margin:44px 0;font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,43px);line-height:1.15}
.colonne .fen{position:static;margin-top:66px;align-self:flex-start}
.colonne .fen .vitre{background:var(--lumiere)}
.bloc{display:flex;flex-direction:column;gap:10px}
.bloc h2{margin:0;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--demi)}
.mentions .colonne{gap:36px}
.mentions .titre{margin:0}
.voir{display:inline-block;padding:13px 0;margin:-13px 0;text-decoration:underline;text-underline-offset:4px}
@media (min-width:700px){
  body{font-size:16px}
  .page{padding:36px 32px 120px}
  .colonne{margin-left:240px;gap:28px;padding-top:110px}
  .mentions .colonne{gap:48px}
  .mentions .colonne p{font-size:15px}
  .titre{margin:16px 0 28px}
  .colonne .ne{margin:56px 0}
  .colonne .fen{margin-top:84px}
}
@media (min-width:700px) and (max-width:1000px){.colonne{margin-left:0}}
@media (min-width:1200px){.colonne .titre{margin-right:-260px}}
/* Le texte s'allume, franc, paragraphe après paragraphe */
@keyframes allumage{from{opacity:0}to{opacity:1}}
.js .lecture .manifeste .colonne > *{opacity:0;animation:allumage 200ms linear forwards}
.js .lecture .manifeste .colonne > :nth-child(1){animation-delay:60ms}
.js .lecture .manifeste .colonne > :nth-child(2){animation-delay:140ms}
.js .lecture .manifeste .colonne > :nth-child(3){animation-delay:220ms}
.js .lecture .manifeste .colonne > :nth-child(4){animation-delay:300ms}
.js .lecture .manifeste .colonne > :nth-child(5){animation-delay:380ms}
.js .lecture .manifeste .colonne > :nth-child(6){animation-delay:460ms}
.js .lecture .manifeste .colonne > :nth-child(7){animation-delay:540ms}
.js .lecture .manifeste .colonne > :nth-child(n+8){animation-delay:620ms}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .lecture .manifeste .colonne > *{opacity:1}
}