/* --------------------------------------------------------------------
  CNSA.FR
  Main style-sheet
  Le Studio Worldline, 2023
-------------------------------------------------------------------- */
/* @import 'vars.css'; */

/* INDEX:
- RESET
- DEFAULTS
- PAGE STRUCTURE and GRIDS
  - Header
  - Footer
- NAVIGATION
- TABLES
- FORMS
- BUTTONS AND ENTRY LINKS
- EDITORIAL
- DATA BLOCKS
- UTILITIES
- SPECIFICS
*/

/* ------------------------------ RESET ---------------------------- */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,aside,article,blockquote,pre,
  a,abbr,address,big,cite,code,del,dfn,em,form,header,img,ins,kbd,main,nav,
  q,s,samp,section,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,
  fieldset, figure, figcaption,form,footer,label,
      legend,table,caption,tbody,tfoot,thead,tr,th,td {
  margin: 0;
  padding: 0;
  border: 0;
}

/* ------------------------------ DEFAULTS ---------------------------- */

html {
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
}


body {
  position: relative;
  height: 100%;
  font: 100%/1.2 var(--stack);
  color: var(--body-text);
  background-color: var(--body-bg);
}

:focus-visible, .tab:focus-visible,
  .tab:focus-visible:not(.tab--disabled) {
  outline-width: 2px solid var(--focus-color);
  outline-offset: 2px;
}
[role=tabpanel]:focus-visible {
  outline-width: 1px;
  outline-offset: -1px;
}

h2, h3, h4, h5 {
  font-family: var(--stack-h);
  font-variation-settings: var(--fvs-bold);
  line-height: 1.4;
  color: var(--body-text);
}

h2 {font-size: 1.18em;}
h1 span {
  display: block;
  font-size: 80%;
  font-variation-settings: var(--fvs-medium);
  margin-bottom: 0.25em;
}

p, li, dt, dd, h5, th, td {
  font-size: 0.9em;
}
li li, li p, li dt, li dd {
  font-size: 100%;
}
li li {
  list-style-type: disc;
}

a {
  color: var(--interaction-color);
  text-decoration: underline;
  text-underline-offset: .2em;
}
a:visited {
  color: var(--body-text);
}

a[target="_blank"]::after {
  display: inline-block;
  overflow: hidden;
  content: "";
  width: 1em;
  height: 1em;
  text-indent: 50em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: 0 0.1em;
  background-repeat: no-repeat;
  margin-left: 0.3em;
}


button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  font: 100%/1.5 var(--stack);
  color: var(--text-inv);
  background-color: var(--interaction-color);
  padding: 0.5em 1em;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

button:hover {
  background-color: var(--button-hover);
}

button[disabled] {
  filter: grayscale(100%) opacity(40%);
  cursor: initial;
}

strong, b {
  font-family: inherit;
  font-variation-settings: var(--fvs-bold);
  font-weight: normal;
}

em, i {
  font-family: inherit;
  font-style: normal;
}

img {
  max-width: 100%;
  border: none;
  border-radius: calc(var(--radius) / 2);
  vertical-align: bottom;
}

svg {pointer-events: none;}

abbr {cursor: help;}

video {
  width: 100%;
  background-color: var(--body-bg);
  border: 1px solid var(--n-light);
}

blockquote {
  position: relative;
  max-width: 30em;
  padding: 2rem;
  margin: 3rem 0 3rem 2rem;
  background-image: url(../img/curbe-left.svg);
  background-size: cover;
  background-position-y: -51px;
}
blockquote p:not(.author) {
  font: 130%/1.4 var(--stack);
  font-variation-settings: var(--fvs-semibold);
}
div.e-content blockquote p:not(.author) {
  line-height: 1.5;
}

blockquote::before {
  display: block;
  position: absolute;
  left: -9px;
  top: 0;
  content: "\201C";
  font: 5rem var(--stack);
}

figcaption {
  position: relative;
  font-size: 0.95em;
  padding: 0.5rem 1rem 0.5rem 4rem;
}
figcaption::before {
  content: "";
  display: block;
  position: absolute;
  width: 5rem;
  height: 5rem;
  bottom: 0;
  left: 1rem;
  border: 15px solid transparent;
  border-left-color: var(--main-high);
  border-bottom-width: 0.5rem;
  border-radius: 100%;
}

figcaption em {
  display: block;
  font-size: 93%;
  margin-top: 0.5em;
}


/* ---------------------- PAGE STRUCTURE and GRIDS -------------------- */

#wrapper {
  min-height: calc(100vh - 100px);
  box-sizing: border-box;
  max-width: 1400px;
  padding: 0 1rem;
  margin: 1rem auto 2rem;
}

main {
  margin-top: calc(1.5rem + 1vw);
}

main h1 {
  position: relative;
  font-family: var(--stack-h);
  font-variation-settings: var(--fvs-bold);
  font-size: calc(1.3em + 1vw);
  color: var(--body-text);
  background-color: var(--body-bg);
  padding: 0 0 1em 2rem;
}

main h1::before {
  content: "";
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 0.1em;
  left: -0.5em;
  border-radius: 1em;
  background-image: linear-gradient(90deg, transparent 50%, transparent, var(--color-highlight) 50%);
}

.grid-2-2 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.grid-2-2 + .grid-2-2 {
  margin-top: calc(2rem + 1vw);
}

.grid-2-2 > h3, .grid-2-2 > h4 {
  grid-column: 1/span 2;
  max-width: 50rem;
}

/* ---- Header ---- */

p.logo {
  display: none;
  font-size: 1.2em;
  white-space: nowrap;
}
p.logo a {
  display: block;
  overflow: hidden;
  width: 10vw;
  max-width: 150px;
}

div.general-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--text-inv);
  background-color: var(--n-light);
  padding: 0.5rem 0.75rem;
}

#container > header p {
  font-size: 0.8em;
}

#site-search {flex: 1;}

#site-search-input {
  width: calc(100% - 40px);
  max-width: 25em;
}

#site-search button {flex: 0 0 35px;}

#cnsa-sites {margin-left: auto;}

#container > header label {
  color: var(--text-base-p);
  background-color: var(--n-u-light);
}

.expand-block a[target="_blank"]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z' fill='%23FFF' /%3E%3C/svg%3E");
}

/* Other sites */
.expand-block button.control {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
}
.expand-block div.panel {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  top: 3.3rem;
  left: 0;
  height: 1px;
  transition: all 0.5s;
  z-index: 10;
}
.expand-block div.panel.active {
  top: 3.3em;
  height: auto;
  background-color: var(--interaction-color);
  padding: 1rem 0.5rem;
}

.expand-block div.content[aria-hidden=true] {
  display: none;
}
.expand-block div.content[aria-hidden=false] {
  display: block;
}
.expand-block ul {
  justify-content: center;
  gap: 1rem;
}
.expand-block li {
  color: var(--text-inv);
  background-color: rgba(0,0,0,0);
  font-size: 0.85em;
}

.expand-block li + li {
  padding-left: 1rem;
  border-left: 1px solid var(--text-inv);
}

.expand-block p {
  color: var(--text-inv);
  background-color: rgba(0,0,0,0);
  text-align: center;
  margin-bottom: 0.5rem;
}

.expand-block a,.expand-block a:visited {
  color: var(--text-inv);
}

.expand-block button.close-bt {
  position: absolute;
  top: 0.25rem;
  right: 0;
  background-image: none;
  padding: 0;
  width: 27px;
  height: 27px;
}

.expand-block button.close-bt svg {
  fill: var(--text-inv);
}

/* Arrow buttons */
.expand-block button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z' style='fill: %23FFF'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center right -5px;
}

.expand-block button.icon-button {
  width: 50px;
  padding-right: 15px;
}

/* --- Footer ---- */

footer {
  background-color: var(--n-u-light);
  padding: calc(2rem + 1vw) 0 calc(4rem + 1vw);
}

footer :focus-visible {
  outline-color: currentColor;
}

footer div.content {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  max-width: 1400px;
  background-color: var(--n-u-light);
  padding: 0 1rem;
  margin: 0 auto;
}

footer p {
  width: 30vw;
  min-width: 165px;
  max-width: 250px;
}
footer ul {
  list-style-type: none;
  padding: 2rem 2rem 0;
}
footer ul.links-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
footer a, footer a:visited {
  display: block;
  text-decoration: none;
  color: var(--bodt-text);
  background-color: var(--n-u-light);
  padding: 0.25em;
}
footer a:hover {
  background-color: rgba(255,255,255,0.1);
}

ul.social {
  flex-direction: row;
  align-self: flex-end;
  margin-left: auto;
}

/* Aside */

main + aside {
  margin-top: calc(2rem + 1vw);
}

aside {
  max-width: 1400px;
  line-height: 1.3;
  background-size: cover;
}

aside > * + * {
  margin-top: calc(1.5rem + 0.4vw);
}

aside h2 {
  line-height: 1.3;
  margin-bottom: 1em;
}

aside div.sectioning h2 {
  font-size: 1.4em;
}

aside div.sectioning h2::before {
  content: "";
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  top: 0.1em;
  left: -0.5em;
  border-radius: 1em;
  background-image: linear-gradient(90deg, transparent 50%, transparent, var(--color-highlight) 50%);
}

aside article.h-entry {
  position: relative;
  background-color: var(--body-bg);
  padding: 1rem;
  border-radius: var(--radius);
}

aside article.h-entry + article.h-entry {
  margin-top: 1.5rem;
}

aside article.h-entry .h-group {
  margin: 0 0 1.3rem;
}

aside article.h-entry h4 {
  font-size: 1.15em;
  margin-top: 0;
}
aside article.h-entry .p-summary {
  max-width: 38rem;
}


/* ----------------------------- NAVIGATION --------------------------- */

/* --- Breadcrumbs --- */

nav.breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}

nav.breadcrumbs li:not(:last-of-type) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.1714 12.0007L8.22168 7.05093L9.63589 5.63672L15.9999 12.0007L9.63589 18.3646L8.22168 16.9504L13.1714 12.0007Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center right 0.1em;
  background-size: 1em 1em;
  padding-right: 1.5em;
}

