/* =========================================================================
   voxfy.fr — direction « Load-in »
   =========================================================================

   La page est une feuille de salle : un rail d'etiquettes a gauche, le texte
   au centre, les donnees a droite. Trois pistes, une seule grille, reprise a
   l'identique de l'accueil aux pages interieures.

   Le theme suit le meme motif partout : les jetons clairs sont declares sur
   « :root », redefinis une fois pour le sombre systeme et une fois pour le
   sombre choisi. Aucune couleur n'est ecrite ailleurs que dans ces trois
   blocs, sans quoi une des deux lectures se retrouve avec le texte d'un
   theme sur le fond de l'autre.

   Le pied de page est un pave sombre dans les deux themes : il a donc ses
   propres jetons, sinon il s'inverse avec le reste et devient illisible.
   ========================================================================= */

:root{
  color-scheme: light;

  --ground:#F2EDE9;
  --ground-2:#E7DFDA;
  --ink:#23191B;
  --ink-2:#4E4044;
  --muted:#7A6A6C;
  --rule:#DCD2CE;
  --rule-2:#C2B3AE;
  --wine:#8A2F4A;
  --wine-2:#6E2339;
  --on-wine:#FFFFFF;

  /* Le pave de fin, sombre dans les deux themes. */
  --end-bg:#23191B;
  --end-ink:#FFFFFF;
  --end-ink-2:#B5A6A9;
  --end-muted:#8A7B7E;
  --end-rule:#3A2E31;
  --end-accent:#E0A8B8;
  --end-hover:#332629;

  --font-d:"Fraunces",Georgia,"Times New Roman",serif;
  --font-b:"Figtree",Helvetica,Arial,sans-serif;
  --font-m:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --gut:20px;
  --rail:210px;
  --alley:0px;
  --side:260px;
  --text:1080px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;

    --ground:#1A1315;
    --ground-2:#241B1E;
    --ink:#F0E8E5;
    --ink-2:#C6B7B3;
    --muted:#9B8A8C;
    --rule:#33272A;
    --rule-2:#4A3A3E;
    --wine:#E08199;
    --wine-2:#EFA0B3;
    --on-wine:#23191B;

    --end-bg:#241B1E;
    --end-ink:#F5EEEB;
    --end-ink-2:#C0B1AD;
    --end-muted:#948386;
    --end-rule:#3D3034;
    --end-accent:#E8A3B5;
    --end-hover:#332629;
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;

  --ground:#1A1315;
  --ground-2:#241B1E;
  --ink:#F0E8E5;
  --ink-2:#C6B7B3;
  --muted:#9B8A8C;
  --rule:#33272A;
  --rule-2:#4A3A3E;
  --wine:#E08199;
  --wine-2:#EFA0B3;
  --on-wine:#23191B;

  --end-bg:#241B1E;
  --end-ink:#F5EEEB;
  --end-ink-2:#C0B1AD;
  --end-muted:#948386;
  --end-rule:#3D3034;
  --end-accent:#E8A3B5;
  --end-hover:#332629;
}

/* --- socle ---------------------------------------------------------------- */

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--font-b);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--wine);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--ground);padding:12px 20px;
  font-family:var(--font-m);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}
.skip:focus{left:0}

