/**
 * CSS DOCUMENT
**/
@font-face {
  font-family: 'Lora';
  src: url('Fonts/lora-italic.woff2') format('woff2'),
       url('Fonts/lora-italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Barlow';
  src: url('Fonts/Barlow-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Barlow';
  src: url('Fonts/Barlow-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'BarlowCnd';
  src: url('Fonts/BarlowCondensed-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'BarlowCnd';
  src: url('Fonts/BarlowCondensed-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'BarlowCnd';
  src: url('Fonts/BarlowCondensed-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

/* Fontello */
@font-face {
  font-family: 'pictos';
  src: url('Fonts/pictos.eot?78404900');
  src: url('Fonts/pictos.eot?78404900#iefix') format('embedded-opentype'),
       url('Fonts/pictos.woff2?78404900') format('woff2'),
       url('Fonts/pictos.woff?78404900') format('woff'),
       url('Fonts/pictos.ttf?78404900') format('truetype'),
       url('Fonts/pictos.svg?78404900#pictos') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'pictos';
    src: url('../font/pictos.svg?78404900#pictos') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "pictos";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-attention:before { content: '\e800'; } /* '' */
.icon-book:before { content: '\e801'; } /* '' */
.icon-ok-circled2:before { content: '\e802'; } /* '' */
.icon-search:before { content: '\e803'; } /* '' */
.icon-plus-circled:before { content: '\e804'; } /* '' */
.icon-minus-circled:before { content: '\e805'; } /* '' */
.icon-download:before { content: '\e806'; } /* '' */
.icon-down-dir:before { content: '\e807'; } /* '' */
.icon-up-dir:before { content: '\e808'; } /* '' */
.icon-left-dir:before { content: '\e809'; } /* '' */
.icon-right-dir:before { content: '\e80a'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */
.icon-menu:before { content: '\f0c9'; } /* '' */
.icon-instagram:before { content: '\f16d'; } /* '' */
.icon-facebook-squared:before { content: '\f308'; } /* '' */
.icon-linkedin-squared:before { content: '\f30c'; } /* '' */

/* ======================================================
   GLOBAL RESET
====================================================== */
*, html, body, iframe, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, table, th, td, audio, video { 
	margin:0; padding:0; outline:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; 
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img { display:block; }
table { border-collapse:collapse; border-spacing:0; }
table td { vertical-align:top; }
iframe, fieldset, img, a img { border:0 none; }
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; text-align:left; } 
h1, h2, h3, h5, h5, h6 { font-size:100%; }
blockquote::before, blockquote::after, q::before, q::after { content:''; content:none; }
html>body * a { position:relative; }  /* Gets links displaying over a PNG background */
a { outline:none; } /* Gets rid of Firefox's dotted borders */
textarea, table, td, th, code, pre, samp { 
  word-wrap: break-word; /* passage à la ligne forcé */
  -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* césure propre */
}
input, select { vertical-align:middle; }
ul li { margin:0; padding:0; list-style:none; }
ol li { margin:0; padding:0; list-style:none; }
strong, b { font-weight:700; }
em, i { font-style:italic; }
img { margin: auto; width: 100%; }
span { white-space: nowrap; }

/**------------------------------
 * GENERAL CLASSES and SETTINGS
--------------------------------**/
:root {
  --mainColor: #fff;
  --mainColorBg: #000;
  --grey: #a6a6a6;
  --lightGrey:#e5e5e5;
  --white: #FFFFFF;
  --black: #000000;
}

html { width:100%; /*height:100%;*/ font-family:'Barlow', Arial, Helvetica, sans-serif; font-size:110%; line-height:1.5; font-weight:400; }
body { position: relative; width: 100%; min-height:100%; color: var(--mainColor); background: var(--mainColorBg); text-align: left; }
h1 { margin: 1rem 0; font:500 2.5rem/1.2 'BarlowCnd', Arial, Helvetica, sans-serif; color:var(--grey); }
h2 { margin: 1rem 0; font:500 2.5rem/1.2 'BarlowCnd', Arial, Helvetica, sans-serif; color:var(--grey); }
h3 { margin: 1rem 0 0; font:600 1.2rem/1.1 'BarlowCnd', Arial, Helvetica, sans-serif; color:var(--mainColor); }
h4 { margin: 1rem 0 .5rem; font:400 1.2rem/1.1 'BarlowCnd', Arial, Helvetica, sans-serif; }
h5 { margin: 1rem 0 .5rem; font-size: 1rem; font-weight:700; line-height: 1.5; }
h6 { margin: 1rem 0 .5rem; font-size: 1rem; font-weight:700; line-height: 1.5; }
a { color: var(--mainColor); text-decoration: underline; }
a:hover, a:focus { color: var(--mainColor); text-decoration: underline; }
a[href ^= 'tel:'] { text-decoration: none; }
p { margin:1.5em 0; }
ul, ol { margin:0; }

/* ======================================================
   TRANSITIONS & ANIMATIONS
====================================================== */
a, button, .button, .toggle-menu, a.link-menu::after { transition: all ease-in-out 0.2s; }

/* ======================================================
   CLASSES GLOBALES and *
====================================================== */
.ctn-msg { margin:1em auto; max-width: 40rem; }
.success { margin:1em 0; padding:.5em 1em; font-style: italic; color:#0f0; border:2px solid #0f0; border-radius:.2em; background-color:inherit; }
.error { margin:1em 0; padding:.5em 1em; font-style: italic; color: #fff; border: 1px solid #e00; border-radius:.2em; background-color: #e00; }
.ctn-msg p, .text .ctn-msg p { margin:0 }
.responsive { position: relative; padding-top: 30px; padding-bottom:33%; height: 0; overflow: hidden; }
.responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.responsive img { margin:.5rem auto; width: 100%; height: auto; max-height: none; max-width: none; }
.lozad { opacity: 0; transition: opacity 1.5s ease-in-out; }
.loaded { opacity: 1; }
.more { text-transform: uppercase; white-space:nowrap; }
.button, a.button, button { display:inline-block; margin:1em; padding:1em 1.5em; width: fit-content; font:500 1em/1 'BarlowCnd', Arial, Helvetica, sans-serif; color: var(--mainColorBg); text-decoration:none; white-space:nowrap; background-color: var(--mainColor); border:1px solid var(--mainColor); border-radius:.2em; cursor:pointer; }
a.button:hover, a.button:focus, button:hover, button:focus { color:var(--mainColor); background-color:var(--mainColorBg); }
.clear-fix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.center { text-align:center; }
#go2top { display:none; position:fixed; bottom:5%; right:2%; margin: .5rem; padding: .5rem 0; width: 40px; height: 40px; font-size: 1rem; line-height: 1; color: var(--mainColor); text-align:center; background-color: rgba(255, 255, 255, .3); border: 1px solid var(--mainColor); border-radius:25px; opacity:.5; z-index:30; }
#go2top:hover { color: var(--white); background-color:var(--mainColor); opacity:1; }
#accesslinks { position: absolute; left: -999px; }

/* ======================================================
   FORMULAIRES
====================================================== */
form { margin: 1.5rem auto; max-width: 40rem; }
.fieldset { width: 100%; margin-bottom: 2rem; }
form p, form .line { clear:both; margin:1.5rem auto; text-align: left; }
form .form-blktxt .line { max-width: inherit; }
label { display:block; font-family: 'Barlow', Arial, Helvetica, sans-serif; font-size: 1rem; color: var(--grey); text-align: left; cursor:pointer; }
label span { white-space: inherit; }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="time"], textarea, select { padding:0.5rem 1rem; width: 100%; max-width: 20em; font-size: 1rem; line-height: 1.5; font-family: 'Barlow', Arial, Helvetica, sans-serif; color: var(--mainColor); background-color:rgba(255,255,255,.1); border:1px solid var(--grey); border-radius:.2em }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="time"]:focus, textarea:focus { color: var(--black); background-color:var(--mainColor); }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 1.2rem; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMTQuODMgMTYuNDJsOS4xNyA5LjE3IDkuMTctOS4xNyAyLjgzIDIuODMtMTIgMTItMTItMTJ6Ii8+PHBhdGggZD0iTTAtLjc1aDQ4djQ4aC00OHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4='); background-size: 1.2rem; background-repeat: no-repeat; background-position: calc(100% - .1rem) center; width:240px; margin:.25rem 0; }
input[type="radio"], input[type="checkbox"] { position: relative; display: inline-block; /* Add if not using autoprefixer */ -webkit-appearance: none; /* Remove most all native input styles */ appearance: none; /* For iOS < 15 */ background-color: var(--white); /* Not removed via appearance */ margin: 0 .5em 0 0; font: inherit; color: var(--grey); width: 22px; height: 22px; border: 1px solid var(--grey); border-radius: 50%; cursor: pointer; }
input[type="radio"]:checked, input[type="checkbox"]:checked { border-color: var(--grey); }
input[type="checkbox"] { border-radius: 0.15em; }
input[type="radio"]::before, input[type="checkbox"]::before { position: absolute; top: calc(50% - 5px); left: calc(50% - 5px); display: block; content: ""; width: 10px; height: 10px; transform: scale(0); transition: 120ms transform ease-in-out; }
input[type="radio"]::before { border-radius: 50%; background-color: var(--black); }
input[type="checkbox"]::before { clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform-origin: bottom left; box-shadow: inset 1em 1em var(--black); background-color: var(--black); }
input[type="radio"]:checked::before, input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="radio"]:focus, input[type="checkbox"]:focus { outline: 1px solid var(--mainColor); outline-offset: 0; }

textarea { width: 100%; max-width: inherit; height:10rem; }
.checkbox label { display:inline; }
.code-image { clear:both; text-align: left; }
form .code-image img { border:medium none; float:left; margin:0 1em 0 0; width:160px; border-radius:inherit; }
.code-image input { height:50px; width:160px; text-align:center; letter-spacing:0.3em; text-transform:uppercase; }
a.btn-reloadimgcode { display: inline-block; margin:.5em 1em; padding: .1em .5em; font-size: .75em; line-height: 1.3; color: var(--mainColor) !important; text-decoration: none; background-color: var(--mainColorBg); border:1px solid var(--mainColor); border-radius: .2em; text-align: center; }
a.btn-reloadimgcode:hover, a.btn-reloadimgcode:focus { color: var(--black) !important; background-color: var(--white); border-color: var(--mainColor); }
input[type="submit"] { display: inline-block; margin: 1em 0; padding:.5em 1em; font-weight:400; color: var(--mainColor); text-decoration:none; white-space:nowrap; background-color: var(--grey); border: 1px solid var(--grey); cursor:pointer; }
input[type="submit"]:hover, input[type="submit"]:focus { color:var(--white); background-color: var(--mainColorBg); }
form button { margin:1em 0; font-size:1.2em }
/* SPECIAL */
div.iti { display:block; }
div.iti__country-container { margin: 1px; z-index: 1; }
div.iti__country-container button { background-color:#1a1a1a; border-radius: .2em 0 0 .2em; }
div.iti__country-container button:focus-within { outline: 2px solid var(--mainColor); outline-offset: 0; }
input.iti input.iti__tel-input[type="tel"] { z-index:0 }
.iti__country-name { color: var(--black); }

/* ======================================================
   HEADER
====================================================== */
#header { position: fixed; top:0; width: 100%; height: auto; z-index: 10; }
#header .wrapper { padding:1rem 3%; background:linear-gradient(to bottom, var(--mainColorBg), transparent); }
#header.fixed .wrapper {  }
#header .inner { height: 100% }
#header .flex-grid { flex-flow: row nowrap; gap:2em; }
#header .flex-item { margin:auto auto 0; width:auto; flex-grow:1; z-index:2 }
#header .flex-item:nth-child(2) { text-align:right; }
h1#logo, a#logo { display:block; margin:1rem auto 2rem 0; width: fit-content; font-size:1em; line-height:1; color: var(--mainColor); white-space:nowrap; text-decoration:none; }
.logo-title { font:500 12vw/1 'BarlowCnd', arial, helvetica, sans-serif; }
.logo-subtitle { font:normal italic 1.25em/1 'Lora', times, serif; }

/* MENU */
button#toggle-menu { display:inline-block; position: relative; margin:1.5rem .5rem; padding:0; width: 36px; height: 36px; font-size: 1rem; font-weight:400; line-height: 1; color: var(--mainColor); background-color: inherit; border: none; text-align:center; }
button#toggle-menu:focus { color: var(--mainColor); }
button#toggle-menu::before { display:block; font-family: 'pictos'; content: '\f0c9'; font-size: 1.2rem; line-height: 1; font-weight:400; }
button#toggle-menu span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
#blk-menu { display: flex; flex-flow: column; justify-content: center; align-items: center; align-content: center; gap: 1em; position: absolute; top: 0; left: 0; width: 100vw; height:100vh; background-color: var(--mainColorBg); opacity: 0; visibility: hidden; transition: opacity .3s ease-in 0.2s, visibility .5s; z-index:3 }
#blk-menu li { opacity:0; transition: opacity .3s ease-in; }

ul.menu > li { display: block; margin: .5rem; }
ul.menu a { position: relative; display: inline-block; padding:.5rem; width: 100%; font-size:1.25em; line-height:1; font-weight:400; color:var(--mainColor); opacity:.75; text-decoration:none; white-space:nowrap; text-align:center; }
ul.menu li > a:hover, ul.menu li > a:focus, ul.menu li:focus-within > a, li.active > a { color:var(--mainColor); opacity:1 }
a.link-menu::after { display:block; position:absolute; bottom:0; left:0; width:0; height:2px; background-color:var(--mainColor); content:'' }
li.active a.link-menu::after, a.link-menu:hover::after, a.link-menu:focus::after { width:100% }
a.btn-close { font-size:.75em; text-decoration:none; }
a.btn-close::before { margin-right: .5em; font-family: 'pictos'; content: '\e809'; }
a.btn-close:hover, a.btn-close:focus { text-decoration:underline; }
/* Open menu */
#blk-menu.active { opacity:.85; visibility:visible; transition: visibility 0s, opacity .3s ease-out; }
#blk-menu.active li { opacity:1; transition: opacity .3s ease-out 0.2s; }

.blk-lang { padding: 0 1rem; font-size:.75rem; color:var(--grey) }
.blk-lang a { opacity: .75; text-decoration:none; }
.blk-lang a:hover, .blk-lang a:focus { opacity: 1; text-decoration:underline; }
.blk-lang span { color:var(--mainColor) }

/* ======================================================
   MAIN, CONTENT
====================================================== */
main { position:relative; z-index:1; }
section { position:relative; }
.wrapper { position:relative; margin:0; padding:0 3%; }
#content.wrapper { margin-top:calc(100vw - 2rem); padding-top:1px; padding-bottom:1px; background:linear-gradient(to bottom, transparent 0px, rgba(0,0,0,.85) 10em);  }
#content.wrapper.no-margin { margin-top:160px }
.inner { margin: 0 auto; max-width: 90rem; }
.flex-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-flow: row wrap; -webkit-box-pack: start; justify-content: flex-start; align-items: flex-start; align-content:flex-start; gap:2rem; }
.flex-item { width: 100%; flex-grow: 0; border-radius:1em; }
.text { margin: 0 auto 2rem 0; padding:0; }
.text video { max-width: 100%; }
.text p, .text ul { margin:1.5em auto; max-width:40rem }
.text h3, .text h4, .text h5 { margin: 1rem auto 0; max-width:40rem }
.text p:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.text ul li { margin:0.5rem 1rem; padding: 0 0.25rem; list-style:disc; }
.text ol li { margin:0.5rem 1rem; padding: 0 0.25rem; list-style:decimal; }
.text > div { margin:1.5em auto }
.text blockquote { margin: 0 auto; max-width: 40rem; padding: 0 2rem; font-family:"Lora", Georgia, serif; font-size: 1.5rem; line-height: 1.2; font-weight:normal; font-style:italic; color: var(--mainColor); }
.text blockquote em { font-size:1rem }
.ctn-table { overflow-x:auto; }
table { margin:1.5em 0; padding:0; width:100%;; }
td, th { padding:.5rem 1rem; text-align:right; border:2px solid var(--mainColor); }
td:first-child { text-align:left; }
.hero { position: fixed; top:0; width:100%; height:100vw }
.hero img { object-fit:cover; object-position:center; width:100%; height:100% }
.blk-content { margin:0 0 4rem }

/* HOMEPAGE */
.blk-news { margin:0 auto; padding:1em 1em 0; max-width:40rem; color: var(--black); background-color:var(--lightGrey); border:1em solid var(--white) }
.blk-news img { margin:0 auto 1em; max-width:360px; }
.blk-news h3 { margin:0 0 .3em; font-family: 'Lora', times, serif; font-size:1.5rem; font-weight:normal; color:var(--black); }
.blk-news .text { margin:0 0 1em }
.blk-citation blockquote { margin:0 auto; max-width:40rem; text-align:right; }
.blk-citation blockquote p { margin: 2em auto; font-family: 'Lora', times, serif; font-size:1.25rem; line-height: 1.4; font-weight:normal; font-style: italic; text-align: justify; text-justify: auto; word-break: break-word; hyphens: auto; }


/* SECTION FRONTPAGE */


/* SPECIFIC */
.flex-grid.agenda { margin:0 auto; max-width:60rem; flex-flow:column; gap:1.5em 0 }
.flex-grid.date { padding:0 0 1.5em; width:100%; align-items:baseline; gap:1em 3em; border-bottom:1px solid var(--grey); }
.flex-grid.date .flex-item { width:100% }
.flex-grid.date div.flex-item:nth-child(2) { width: auto; flex-grow:1 }
.flex-grid.date div.flex-item:last-child { width: auto; white-space:nowrap; align-self: last baseline; }
.flex-grid.date time { font:italic 1.2rem/1.1 "Lora", times, serif; white-space:nowrap; }
.flex-grid.date h3, .flex-grid.date h4 { margin:0 }

.flex-grid.collab { margin: 2rem auto; max-width: 60rem; gap:3em 1em; align-items: stretch; }
.flex-grid.collab a { margin: 0 auto; max-width: 320px; text-align: center; font-size:.8em; line-height: 1.2; text-decoration:none; }
.flex-grid.collab a:hover, .flex-grid.collab a:focus { text-decoration:none; }
.flex-grid.collab a img { object-fit:contain; object-position:center; width:100%; height:100%; margin:0 auto .5em; padding: 1em; max-width: 150px; max-height: 100px; background-color:var(--mainColor); border-radius:.2em; }
.flex-grid.media { margin:0 auto 4rem; max-width:60rem; justify-content: center; }
.flex-grid.media .flex-item { text-align: center; }
.flex-grid.media .flex-item.photo { position: relative; width:auto }
.flex-grid.media .flex-item.photo img { margin: auto; width: auto; height: 180px; border-radius:.5em; transition: opacity .3s ease-out; }
.flex-grid.media .flex-item.photo span { position:absolute; bottom:1em; left:50%; transform:translateX(-50%); padding: .25em .5em; font-size: .75em; background-color: rgba(0,0,0,.5); border:1px solid var(--white); }
.flex-grid.media a.photo:hover img { opacity:.5; transition: opacity .3s ease-out; }
.flex-grid.media .flex-item.cd img { object-fit:contain; object-position:center; margin: auto; width:100%; max-width: 360px; height: auto; aspect-ratio:1/1 }

a.lnk-spotify, a.lnk-amazon { display:inline-block; margin:.5em 1em; height:30px; width:fit-content; text-decoration:none; }
a.lnk-spotify img, a.lnk-amazon img { object-fit: contain; object-position: center; width: 100%; height:100% }

/* ======================================================
   FOOTER
====================================================== */
footer { position:relative; z-index:2 }
footer.wrapper { padding-top:1px; background-color:rgba(0,0,0,.85) }
footer .inner { padding-top:2rem; padding-bottom:2rem; text-align:center }
footer a { text-decoration:none; }
footer a:hover, footer a:focus { text-decoration:underline; }
.blk-dataprivacy { margin-bottom:1.5rem; font-size:.8rem; }
.copyright { font-size:.8rem; }
.signature { font-size:.8rem }
#blk-cookies { position: fixed; clear: both; padding: 1rem; bottom: 0; width: 100%; color: #fff; text-align: center; background-color: var(--white); box-shadow: 0 -10px 15px 1px rgba(0,0,0,.2); z-index: 101; }
a.btn-cookies-accept { display: inline-block; margin-left: .5rem; font-weight:500; color: var(--mainColor); background-color: #fff; }
a.btn-cookies-accept:hover, a.btn-cookies-accept:focus { color:#fff; background-color:var(--mainColor); }

.debug { display: none; }

/**=====================================================
   ECRANS taille moyenne : tablettes, petits notebooks
====================================================== */
@media (min-width:540px) {
  .logo-title { font-size:3em; }
}
@media (min-width:768px) {
  .flex-grid { gap:1.5rem 3%; }
  .flex-item { width: 48.5%; }
  .flex-grid.media { gap: 5rem 5%; }
  body.media div.flex-grid.media:first-child { gap:1.5rem 3%; }
  .flex-grid.media .flex-item { width:47.5% }
  .flex-grid.date {  flex-wrap:nowrap; gap:0 3em; }
  .flex-grid.date .flex-item { width:9rem }
  .blk-news img { float:left; margin:0 1em 1em 0; width:32%; }
  .debug { display: block; position:relative; z-index:200 } 
}


/**=====================================================
   ECRANS + grands
====================================================== */
@media (min-width:1280px) {
    h1 { font-size:2.5rem }
    h2 { font-size:2.5rem }
    h3, h4 { font-size:1.5rem }
    .flex-item { width: calc(94% / 3); }
    .flex-grid.media .flex-item { width:calc(90% / 3) }
    .flex-grid.media .flex-item.video { width:47.5% }
    .blk-img { height:16vw; }
    button#toggle-menu { display:none; }
    #blk-menu { display:block; position:relative; top:inherit; left:inherit; right:inherit; padding:1rem 1.5rem; width: auto; height: auto; background-color:transparent; opacity: 1; visibility: visible; }
    #blk-menu li { opacity:1 }
    ul.menu > li { display: inline-block }
    .backandlang { display:none; }
    .blk-lang { padding: 0 3rem }
    a.lnk-spotify, a.lnk-amazon { height:40px }
    .flex-grid.media .flex-item.photo img { height: 240px }
    .flex-grid.date time { font-size:1.3rem }
}
@media (min-width:1400px) {
    html { font-size:115%; }
    #content.wrapper.no-margin { margin-top:170px }
}
@media (min-width:1600px) {
    html { font-size:125%; }
    #content.wrapper.no-margin { margin-top:185px }
    .flex-grid.media .flex-item.cd img { max-width:contain }
}
@media (min-width:2000px) {
    html { font-size:150%; }
    #content.wrapper.no-margin { margin-top:220px }
}

/**=====================================================
   ORIENTATION PAYSAGE UNIQUEMENT
====================================================== */
@media (orientation: landscape) {
  .hero { height:100vh }
  #content.wrapper { margin-top:75vh; }
}