nav.breadcrumbs a[aria-current] {
  text-decoration: none;
}
nav.breadcrumbs a:hover {
  text-decoration: underline;
}
nav.breadcrumbs a[aria-current] {
  color: var(--body-text);
}

/* ---Main Nav --- */

#nav-control {
  width: 24px;
  height: 24px;
  background-color: inherit;
  padding: 0;

  & svg {
    flex: 0 0 24px;
    fill: var(--bodt-text);
  }
}

.desktop-hidden {display: block !important;}
.mobile-hidden {display: none !important;}

#main-nav {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(200px, 500px) auto;
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: -150rem;
  transition: all 0.5s;
  z-index: 200;
}

#nav-overlay {
  order: 2;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  transition: all 0.5s;
}

#main-nav.active #nav-overlay {
  opacity: 1;
}

#main-nav div.group {
  order: 1;
  display: none;
  background-color: var(--body-bg);
}
  #main-nav.active {
    left: 0;
  }
  #main-nav.active div.group {
    display: block;
    overflow-y: auto;
  }

 #main-nav ul {
  list-style-type: none;
  margin: 1rem;
 }

 #main-nav ul.main-sections {
    border-left: 1px solid var(--n-medium);
    border-right: 1px solid var(--n-medium);
 }
  #main-nav ul.main-sections > li:last-child {
    border-bottom: 1px solid var(--n-medium);
  }

#main-nav ul.main-sections :focus-visible {
  outline-offset: -2px;
}

 #main-nav div.big-menu[aria-hidden=true] {
  display: none;
 }
  #main-nav li {
    list-style-type: none;
  }
  #main-nav strong {
    line-height: 1.4;
    font-variation-settings: var(--fvs-bold);
  }
  #main-nav strong span {
    display: block;
    padding: 0.5rem 0;
  }

  #main-nav button.expand {
    width: 100%;
    font-size: 1.1em;
    font-variation-settings: var(--fvs-regular);
    line-height: 1.2;
    text-align: left;
    color: var(--body-text);
    background-color: var(--n-u-light);
    background-blend-mode: difference;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z' style='fill:%23FFF' %3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center right 0.5rem;
    background-size: 1.5em;
    padding: 1em 2.5em 1em 1em;
    border-top: 1px solid var(--n-medium);
    border-radius: 0;
    box-shadow: none;
  }
  #main-nav button.expand[aria-expanded=true] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 10.8284L7.04996 15.7782L5.63574 14.364L11.9997 8L18.3637 14.364L16.9495 15.7782L11.9997 10.8284Z' style='fill: %23FFF'%3E%3C/path%3E%3C/svg%3E");
  }

  #main-nav li.menu > a {
    display: block;
    font-size: 1.1em;
    font-variation-settings: var(--fvs-regular);
    line-height: 1.2;
    text-decoration: none;
    text-align: left;
    color: var(--body-text);
    background-color: var(--n-u-light);
    background-blend-mode: difference;
    padding: 1em 2.5em 1em 1em;
    border-top: 1px solid var(--n-medium);
  }

  #main-nav button.expand:hover, #main-nav li.menu > a:hover {
    background-color: color-mix(in srgb, var(--n-u-light), #000 5%);
  }

  #main-nav ul.level2 li {
    font-size: 0.9rem;
  }

  #main-nav ul.level2 a {
    display: block;
    text-decoration: none;
    color: var(--body-text);
    background-color: transparent;
    padding: 0.5rem 0;
  }

  #main-nav ul.level2 a:hover {
    color: var(--body-text);
    background-color: color-mix(in srgb, var(--interaction-color), #FFF 85%);
  }

  #main-nav p.horizontal-group {
    justify-content: space-between;
    background-color: var(--body-bg);
    padding: 1rem;
  }

  #main-nav p.horizontal-group img {
    width: 100px;
  }
  #main-nav p.horizontal-group button {
    box-shadow: none;
  }
  #main-nav p.horizontal-group button:focus-visible {
    outline-color: var(--main-color);
  }

div.extra-links {
  margin: 1rem;
}
div.extra-links p {
  font-size: 0.9em;
}

#sites-pros {
  padding: 1.5rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--n-medium);
}

#main-nav div.extra-links ul {
  display: flex;
  width: 100%;
  list-style-type: none;
  margin: 1rem 0 0;
}
div.extra-links li {
    font-size: 0.9em;
  }
  div.extra-links li svg {
    flex: 0 0 24px;
    fill: currentColor;
  }


/* --- Skip Links --- */
/* Available only on desktop menu */

.skip-link a {
  display: none;
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  left: -5000px;
  white-space: nowrap;
}
.skip-link a:focus {
  position: static;
  width: auto;
  height: auto;
}

#container > .skip-link:first-child a {
  width: auto;
  padding: 0.25rem 0.5rem;
}

/* ----------------------------- TABLES ------------------------------- */

table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
}

caption {
  position: relative;
  font-size: calc(1em + 0.25vw);
  font-variation-settings: var(--fvs-black);
  text-align: left;
  padding: 0.5rem 0 1rem;
}
caption::before {
    display: inline-block;
    content: "";
    width: 0.8em;
    height: 0.8em;
    background-color: var(--color-highlight);
  margin: 0 0.5rem;
    border-radius: var(--radius-32);
}

table td, table th {
  font-size: calc(0.85em + 0.25vw);
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--n-medium);
}
table th {
  background-color: var(--n-u-light);
  border-top: 1px solid var(--n-medium);
}


/* ------------------------------ FORMS ------------------------------- */

form p + p {margin-top: 1rem;}

fieldset {
  border-top: 1px solid var(--n-medium-light);
  margin-bottom: 1.5rem;
}

legend {
  font: 100% var(--stack-h);
  font-variation-settings: var(--fvs-semibold);
  margin-bottom: 1rem;
  padding-right: 0.5em;
}

input, select, textarea {
  max-width: 25em;
  font: 100%/1 var(--stack);
  color: var(--body-text);
  background-color: var(--input-background);
  padding: 0.5rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--main-color);
}

label {
  display: block;
  font: 100%/1.2 var(--stack);
  font-variation-settings: var(--fvs-seminbold);
  margin-bottom: 0.5rem;
}


::placeholder {
  color: var(--n-medium-dark);
  background-color: var(--input-background);
}

input[type=submit], input[type=reset],
    button[type=submit], button[type=reset],
        button.as-submit, button.as-reset {
    font: 100%/1.2 var(--stack);
    font-variation-settings: var(--fvs-bold);
    color: var(--text-inv);
    background-color: var(--interaction-color);
    padding: 0.5rem 1rem 0.55rem;
    border: 1px solid var(--interaction-color);
    box-shadow: none;
    cursor: pointer;
}

input[type=submit].optional,
  button[type=submit].optional,
    button.optional {
    color: var(--interaction-color);
    background-color: var(--button-secondary);
    border-color: var(--button-secondary);
}

input[type=reset], button[type=reset], button.as-reset {
    color: var(--interaction-color);
    background-color: var(--body-bg);
    border-color: var(--interaction-color);
}

input[type=submit]:not([disabled]):hover, input[type=reset]:not([disabled]):hover,
    button[type=submit]:not([disabled]):hover, button[type=reset]:not([disabled]):hover,
        button.as-submit:not([disabled]):hover, button.as-reset:not([disabled]):hover,
    button.optional:not([disabled]):hover, a.optional:hover {
      color: var(--text-inv);
      background-color: var(--button-hover);
      border-color: var(--button-hover);
}


/* DISABLED */

input[type=submit][disabled], input[type=reset][disabled],
    button[type=submit][disabled], button[type=reset][disabled],
        button.as-submit[disabled], button.as-reset[disabled] {
    opacity: 0.5;
    cursor: initial;
}

/* Checkboxes & radios */
article div.form-item, div.form-item {
  font-size: calc(0.9em + 0.25vw);
  margin-bottom: 1rem;
}

article div.form-actions, div.form-actions {
  font-size: calc(0.9em + 0.25vw);
}

.form-item.form-type-checkbox {margin-bottom: 0.25rem;}
.form-item.form-type-radio {margin-bottom: 0.25rem;}

article .form-item legend, .form-item legend {
  font-size: calc(0.9em + 0.25vw);
  margin: 0.5em 0;
}

.form-choices, .form-type-checkbox, .form-type-radio {
  overflow: hidden;
  position: relative;
}

input[type=checkbox], input[type=radio] {
  position: absolute;
  top: -5em;
}

.form-type-checkbox label, .form-type-radio label {
  display: flex;
  align-items: center;
  line-height: 1.35;
}

.form-type-checkbox label::before, .form-type-radio label::before {
  display: inline-block;
  flex: 0 0 1em;
  width: 1em;
  height: 1em;
  content: "";
  background-repeat: no-repeat;
  background-size: 1em 1em;
  margin-right: 0.25em;
  border: 2px solid rgba(255,255,255,0);
}

input[type=checkbox] + label::before {
  background-image: var(--check-shape);
}
input[type=radio] + label::before {
  background-image: var(--radio-shape);
}

input[type=checkbox]:checked + label::before {
  background-image: var(--check-shape-on);
}
input[type=radio]:checked + label::before {
  background-image: var(--radio-shape-on);
}

input:focus-visible + label::before {
  outline: 2px solid var(--focus-color);
  outline-offset: -1px;
  border-radius: var(--radius);
}

.form-choices input[disabled] + label {
    opacity: 0.5;
    cursor: initial;
}

/* Exception for voting form */
.votingapi-reaction-form {margin: 0;}
.votingapi-reaction-form label::before {
  content: none;
}

/* Input + submit only */
p.one-field-form {
  display: flex;
  align-items: center;
}
  p.one-field-form input {
    min-height: 35px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  p.one-field-form button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
   }

.comment {
  display: block;
  font-size: smaller;
  margin-top: 0.25rem;
}

p.buttons-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin-top: 2rem;
}

.choices label {
  display: inline;
}


/* ------------------------- BUTTONS AND ENTRY LINKS ------------------ */

button svg {
  fill: var(--text-inv);
}

a.optional {
  display: block;
  text-decoration: none;
  border-radius: var(--radius);
}

button.optional, a.optional {
  color: var(--interaction-color);
  background-color: var(--button-secondary);
}
.optional svg {
  fill: var(--interaction-color);
}
.optional:hover svg {
  fill: var(--text-inv);
}

