/* Base commune au catalogue et au studio : polices, couleurs, boutons, champs de formulaire.
   Toutes les couleurs du site sont ici ; les feuilles de chaque page n'utilisent que ces jetons. */
/* Polices hébergées avec le site : aucune requête vers un service tiers */
@font-face{font-family:"Archivo";font-style:normal;font-weight:700 900;font-stretch:75% 100%;font-display:swap;src:url(fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700 900;font-stretch:75% 100%;font-display:swap;src:url(fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/hanken-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Polices de secours calibrées sur la largeur d'Archivo et de Hanken Grotesk : le texte occupe la même place
   avant et après le chargement, la page ne saute pas. Une face par plage de largeur utilisée. */
@font-face{font-family:"Archivo Fallback";font-weight:700 900;font-stretch:75% 79%;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:88.5%;ascent-override:99.2%;descent-override:23.7%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";font-weight:700 900;font-stretch:79% 83%;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:90.8%;ascent-override:96.7%;descent-override:23.1%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";font-weight:700 900;font-stretch:83% 86.5%;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:93%;ascent-override:94.4%;descent-override:22.6%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";font-weight:700 900;font-stretch:86.5% 90%;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:93.5%;ascent-override:93.9%;descent-override:22.5%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";font-weight:700 900;font-stretch:90% 96%;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:96.9%;ascent-override:90.6%;descent-override:21.7%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";font-weight:700 900;font-stretch:96% 100%;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:101.5%;ascent-override:86.5%;descent-override:20.7%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";font-weight:400 500;src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:100.2%;ascent-override:99.8%;descent-override:30.2%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";font-weight:600 700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");size-adjust:94.4%;ascent-override:105.9%;descent-override:32.1%;line-gap-override:0%}

:root{
  color-scheme:light dark;
  /* Encres de base, reprises de la sublimation */
  --magenta:#B3125F; --magenta-deep:#940E4E; --magenta-night:#8E0F4F; --magenta-lit:#C2186B; --magenta-glow:#FF7DBA;
  --yellow:#FFE45C; --yellow-deep:#FFD426;
  --ink:#1A1320; --paper:#FFFFFF;

  /* Rôles, thème clair */
  --bg:var(--paper); --surface:#F4F0F3; --surface-2:#EAE3E8; --surface-soft:#FAF7F9;
  --text:var(--ink); --text-2:#5E5360; --text-3:#6B606C;
  --line:#E7E0E5;          /* filets décoratifs */
  --line-strong:#8A7E88;   /* bordures de champs : 3,9 pour 1 sur fond clair */
  --accent:var(--magenta); --accent-hover:var(--magenta-deep); --on-accent:#FFFFFF; --on-accent-2:#FBDDEA;
  --accent-text:var(--magenta);   /* magenta posé en texte : prix, liens, repères */
  --hero-bg:var(--magenta);
  --spark:var(--yellow); --spark-hover:var(--yellow-deep); --on-spark:var(--ink);
  --soft:#FCEAF2; --on-soft-2:#5A3A4A;
  --foot-bg:var(--ink); --foot-text:#C9BEC6; --foot-strong:#FFFFFF;
  --err:#B03A0A;
  --focus:var(--accent-text); --focus-on-color:#FFFFFF; --on-accent-line:rgba(255,255,255,.55);
  --photo-scrim:rgba(26,19,32,.8);
  --scrim:rgba(26,19,32,.6); --shadow-dialog:0 30px 80px rgba(26,19,32,.35); --shadow-kit:0 28px 34px rgba(58,4,30,.45);
  --kit-shade:#3A041E;
  /* Maillots de démonstration du bandeau : couleurs de club, identiques dans les deux thèmes */
  --kit-white:#FFFFFF; --kit-red:#D62839; --kit-turquoise:#19C3A6; --kit-navy:#0E1B4D; --kit-black:#15151C; --kit-gold:#E8B021;
  --kit-royal:#1F4FD1; --kit-green:#138A4B; --kit-yellow:#FFE45C;
  /* Visualiseur : ombrage et matières des gabarits, identiques dans les deux thèmes */
  --viz-shade:#1A0710; --viz-wood:#9A6B3F; --viz-metal:#8C8C94; --viz-jute:#CDB38A;
  /* Motif sublimé des visuels à venir */
  --motif-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M-20 330 420 120v80L-20 410z' fill='%231A1320' fill-opacity='.045'/%3E%3Cpath d='M-20 436 420 226v14L-20 450z' fill='%231A1320' fill-opacity='.06'/%3E%3C/svg%3E");
  --motif-accent:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M-20 330 420 120v80L-20 410z' fill='%23B3125F' fill-opacity='.12'/%3E%3Cpath d='M-20 436 420 226v14L-20 450z' fill='%23B3125F' fill-opacity='.2'/%3E%3C/svg%3E");

  --f-head:"Archivo", "Archivo Fallback", Arial, sans-serif;
  --f-body:"Hanken Grotesk", "Hanken Fallback", Arial, sans-serif;
  --r:3px; --ease:cubic-bezier(.16,1,.3,1);
}
/* Thème sombre : surfaces violet-noir et magenta éclairci pour rester lisible sur fond sombre */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141016; --surface:#1F1922; --surface-2:#2B232E; --surface-soft:#19141B;
    --text:#F5EFF3; --text-2:#C8BCC5; --text-3:#A89BA5;
    --line:#2E2631; --line-strong:#85778A;
    --accent:var(--magenta-lit); --accent-hover:var(--magenta);
    --accent-text:var(--magenta-glow);
    --hero-bg:var(--magenta-night);
    --soft:#2A1522; --on-soft-2:#DCC6D2;
    --foot-bg:#0C090E; --foot-text:#C8BCC5;
    --err:#FF9270;
    --photo-scrim:rgba(12,9,14,.82);
    --scrim:rgba(0,0,0,.66); --shadow-dialog:0 30px 80px rgba(0,0,0,.6); --shadow-kit:0 28px 34px rgba(0,0,0,.5);
    --kit-shade:#000000;
    --motif-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M-20 330 420 120v80L-20 410z' fill='%23FFFFFF' fill-opacity='.04'/%3E%3Cpath d='M-20 436 420 226v14L-20 450z' fill='%23FFFFFF' fill-opacity='.06'/%3E%3C/svg%3E");
    --motif-accent:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M-20 330 420 120v80L-20 410z' fill='%23FF7DBA' fill-opacity='.1'/%3E%3Cpath d='M-20 436 420 226v14L-20 450z' fill='%23FF7DBA' fill-opacity='.18'/%3E%3C/svg%3E");
  }
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scrollbar-color:var(--line-strong) var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
body:has(dialog[open]){overflow:hidden}
::selection{background:var(--spark);color:var(--on-spark)}
input,textarea{caret-color:var(--accent-text)}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em}
p{text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--f-head);margin:0;color:var(--text);text-wrap:balance}
/* Colonne du site : 1320 px de contenu, retrait intérieur de 24 px (16 px sur mobile) */
.wrap{max-width:1368px;margin-inline:auto;padding-inline:24px}
@media (max-width:600px){.wrap{padding-inline:16px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 16px;background:var(--accent);color:var(--on-accent);border-radius:var(--r);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.skip:focus-visible{outline-color:var(--text)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1.5px solid transparent;border-radius:var(--r);font:700 15px/1 var(--f-body);text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-spark{background:var(--spark);color:var(--on-spark)}
.btn-spark:hover{background:var(--spark-hover)}
.btn-line{background:var(--bg);color:var(--text);border-color:var(--text)}
.btn-line:hover{background:var(--text);color:var(--bg)}
.btn[disabled]{opacity:.6;cursor:progress}

/* Champs de formulaire */
.req{color:var(--accent-text)}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f.full{grid-column:1 / -1}
.f>span,.f-lbl{font:600 14px var(--f-body)}
.f input,.f textarea{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--bg);color:var(--text);font:400 16px var(--f-body)}
.f input[type=date]{accent-color:var(--accent)}
.sel{position:relative;display:block}
.sel::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:translateY(-75%) rotate(45deg);pointer-events:none}
.f select{width:100%;min-height:48px;padding:11px 44px 11px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--bg);color:var(--text);font:400 16px var(--f-body);-webkit-appearance:none;appearance:none;cursor:pointer}
.f select:invalid{color:var(--text-3)}
.f select option,.f select optgroup{background:var(--bg);color:var(--text)}
.f select:focus{border-color:var(--accent-text)}
.f textarea{min-height:104px;resize:vertical}
.f input:focus,.f textarea:focus{border-color:var(--accent-text)}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick label{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pick b{display:flex;align-items:center;min-height:46px;padding:10px 16px;border:1.5px solid var(--line-strong);border-radius:var(--r);font:600 15px/1.25 var(--f-body);background:var(--bg);transition:border-color .15s,background-color .15s,color .15s}
.pick label:hover b{border-color:var(--accent-text)}
.pick input:checked+b{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.pick input:focus-visible+b{outline:3px solid var(--focus);outline-offset:2px}
.file{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 12px 6px 6px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--bg);cursor:pointer}
.file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.file:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.file:hover{border-color:var(--accent-text)}
.file-btn{flex:none;padding:9px 12px;border-radius:var(--r);background:var(--surface);font:600 14px/1 var(--f-body);color:var(--text)}
.file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--text-2)}
.f small{font-size:12.5px;color:var(--text-2)}