/* 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")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/dm-sans-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;
  --sans:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --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}
/* Le soulignement : un trait qui avance de gauche à droite, tête fondue, puis s'éteint sur place. 600 ms à l'aller, 900 ms au retour. */
.txt,.bas a,.retour,.fermer,.bloc p a{position:relative}
.txt::after,.bas a::after,.retour::after,.fermer::after,.bloc p a::after{content:"";position:absolute;left:0;right:0;top:calc(50% + 1em);height:1px;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,currentColor 1.6em,currentColor calc(100% - 1.6em),transparent) no-repeat;background-position:-1.6em 0;background-size:0 100%;transition:opacity 900ms linear,background-size 0s linear 900ms}
a:focus-visible .txt::after,.bas a:focus-visible::after,.retour:focus-visible::after,.fermer:focus-visible::after,.bloc p a:focus-visible::after{opacity:1;background-size:calc(100% + 3.2em) 100%;transition:background-size 600ms cubic-bezier(.22,.61,.36,1),opacity 0s}
/* Au survol, seulement là où un curseur existe : rien sur téléphone. */
@media (hover:hover){a:hover .txt::after,.bas a:hover::after,.retour:hover::after,.fermer:hover::after,.bloc p a:hover::after{opacity:1;background-size:calc(100% + 3.2em) 100%;transition:background-size 600ms cubic-bezier(.22,.61,.36,1),opacity 0s}}
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, socle section 7.1 : 0,09 em à partir de 24 px de corps, 0,14 em en dessous. */
.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 875ms 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)}
/* Le H1 de la façade, piste B du 8 octobre 2026 : « Studio créatif » en repère DM Mono au-dessus du titre. */
.phrase .cle{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;line-height:1.4;color:var(--demi);margin-bottom:14px}
@media (min-width:700px){.phrase .cle{font-size:13px;margin-bottom:18px}}
/* « Studio créatif » ouvre le manifeste depuis le 26 octobre 2026, décision de Grégory : aucun signe au repos, le soulignement du bas au survol. */
.phrase a.cle{width:fit-content;position:relative}
.phrase a.cle::after{content:"";position:absolute;left:0;right:0;top:calc(50% + 1em);height:1px;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,currentColor 1.6em,currentColor calc(100% - 1.6em),transparent) no-repeat;background-position:-1.6em 0;background-size:0 100%;transition:opacity 900ms linear,background-size 0s linear 900ms}
.phrase a.cle:focus-visible::after{opacity:1;background-size:calc(100% + 3.2em) 100%;transition:background-size 600ms cubic-bezier(.22,.61,.36,1),opacity 0s}
@media (hover:hover){.phrase a.cle:hover::after{opacity:1;background-size:calc(100% + 3.2em) 100%;transition:background-size 600ms cubic-bezier(.22,.61,.36,1),opacity 0s}}
.ecran .phrase{max-width:calc(100% - 2*var(--x0))}
/* Téléphone court : le titre passe à 28 px pour ne pas toucher la fenêtre Instagram (contrôlé de 320 x 568 à 430 x 932). */
@media (max-width:699px) and (max-height:700px){.ecran .phrase{font-size:28px}}
/* Sur téléphone, depuis le 26 octobre 2026 (Grégory) : « Mentions légales » sur la dernière rangée, sous les liens du bas, « Studio créatif » en haut à droite. */
@media (max-width:699px){.bas .gauche{gap:22px}.bas a.mentions{position:absolute;left:0;top:calc(var(--p-tel,52px))}}
.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,html:not(.js) .fen-travaux .vitre,.allume .fen-travaux .vitre{background:var(--lumiere)}
/* Le manifeste quitte la fenêtre rouge le 21 octobre 2026, décision de Grégory : il passe en bas, en 1er. Le rouge va à Travaux.
   Instagram et LinkedIn y sont en icônes. */
.bas a.ig{color:var(--lumiere)}
.bas a.ig::after{display:none}
.bas a.ig svg{display:block}
.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)}
/* Le Journal, décision de Grégory du 28 septembre 2026 : « Journal » avant « Mentions légales », en Lumière pleine. */
.bas .gauche{display:flex;gap:26px}
.bas a.plein{color:var(--lumiere)}
/* 3 liens dans le bas depuis le 26 octobre 2026 (« La newsletter », « Le brief », « Le studio ») : chaque libellé tient sur une ligne, l'écart se resserre sur les petits téléphones. */
.bas a{white-space:nowrap}
@media (max-width:419px){.bas .gauche{gap:14px}}
@media (max-width:359px){.bas .gauche{gap:11px}.bas{letter-spacing:.03em}}
@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}
/* La vague, sur ordinateur : un anneau part de la fenêtre cliquée en 600 ms, chaque fenêtre s'allume à son passage,
   reste 120 ms puis disparaît en 480 ms. Les textes s'éteignent au passage, la fenêtre cliquée en dernier. 1 200 ms en tout. */
.c.vague{background:var(--lumiere);transition:none}
.c.parti{background:var(--facade);opacity:0;transition:background-color 480ms linear,opacity 480ms linear}
.ecran .efface{opacity:0;transition:opacity 480ms linear}
.ecran .efface-vite{opacity:0;transition:opacity 200ms linear}