/* Icon Buttons */

.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 35em;
  width: 35px;
  height: 35px;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
}

  .icon-button svg {
    flex: 0 0 35px;
    fill: currentColor;
  }

  .icon-button.selected {
    background-color: var(--transparent);
    outline: 2px solid var(--interaction-color);
    outline-offset: -2px;
  }
  .icon-button.selected svg {
    fill: var(--interaction-color);
  }


/* Read more links */

a.read-more {
  text-decoration: underline;
  color: var(--interaction-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.1717 12.0005L9.34326 9.17203L10.7575 7.75781L15.0001 12.0005L10.7575 16.2431L9.34326 14.8289L12.1717 12.0005Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position-x: -8px;
  padding-left: 0.75em;
}
a.read-more:hover {
  text-decoration: underline;
}
a.read-more.darkbg:hover {
  color: var(--text-inv);
}
a.read-more.darkbg, a.read-more.darkbg:visited {
  color: var(--text-inv);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.1717 12.0005L9.34326 9.17203L10.7575 7.75781L15.0001 12.0005L10.7575 16.2431L9.34326 14.8289L12.1717 12.0005Z' style='fill: %23fff'%3E%3C/path%3E%3C/svg%3E");
}

a.read-more.darkbg:focus-visible {
  outline-color: currentColor;
}


/* Download block and paragraph-only */

div.download {
  display: grid;
  grid-template-columns: 50px auto;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}

div.download p {
  font-size: calc(0.9em + 0.25vw);
}

div.download svg {
  width: 50px;
  height: 50px;
  fill: var(--interaction-color);
}

.download a {
  display: block;
  word-break: break-word;
  margin-bottom: 0.5em;
}
.download span {padding-left: 1.5em;}

.download > a {
  display: block;
  color: var(--interaction-color);
  background-color: var(--transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 4px;
  background-size: 1em 1em;
  padding-left: 1.5em;
}


/* ------------------------- EDITORIAL/ARTICLES ----------------------- */

/* Plain editorial content block */
.editorial p, .editorial li, .editorial dt, .editorial dd {
  line-height: 1.45em;
}

.editorial > ul, .editorial > ol {
  margin: calc(1.5rem + 1vw);
}

.editorial > ul ul {
  margin: 1em;
}
.editorial > ul li li {
  font-size: 100%;
}

article.editorial > h2 {
  font-size: calc(1.45em + 0.5vw);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 1vw);
}
article.editorial > h3 {
  font-size: calc(1.35em + 0.35vw);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 0.5vw);
}
article.editorial > h4 {
  font-family: var(--stack);
  font-size: calc(0.95em + 0.35vw);
  font-variation-settings: var(--fvs-bold);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 0.25vw);
}
article.editorial > h5 {
  font-family: var(--stack);
  font-size: calc(0.97em + 0.25vw);
  font-variation-settings: var(--fvs-bold);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 0.25vw);
}
article.editorial > h6 {
  font-family: var(--stack);
  font-size: calc(0.9em + 0.25vw);
  font-variation-settings: var(--fvs-regular);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 0.25vw);
}

.editorial section.video h3 {
  color: var(--text-inv);
  margin: 0;
}

.editorial > p,
  .editorial > ul li,
  .editorial > ol li,
  .editorial > dl dt,
  .editorial > dl dd {
  font-size: calc(0.9em + 0.25vw);
  line-height: 1.58em;
}

.editorial > p + p, .editorial > li + li {
  margin-top: 0.8em;
}

.editorial > a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--interaction-color);
  background-color: inherit;
}

.editorial > a:visited {
  color: var(--body-text);
  background-color: var(--body-bg);
}
.editorial > a:hover {
  text-decoration-thickness: 0.15em;
}

/* General articles' styles */

article form {margin-bottom: 2rem;}

article div.h-group {
  order: 2;
  display: flex;
  flex-direction: column;
}

.p-name a {
  color: var(--body-text);
  text-decoration: none;
}
.p-name a:hover {
  color: var(--focus-color);
  text-decoration: underline;
}

.p-name + ul.categories {
  margin-bottom: 1em;
}

.u-photo.up-shadow img {
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

ul.categories {
  order: 1;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style-type: none;
  z-index: 2;
}

p.published {
  order: 3;
  font-size: 90%;
}

div.article-tools {
  order: 3;
}

div.article-tools ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style-type: none;
  padding: 1rem 0;
  margin: 1rem 0 0;
  border-top: 1px solid var(--n-medium);
  border-bottom: 1px solid var(--n-medium);
}

div.article-tools button, div.article-tools a.optional {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 5rem;
  width: 36px;
  height: 36px;
  white-space: nowrap;
  padding: 0 0 0 6px;
}

div.article-tools a.optional {
  width: 31px;
  padding-left: 8px;
}

div.article-tools a.optional.falc {
  color: var(--text-inv);
  background-color: var(--interaction-color);
}

div.article-tools button svg, div.article-tools a svg {
  flex: 0 0 24px;
}

button.falc, div.article-tools button.falc {
  line-height: 1.3;
  text-align: left;
  white-space: normal;
}
  button.falc svg, div.article-tools button.falc svg {
    width: 24px;
    height: 24px;
  }
button.falc.active {
  color: var(--text-inv);
  background-color: var(--interaction-color);
}
button.falc.active svg {
  fill: var(--text-inv);
}

/* Complementary content */

div.complementary section.video {
  padding: 1rem;
}
div.complementary iframe.media-oembed-content {
  height: initial;
}

/* Readspeaker button */

div.article-tools .rs_addtools .rsbtn_play:focus,
  div.article-tools .rsbtn .rsbtn_play:focus,
  #readspeaker_button button.rsbtn_tooltoggle:focus {
    color: #000;
      background: #FFF;
    outline: 2px solid var(--interaction-color);
}
#readspeaker_button button.rsbtn_tooltoggle:focus .rsicn::before {
  color: #000;
}
#readspeaker_button .rsbtn_play:focus .rsbtn_left .rsbtn_text,
  #readspeaker_button .rsbtn_play:focus .rsbtn_left .rsbtn_text span {
  color: #000;
}
#readspeaker_button .rsbtn_play:focus .rsbtn_right::before {
  color: #000;
}

/*
div.article-tools #readspeaker_button {
  background-color: var(--interaction-color-light);
  padding: 0.5em 1em;
  margin: 0;
  border-radius: var(--radius);
}
div.article-tools #readspeaker_button.rsbtn.mega_toggle .rsbtn_tooltoggle {
  background-color: var(--interaction-color-light);
  margin-left: 0.75em;
  border-radius: var(--radius);
  border: none;
}
div.article-tools #readspeaker_button.rsbtn.mega_toggle .rsbtn_tooltoggle .rsicn-arrow-down::before
{
  color: var(--interaction-color);
}

div.article-tools #readspeaker_button a.rsbtn_play.open-readspeaker-button {
  display: flex;
  align-items: center;
  background-color: var(--interaction-color-light);
  border: none;
}

div.article-tools #readspeaker_button span.rsbtn_right.rsimg.rsplay.rspart {
  color: var(--interaction-color);
  border: none;
}

div.article-tools #readspeaker_button span.rsbtn_text span {
  font: 0.95rem/1 var(--stack);
  font-weight: 400;
  color: var(--interaction-color);
  padding: 0;
}

div.article-tools #readspeaker_button span.rsbtn_left.rsimg.rspart {
    float: none;
    height: auto;
}

div.article-tools #readspeaker_button span.rsbtn_text::before,
  div.article-tools #readspeaker_button span.rsbtn_text::after {
  content: none;
}

div.article-tools #readspeaker_button button.rsbtn_player_item {
  display: inline-flex;
  justify-content: center;
  background-color: #FFF;
}

div.article-tools #readspeaker_button .rsbtn .rsbtn_exp span.rsbtn_exp_inner button.rsbtn_player_item span.rsicn {
    margin: 0 auto !important;
}

div.article-tools #readspeaker_button #rsmpl_container .rs-player-loadindicator, .rsbtn .rs-player-loadindicator {
    left: 0 !important;
}

div.article-tools #readspeaker_button div.rsbtn_exp.rsimg.rspart span.rsbtn_exp_inner {
    z-index: 2;
}
 */

/* Introduction */

div.intro {
  display: flex;
  flex-direction: column;
  gap: calc(1rem + 0.5vw) 3rem;
  max-width: 50rem;
  /* padding-left: 2rem; */
  margin: 0 0 calc(.5rem + .5vw) 0;
}

div.intro .p-summary {
  max-width: 30rem;
}

div.intro p {
  font-family: var(--stack);
  font-size: calc(0.9em + 0.4vw);
  font-variation-settings: var(--fvs-semibold);
  line-height: 1.5em;
}

article div.intro .p-summary:only-child {
  position: relative;
  max-width: 50rem;
  padding-left: 4rem;
}

article div.intro .p-summary:only-child::before {
  content: "";
  display: block;
  position: absolute;
  width: 75px;
  height: 75px;
  top: -26px;
  left: 0;
  border: 18px solid transparent;
  border-left-color: var(--main-light);
  border-bottom-width: 3px;
  border-radius: 100%;
}

article div.intro img {
  width: 100%;
  max-width: 500px;
}

div.explain {
  max-width: 50rem;
  padding: 0 0 0 2rem;
  margin: 0 0 calc(3rem + 1vw);
}

nav.article-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  list-style-type: none;
  font-variation-settings: var(--fvs-semibold);
  padding-top: 1rem;
  border-top: 2px solid var(--n-medium-light);
}
nav.article-pagination li {
  flex: 1;
  font-size: 90%;
  text-align: center;
}
nav.article-pagination li:nth-child(1) {
  text-align: left;
}
nav.article-pagination li:nth-child(3) {
  text-align: right;
}

nav.article-pagination a, nav.article-pagination a:visited {
  display: inline-flex;
  color: var(--interaction-color);
  background-color: var(--body-bg);
  background-repeat: no-repeat;
  background-size: 1em;
  text-decoration: none;
}
nav.article-pagination li:nth-child(1) a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 12L14 6V18L8 12Z' style='fill: %23540ABD'%3E%3C/path%3E%3C/svg%3E");
  padding-left: 30px;
}
nav.article-pagination li:nth-child(3) a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 12L10 18V6L16 12Z' style='fill: %23540ABD'%3E%3C/path%3E%3C/svg%3E");
  padding-right: 30px;
  background-position: right;
}

