/* SARYN DIGITAL — site. Couleurs et polices : assets/jetons.css (charte, ne pas modifier ici). */
@font-face{font-family:"Anybody";src:url(Anybody.woff2) format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(IBMPlexSans.woff2) format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(IBMPlexMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--saryn-ivoire);color:var(--saryn-encre);font-family:var(--saryn-texte);font-size:16px;line-height:27px;-webkit-font-smoothing:antialiased;
  transition:background var(--saryn-duree-longue) var(--saryn-courbe),color var(--saryn-duree-longue) var(--saryn-courbe)}
[data-theme="sombre"] body,[data-theme="veille"] body{font-weight:380}
@media (prefers-color-scheme:dark){:root:not([data-theme]) body{font-weight:380}}
img,svg{max-width:100%;display:block}
.saut{position:absolute;left:-9999px;top:0;background:var(--saryn-encre);color:var(--saryn-ivoire);padding:12px 20px;z-index:60}
.saut:focus{left:0}
:focus-visible{outline:2px solid var(--saryn-laiton-prof);outline-offset:2px}

.page{max-width:1080px;margin:0 auto;padding:0 48px}
h1,h2,h3{margin:0;font-family:var(--saryn-titre);font-weight:700;text-transform:uppercase;text-wrap:balance}
h1{font-size:clamp(32px,5.6vw,62px);line-height:1.04;letter-spacing:.08em;font-variation-settings:"wdth" 125}
h2{font-size:clamp(22px,2.8vw,31px);line-height:1.14;letter-spacing:.06em;font-variation-settings:"wdth" 110;margin-bottom:16px}
h3{font-size:16px;line-height:1.3;letter-spacing:.05em;font-variation-settings:"wdth" 100}
p{margin:0 0 16px;max-width:64ch;color:var(--saryn-gris)}
p.chapo{font-size:19px;line-height:31px;max-width:56ch}
strong{color:var(--saryn-encre);font-weight:600}
a{color:var(--saryn-laiton-prof);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
.rep{font-family:var(--saryn-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--saryn-laiton);margin:0 0 16px}
.mono{font-family:var(--saryn-mono);font-variant-numeric:tabular-nums}

/* en-tête */
header.nav{position:sticky;top:0;z-index:10;background:var(--saryn-ivoire);border-bottom:1px solid var(--saryn-trait)}
.nav .in{max-width:1080px;margin:0 auto;padding:14px 48px;display:flex;align-items:center;gap:32px}
.nav .marque{display:block;flex:none;line-height:0}
.nav .marque img{height:34px;width:auto}
.logo-sombre{display:none!important}
[data-theme="sombre"] .logo-clair,[data-theme="veille"] .logo-clair{display:none!important}
[data-theme="sombre"] .logo-sombre,[data-theme="veille"] .logo-sombre{display:block!important}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .logo-clair{display:none!important}:root:not([data-theme]) .logo-sombre{display:block!important}}
.nav ul{list-style:none;display:flex;gap:24px;margin:0;padding:0;flex:1}
.nav ul a{color:var(--saryn-gris);text-decoration:none;font-size:14px}
.nav ul a:hover{color:var(--saryn-encre);text-decoration:underline;text-underline-offset:5px}
.themes{display:flex;border:1px solid var(--saryn-bord);flex:none}
.themes button{appearance:none;background:transparent;border:0;border-right:1px solid var(--saryn-bord);font-family:var(--saryn-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--saryn-encre);padding:8px 11px;cursor:pointer;min-height:36px;transition:background var(--saryn-duree-courte) var(--saryn-courbe)}
.themes button:last-child{border-right:0}
.themes button:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.themes button[aria-pressed="true"]{background:var(--saryn-encre);color:var(--saryn-ivoire)}

/* blocs */
section{padding:88px 0;border-bottom:1px solid var(--saryn-trait)}
.hero{padding:112px 0 96px}
.hero h1{margin-bottom:28px;max-width:16ch}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 24px;border:1px solid transparent;border-radius:var(--saryn-rayon);
  font-family:var(--saryn-texte);font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;
  transition:background var(--saryn-duree-courte) var(--saryn-courbe),color var(--saryn-duree-courte) var(--saryn-courbe)}
