/* La charte (/brand) : une grille de cartes posées sur le papier de la vitrine, mêmes couleurs, même police, même
   mouvement. Une seule carte sombre, une seule couleur vive. */
.in{opacity:.01;transform:translateY(8px);animation:in .8s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes in{to{opacity:1;transform:none}}
/* les cartes du bas n'attendent leur tour que si le script est là pour les montrer */
@media (scripting:enabled){
  .rv{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .rv.on{opacity:1;transform:none}
}

.brand-page{width:min(1180px,calc(100% - 2 * var(--gutter)));margin:0 auto;padding:26px 0 56px}
.top{display:flex;align-items:center;gap:10px;margin-bottom:26px;font-size:15px;color:var(--mute)}
.top .home{display:inline-flex;align-items:center;gap:.393em;font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.top .home svg{width:1.214em;height:1.214em}

/* La grille : six colonnes. Chaque carte dit son nom en petit, en haut à gauche. */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.tile{position:relative;display:flex;flex-direction:column;gap:12px;min-height:230px;padding:24px;overflow:hidden;border-radius:24px;background:#fff;box-shadow:0 0 0 1px #ece9e2}
.tile h2{font-size:13px;font-weight:500;letter-spacing:0;color:var(--mute)}
.tile p{max-width:46ch;font-size:14.5px;line-height:1.5;color:var(--mute);text-wrap:pretty}

.hero{grid-column:span 4;grid-row:span 2;justify-content:space-between;padding:36px;background:var(--soft);box-shadow:none}
/* Le logo, aux proportions de l'en-tête de la vitrine et des fichiers à télécharger : le carré du symbole fait 34/28 de
   la taille du nom, 11/28 d'écart, le nom serré de 3,5 %. Les barres rentrent d'autant que l'air du carré, pour
   s'aligner sur le titre dessous. */
.lockup{display:flex;align-items:center;gap:.393em;margin-left:-.17em;font-size:58px}
.lockup svg{width:1.214em;height:1.214em}
.lockup b{font-weight:600;letter-spacing:-.035em}
.hero h1{max-width:17ch;font-size:clamp(28px,3vw,42px);line-height:1.06;letter-spacing:-.04em;font-weight:600}
.hero small{display:block;margin-top:12px;font-size:13px;color:var(--mute)}

/* Le logo animé : les barres poussent du sol l'une après l'autre, restent, puis rentrent dans le sol. Chaque barre est un
   trait à bouts ronds qui s'allonge (stroke-dashoffset) : toujours une vraie pilule, jamais écrasée. Son pied naît d'un
   point (stroke-width), sur la courbe de la vitrine ; elle rentre en accélérant, comme tirée vers le sol. Les barres
   attendent leur tour cachées (both), et tout s'arrête hors de l'écran (brand.js). */
.motion{grid-column:span 2;grid-row:span 2}
.grow{flex:1;display:grid;place-items:center;min-height:150px}
.grow svg{width:46%;max-width:190px;height:auto;overflow:visible}
.grow path{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-dasharray:1 2;
  animation:len 5.2s infinite both,foot 5.2s infinite both}
.grow path:nth-child(2){animation-delay:.12s}
.grow path:nth-child(3){animation-delay:.24s}
.grow.off path{animation-play-state:paused}
@keyframes len{
  0%{stroke-dashoffset:1;animation-timing-function:var(--ease)}
  19%,74%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.55,0,.7,.4)}
  86%,100%{stroke-dashoffset:1}
}
@keyframes foot{
  0%{stroke-width:0;animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  7%,82%{stroke-width:6;animation-timing-function:cubic-bezier(.6,0,.8,.5)}
  87%,100%{stroke-width:0}
}
@media (prefers-reduced-motion:reduce){.grow path{animation:none}}

/* Les fichiers du logo : chaque variante sur son fond, toute la vignette se clique. Le format se choisit en haut à
   droite ; le lien de l'autre format est retiré (ni vu, ni lu, ni atteint au clavier). */
.logo{grid-column:span 6;gap:18px}
.logo .head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.logo .head p{margin-top:12px}
.switch{display:flex;align-items:center;gap:4px;padding:3px;border:0;border-radius:999px;background:var(--soft)}
.switch legend{float:left;margin:0 8px 0 10px;font-size:12.5px;color:var(--mute)}
.switch label{position:relative;display:block;cursor:pointer}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch span{display:block;height:30px;padding:0 14px;border-radius:999px;font:500 12.5px/30px 'Inter',system-ui,sans-serif;letter-spacing:.02em;color:var(--mute);transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.switch label:hover span{color:var(--ink)}
.switch input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,20,18,.08),0 0 0 1px rgba(20,20,18,.05)}
.switch input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.logo:has([value=png]:checked) .file .svg,.logo:has([value=svg]:checked) .file .png{display:none}
@supports not selector(:has(*)){.file .svg{display:none}}

.files{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;list-style:none}
.file{position:relative;grid-column:span 2;display:flex;flex-direction:column;gap:10px}
.file:nth-child(-n+2){grid-column:span 3}
.file .view{display:grid;place-items:center;height:150px;border-radius:16px;transition:transform .45s var(--ease)}
.file.paper .view{background:var(--bg);box-shadow:inset 0 0 0 1px #ece9e2}
.file.ink .view{background:var(--ink)}
.file.soft .view{background:var(--soft)}
.file img{display:block;width:auto;height:40px}
.file:nth-child(n+3) img{height:58px}
.file.soft img{height:76px;border-radius:22.5%;box-shadow:0 14px 24px -14px rgba(20,20,18,.55)}
.file a{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px;padding:0 4px 2px}
/* toute la vignette est la cible du clic */
.file a::after{content:"";position:absolute;inset:0;border-radius:16px}
.file a:focus-visible{outline:none}
.file a:focus-visible::after{outline:2px solid var(--ink);outline-offset:3px}
.file b{font-size:14px;font-weight:600}
.file small{grid-row:2;grid-column:1/-1;font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.file a svg{grid-row:1;grid-column:2;width:15px;height:15px;fill:none;stroke:var(--mute);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease),stroke .2s}
.file:hover .view{transform:translateY(-3px)}
.file:hover a svg{stroke:var(--ink);transform:translateY(2px)}

/* Les couleurs : un clic copie le code. */
.colors{grid-column:span 6}
.swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:6px}
.swatch,.chip{all:unset;box-sizing:border-box;cursor:pointer}
.swatch{display:grid;gap:3px;text-align:left}
.swatch i{display:block;aspect-ratio:4/3;margin-bottom:9px;border-radius:16px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(20,20,18,.08);transition:transform .35s var(--ease)}
.swatch:hover i{transform:translateY(-3px)}
.swatch:focus-visible i,.chip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.swatch b{font-size:14px;font-weight:600}
.swatch small{font-size:12.5px;color:var(--mute)}
.swatch code,.chip code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mute);transition:color .2s}
.swatch.done code{color:var(--accent)}
.shops{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding-top:16px;border-top:1px solid #f0ede7}
.shops small{margin-right:6px;font-size:12.5px;color:var(--mute)}
.chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 6px;border-radius:999px;box-shadow:0 0 0 1px var(--line);font-size:13px;transition:background .2s}
.chip:hover{background:var(--soft)}
.chip i{width:18px;height:18px;border-radius:50%;background:var(--c)}
.toast{position:absolute;top:22px;right:24px;font-size:12.5px;color:var(--accent);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s var(--ease)}
.toast.on{opacity:1;transform:none}