div.rating {
  justify-content: center !important;
  gap: 0.5rem;
  font-variation-settings: var(--fvs-semibold);
  background-color: var(--n-light);
  padding: 1rem;
  margin: 2rem 0;
  border-radius: var(--radius);
}
div.rating button { flex: 0 0 34px; }

div.resources ul {margin-left: 1rem;}
div.resources li + li {margin-top: 0.8em;}

div.article-extras {
  margin-top: 2rem;
  padding: 2rem 0 0;
  border-top: 1px solid var(--n-medium-light);
}

div.article-extras h2 {
  font-variation-settings: var(--fvs-semibold);
  color: var(--main-dark);
}
div.article-extras h2::before {
  content: "";
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  top: 0.1em;
  left: -0.5em;
  border-radius: 1em;
  background-image: linear-gradient(90deg, transparent 50%, transparent, var(--color-highlight) 50%);
}

div.article-extras > div {
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

div.article-extras ul {
  line-height: 1.4;
  margin: 1rem 1rem 1rem 2rem;
}
div.article-extras li + li {
  margin-top: 0.8em;
}

div.article-extras a {
  display: block;
}
div.article-extras a:hover {
  color: var(--interaction-color);
  background-color: var(--body-bg);
  text-decoration: underline;
}

/* Right column */

div.card-transversal {
  background-color: var(--n-light);
  padding: 0.8rem 1rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);

  h2 {
    font-variation-settings: var(--fvs-bold);
    color: var(--body-text);
  }

  h2:before {content: none;}

  ul {
    margin: 0.5em 1em;
  }
  ul:last-child {
    margin-bottom: 0;
  }

  & li + li {
    margin-top: 0;
  }
}

div.card-transversal div.illustration {
  margin: 1rem 0;

  & p.credit {
    font-size: 0.85em;
    margin-top: 0.25em;
  }
}

div.article-extras div.card-transversal a {
  display: inline;
}


/* Inner article nav */

details.article-summary {
  display: none;
  order: 3;
  margin-top: 1rem;
}

div.complementary details.article-summary {
  display: none;
}

div.complementary .card + .card {
  margin-top: 1.5rem;
}

details.article-summary ul {
  list-style-type: none;
  margin: 1rem;
}
details.article-summary li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3643 15.5353L16.95 14.1211L18.3643 12.7069C20.3169 10.7543 20.3169 7.58847 18.3643 5.63585C16.4116 3.68323 13.2458 3.68323 11.2932 5.63585L9.87898 7.05007L8.46477 5.63585L9.87898 4.22164C12.6127 1.48797 17.0448 1.48797 19.7785 4.22164C22.5121 6.95531 22.5121 11.3875 19.7785 14.1211L18.3643 15.5353ZM15.5358 18.3638L14.1216 19.778C11.388 22.5117 6.9558 22.5117 4.22213 19.778C1.48846 17.0443 1.48846 12.6122 4.22213 9.87849L5.63634 8.46428L7.05055 9.87849L5.63634 11.2927C3.68372 13.2453 3.68372 16.4112 5.63634 18.3638C7.58896 20.3164 10.7548 20.3164 12.7074 18.3638L14.1216 16.9496L15.5358 18.3638ZM14.8287 7.75717L16.2429 9.17139L9.17187 16.2425L7.75766 14.8282L14.8287 7.75717Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1em;
  padding-left: 2em;
}
details.article-summary li + li {
  margin-top: 0.5em;
}

details.article-summary a:hover {
  color: var(--interaction-color);
  background-color: var(--body-bg);
  text-decoration: underline;
}

/* Articles' text body styles */

div.e-content p, div.p-summary p {
  line-height: 1.58;
}
div.e-content ul {
  margin: 1rem 2rem;
}
div.e-content li {
  line-height: 1.5;
}

div.e-content p + p, div.p-summary p + p  {
  margin-top: 0.8em;
}

div.e-content > ul, div.e-content > ol, .editorial > ul, .editorial > ol {
  margin: 1rem;
}

div.e-content a, .editorial a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--interaction-color);
  background-color: inherit;
}

div.e-content a:visited, .editorial a:visited {
  color: var(--interaction-color);
  background-color: var(--body-bg);
}
div.e-content a:hover, .editorial a:hover {
  text-decoration-thickness: 0.15em;
}

div.e-content > div.download {
  margin: 1.5rem 0;
}

/* Simple, no-photo entries */

article.entry {
  box-sizing: border-box;
  max-width: 50rem;
}
article.entry + article.entry {
  padding-top: calc(1.5rem + 0.5rem);
  margin-top: calc(1.5rem + 0.5rem);
  border-top: 1px solid var(--n-medium);
}
article.entry div.h-group {
  margin-bottom: 1rem;
}
article.entry .p-name {
  margin-top: 0;
}

/* --- H-ENTRY / CARDS --- */

/* cards List */
div.cards-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

article.card {
  display: grid;
  grid-auto-rows: auto;
  gap: 1.5rem;
  position: relative;
  padding: 1rem;
  border: 1px solid var(--n-light);
  border-radius: var(--radius);
}

.card-tools {
  position: relative;
  order: 4;
  grid-column: 2;
  padding-top: 1rem;
  border-top: 1px solid var(--n-light);
  z-index: 2;
}

article.h-entry .p-name, section.h-event .p-name {
  order: 2;
  margin-bottom: 0.5rem;
}

article.card .p-name {
  max-width: 45em;
}

article.card .u-photo {order: 1;}

article.card > div.p-summary {order: 3;}
article.card .p-name, article.card div.p-summary {
  max-width: 35em;
}

/* Highlights cards */
div.highlights {
  padding-bottom: calc(1rem + 1vw);
  margin-bottom: calc(1rem + 1vw);
  border-bottom: 1px solid var(--n-medium);
}


/* -------- MAIN ARTICLE PAGE ----------- */

article.main {margin-bottom: 2rem;}

article.main div.e-content {
  max-width: 50rem;
}

article.main h1.p-name {
  order: 2;
  max-width: 50rem;
  font-size: calc(1.5em + 1vw);
  line-height: 1.3;
  padding: 0;
  margin: 0 0 0.5em;
}

article.main h1::before {content: none;}

div.e-content > ul,
  article.main div.e-content > ol {
  margin: calc(1.5rem + 1vw);
}

div.e-content > ul ul {
  margin: 1em;
}
div.e-content > ul li li {
  font-size: 100%;
}

div.e-content > h2 {
  font-size: calc(1.45em + 0.5vw);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 1vw);
}
div.e-content > h3 {
  font-size: calc(1.35em + 0.35vw);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 0.5vw);
}
div.e-content > h4 {
  font-family: var(--stack);
  font-size: calc(0.95em + 0.35vw);
  font-variation-settings: var(--fvs-bold);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 0.25vw);
}
div.e-content > h5 {
  font-family: var(--stack);
  font-size: calc(0.97em + 0.25vw);
  font-variation-settings: var(--fvs-bold);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 0.25vw);
}
div.e-content h6 {
  font-family: var(--stack);
  font-size: calc(0.9em + 0.25vw);
  font-variation-settings: var(--fvs-regular);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 0.25vw);
}

div.e-content section.video h3 {
  color: var(--text-inv);
  margin: 0;
}

div.e-content > p,
  div.e-content > ul li,
  div.e-content > ol li,
  div.e-content > dl dt,
  div.e-content > dl dd {
  font-size: calc(0.9em + 0.25vw);
  line-height: 1.5em;
}

div.e-content p + p, div.e-content li + li {
  margin-top: 0.8em;
}

article.main div.intro {
  max-width: 47rem;
  padding-left: 0;
  margin: calc(1rem + 1vw) 0 calc(3rem + 1.5vw) 0;
}

div.highlight-content {
  position: relative;
  background-color: var(--main-lightest);
  padding: 1rem;
  margin: calc(1.5rem + 1vw) 0;
  border-radius: var(--radius);
  background-size: 50%;
}

div.highlight-content::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 0.5rem;
  height: 100%;
  top: 0;
  left: -0.75rem;
  background-color: var(--main-high);
}

div.highlight-content p {
  font-size: calc(0.85em + 0.25vw);
  line-height: 1.45;
}

div.highlight-content h2,
div.highlight-content h3,
div.highlight-content h4,
div.highlight-content h5,
div.highlight-content h6 {
  font-size: calc(0.9em + 0.25vw);
  font-variation-settings: var(--fvs-bold);
  margin: 0 0 1em;
}

div.highlight-content ul, div.highlight-content ol {
  margin: 1rem 0 1.25rem 2rem;
}

article.main section.video {
  padding: 1rem;
  margin: calc(1.5rem + 0.5vw) 0;
}
article.main section.video a {
  background-color: var(--body-text);
}

/* Drupal content on article */

.media-image {
  margin: calc(2rem + 1vw);
  /* text-align: center; */
}