.wrap{
  width:100%;margin:0 auto;padding:0 var(--gut);
  max-width:calc(var(--rail) + var(--alley) + var(--text) + var(--alley) + var(--side));
}
.bi{display:grid;grid-template-columns:1fr;row-gap:12px}
.lab{
  font-family:var(--font-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}
.measure{max-width:66ch}

/* --- en-tete -------------------------------------------------------------- */

.top{padding:34px 0 0}
.top .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sig{font-family:var(--font-d);font-weight:700;font-size:20px;letter-spacing:-.012em}
.top-right{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.top nav{display:flex;gap:30px;font-size:15px;color:var(--muted)}
.top nav a{padding-bottom:2px;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.top nav a:hover{color:var(--ink);border-color:var(--rule-2)}
.top nav a[aria-current="page"]{color:var(--ink);border-color:var(--wine)}

.bascule{
  background:none;border:1px solid var(--rule-2);border-radius:999px;
  color:var(--muted);cursor:pointer;
  font-family:var(--font-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 13px;line-height:1.4;
  transition:color .15s,border-color .15s,background .15s;
}
.bascule:hover{color:var(--ink);border-color:var(--ink);background:var(--ground-2)}

/* --- accueil : ouverture -------------------------------------------------- */

.hero{padding:56px 0 72px}
.hello{
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--wine);margin-bottom:24px;
}
.hero h1{
  font-family:var(--font-d);font-optical-sizing:auto;font-weight:900;
  font-size:clamp(2.4rem,5.4vw,4.8rem);line-height:1.03;letter-spacing:-.03em;
  max-width:17ch;margin-bottom:40px;text-wrap:balance;
}
.hero h1 em{font-style:italic;font-weight:600;color:var(--wine)}
.hero p{font-size:clamp(1.06rem,1.3vw,1.24rem);color:var(--ink-2);max-width:54ch;margin-bottom:18px}
.acts{display:flex;gap:34px;flex-wrap:wrap;margin-top:38px;align-items:center}
.act-solid{
  background:var(--wine);color:var(--on-wine);font-weight:600;font-size:15.5px;
  padding:15px 30px;transition:background .16s;
}
.act-solid:hover{background:var(--wine-2)}
.act-text{
  font-weight:500;font-size:15.5px;border-bottom:2px solid var(--rule-2);
  padding-bottom:3px;transition:border-color .16s;
}
.act-text:hover{border-color:var(--ink)}

.aside{margin-top:44px}
.portrait{position:relative;width:fit-content;max-width:100%}
.portrait img{width:100%;max-width:300px;box-shadow:0 30px 60px -34px rgba(35,25,27,.5)}
.portrait figcaption{
  position:absolute;left:-16px;bottom:18px;background:var(--ink);color:var(--ground);
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 12px;border-radius:2px;
}
.now{margin-top:34px;border-top:1px solid var(--rule);max-width:300px}
.now dt{
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rule-2);padding-top:16px;
}
.now dd{font-size:14.5px;color:var(--ink-2);line-height:1.5;padding-bottom:2px}

/* --- pages interieures : ouverture ---------------------------------------- */

.phead{padding:52px 0 8px}
.phead h1{
  font-family:var(--font-d);font-weight:900;
  font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.03em;
  margin-bottom:22px;max-width:20ch;text-wrap:balance;
}
.phead h1 em{font-style:italic;font-weight:600;color:var(--wine)}
.phead .measure p{color:var(--ink-2);font-size:clamp(1.02rem,1.2vw,1.16rem);margin-bottom:16px}
.phead .measure p:last-child{margin-bottom:0}

/* --- bloc de texte courant ------------------------------------------------ */

.field{border-top:1px solid var(--rule);padding:70px 0}
.field p{color:var(--ink-2);margin-bottom:20px}
.field p:last-child{margin-bottom:0}
.field h2{
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);
  letter-spacing:-.024em;line-height:1.18;margin-bottom:20px;
}

/* --- la setlist ----------------------------------------------------------- */

.set{border-top:1px solid var(--rule);padding:70px 0 0}
.set-h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.set-h h2{
  font-family:var(--font-d);font-weight:900;font-size:clamp(1.9rem,3.2vw,2.9rem);
  letter-spacing:-.028em;line-height:1.06;
}
.set-h p{
  font-family:var(--font-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.set-list{margin-top:26px}

.track{border-top:1px solid var(--rule);padding:44px 0 40px}
/* Premiere piste de la grille du morceau : sa place suffit a la placer.
   La regle existe pour le dire, et pour que min-width:0 empeche un titre
   long d'elargir la colonne au lieu de se couper. */
.t-lead{min-width:0}
.t-head{display:flex;align-items:baseline;gap:14px}
.t-no{font-family:var(--font-m);font-size:12.5px;color:var(--rule-2);font-variant-numeric:tabular-nums}
.t-name{
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.45rem,2.4vw,2.05rem);
  letter-spacing:-.024em;line-height:1.1;
}
.t-role{
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:8px;
}
.t-body{margin-top:20px}
.t-desc{font-size:16px;color:var(--ink-2);line-height:1.66;margin-bottom:15px;max-width:60ch}
.t-note{
  font-size:14.5px;color:var(--muted);font-style:italic;line-height:1.6;
  border-left:2px solid var(--rule-2);padding-left:15px;margin-top:22px;max-width:54ch;
}
.t-stack{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;list-style:none}
.t-stack li{
  font-family:var(--font-m);font-size:10.5px;color:var(--muted);
  background:var(--ground-2);border-radius:999px;padding:4px 12px;
}
.t-side{margin-top:26px}
.t-side dt{
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rule-2);margin-bottom:8px;
}
.t-side dd{margin-bottom:22px}
.t-side dd:last-child{margin-bottom:0}
.t-year{font-family:var(--font-m);font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.t-links{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.t-links a{
  font-size:14.5px;color:var(--wine);border-bottom:1px solid var(--rule-2);
  padding-bottom:2px;transition:border-color .15s;
}
.t-links a:hover{border-color:var(--wine)}

/* --- archives ------------------------------------------------------------- */

.more{border-top:1px solid var(--rule);padding:64px 0 0}
.more h3{font-family:var(--font-d);font-weight:700;font-size:1.32rem;margin-bottom:8px}
.more .intro{color:var(--muted);font-size:15.5px;margin-bottom:26px;max-width:56ch}
.more dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px 48px}
.more dt{font-family:var(--font-d);font-weight:700;font-size:16px;margin-bottom:4px}
.more dd{font-size:14.5px;color:var(--muted);line-height:1.55}
.more dd a{color:var(--wine);border-bottom:1px solid var(--rule-2)}

/* --- a propos ------------------------------------------------------------- */

.bio{border-top:1px solid var(--rule);margin-top:64px;padding:70px 0 0}
.bio h2{
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.55rem,2.6vw,2.2rem);
  letter-spacing:-.026em;line-height:1.18;margin-bottom:28px;max-width:20ch;text-wrap:balance;
}
.bio p{color:var(--ink-2);margin-bottom:18px;max-width:62ch}
.bio strong{font-weight:600;color:var(--ink)}
.pull{
  font-family:var(--font-d);font-style:italic;font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.34;color:var(--wine);
  border-left:2px solid var(--wine);padding-left:26px;margin:40px 0;max-width:28ch;
}

/* --- formulaire ----------------------------------------------------------- */

.form{display:flex;flex-direction:column;gap:20px;max-width:34rem}
.form .avis{
  font-size:14.5px;color:var(--muted);border-left:2px solid var(--rule-2);
  padding-left:15px;line-height:1.55;
}
.champ{display:flex;flex-direction:column;gap:7px}
.champ label{
  font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}
.champ input,.champ select,.champ textarea{
  font-family:var(--font-b);font-size:16px;line-height:1.5;color:var(--ink);
  background:var(--ground-2);border:1px solid var(--rule);border-radius:3px;
  padding:12px 14px;width:100%;
  transition:border-color .15s,background .15s;
}
.champ textarea{resize:vertical;min-height:9rem}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  border-color:var(--wine);background:var(--ground);
}
.form button{
  align-self:flex-start;cursor:pointer;border:none;
  background:var(--wine);color:var(--on-wine);
  font-family:var(--font-b);font-weight:600;font-size:15.5px;
  padding:15px 30px;transition:background .16s;
}
.form button:hover{background:var(--wine-2)}

