/* Sites sur mesure · galerie autonome (2026-11-08, Thony : « la séparation des sections […] avec des liens pour diriger vers elles
   depuis mon LinkedIn »). Base copiée de the-brain/assets/site.css (palette argent froid du studio, une seule police). */
/* ===== Palette du studio · noir premium, argent acier froid, ambre (Thony, 2026-11-09 : « on garde le noir premium avec argent
   et ambre », pour « mes sites à moi » : portfolio, The Brain, vitrine, galerie, étude de marché, accueil privé) =====
   Un seul bloc, à copier tel quel en tête de la feuille de style de chaque projet. Valeurs de la v4.5 (d06f12e).
   Remplace le clair coloré du 2026-11-08 (ac8aa02) : son dernier mot l'emporte. Les sites clients (Verdane…) ne sont pas concernés.
   - Un fond noir qui ne change pas ; l'argent acier comme seule couleur ; l'ambre seulement pour ce qu'on clique.
   - La vie vient de la matière, pas de nouvelles couleurs : --p-argent-brosse (argent brossé, pour les grands titres) et --p-reflet.
   - Contrastes (WCAG) : texte 16:1, texte secondaire ≥ 7:1, argent ≥ 10:1 sur le noir, texte noir sur l'ambre 11:1. */
:root{
  --p-fond:#0b0c0e;          /* fond de toutes les pages */
  --p-fond-2:#14171b;        /* surfaces légèrement relevées, fond des illustrations */
  --p-carte:#181c21;         /* panneaux, cartes */
  --p-argent:#b7c1cc;        /* l'argent acier : titres en relief, filets, chiffres */
  --p-argent-2:#8793a2;      /* argent sombre : détails, ce qui est éteint dans les illustrations */
  --p-argent-clair:#dde3ea;  /* reflets, ce qui s'allume dans les illustrations */
  --p-texte:#e6eaef;         /* texte courant */
  --p-texte-2:#a5aeb9;       /* texte secondaire */
  --p-trait:rgba(183,193,204,.18);
  --p-action:#ffb020;        /* boutons d'action seulement */
  --p-action-txt:#0b0c0e;
  --p-note:#ff5a36;          /* notes de maquette */
  /* la matière */
  --p-argent-brosse:linear-gradient(100deg,#8793a2 0%,#dde3ea 30%,#b7c1cc 48%,#f2f5f8 62%,#9aa5b2 82%,#c9d1da 100%);
  --p-reflet:linear-gradient(180deg,rgba(221,227,234,.10),rgba(221,227,234,0) 40%);
  color-scheme:dark;
}
/* ce que les feuilles de style lisent : ce qui s'allume et les fonds relevés restent dans l'argent (plus de couleur par projet) */
:root{--p-vif:var(--p-argent-clair);--p-vif-txt:var(--p-argent);--p-vif-doux:var(--p-fond-2);--scene-fond:var(--p-fond-2)}
:root{
  --fond:var(--p-fond); --ink:var(--p-texte); --ink2:var(--p-texte-2); --trait:var(--p-trait); --argent:var(--p-vif-txt);
  --f:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif; --g:clamp(16px,4vw,60px); --max:1280px; --hh:70px;
  --sortie:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hh) + 16px);-webkit-text-size-adjust:100%;background:var(--fond)}
body{margin:0;background:var(--fond);color:var(--ink);font:400 17px/1.55 var(--f);font-variation-settings:"opsz" 16;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--p-action);outline-offset:3px;border-radius:3px}
.saut{position:fixed;left:16px;top:-60px;z-index:100;background:var(--p-carte);color:var(--ink);padding:10px 16px;border-radius:999px;transition:top .3s}
.saut:focus{top:12px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--g)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:.98;font-variation-settings:"opsz" 96}
p{margin:0 0 1em}
.eti{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink2);margin:0 0 14px}
.chapo{font-size:clamp(1.08rem,1.5vw,1.3rem);color:var(--ink2);max-width:56ch;line-height:1.5}
.gros{font-size:clamp(2.3rem,5.8vw,5.2rem);font-weight:760;letter-spacing:-.03em;font-stretch:94%}

/* en-tête */
.tete{position:fixed;inset:0 0 auto;z-index:50;height:var(--hh);display:flex;align-items:center;justify-content:space-between;gap:20px;padding-inline:var(--g)}
.tete::before{content:"";position:absolute;inset:0;background:var(--fond);border-bottom:1px solid var(--trait);opacity:0;transition:opacity .4s;z-index:-1}
.tete.plein::before{opacity:1}
.marque{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;text-decoration:none;font-size:1.05rem;white-space:nowrap}
.marque i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--p-argent-clair),var(--p-argent-2))}
.tete nav{display:flex;align-items:center;gap:22px;font-size:.95rem;font-weight:550}
.tete nav>a:not(.action){text-decoration:none;position:relative;padding:6px 0}
.tete nav>a:not(.action)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--sortie)}
.tete nav>a:hover::after,.tete nav>a[aria-current="true"]::after{transform:scaleX(1)}
@media (max-width:760px){.tete nav>a:not(.action){display:none}}