.align-center {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

.media-image.align-center img {
  margin: 0 auto;
}

figure.media-image figcaption {
  text-align: center;
  font-style: italic;
  padding: 1rem;
}

figure.media-image figcaption::before {
  content: none;
}


/* -------------------------------- DATA BLOCKS ----------------------- */

details {
  border: 1px solid var(--n-light);
  border-radius: var(--radius);
}
details summary {
  font-family: var(--stack);
  font-variation-settings: var(--fvs-semibold);
  list-style: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z' fill='%23540ABD' %3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center right 1rem;
  background-size: 24px 24px;
  padding: 1rem 3rem 1rem 1rem;
  cursor: pointer;
}

details[open] summary {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9997 10.8284L7.04996 15.7782L5.63574 14.364L11.9997 8L18.3637 14.364L16.9495 15.7782L11.9997 10.8284Z' fill='%23540ABD' %3E%3C/path%3E%3C/svg%3E");
}

summary.horizontal-group {gap: 0.5rem;}

details form {
  background-color: var(--n-u-light);
  padding: 1rem;
  border-radius: calc(var(--radius) / 0.5);
}
details input {
  background-color: var(--input-background-layer);
}

details.tools summary {
  background-size: 16px 16px;
}


/* -------------------------------- UTILITIES ------------------------- */

/* Address / H-CARD */

dl.h-card {
  line-height: 1.8;
}

dl.h-card dt {
  font-size: 1.1em;
  font-variation-settings: var(--fvs-bold);
}

.with-icon {
  display: flex;
  align-items: center;
  gap: 1rem;
}

dl .with-icon {line-height: 2;}

/* List of actions */

ul.actions-list {
  list-style-type: none;
}
ul.actions-list li + li {
  margin-top: 0.5rem;
}

/* Chips */
span.chip {
  display: inline-flex;
  align-items: center;
  height: 2em;
  font-variation-settings: var(--fvs-regular);
  font-size: 0.85rem;
  line-height: 2;
  padding: 0.15em 1em;
  border: 1px solid var(--n-main-dark);
  border-radius: var(--radius-32);
}
span.chip span {
  display: block;
}
span.chip a {
  display: block;
  min-height: 1.5em;
  text-decoration: none;
  color: var(--interaction-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.9042 2.1001L20.8037 3.51431L22.2179 13.4138L13.0255 22.6062C12.635 22.9967 12.0019 22.9967 11.6113 22.6062L1.71184 12.7067C1.32131 12.3162 1.32131 11.683 1.71184 11.2925L10.9042 2.1001ZM11.6113 4.22142L3.83316 11.9996L12.3184 20.4849L20.0966 12.7067L19.036 5.28208L11.6113 4.22142ZM13.7327 10.5854C12.9516 9.80433 12.9516 8.538 13.7327 7.75695C14.5137 6.9759 15.78 6.9759 16.5611 7.75695C17.3421 8.538 17.3421 9.80433 16.5611 10.5854C15.78 11.3664 14.5137 11.3664 13.7327 10.5854Z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: left 0 top 45%;
  padding: 0.25em 0 0.2em 1.35em;
  border-radius: var(--radius-32);
}

span.chip.target a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14Z'%3E%3C/path%3E%3C/svg%3E");
}
span.chip.type a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3 18.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22H6.5C4.567 22 3 20.433 3 18.5ZM19 20V17H6.5C5.67157 17 5 17.6716 5 18.5C5 19.3284 5.67157 20 6.5 20H19ZM10 4H6C5.44772 4 5 4.44772 5 5V15.3368C5.45463 15.1208 5.9632 15 6.5 15H19V4H17V12L13.5 10L10 12V4Z'%3E%3C/path%3E%3C/svg%3E");
}

span.chip a:hover {
  text-decoration: underline;
}
span.chip button {
  position: relative;
  top: 0;
  left: 8px;
  background-color: transparent;
  padding: 0;
  border: none;
  cursor: pointer;
  transform: scale(0.8);
}

span.chip button svg {
    fill: var(--body-text);
}

.no-break {white-space: nowrap;}

/* Covers all parent block */
a.whole::after {
  box-sizing: border-box;
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Screen readers only */
.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

/* Align vertically */
.horizontal-group {
  display: flex;
  align-items: center;
  list-style-type: none;
  gap: 1rem;
}

/* --- SLIDER --- */

div.slider {
  position: relative;
  background-color: rgba(0,0,0,0.2);
  padding: 1rem 1rem 0.8rem;
  border-radius: var(--radius);
}

div.slider img {
  box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}

div.slider :focus-visible {
  outline-color: var(--main-high);
}

div.slider ul {
  display: flex;
  gap: 1rem;
  list-style-type: none;
}

ul.slides {
  overflow: hidden;
  scroll-behavior: smooth;
  -ms-overflow-style: thin;  /* Internet Explorer 10+ */
  scrollbar-width: thin;  /* Firefox */
}
ul.slides::-webkit-scrollbar {
  height: 2px;
  background-color: var(--n-u-dark);
}

ul.slides::-webkit-scrollbar-thumb {
  background-color: var(--n-medium-dark);
}

ul.slides img {cursor: pointer;}
ul.slides img[aria-selected=false] {
  filter: grayscale(90%);
}
ul.slides img[aria-selected=true] {
  filter: grayscale(0);
  outline: 2px solid var(--text-inv);
  outline-offset: 2px;
}

ul.slides li {
  flex: 1 0 33%;
  overflow: hidden;
  height: 15vw;
}

ul.slides p.legend {display: none;}

div.slider ul.controls {
  justify-content: space-between;
  background-color: rgba(255,255,255,0.05);
  padding: 1rem;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
div.slider ul.controls button {
  background-color: transparent;
  padding: 0;
  border-radius: 100%;
}


/* ----------------------------- UTILITARY CLASSES -------------------- */

/* Adds margin top */
.top-simple {margin-top: 1rem;}
.top-double {margin-top: 2rem;}
.top-triple {margin-top: 3rem;}

/* Adds margin bottom */
.bot-simple {margin-bottom: 1rem;}
.bot-double {margin-bottom: 2rem;}
.bot-triple {margin-bottom: 3rem;}

/* Adds padding around */
.surround-simple {padding: 1rem;}
.surround-double {padding: 1.5rem;}
.surround-double-r {padding: calc(2rem + 1vw);}

/* Adds space and line below */
.divide-bottom {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--n-medium);
}

/* Adds space and line on top */
.divide-top {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--n-medium);
}

/* Blocks styles */

.frame {
  background-color: var(--n-u-light);
  padding: 1rem;
  border-radius: var(--radius);
}

.frame > :last-child {margin-bottom: 0;}

.frame.discrete {
  background-color: var(--body-bg);
  border: 1px solid var(--n-light);
}

.frame.special {
  background-color: var(--n-main-light);
}

.frame.interaction {
  background-color: var(--interaction-color-light);
}

/* Thumbs - multiple columns-rows for small blocks */
.thumbs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.thumbs-container > * {
  min-width: 200px;
  max-width: 350px;
}

/* Go along items */
.go-along {
    display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* Simple list of entries separated by lines */

.simple-entries-list > * + * {
  padding-top: calc(1.5rem + 0.5rem);
  margin-top: calc(1.5rem + 0.5rem);
  border-top: 1px solid var(--n-medium);
}

/* Simple cards / photo + text */
div.simple-card {
    display: grid;
    grid-template-columns: 1fr 3fr;
  gap: 0 1.5rem;

  & .u-photo {
    grid-row: 1/span 3;
  }
}

div.simple-card + div.simple-card {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--n-medium-light);
}

/* GRID 3 COLS */
.grid-3-3 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2rem;
}


/* -------------------------------- SPECIFICS ------------------------- */

/* --- H-EVENTS --- */

div.h-event.entry {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
div.h-event.entry + div.h-event.entry {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--n-medium-light);
}