.direct{margin-top:44px;border-top:1px solid var(--rule);padding-top:26px;max-width:34rem}
.direct p{color:var(--ink-2);font-size:15.5px;margin-bottom:14px}
.direct .adresse{
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.6rem);
  letter-spacing:-.02em;color:var(--wine);
  border-bottom:2px solid var(--rule-2);padding-bottom:3px;display:inline-block;
  transition:border-color .15s;
}
.direct .adresse:hover{border-color:var(--wine)}

/* --- texte long (mentions legales) ---------------------------------------- */

.prose{max-width:66ch}
.prose h2{
  font-family:var(--font-d);font-weight:700;font-size:1.24rem;letter-spacing:-.018em;
  margin:40px 0 12px;
}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-2);margin-bottom:14px;font-size:16px}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--wine);border-bottom:1px solid var(--rule-2)}
.prose a:hover{border-color:var(--wine)}

/* --- 404 ------------------------------------------------------------------ */

.perdu{padding:80px 0 40px}
.perdu .code{
  font-family:var(--font-m);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--wine);margin-bottom:22px;
}
.perdu h1{
  font-family:var(--font-d);font-weight:900;font-size:clamp(2.1rem,5vw,3.8rem);
  line-height:1.05;letter-spacing:-.03em;margin-bottom:24px;max-width:16ch;text-wrap:balance;
}
.perdu p{color:var(--ink-2);max-width:52ch;margin-bottom:16px}