.btn-1{background:var(--saryn-encre);color:var(--saryn-ivoire)}
.btn-1:hover{background:var(--saryn-laiton-prof);color:var(--saryn-ivoire)}
.btn-2{background:transparent;color:var(--saryn-encre);border-color:var(--saryn-bord)}
.btn-2:hover{background:color-mix(in srgb,currentColor 8%,transparent)}

.grille{display:grid;gap:1px;background:var(--saryn-trait);border:1px solid var(--saryn-trait);margin-top:40px}
.g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
.cel{background:var(--saryn-ivoire);padding:32px;display:flex;flex-direction:column}
.cel p{font-size:15px;line-height:25px}
.cel h3{margin-bottom:10px}

/* applis */
.appli .tete{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.appli .icone{width:60px;height:60px;border-radius:14px;flex:none;object-fit:cover;border:1px solid var(--saryn-trait)}
.appli .icone.txt{display:grid;place-items:center;font-family:var(--saryn-titre);font-weight:800;font-size:15px;letter-spacing:.04em;font-variation-settings:"wdth" 110}
.appli .ss{font-family:var(--saryn-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--saryn-gris-2);margin-top:4px}
.appli ul.plat{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-wrap:wrap;gap:6px;padding-top:20px}
.appli ul.plat li{font-family:var(--saryn-mono);font-size:11px;letter-spacing:.06em;padding:3px 8px;border:1px solid var(--saryn-trait);color:var(--saryn-gris)}
.appli .lien{margin-top:18px;font-size:15px}
.etat{display:inline-flex;align-items:center;gap:7px;font-family:var(--saryn-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;min-height:22px;padding:0 10px;border:1px solid currentColor;align-self:flex-start;margin-bottom:18px}
.e-ok{color:var(--saryn-ok)} .e-al{color:var(--saryn-alerte)}

/* contact */
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--saryn-trait);border:1px solid var(--saryn-trait);margin-top:40px}
.contact a{background:var(--saryn-ivoire);padding:28px 32px;text-decoration:none;color:var(--saryn-encre);display:block;transition:background var(--saryn-duree-courte) var(--saryn-courbe)}
.contact a:hover{background:var(--saryn-surface)}
.contact .rep{margin-bottom:10px}
.contact .val{font-size:17px;font-weight:500;word-break:break-word}
.contact .aide{font-size:13px;color:var(--saryn-gris-2);margin-top:6px}

/* pages de texte */
.texte{padding:72px 0 96px}
.texte h1{font-size:clamp(26px,4vw,40px);margin-bottom:40px}
.texte h2{font-size:19px;margin:48px 0 12px}
.texte p,.texte li{color:var(--saryn-gris);max-width:70ch}
.texte ul{padding-left:20px}
dl.id{display:grid;grid-template-columns:200px 1fr;gap:0;margin:0;border-top:1px solid var(--saryn-trait)}
dl.id dt,dl.id dd{margin:0;padding:12px 0;border-bottom:1px solid var(--saryn-trait)}
dl.id dt{font-family:var(--saryn-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--saryn-encre);padding-top:15px}
dl.id dd{color:var(--saryn-gris)}

footer{padding:48px 0;background:var(--saryn-surface)}
footer .in{max-width:1080px;margin:0 auto;padding:0 48px;display:flex;flex-wrap:wrap;gap:20px 32px;justify-content:space-between;align-items:center}
footer .mono{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--saryn-gris-2)}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer nav a{font-size:14px;color:var(--saryn-gris)}

@media (max-width:860px){
  .page,.nav .in,footer .in{padding-left:24px;padding-right:24px}
  .g3,.g2,.contact{grid-template-columns:1fr}
  .nav .in{flex-wrap:wrap;gap:12px 20px}
  .nav ul{order:3;width:100%;gap:18px;flex-wrap:wrap}
  section{padding:60px 0} .hero{padding:72px 0 64px}
  dl.id{grid-template-columns:1fr} dl.id dt{border-bottom:0;padding-bottom:0}
}