.h-event p.event-date {
  font-family: var(--stack-h);
    background-color: var(--n-main-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM11 13V17H6V13H11ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: top 0.8rem left 0.5rem;
    padding: 1rem 1rem 1rem 2.5rem;
    border-radius: var(--radius);
}
.h-event time span {
    font-variation-settings: var(--fvs-bold);
}

.h-event.entry .p-name {
  font-size: 0.9em;
  font-variation-settings: var(--fvs-semibold);
    margin: 0.25em 0 0.5em 2.5rem;
}

div.h-event.entry .p-summary {
    margin-left: 2.5rem;
}
div.h-event.entry .p-summary p {
  line-height: 1.4;
}


/* ------------------- HOME PAGE ------------------- */

div.home-illustration {
  font-family: var(--stack-h);
  font-size: calc(0.85em + 0.25vw);
  color: var(--main-dark);
  background-image: url(/assets/img/main-bg1.svg), linear-gradient(60deg, rgba(181, 201, 205) 1%, #FFF 50%);
  background-repeat: no-repeat;
  background-position: center right;
  background-blend-mode: multiply;
  padding: 4vw;
  margin: 4vw 0;
}

div.home-illustration.optional {
  color: var(--main-dark);
  background-image: url(../img/header-home-new.svg), linear-gradient(120deg, #FCFDCD, #FFF);
}
div.home-illustration.optional-2 {
  color: var(--main-dark);
  background-image: url(../img/home-ex.jpg), linear-gradient(120deg, #FCFDCD, #FFF);
  background-position: top left, top right;
  background-size: contain, cover;
}

main div.home-illustration p {
    font-size: calc(1em + 0.5vw);
    font-weight: normal;
    line-height: 1.4;
    font-variation-settings: var(--fvs-regular);
    background: transparent;
    color: var(--main-dark);
    padding: 0;
}

main div.home-illustration h1::before {
  content: none;
}

section.home {
  padding: calc(0.7rem + 1vw) calc(1rem + 1vw);
  margin-bottom: 4vw;
}

section.home .p-name {
  font-size: 1em;
  margin-bottom: 1rem;
}

section.home a:hover {
  color: var(--interaction-color);
  text-decoration: underline;
}

section.home.highlight .p-name, article.highlight .p-name {
  font-size: 1.2em;
}

section.home a.read-more {
  font-size: 105%;
  background-image: none;
  padding: 0;
}

section header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
section header::before {
  display: inline-block;
  flex: 0 0 1em;
  content: "";
  width: 1em;
  height: 1em;
  background-color: var(--color-highlight);
  border-radius: var(--radius-32);
}
section header h2 {
  font-size: 1.2em;
  color: var(--main-darkest);
  margin-right: auto;
}
section header p {
  margin-left: auto;
}

section.flash-news article.card {
  padding: 0;
  margin-bottom: 1.5rem;
    border: none;
}
section.flash-news .u-photo img {
  width: 100%;
}

div.secondary-entries article {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem 0 0;
  border-top: 1px solid var(--n-medium-light);
}

div.secondary-entries h3.p-name {
  order: 2;
  font-size: 95%;
}

section.agenda {
    padding-bottom: calc(0.7rem + 1vw);
}

section.focus-on {
    color: var(--text-inv);
    background: var(--main-dark);
    background-image: url(../img/bg-focus.svg);
    background-position-y: -167px;
    background-position-x: right;
    background-repeat: no-repeat;
    background-blend-mode: luminosity;
    padding: 1rem;
    border-radius: var(--radius);
}

section.home.focus-on .p-name {
    color: var(--text-inv);
    background: transparent;
    margin-top: 0;
    margin-bottom: 1rem;
}
section.focus-on h2 strong {
    display: block;
    font-size: 90%;
    font-variation-settings: var(--fvs-regular);
}

section.focus-on .p-summary {
    max-width: 45em;
    line-height: 1.5;
}

section.focus-on .p-summary p {
  font-size: calc(0.8em + 0.4vw);
}

section.focus-on .p-summary p:last-child {
  margin-top: 1.5em;
}

section.focus-on a, section.focus-on a:visited, section.focus-on a:hover {
  color: var(--text-inv);
}
section.focus-on a:focus-visible {
  outline-color: currentColor;
}

section.newsletter {
  align-self: baseline;
    background-image: url("../img/newslbg2.svg");
    background-repeat: no-repeat;
    background-size: 100vw;
    background-position: top -2rem right 1rem;
    padding: calc(0.6rem + 1vw) calc(1rem + 1vw) calc(1rem + 1vw);
}
section.newsletter h2 {
    margin-bottom: 1em;
}
section.newsletter p.highlight {
    background: rgba(255,255,255,0.3);
    padding: 1rem;
}
section.newsletter p.form-choices {
  margin: 1.5rem 0;
}
section.newsletter input[type="email"] {
    width: 90%;
    max-width: 30rem;
}
section.home.newsletter p {
  max-width: 35em;
  font-size: 1em;
  line-height: 1.5;
}
section.newsletter p.buttons-bar {
    justify-content: flex-start;
}

section.kiosque {
  align-self: baseline;
}

article.card.book-entry {
  padding-bottom: 1.5rem;
}

.book-entry dt {
  font-variation-settings: var(--fvs-bold);
  margin-bottom: 0.5em;
}

.book-entry a {
  color: var(--body-text);
  text-decoration: none;
}

/* .book-entry .download a {} */
.book-entry .download a span {
  padding: 0;
}

.book-entry .p-summary,.book-entry .card-tools {
  grid-column: 1/span 2;
}

section.video {
  container-type: inline-size;
  color: var(--text-inv);
  background-color: var(--body-text);
  padding: calc(0.7rem + 1vw);
  border-radius: var(--radius);
}

section.video header {
  flex-wrap: nowrap;
  align-items: flex-start;
}

section.video header::before {
  margin-top: 0.35em;
}
section.video header h3 {
  flex: 1;
  margin-right: 2rem;
}

section.video h2, section.video a {
  color: var(--text-inv);
  background-color: var(--body-text);
}
section.video a:hover {
  color: var(--text-inv);
  background-color: var(--body-text);
}
section.video audio {width: 100%;}

p.transcript {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1rem;
}
p.transcript svg {fill: var(--text-inv);}

section.video div.download {
  display: grid;
  grid-template-columns: 50px auto;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.5rem 0;
  margin: 1rem 0;
  border-top: 1px dotted var(--text-inv);
  border-bottom: 1px dotted var(--text-inv);
}

section.video div.download p {
  font-size: calc(0.9em + 0.25vw);
}

section.video div.download svg {
  width: 50px;
  height: 50px;
  fill: var(--interaction-color);
}

/* section.video .download a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 25em;
  overflow: hidden;
  white-space: nowrap;
} */
section.video .download span {padding-left: 1.5em;}

section.video .download > a {
  display: block;
  color: var(--interaction-color);
  background-color: var(--transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 19H21V21H3V19ZM13 13.1716L19.0711 7.1005L20.4853 8.51472L12 17L3.51472 8.51472L4.92893 7.1005L11 13.1716V2H13V13.1716Z' style='fill: %23540ABD'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0;
  background-size: 1em 1em;
  padding-left: 1.5em;
  margin-bottom: 0.25em;
}

section.video .download.frame.interaction {
  display: flex;
  gap: 0.5em;
  color: var(--text-inv);
  background-color: var(--n-dark);
  padding: 0.5rem 0;
  margin: 1rem 0 0;
  border-top: 1px dotted var(--text-inv);
}
/* section.video .download.frame.interaction::before {
  content: "Transcription";
  font-variation-settings: var(--fvs-bold);
  color: var(--main-high);
} */

section.video .download.frame.interaction svg {
  fill: var(--text-inv);
  width: 24px;
  height: 24px;
  margin-left: auto;
}

section.video .download.frame.interaction p {
  font-size: 1em;
}

section.video .download.frame.interaction a.ellipsis {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 6lh;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 0.5rem;
}

section.video .download.frame.interaction p.transcription {
  display: block;
}

p.transcription a::after {
  content: none;
}

section.video .download.frame.interaction p.transcription span {
  padding: 0;
}

section.video .download.frame.interaction p.transcription a svg {
  width: 0.8em;
  height: 0.8em;
}

@container (max-width: 375px) {
  section.video .download.frame.interaction {
    display: grid;
    /* grid-template-rows: 1fr 1fr; */
    grid-template-columns: 24px auto;
  }
  section.video .download.frame.interaction::before {
    grid-column: 1/span 2;
  }
}

section.video .p-summary {
  margin: 1rem 0 0;
}

section.home.video header {
  flex-wrap: wrap;
}
section.home.video header p {
    margin-left: 1rem;
}
section.home.video header::before {
    margin-top: 0.35em;
}

section.home.video .p-summary {
  font-size: 90%;
  margin: 1rem 0 0;
}

section.projects {
  padding-bottom: calc(0.7rem + 1vw);
  border: 1px solid var(--n-light);
  border-radius: var(--radius);
}

section.projects dl {
  line-height: 1.4;
}
section.projects dl a {
  font-variation-settings: var(--fvs-semibold);
  text-decoration: none;
  color: var(--body-text);
}

section.projects dl div + div {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--n-medium-light);
}

/* NEWS LIST */

div.card-container {
  container: news-list / inline-size;
}

/* Lists and Results filter criteria */
div.filter-criteria {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem;
    margin: 0.5rem 0 2rem;
    border-top: 1px solid var(--n-medium);
    border-bottom: 1px solid var(--n-medium);
}

ul.chips-list {
    display: flex;
  flex-wrap: wrap;
    gap: 0.5rem 1rem;
    list-style-type: none;
    padding: 0.25rem;
    margin: 0.5rem 0 1rem;
    border-top: 1px solid var(--n-light);
    border-bottom: 1px solid var(--n-light);
}

div.filter-criteria ul.chips-list {
  margin: 0;
  border: none;
}

.total-results {
  font-size: 110%;
  font-variation-settings: var(--fvs-bold);
  margin-top: 0.5rem;
}

.filter ul.chips-list {
  border: none;
}


/* -------- AGENDA/H-EVENTS ---------- */

section.h-event {
  position: relative;
}
section.h-event + section.h-event {
  margin-top: 2rem;
}

section.h-event div.h-group {
  display: flex;
  flex-direction: column;
  max-width: 45em;
  margin: 0 0 1rem;
}

section.h-event p.event-date {
  font-variation-settings: var(--fvs-bold);
  margin-bottom: 1rem;
}
section.h-event .hour {
  display: block;
  font-variation-settings: var(--fvs-regular);
  padding-top: 0.5em;
  margin-top: 0.5em;
  border-top: 1px solid var(--n-main);
}

section.h-event div.content {
  display: flex;
  flex-direction: column;
  max-width: 45em;
}

section.h-event dl.h-card {
  margin: 1rem 0 0 1.25rem;
}

.p-location {
  width: calc(100% - 2rem);
  line-height: 1.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6-1.8C18 6.57 15.35 4 12 4s-6 2.57-6 6.2c0 2.34 1.95 5.44 6 9.14 4.05-3.7 6-6.8 6-9.14zM12 2c4.2 0 8 3.22 8 8.2 0 3.32-2.67 7.25-8 11.8-5.33-4.55-8-8.48-8-11.8C4 5.22 7.8 2 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: 1rem 1rem;
  padding: 1rem 1rem 0 3rem;
  margin: 1rem 0 auto -1rem;
  border-top: 1px solid var(--n-medium);
}

.p-location.webinar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z'/%3E%3C/svg%3E");
}


/* Agenda details */

div.event-highlight {
  display: flex;
  flex-direction: column;
  gap: 2rem 3rem;
  padding: calc(1rem + 1vw);
  margin-bottom: 2rem;
}

div.event-data {
  background-color: var(--n-main);
  background-image: url(../img/event-bg.svg);
  background-size: cover;
  background-position: top 65px right -170px;
  background-repeat: no-repeat;
  border-radius: var(--radius);
}

div.when, div.where {
  padding: 1rem;
}
div.when {
  background-color: rgba(255,255,255,0.3);
}

div.where a.read-more {
  color: var(--body-text);
}

div.when p:not(.buttons-bar) {
  font-size: calc(1em + 0.4vw);
}

div.where dt, div.where dd, div.where p {
  font-size: calc(0.85em + 0.4vw);
}
div.event-data p + p {margin-top: 0.5em;}

div.event-data p:not(#addToCalendar) {
  display: grid;
  grid-template-columns: 24px auto;
  grid-template-rows: auto auto;
  gap: 0.45rem;
}
div.event-data p svg {grid-row: 1/span 2;}

div.where .p-location {
  background-position: 0 0.2em;
  padding: 0 0 0 calc(0.45em + 24px);
  margin: 0 0 1.5rem;
  border: none;
}

div.event-data p.buttons-bar {
  justify-content: flex-start;
  margin-top: 1.5rem;
}

p.url a {
  text-decoration: underline;
  color: var(--interaction-color);
  background-color: transparent;
}

.dt-start, .dt-end {
  color: var(--n-u-dark)
}

/* -------- PRESS ---------- */

div.press-list {
  margin-bottom: calc(1.5rem + 0.4vw);
}

/* Contact block */

div.contact {
  background-color: var(--n-main-light);
  background-image: url(../img/contact-bg.svg);
  background-repeat: no-repeat;
  background-position: center right -182px;
  padding: 1rem;
  border-radius: var(--radius);
}

article.main div.e-content div.contact {
  margin: calc(1rem + 1vw) 0;
}
article.main div.e-content div.contact h2 {
  font-size: 1.18em;
  font-variation-settings: var(--fvs-semibold);
  color: var(--main-dark);
  margin: 0;
}
article.main div.e-content div.contact + div.contact {
  margin-top: 0;
}

div.contact h2::before {
  content: "";
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  top: 0.1em;
  left: -0.5em;
  border-radius: 1em;
  background-image: linear-gradient(90deg, transparent 50%, transparent, var(--color-highlight) 50%);
}

div.contact h3::before {
  background-image: linear-gradient(90deg, transparent 50%, transparent, var(--n-main) 50%);
}

div.contact dl {
  margin: 1rem 1rem 1rem 1.25rem;
}

.editorial > ul.contact {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}
ul.contact li + li {margin-top: 0.5em;}

div.social {font-size: 90%;}

/* --- PHOTO ALBUM --- */

div.photo-album {
  color: var(--text-inv);
  background-color: var(--n-u-dark);
  padding: calc(1rem + 1vw);
  margin-bottom: calc(2rem + 1vw);
  border-radius: var(--radius);
}

div.photo-album figure {
  overflow: hidden;
  position: relative;
  height: 65cqw;
  background-color: var(--n-u-dark);
}

div.photo-album figure img {width: 100%;}

div.photo-album figure > div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
div.photo-album figure:focus-visible {
  outline: 6px solid var(--main-high);
  outline-offset: 0;
}
div.photo-album li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

div.photo-album figcaption {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  bottom: 1rem;
  font-size: calc(0.8em + 0.5vw);
  background-color: rgba(0,0,0,0.8);
  padding: 1rem 1rem 1rem 4rem;
}
div.photo-album figcaption::before {
  content: "";
  display: block;
  position: absolute;
  width: 5rem;
  height: 5rem;
  bottom: 4rem;
  top: -36px;
  left: 1rem;
  border: 15px solid transparent;
  border-left-color: var(--main-high);
  border-bottom-width: 0.5rem;
  border-radius: 100%;
    bottom: 1.5rem;
    z-index: 2;
}
div.photo-album em {
  color: var(--n-medium-light);
}

div.photo-album figcaption.empty {
  display: none;
}

@container album (min-width: 500px) {
  div.slider {
    margin: 0 1rem;
  }
  div.slider ul.controls {
    height: 0;
    padding: 0;
    margin: 0;
  }
  div.slider ul.controls button {
    position: absolute;
    width: 35px;
    top: calc(50% - 17px);
    border: none;
  }
  div.slider ul.controls button.go-back {
    left: -17px;
  }
  div.slider ul.controls button.go-forth {
    right: -17px;
  }
}

@container album (min-width: 1000px) {
  div.photo-album {
    display: grid;
    grid-template-columns: minmax(auto, 950px) minmax(15rem, 17vw);
    justify-content: space-between;
  }
  div.photo-album figure {
    position: relative;
    overflow: hidden;
    max-width: 920px;
    max-height: 630px;
    margin-bottom: 0;
    margin-right: calc(1rem + 1vw);
  }
  div.photo-album figcaption {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    bottom: 1rem;
    background-color: rgba(0,0,0,0.8);
    padding: 1rem 1rem 1rem 4rem;
  }

  div.photo-album div.slider {
    align-self: baseline;
    height: calc(45vw - 2rem);
    max-height: 569px;
    background-color: rgba(0,0,0,0.5);
    margin: 1rem 0;
  }
  div.photo-album ul.slides {
    flex-direction: column;
    height: 100%;
  }
  div.slider ul.controls button.go-back {
    top: -17px;
    left: calc(50% - 23px);
    transform: rotate(90deg);
  }
  div.slider ul.controls button.go-forth {
    top: auto;
    bottom: -22px;
    left: calc(50% - 23px);
    transform: rotate(90deg);
  }
}


/* ----- PUBLICATIONS ----- */

div.highlights {margin-top: 1rem;}

div.highlights article {
  display: block;
  background-color: var(--n-u-light);
  padding: calc(1rem + 1vw);
}
div.highlights article a {
  background-color: var(--n-u-light);
}
div.highlights .p-name {
  font-size: 1.4em;
}
div.highlights .p-summary p {
  font-size: 0.95em;
}

div.highlights .u-photo {
  background-image: url(../img/video-bg.svg);
  background-size: cover;
  margin: calc(1rem + 1vw) 0;
}
div.highlights .u-photo img {max-width: 200px;}

div.book-sheet {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(1rem + 1vw);
  padding: calc(1rem + 1vw);
  margin-top: calc(1rem + 1vw);
}

div.book-sheet .u-photo {
  flex: 1;
  max-width: 500px;
  min-width: 200px;
  background-image: url(../img/video-bg.svg);
  background-size: cover;
}
div.book-sheet .u-photo img {
  width: 80%;
  max-width: 300px;
  background-color: white;
}

div.book-sheet .p-summary {
  flex: 1;
  min-width: 15rem;
  max-width: 45rem;
}
div.book-sheet .p-summary p {
  font-size: calc(0.85em + 0.25vw);
}

article.book-entry .p-summary ul, div.book-sheet .p-summary ul {
  margin: 1em 2em 1em;
}
article.book-entry .p-summary li + li, div.book-sheet .p-summary li + li {
  margin-top: 0.8em;
}
div.book-sheet .p-summary li {
  font-size: calc(0.85em + 0.25vw);
  line-height: 1.58;
}


/* ----- ARTICLES FALC --------- */

div.highlight-content.present-falc {
  display: flex;
  flex-direction: column;
  gap: calc(2rem + 0.5vw);
}

article.main.falc div.e-content {
  max-width: 45rem;
  counter-reset: step;
}

article.main.falc div.e-content p,
  article.main.falc div.e-content li,
  article.main.falc div.e-content dt,
  article.main.falc div.e-content dd {
    font-size: calc(1.2em + 0.25vw);
}

article.main.falc div.e-content li li {
    font-size: 100%;
}

article.main.falc div.e-content p + p,
  div.falc-group + p, div.falc-group + ul {
    margin-top: 1.1em;
}
article.main.falc div.e-content li + li {
  margin-top: 0.8em;
}

article.main.falc div.e-content > h2 {
  position: relative;
  padding: 1em 0 0 3em;
  border-top: 1px solid var(--n-medium);
}
article.main.falc div.e-content > h2::before {
  display: inline-block;
  position: absolute;
  width: 2em;
  height: 2em;
  top: 1em;
  left: 0;
  font-size: 90%;
  font-variation-settings: var(--fvs-bold);
  line-height: 2em;
  content: counter(step);
  counter-increment: step;
  text-align: center;
  color: var(--text-inv);
  background-color: var(--body-text);
  border-radius: 100%;
}

article.main.falc div.e-content > h3 {
  font-size: calc(1.35em + 0.25vw);
}

article.main.falc div.e-content > h4 {
  font-size: calc(1.2em + 0.35vw);
}

nav.falc-nav {
  max-width: 35rem;
  background-color: var(--n-light);
  padding: 1.25rem 2rem 2rem;
  margin: 1rem 0;
  border-radius: var(--radius);
}
article.main.falc nav.falc-nav h2 {
  font-size: calc(1em + 1vw);
  margin: 0 0 1em;
}
article.main.falc nav.falc-nav ol {
  margin-left: 1em;
}
article.main.falc nav.falc-nav li {
  font-size: calc(1.2em + 0.25vw);
  line-height: 1.5;
}
article.main.falc nav.falc-nav li + li {
  margin-top: 1em;
}

div.falc-group {
  display: grid;
  grid-template-columns: auto minmax(100px, 200px);
  align-items: center;
  gap: 3rem;
}

article.main.falc div.e-content > ul, article.main.falc div.e-content > ul ul {
    margin-right: 0;
}


/* -------- ANNUAIRES ------- */

#mdph-search {
  background-color: var(--n-main-light);
  padding: 1rem;
  margin: 1rem 0;
  border-radius: var(--radius);
}

#mdph-dep-input {
  width: 70%;
  max-width: 25em;
}

div.interactive-map {
  display: none;
  margin-top: 2rem;
}

#map-france {
  position: relative;
  background-image: url(../img/video-bg.svg);
  background-color: var(--interaction-color-light);
  background-blend-mode: hard-light;
  background-size: cover;
  padding: 7vw;
  margin-top: 1rem;
}