/* --- pave de fin ---------------------------------------------------------- */

.end{margin-top:80px;background:var(--end-bg);color:var(--end-ink)}
.end .wrap{padding-top:80px;padding-bottom:70px}
.end h2{
  font-family:var(--font-d);font-weight:900;font-size:clamp(1.7rem,3.2vw,2.7rem);
  letter-spacing:-.03em;line-height:1.14;max-width:18ch;margin-bottom:26px;text-wrap:balance;
}
.end h2 em{font-style:italic;font-weight:600;color:var(--end-accent)}
.end p{color:var(--end-ink-2);max-width:56ch;margin-bottom:18px}
.end .lab{color:var(--end-muted)}
.mail{
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.2rem,2.4vw,2rem);
  letter-spacing:-.02em;color:var(--end-ink);
  border-bottom:2px solid var(--end-accent);padding-bottom:4px;
  display:inline-block;margin-top:14px;transition:color .15s,border-color .15s;
}
.mail:hover{color:var(--end-accent)}
.foot{
  display:flex;gap:40px;flex-wrap:wrap;margin-top:60px;
  border-top:1px solid var(--end-rule);padding-top:24px;
  font-family:var(--font-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--end-muted);
}
.foot a{color:var(--end-ink-2);transition:color .15s}
.foot a:hover{color:var(--end-accent)}

/* --- A partir d'ici la page passe sur ses trois pistes. ------------------- */

@media (min-width:1080px){
  :root{--gut:40px;--alley:56px}
  .bi{grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--alley);row-gap:0}
  .indent{padding-left:calc(var(--rail) + var(--alley))}
  .hero{padding:80px 0 96px}
  /* Les deux colonnes de l'ouverture n'ont pas la meme hauteur, et c'est tres
     bien : les boutons restent colles au texte qu'ils suivent, et la colonne
     de gauche s'arrete la ou elle a fini de parler. Pousser les boutons en bas
     pour combler le vide a ete essaye : le trou passe simplement du bas de la
     colonne au milieu, entre le texte et son appel, et se voit davantage. */
  .hero-cols{display:grid;grid-template-columns:minmax(0,1fr) var(--side);column-gap:var(--alley);align-items:start}
  .aside{margin-top:0}
  .track{
    display:grid;grid-template-columns:var(--rail) minmax(0,1fr) var(--side);
    column-gap:var(--alley);padding:54px 0 50px;
  }
  .t-body{margin-top:0}
  .t-side{margin-top:0}
  .field,.set,.more,.bio{padding-top:88px}
  .field{padding-bottom:88px}
  .phead{padding:72px 0 8px}
  .perdu{padding:110px 0 60px}
}
@media (min-width:1500px){
  :root{--gut:64px;--rail:250px;--alley:72px;--side:290px;--text:1000px}
  body{font-size:18px}
}
@media (min-width:1900px){
  :root{--gut:80px;--rail:290px;--alley:88px;--side:310px;--text:1080px}
}
@media (max-width:1079px){
  .portrait figcaption{left:14px}
}

/* --- finitions ------------------------------------------------------------ */

/* Les liens au fil du texte : soulignes par un trait sourd qui se colore au
   survol, comme les liens des fiches projet. */
.lien,
.bio p a,
.field p a,
.more dd a,
.phead p a{
  color:var(--wine);border-bottom:1px solid var(--rule-2);
  transition:border-color .15s;
}
.lien:hover,
.bio p a:hover,
.field p a:hover,
.more dd a:hover,
.phead p a:hover{border-color:var(--wine)}

.direct .apres{margin-top:22px}

/* Pied de page des pages qui n'ont rien a proposer en sortie : le pave sombre
   se reduit a sa seule ligne de liens, sinon il s'ouvre sur 140px de vide. */
.end--court .wrap{padding-top:40px;padding-bottom:40px}
.end--court .foot{margin-top:0;border-top:none;padding-top:0}