@font-face {
    font-display: swap; 
    font-family: 'Signika Negative';
    font-style: normal;
    font-weight: 300;
    src: url('../polices/signika-negative-v21-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap; 
    font-family: 'Signika Negative';
    font-style: normal;
    font-weight: 700;
    src: url('../polices/signika-negative-v21-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}  

/* LES VARIABLES CSS */
:root { 
    --font-content: 'Signika Negative', Arial, Helvetica, sans-serif; 
    --color-bg: #fff;
    --color-txt: #184a5b;
    --color-mer: #466e80;
    --color-bleu-clair: #eaf5f5;
    --color-bleu-fonce: #e0f0f0;
    --color-emphase: var(--color-mer);
    --margin-s: 0.5rem;
    --margin: 1rem;
    --margin-l: 2rem;
    --margin-xl: 3rem;
    --largeur-s: 850px ;
    --largeur: 1000px ;
    --duree-transition: 0.2s ;
    --border-radius-s: 10px;
    --border-radius: 1rem;
    --border-radius-l: 2rem;
}

html { font-size: clamp(80%, calc(-.8em + 3.8vw), 100%); }
body { background: var(--color-bg); font-family: sans-serif; }

h1, .h1, h2, .h2, h3, .h3 { line-height: 1em; text-wrap: balance; font-weight: 700; }
h1, .h1 { font-size: 2.25rem; text-transform: uppercase; color: var(--color-mer);}
h2, .h2 { font-size: 2rem;}
h3, .h3 { font-size: 1.6875rem; }
h4, .h4 { font-size: 1.0625rem; }

strong { font-weight: 700; }

.page { font-size: 1.125rem; color: var(--color-txt); font-family: var(--font-content); font-weight: 300;}
.container { margin:auto; padding: var(--margin-s); width: var(--largeur); max-width: 100%; }

/* *** MENU *** */
#menuprincipal { text-transform: uppercase; text-align: center; }
#menuprincipal .niv1 { font-weight: 700; }
#menuprincipal a:hover svg, #menuprincipal a:active svg, #menuprincipal a:focus svg { fill: var(--color-mer);}

/* *** CONTENT *** */
header.cartouche { margin-bottom: var(--margin-l); text-align: center; }
header.cartouche h1 { margin-bottom: 0; }
.chapo a:not(.bouton), .texte a:not(.bouton) {color: var(--color-mer) ; text-decoration: underline;}
.chapo a:not(.bouton):hover, .chapo a:not(.bouton):active, .chapo a:not(.bouton):focus,
.texte a:not(.bouton):hover, .texte a:not(.bouton):active, .texte a:not(.bouton):focus { color: var(--color-txt) ; }
#main { position: relative; z-index: 10;  }
html:not(.page_sommaire) #main > .container {margin-bottom: var(--margin-l);}

/* *** HOME *** */
#header-home { position: relative; overflow: hidden; }
#header-home .logo { position: absolute; z-index: 10; left: 0; bottom: -1px; max-width: 60%; fill: var(--color-bg);}
#header-home .ui.wave {fill: rgba(255, 255, 255, 0.31); }

.boutons-accueil { position: relative ; z-index: 10; padding: var(--margin); background: var(--color-bleu-clair); font-weight: 700; text-align: center; text-transform: uppercase; }
.boutons-accueil ul { display: inline-flex; gap: var(--margin-l); padding: 0 var(--margin-l); text-align: center; background: var(--color-txt); color: var(--color-bg); border-radius: var(--border-radius); }
.boutons-accueil ul.menu-items li.item { padding: 0 ; flex-basis: 50%; }
.boutons-accueil a { position: relative; overflow: hidden; padding: var(--margin) 0; line-height: 1em;}
.boutons-accueil a::after { display: block; content: ''; position: absolute; left: 50%; bottom: -13px;
    width: 25px; height: 25px; background: var(--color-mer); border-radius: 50%;
    transform: translate3d(-50%,0,0); transition: background var(--duree-transition);}
.boutons-accueil a:hover::after, .boutons-accueil a:active::after, .boutons-accueil a:focus::after { background-color: var(--color-bg);}
.boutons-accueil svg { display: block; margin: 0.25rem auto; }
.boutons-accueil .titre { display: flex; justify-content: center; align-items: center;  height: 2em; }

#introduction { position: relative; overflow: hidden; background: var(--color-bleu-clair); }
#introduction > .container { position: relative; padding: var(--margin-s) var(--margin-s) var(--margin-l) var(--margin-s); }
#introduction svg.ui.bebette { left: auto; right: -50px; fill: var(--color-bg); }
html:not(.rubrique_actualites) #news { padding: var(--margin-l) 0; }
#news .container { width: var(--largeur-s); }
html:not(.rubrique_actualites) #news h2 { color: var(--color-mer); text-transform: uppercase;}
.rubrique_actualites #news h2, #news h3 { margin: 0; color: var(--color-txt); }
#news header.cartouche { margin-bottom: var(--margin-l); }
#news li.item { margin-bottom: var(--margin); padding-bottom: var(--margin); border-bottom: 1px solid var(--color-mer); }
#news li header { flex: 1; margin-bottom: var(--margin);}
#news li.autre header { margin-bottom: 0;}
#news li.premier .content { display: block; }
#news .introduction  { margin-bottom: var(--margin); }
#news p { margin: 0 ; }
#news .vignette_article {  margin: var(--margin-s) 0; text-align: left ; }
.date_article { color: var(--color-mer); font-size: 1rem;}

/* *** INVITED SPEAKERS *** */
.invitedspeakers {  text-align: center;}
.page_article .invitedspeakers { padding: var(--margin-xl) 0; }
#plenaryspeakers { background: var(--color-bleu-clair); }
.invitedspeakers h2 { margin-bottom: var(--margin-l); }
.invitedspeakers h3 { font-size: 1.5625rem; }
.invitedspeakers h3 small{ font-size: 1.125rem; }
.invitedspeakers .rond { margin-bottom: 0.25rem;}
.speaker #portrait { margin-top: var(--margin); }
.speaker .rond { margin: auto; width: 200px; height: 200px;}
.speaker header.cartouche { margin: var(--margin) 0;}

/* *** PRESENTATION DES INVITEES *** */
.biography { padding: 2rem; background: var(--color-bleu-fonce); font-size: 1rem; }
.biography h2 { font-size: 1.5rem; }
.biography p:last-of-type { margin-bottom: 0; }

/* *** FOOTER *** */
#footer { padding: var(--margin-l) 0; background: var(--color-txt); color: var(--color-bg);}
#footer nav { text-align: center;}

/* *** DIVERS *** */
iframe { margin-bottom: var(--margin);}
.littlefoot-footnote__button { color: var(--color-txt); background: transparent; border: 1px solid; }
.littlefoot-footnote__button:focus, .littlefoot-footnote__button:active, .littlefoot-footnote__button:hover { background: var(--color-mer); border-color: var(--color-mer) }
.littlefoot-footnote__button__number::after { color: inherit ;}