#map-france svg {
  max-width: 1000px;
  margin: 0 auto;
}

p.map-tooltip {
  display: none;
  position: absolute;
  width: 10em;
  font-size: 0.95em;
  line-height: 1.2;
  font-variation-settings: var(--fvs-semibold);
  text-align: center;
  color: var(--body-text);
  background-color: var(--body-bg);
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 2px 3px 5px rgba(0,0,0,.8);
  z-index: 2000;
}
p.map-tooltip::before {
  display: block;
  position: absolute;
  top: -10px;
  left: calc(50% - 10px);
  content: "";
  width: 20px;
  height: 20px;
  background-color: var(--body-bg);
  transform: rotate(45deg);
}

p.map-tooltip.active {
  display: block;
}

#map-france svg {pointer-events: all;}
#map-france svg path {
  cursor: pointer;
}
div.view-list.frame {
  padding: 0;
}
section.directory-sheet {
  position: relative;
  padding: 1rem 1.5rem 1.5rem;
  border-bottom: 1px solid var(--n-medium);
}

section.directory-sheet h2 a {
  color: var(--body-text);
  text-decoration: none;
}

section.directory-sheet.active,
section.directory-sheet h3 a:hover::after {
  border: 1px solid var(--interaction-color);
}

section.directory-sheet dl a {
  position: relative;
  z-index: 2;
}
section.directory-sheet .illustration {
  display: none;
  max-width: 150px;
  margin-top: calc(1.5rem + 1vw);
}
p.view-map {display: none;}


/* -------- BORDER DIRECTORY -------- */

div.member-entry {
  display: flex;
  flex-direction: column;
  gap: 1rem 1.5rem;
}
div.member-entry .illustration {
  flex-basis: max-content;
  max-width: 125px;
}
div.member-entry dl {
  display: flex;
  flex-direction: column;
}
div.member-entry dt {
  font-size: 1.18em;
  font-family: var(--stack-h);
  font-variation-settings: var(--fvs-bold);
  word-break: break-word;
  margin-bottom: 0.25em;
}
div.member-entry dl dd:last-of-type {
  padding-top: 1rem;
  margin-top: auto;
}