/* Les polices : Inter seule. À gauche ses graisses, à droite la hiérarchie de la vitrine, chaque niveau dans son vrai
   style (réduit pour tenir dans la carte), sa valeur réelle à côté. */
.type{grid-column:span 3}
.specimen{margin-top:2px;font-size:clamp(88px,10vw,148px);line-height:.92;letter-spacing:-.055em;font-weight:600}
.meta{display:flex;align-items:baseline;gap:10px}
.meta b{font-size:18px;font-weight:600;letter-spacing:-.015em}
.meta small{font-size:13px;color:var(--mute)}
.tile .glyphset{max-width:34ch;font-size:15px;line-height:1.6;letter-spacing:.01em;color:var(--mute);overflow-wrap:anywhere}
.tile .weights{display:flex;flex-wrap:wrap;gap:4px 22px;max-width:none;margin-top:auto;font-size:22px;line-height:1.2;letter-spacing:-.025em;color:var(--ink)}
.weights span:nth-child(1){font-weight:400}
.weights span:nth-child(2){font-weight:500}
.weights span:nth-child(3){font-weight:600}
.levels{display:grid;list-style:none}
.levels li{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 16px;padding:13px 0;border-top:1px solid #f0ede7}
.levels li:first-child{padding-top:4px;border-top:0}
.levels small{font-size:12.5px;color:var(--mute)}
.levels code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mute);white-space:nowrap}
.levels span{grid-column:1/-1;text-wrap:pretty}
.levels li:nth-child(1) span{font-size:30px;line-height:1.02;letter-spacing:-.045em;font-weight:600;text-wrap:balance}
.levels li:nth-child(2) span{font-size:21px;line-height:1.08;letter-spacing:-.035em;font-weight:600}
.levels li:nth-child(3) span{font-size:15.5px;line-height:1.55;color:var(--mute)}
.levels li:nth-child(4) span{font-size:13px;line-height:1.5;color:var(--mute)}
.scale > p{margin-top:auto;font-size:13px}