/* 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}
/* Les paragraphes se lisent en DM Sans, décision de Grégory du 22 septembre 2026. Les repères courts restent en DM Mono, les titres en Della Respira. */
.colonne p{margin:0;max-width:62ch;font-family:var(--sans);line-height:1.75}
.colonne p.repere,.colonne p.adresse-mono,.voir{font-family:var(--mono)}
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}
}
/* Les fenêtres, la phrase et le bas restent invisibles tant que la façade ne les a pas placés : aucun saut au chargement. */
.js .ecran:not(.posee) .fen,.js .ecran:not(.posee) .phrase,.js .ecran:not(.posee) .bas{visibility:hidden}

/* Mentions légales au bout de la ligne du bas, contre la marge droite, sur ordinateur (Grégory, 21 octobre 2026). */
@media (min-width:700px){.bas .gauche{flex:1}.bas a.mentions{margin-left:auto}}

/* Le bouton « Haut », sur toutes les pages qui défilent et dans le manifeste, dès que le visiteur commence à descendre (Grégory, 21 octobre 2026). */
.haut{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:5;display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;background:var(--eteint);font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--demi);opacity:0;visibility:hidden;transition:opacity 600ms linear,visibility 0s linear 600ms}
.haut.vu{opacity:1;visibility:visible;transition:opacity 600ms linear}
.haut .vitre{flex:none;width:12px;height:12px;background:var(--veille);transition:background-color 840ms linear}
.haut:focus-visible{color:var(--lumiere)}
.haut:focus-visible .vitre{background:var(--lumiere)}
@media (hover:hover){.haut:hover{color:var(--lumiere)}.haut:hover .vitre{background:var(--lumiere);transition:background-color 125ms linear}}
@media (min-width:700px){.haut{right:24px;bottom:24px}.haut .vitre{width:16px;height:16px}}
@media (prefers-reduced-motion:reduce){.haut,.haut.vu,.haut .vitre{transition:none}}

/* « Studio créatif » quitte le titre (Grégory, 26 octobre 2026) : sous le lockup sur ordinateur, en haut à droite sur téléphone. */
.ecran a.cle{position:absolute;display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;line-height:1.4;color:var(--demi);width:fit-content}
@media (min-width:700px){.ecran a.cle{font-size:13px}}
.ecran a.cle::after{content:"";position:absolute;left:0;right:0;top:calc(50% + 1em);height:1px;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,currentColor 1.6em,currentColor calc(100% - 1.6em),transparent) no-repeat;background-position:-1.6em 0;background-size:0 100%;transition:opacity 900ms linear,background-size 0s linear 900ms}
.ecran a.cle:focus-visible::after{opacity:1;background-size:calc(100% + 3.2em) 100%;transition:background-size 600ms cubic-bezier(.22,.61,.36,1),opacity 0s}
@media (hover:hover){.ecran a.cle:hover::after{opacity:1;background-size:calc(100% + 3.2em) 100%;transition:background-size 600ms cubic-bezier(.22,.61,.36,1),opacity 0s}}
.js .ecran:not(.posee) a.cle{visibility:hidden}
.eteint .ecran a.cle{opacity:0;transition-delay:350ms}
.ecran a.cle{transition:opacity 250ms linear}
/* Téléphone : Instagram et LinkedIn descendent sur la ligne des mentions légales, calés à droite (Grégory, 26 octobre 2026). */
@media (max-width:699px){.bas a.ig{position:absolute;top:var(--p-tel,52px)}.bas a.ig[href*="linkedin"]{right:0}.bas a.ig[href*="instagram"]{right:36px}}

/* Le sous-titre, l'inventaire des métiers (Grégory, 26 octobre 2026) : sous le titre, plus petit, en gris. */
.phrase .metiers{display:block;font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.06em;color:var(--demi);margin-top:14px;white-space:nowrap}
@media (min-width:700px){.phrase .metiers{font-size:clamp(14px,1.05vw,17px);margin-top:20px}}

/* Journal, Offre et Messagerie respirent, chacune à son tempo, pour dire qu'elles sont des liens. Travaux, le rouge, reste fixe
   (Grégory, 26 octobre 2026). Allumage franc, extinction plus lente, jamais noire : la case passe au gris de veille. */
@keyframes respire{0%,70%{background:var(--lumiere)}80%,95%{background:var(--veille)}95.1%,100%{background:var(--lumiere)}}
.allume #journal .vitre{animation:respire 3.4s linear .4s infinite}
.allume #offre .vitre{animation:respire 3.9s linear 1.5s infinite}
.allume #whatsapp .vitre{animation:respire 4.5s linear 2.6s infinite}
@media (hover:hover){.allume .fen-blanche:hover .vitre{animation:none}}
.allume .fen-blanche:focus-visible .vitre{animation:none}
@media (prefers-reduced-motion:reduce){.allume .fen-blanche .vitre{animation:none}}
.allume .fen-blanche:active .vitre{animation:none}

/* Ordinateur : Instagram et LinkedIn au centre de la ligne du bas, la newsletter, le brief et le studio à gauche, les mentions à droite (Grégory, 26 octobre 2026). */
@media (min-width:700px){.bas a.ig{position:absolute;top:0}.bas a.ig[href*="instagram"]{left:calc(50% - 30px)}.bas a.ig[href*="linkedin"]{left:calc(50% + 14px)}}