/* boutons : un point qui s'étend et remplit le bouton */
.bouton{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--sortie)}
.bouton.petit{padding:10px 18px;font-size:.92rem}
.action{background:var(--p-action);color:var(--p-action-txt)}
.action .point{width:10px;height:10px;border-radius:50%;background:var(--p-action-txt);flex:none;transition:transform .7s var(--sortie)}
.action .t{position:relative;z-index:1}
.action::before{content:"";position:absolute;left:24px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--p-action-txt);transform:scale(0);transition:transform .7s var(--sortie);z-index:0}
.action:hover::before,.action:focus-visible::before{transform:scale(60)}
.action:hover,.action:focus-visible{color:var(--p-action)}
.action:hover .point,.action:focus-visible .point{transform:scale(0)}
.secondaire{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.secondaire:hover{background:var(--ink);color:var(--fond)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* révélations */
.js .monte{opacity:0;transform:translateY(22px);transition:opacity .9s var(--sortie),transform .9s var(--sortie)}
.js .monte.vu{opacity:1;transform:none}

/* ouverture : le texte, puis la mère et ses dix services */
.haut{padding:calc(var(--hh) + clamp(48px,8vw,110px)) 0 clamp(50px,7vw,100px)}
.haut h1{font-size:clamp(2.9rem,8.4vw,8rem);font-weight:800;letter-spacing:-.04em;line-height:.9;font-stretch:88%;max-width:12ch;margin-bottom:.32em}
.haut h1 span{color:var(--argent)}
.haut .scene-c{margin-top:clamp(36px,5vw,64px)}

/* ce que ça vous apporte */
.apporte{padding-block:clamp(70px,9vw,140px);border-top:1px solid var(--trait)}
.apports{list-style:none;margin:clamp(30px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(24px,3vw,40px)}
.apports li{border-top:1px solid var(--argent);padding-top:16px}
.apports h3{font-size:1.3rem;font-weight:750;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px}
.apports p{color:var(--ink2);margin:0}

/* contact et signature */
.pied{padding:clamp(80px,11vw,160px) 0 40px;border-top:1px solid var(--trait)}
.pied h2{font-size:clamp(2.6rem,7vw,6.4rem);font-weight:800;letter-spacing:-.04em;line-height:.92;font-stretch:90%}
.pied .chapo{margin-top:22px}
.bas{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:70px;padding-top:18px;border-top:1px solid var(--trait);font-size:.86rem;color:var(--ink2)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}.js .monte{opacity:1;transform:none}}

/* mentions légales */
.legal{padding:calc(var(--hh) + clamp(48px,7vw,100px)) 0 clamp(60px,8vw,120px)}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:800;letter-spacing:-.04em;margin-bottom:.5em}
.legal h2{font-size:1.25rem;font-weight:750;letter-spacing:-.02em;margin:36px 0 10px}
.legal p{color:var(--ink2)}
.legal p a:not(.bouton){color:var(--ink)}


/* savoir-faire */
.savoir{padding-block:clamp(60px,8vw,120px);border-top:1px solid var(--trait)}
.points{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(24px,3vw,40px)}
.points li{border-top:1px solid var(--argent);padding-top:16px}
.points h3{font-size:1.25rem;font-weight:750;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px}
.points p{color:var(--ink2);margin:0}
/* la galerie : des onglets à pastille qui glisse, une grille qui se range */
.galerie{padding-block:clamp(60px,8vw,120px);border-top:1px solid var(--trait)}
.onglets{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:clamp(24px,3vw,36px) 0 clamp(24px,3vw,40px);isolation:isolate}
.onglets button{position:relative;z-index:1;display:inline-flex;align-items:baseline;gap:7px;padding:10px 16px;border-radius:999px;font-weight:700;font-size:.94rem;box-shadow:inset 0 0 0 1.5px var(--trait);transition:color .45s var(--sortie)}
.onglets button span{font-size:.8rem;font-weight:600}
.onglets button:hover{box-shadow:inset 0 0 0 1.5px var(--ink2)}
.onglets button[aria-selected="true"]{color:var(--p-action-txt);box-shadow:none}
.glisse{position:absolute;z-index:0;left:0;top:0;width:10px;height:10px;border-radius:999px;background:var(--p-action);transition:transform .55s var(--sortie),width .55s var(--sortie),height .55s var(--sortie)}
html:not(.js) .onglets{display:none}
html:not(.js) .carte-s[hidden]{display:block}
.grille-s{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,36px) clamp(14px,1.8vw,26px)}
.panneau-s:focus-visible{outline-offset:8px}
.carte-s[hidden]{display:none}
.carte-s a{display:grid;gap:12px;text-decoration:none}
.carte-s .vig{display:block;aspect-ratio:3/2;border-radius:2px;overflow:hidden;background:var(--p-fond-2)}
.carte-s img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.1s var(--sortie)}
.carte-s a:hover img,.carte-s a:focus-visible img{transform:scale(1.045)}
.carte-s b{font-size:1.18rem;font-weight:750;letter-spacing:-.02em}
.carte-s .txt{display:grid;gap:3px}
.carte-s .txt span{color:var(--ink2);font-size:.9rem;line-height:1.4}
.fictifs{margin-top:28px;font-size:.88rem;color:var(--ink2)}
@media (max-width:1000px){.grille-s{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grille-s{grid-template-columns:minmax(0,1fr)}.onglets button{padding:8px 13px;font-size:.88rem}}
@media (prefers-reduced-motion:reduce){.glisse,.carte-s img{transition:none}}

/* ——— la matière (2026-11-09, Thony : « on garde le noir premium avec argent et ambre ») : des fonds relevés, l'argent brossé ——— */
.haut h1 span{background:var(--p-argent-brosse);-webkit-background-clip:text;background-clip:text;color:transparent}
.marque i{background:var(--p-argent-brosse)}
.pied{background:var(--p-vif-doux);border-top:0}
.tete.plein::before{background:color-mix(in srgb,var(--p-fond) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.savoir{background:var(--p-vif-doux);border-top:0}
.points li{border-top-color:var(--p-vif)}