/* Les modèles 3D, sur le lin. En haut la devanture et le carton, dessous le Mac (large, avec sa carte et sa tasse) ; le
   téléphone, haut, tient toute la hauteur à droite, sa manche s'effaçant dans le fond. */
.models{grid-column:span 4;grid-row:span 2}
.shots{flex:1;display:grid;grid-template-columns:1fr 1fr .8fr;grid-template-rows:auto 1fr;gap:10px;margin-top:4px}
.shots figure{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;border-radius:16px;background:var(--soft)}
.shots img{display:block;max-width:none;transition:transform .6s var(--ease)}
.shots figure:hover img{transform:scale(1.03)}
/* chaque rendu sur le fond où il a été posé : la devanture sur le papier, le carton sur le sien */
.shots .shop{aspect-ratio:4/3;background:var(--bg);box-shadow:inset 0 0 0 1px #ece9e2}
.shots .shop img{width:100%;height:100%;object-fit:cover}
.shots .box{aspect-ratio:4/3;background:#f4f2f0}
.shots .box img{width:100%;height:100%;object-fit:contain}
.shots .mac{grid-column:1/3;padding:34px 4% 14px}
.shots .mac img{width:100%;height:auto}
.shots .phone{grid-column:3;grid-row:1/3}
/* hors du flux : la hauteur de la carte vient des autres rendus, le téléphone la remplit, posé sur le bas */
.shots .phone img{position:absolute;inset:auto 0 0;width:auto;height:calc(100% - 40px);margin:0 auto;transform-origin:50% 100%}
.shots figcaption{position:absolute;left:14px;top:11px;font-size:12.5px;color:var(--mute)}

.icons{grid-column:span 2}
/* (la carte est aussi haute que sa voisine : les icônes au milieu de la place qui reste, pas tassées en bas) */
.glyphs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 10px;margin:auto 0}
.glyphs svg{justify-self:center;width:30px;height:30px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.shape{grid-column:span 2}
.forms{display:flex;align-items:center;justify-content:center;gap:16px;margin:auto 0}
.forms .pill{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:500}
.forms .card{width:76px;height:56px;border-radius:16px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.forms .dot{width:16px;height:16px;border-radius:50%;background:var(--accent)}

.rules{grid-column:span 4}
.rules ol{display:grid;gap:12px;margin-top:2px;list-style:none;counter-reset:r}
.rules li{display:grid;grid-template-columns:30px 1fr;font-size:15px;line-height:1.5;color:var(--mute);counter-increment:r}
.rules li::before{content:counter(r,decimal-leading-zero);padding-top:3px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent)}
.rules li b{font-weight:600;color:var(--ink)}
.voice{grid-column:span 2;background:var(--soft);box-shadow:none}
.voice blockquote{margin-top:auto;font-size:25px;line-height:1.18;letter-spacing:-.03em;font-weight:600}

@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{grid-column:span 2;grid-row:auto}
  .swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
  .file,.file:nth-child(-n+2){grid-column:span 4}
  .file:nth-child(-n+2){grid-column:span 6}
}
@media (max-width:560px){
  .hero{padding:26px}
  .lockup{font-size:44px}
  /* la devanture, puis le carton (cadré sur lui) et le téléphone côte à côte, puis le Mac */
  .shots{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-flow:dense}
  .shots .shop,.shots .mac{grid-column:1/-1}
  .shots .box,.shots .phone{grid-column:auto;grid-row:auto;aspect-ratio:3/4}
  .shots .box img{object-fit:cover}
  .shots .mac{padding:34px 3% 10px}
  .swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .files{row-gap:14px}
  .file,.file:nth-child(-n+2),.file:last-child{grid-column:span 12}
  .file:nth-child(3),.file:nth-child(4){grid-column:span 6}
  .file .view{height:120px}
  .file:nth-child(n+3) .view{height:110px}
  .file:nth-child(n+3) img{height:52px}
  .file.soft img{height:64px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}