@font-face{font-family:"Times Sans Serif";src:url(/fonts/TimesSansSerif.woff) format("woff");font-display:swap}
@font-face{font-family:"Blackwood Castle";src:url(/fonts/BlackwoodCastle.woff) format("woff");font-display:swap}

:root{
  color-scheme:dark;
  --fond:#252C23; --texte:#C5C5C5; --violet:#901ABE; --mousse:#4A604E; --nuit:#302335; --menthe:#46D4A7;
  --u:min(1vw,12.5px);
  --sans:"Times Sans Serif","Times New Roman",Times,serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{background:var(--fond);scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;color:var(--texte);font:400 max(1rem,calc(var(--u)*1.5))/1.3 var(--sans)}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:url("/img/fond.webp") center/cover no-repeat}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.page{max-width:calc(var(--u)*100);margin:0 auto}
a{color:inherit}
a:hover{color:var(--menthe)}
a:focus-visible{outline:2px solid var(--menthe);outline-offset:-4px}
header{display:flex;align-items:center;height:calc(var(--u)*14.2);overflow:hidden;background:var(--fond)}
header img{height:100%;width:auto;align-self:flex-end;margin-left:5.5%;flex:none}
header h1{flex:1;margin:0 4.3% 0 1.3%;text-align:center;white-space:nowrap;font:400 calc(var(--u)*6.6)/1 "Blackwood Castle","Times New Roman",serif;color:var(--texte)}
nav{display:grid;grid-template-columns:repeat(4,1fr) auto;background:var(--mousse)}
nav a{display:block;text-align:center;text-decoration:none;padding:calc(var(--u)*1.3) 0;font-size:max(1rem,calc(var(--u)*2.1));letter-spacing:.06em;border-right:1px solid var(--fond)}
.langues{display:flex;align-items:center;justify-content:center;gap:.25em;padding:0 calc(var(--u)*1.8);font-size:max(.85rem,calc(var(--u)*1.6));letter-spacing:.04em}
.langues button{background:none;border:0;margin:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;padding:.35em .25em;opacity:.6}
.langues button[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:.3em}
.langues button:hover{opacity:1;color:var(--menthe)}
.langues button:focus-visible{outline:2px solid var(--menthe);outline-offset:1px}
nav a:hover{background:var(--violet);color:var(--texte)}
main{display:grid;grid-template-columns:72fr 28fr;min-height:calc(var(--u)*52)}
.accueil{background:linear-gradient(180deg,var(--nuit),var(--fond));padding:calc(var(--u)*4.4) calc(var(--u)*4.4) calc(var(--u)*4)}
.accueil h2{font:400 max(1.5rem,calc(var(--u)*3.2))/1.2 var(--sans);margin:0 0 calc(var(--u)*4.6)}
.accueil p{margin:0 0 calc(var(--u)*1.5);max-width:calc(var(--u)*60)}
aside{background:var(--fond);padding:calc(var(--u)*3) calc(var(--u)*2.2)}
aside h2{font:400 max(1.2rem,calc(var(--u)*2))/1.2 var(--sans);margin:0 0 calc(var(--u)*1.5)}
aside ul{list-style:none;margin:0;padding:0}
aside li{margin:0 0 1rem}
.ph{opacity:.7;font-size:.9em}
.panneau{background:linear-gradient(180deg,var(--nuit),var(--fond));padding:calc(var(--u)*4.4);min-height:calc(var(--u)*52)}
.page-titre{font:400 max(1.5rem,calc(var(--u)*3.2))/1.2 var(--sans);margin:0 0 calc(var(--u)*2.5)}
.liste{list-style:none;margin:0;padding:0;max-width:calc(var(--u)*70)}
.liste li{border-top:1px solid var(--mousse);padding:1rem 0}
.liste a{display:block;text-decoration:none}
.liste .t{display:block;font-size:max(1.2rem,calc(var(--u)*2))}
.liste .meta{display:block}
.liste a:hover .t{color:var(--menthe)}
.meta{opacity:.7;font-size:.9em;margin:0 0 1rem}
.retour{display:inline-block;margin-bottom:1.5rem}
.fiche{max-width:calc(var(--u)*60)}
.fiche img{display:block;max-width:100%;height:auto;margin:0 0 1.5rem}
.fiche p{margin:0 0 1.2em}
.fiche h3{font:400 1.5em/1.2 var(--sans);margin:1.8em 0 .6em}
.fiche blockquote{margin:1.5em 0;padding-left:1em;border-left:2px solid var(--menthe);font-style:italic}
.fiche .q{color:var(--menthe)}
.contact{max-width:calc(var(--u)*50)}
.contact label{display:block;margin:0 0 1.1rem}
.contact input,.contact textarea{display:block;width:100%;margin-top:.3rem;background:var(--fond);color:var(--texte);border:1px solid var(--mousse);padding:.6rem;font:inherit}
.contact textarea{min-height:10rem}
.contact input:focus-visible,.contact textarea:focus-visible{outline:2px solid var(--menthe)}
.err{color:var(--menthe);min-height:1.4em;margin:0 0 .5rem}
.envoi{display:inline-block;background:var(--mousse);padding:.6rem 1.8rem;text-decoration:none;letter-spacing:.06em;margin-bottom:1rem}
.envoi:hover{background:var(--violet);color:var(--texte)}
main.seul{grid-template-columns:1fr}
@media (max-width:700px){
  nav a{letter-spacing:.02em;font-size:.85rem}
  .langues{padding:0 .5rem}
  .panneau{padding:2rem 1.25rem}
  header{height:auto;flex-wrap:wrap;justify-content:center;padding-top:1rem}
  header img{height:28vw;margin-left:0}
  header h1{flex:1 1 100%;margin:.2em 3% .3em;white-space:normal;font-size:12vw}
  header img{order:2}
  header h1{order:1}
  main{grid-template-columns:1fr;min-height:0}
  .accueil{padding:2rem 1.25rem}
  .accueil h2{margin-bottom:1.5rem}
  aside{padding:1.5rem 1.25rem 2rem}
}

html[lang="fr"] [data-l="en"],html[lang="en"] [data-l="fr"]{display:none!important}
header h1 a{text-decoration:none;color:inherit}
header h1 a:hover{color:inherit}
button.envoi{border:0;color:inherit;font:inherit;letter-spacing:.06em;cursor:pointer}
.contact .meta a{white-space:nowrap;display:inline-block;font-size:min(1em,4.4vw)}
.contact .erreur{color:#ff9b9b;margin:1rem 0 0}
.commentaires{max-width:calc(var(--u)*60);margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--mousse)}
.commentaires h3{font:400 1.5em/1.2 var(--sans);margin:0 0 1rem}