.org {
  display: block;
  font-size: 90%;
  margin-top: 1em;
}

div.member-sheet {
  padding: calc(1rem + 1vw);
}

div.member-sheet h2 {
  font-size: calc(1.2em + 0.25vw);
}

div.member-sheet .u-photo {
  max-width: 250px;
  min-width: 125px;
  margin-bottom: 1.5rem;
}
div.member-sheet dt {
  font-size: 1.2em;
  font-variation-settings: var(--fvs-bold);
  font-family: var(--stack-h);
}
div.member-sheet .p-note {
  max-width: 35em;
}

div.main-members div.group {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}


/* ------------ APPELS A PROJETS ----------- */

article.main .project-calendar {
  margin: 1rem 0 2rem;
}

.project-calendar strong {
  display: block;
  line-height: 1.1;
  padding-bottom: 0.25rem;
}

.project-calendar p {
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-left: 2rem;
}
.project-calendar p + p {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--n-medium);
}

.project-calendar p.due-date:only-child {
  background-position-y: 0;
}
p.due-date {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zM5 7V5h14v2H5zm3.23 9.41l1.06 1.06 2.44-2.44 2.44 2.44 1.06-1.06-2.44-2.44 2.44-2.44-1.06-1.06-2.44 2.44-2.44-2.44-1.06 1.06 2.44 2.44z'/%3E%3C/svg%3E");
  background-position-y: 1rem;
}
p.start-date {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M12.36 6l.4 2H18v6h-3.36l-.4-2H7V6h5.36M14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6L14 4z'/%3E%3C/svg%3E");
}

p.end-date {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm7 10c0 4.52-2.98 8.69-7 9.93-4.02-1.24-7-5.41-7-9.93V6.3l7-3.11 7 3.11V11zm-11.59.59L6 13l4 4 8-8-1.41-1.42L10 14.17z'/%3E%3C/svg%3E");
  background-position-y: 1rem;
}

.project-context {
  position: relative;
  padding-left: 0.75rem;
  margin: 0 0 1.5rem 2.25rem;
  border-left: 1px solid var(--n-medium-dark);
}
.project-context::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.1em;
  left: -2.25rem;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}
.project-context p {
  font-variation-settings: var(--fvs-bold);
}

.project-context dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  margin: 0.25em 0;
}
.project-context dd + dd {
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  border-left: 1px solid var(--body-text);
}

/* ------------ SEARCH RESULTS --------------- */

.search-results > * + * {
  margin-top: calc(1rem + 1vw);
}

.search-results .p-name a {
  word-break: break-word;
}


/* ------------ INFOS THEMATIQUES --------------- */

ul.sub-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
  max-width: 1000px;
  list-style-type: none;
  background-image: url(../img/header-home2.svg);
  background-size: cover;
  margin: 0 0 2rem;
}

.e-content > ul.sub-list {margin: 0 0 2rem;}

ul.sub-list::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(../img/header-home2.svg);
  background-size: cover;
  z-index: 2;
}

ul.sub-list li {
  position: relative;
  font-size: calc(1em + 0.25vw);
  font-variation-settings: var(--fvs-bold);
  background-color: rgba(237, 228, 250, 0.75);
  background-repeat: no-repeat;
  background-position: right 0.5rem bottom 0.5rem;
  background-size: 50px 50px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z' fill='%23FFFFFF'%3E%3C/path%3E%3C/svg%3E");
  border-radius: var(--radius);
}
ul.sub-list li + li {margin-top: 0;}

ul.sub-list a, ul.sub-list a:visited {
  display: block;
  position: relative;
  text-decoration: none;
  color: rgb(69, 18, 145);
  background-color: rgba(255,255,255,0);
  padding: 1rem 1rem 4rem 1rem;
  z-index: 4;
}
ul.sub-list a span {
  position: relative;
  z-index: 4;
}

ul.sub-list a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 3;
}

ul.sub-list li:hover {
  background-color: rgba(203, 209, 12, 0.75);
}

/* Sub-navigation */
nav.sub-nav {
  position: relative;
  background-color: var(--n-u-light);
  padding: 1rem 1rem 1rem 0;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
}

nav.sub-nav::before {
  display: block;
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  top: -15px;
  right: 1rem;
  background-color: var(--main-high);
  border-radius: 30px;
}

nav.sub-nav h2 {margin: 0 1rem 1rem 1rem;}

nav.sub-nav ul {
  list-style-type: none;
}

nav.sub-nav a {
  display: block;
  position: relative;
  color: var(--body-text);
  text-decoration: none;
  padding: 0.5rem 0 0.5rem 1rem;
}
nav.sub-nav a:hover, nav.sub-nav a[aria-current] {
  background-color: var(--main-high);
}
nav.sub-nav a[aria-current]::before {
  display: block;
  position: absolute;
  content: "";
  width: 25px;
  height: 48px;
  top: -18px;
  left: -10px;
  background-color: rgba(255,255,255,0.3);
  border-radius: 100%;
  transform: rotate(36deg);
}
/* ------------ NEWSLETTER --------------- */

/* EMAIL */
div.newsletter-grid {
  width: 800px;
}

div.newsletter-grid table {
  margin: 0;
}
  div.newsletter-grid td {
    padding: 0;
    border: none;
  }

  div.newsletter-grid h1 {
    padding: 0;
  }

    div.newsletter-grid h3 span {
  font-size: 16px;
  font-family: var(--stack);
  margin: 0;
}
div.newsletter-grid strong {
  font-weight: bold;
}

div.newsletter-grid .fix-size {line-height: 1.5;}

/* -- ON SITE --- */

.editorial > ul, .editorial > ol {
  margin: calc(1.5rem + 1vw);
}

.editorial > ul ul {
  margin: 1em;
}
.editorial > ul li li {
  font-size: 100%;
}

article.editorial > h2 {
  font-size: calc(1.45em + 0.5vw);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 1vw);
}
article.editorial > h3 {
  font-size: calc(1.35em + 0.35vw);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 0.5vw);
}
article.editorial > h4 {
  font-family: var(--stack);
  font-size: calc(0.95em + 0.35vw);
  font-variation-settings: var(--fvs-bold);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 0.25vw);
}
article.editorial > h5 {
  font-family: var(--stack);
  font-size: calc(0.97em + 0.25vw);
  font-variation-settings: var(--fvs-bold);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 0.25vw);
}
article.editorial > h6 {
  font-family: var(--stack);
  font-size: calc(0.9em + 0.25vw);
  font-variation-settings: var(--fvs-regular);
  margin: calc(1.1em + 1vw) 0 calc(0.8em + 0.25vw);
}

.editorial section.video h3 {
  color: var(--text-inv);
  margin: 0;
}

.editorial > p,
  .editorial > ul li,
  .editorial > ol li,
  .editorial > dl dt,
  .editorial > dl dd {
  font-size: calc(0.9em + 0.25vw);
  line-height: 1.58em;
}

.editorial > p + p, .editorial > li + li {
  margin-top: 0.8em;
}

.editorial > a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--interaction-color);
  background-color: inherit;
}

.editorial > a:visited {
  color: var(--body-text);
  background-color: var(--body-bg);
}
.editorial > a:hover {
  text-decoration-thickness: 0.15em;
}

/*-------------- addon newsletter*/

div.site-newsletter h2 {
  font-size: 1.35em;
  margin-bottom: 1em;
}
section.home.focus-on .p-name {
    color: var(--text-inv);
    background: transparent;
    margin-top: 0;
    margin-bottom: 1rem;
}
div.site-newsletter h2 strong {
  display: block;
  font-size: 80%;
}

div.site-newsletter p, div.site-newsletter li,
  div.site-newsletter dt, div.site-newsletter dd {
  font-size: 1.15em;
  line-height: 1.58;
}

div.site-newsletter .focus {
  color: var(--text-inv);
  background-color: var(--main-dark);;
}
div.site-newsletter .focus h2 {
  color: var(--text-inv);
  background-color: transparent;
  margin-top: 0;
  margin-bottom: 1rem;
}
div.site-newsletter .focus a {
  display: block;
  color: var(--text-inv);
  background-color: transparent;
  margin: 2rem 0 1rem;
}

div.site-newsletter ul:not(.categories) {
  margin: 1rem;
}
div.site-newsletter ul:not(.categories) li + li {
  margin-top: 0.5rem;
}

div.site-newsletter article.card {
  padding: 0;
  border: none;
}
div.site-newsletter .frame {
  padding: 1rem 1.5rem;
}

div.site-newsletter .sites {
  padding: 1rem;
}
div.site-newsletter .go-along::before {
  content: none;
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background-color: var(--n-medium);
}

div.site-newsletter div.sites img {
  display: block;
  max-width: 160px;
  margin-bottom: 0.5rem;
}

div.site-newsletter div.sites p + p {
  line-height: 1.3;
  margin-top: 1.5rem;
}

div.site-newsletter .u-photo img {width: 100%;}

div.site-newsletter div.first-level {
  margin: 1rem 0 2rem;
}

div.first-level .actus .frame {
  margin: 2rem 0;
}

div.site-newsletter .entry + .entry {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--n-medium);
}

div.site-newsletter .entry dd.p-name {
  font-size: 120%;
  font-weight: 700;
  margin: 0.25em 0 1em;
}

div.site-newsletter .entry dd.dt-duration {
  font-size: 90%;
}

.nl-footer {
  padding: 1rem 1.5rem 0;
  margin-top: 2rem;
  border-top: 1px solid var(--n-medium);
}
div.site-newsletter .nl-footer p {
  font-size: 0.95em;
}

div.site-newsletter .nl-footer p {
  max-width: 160px;
  margin-top: 1rem;
}

.empty-search {
  box-sizing: border-box;
  width: 80%;
  max-width: 600px;
  text-align: center;
  margin: calc(4rem + 1vw) auto;
}
.empty-search strong {
  font-size: 120%;
  margin-bottom: 1em;
  display: block;
}

form.user-pass #edit-actions, form.user-pass-reset #edit-actions {
  margin-top: 20px;
}

div#block-cnsa-content {
    margin-top: 20px;
}