@font-face {
    font-family:'agrandir-grand-black';
    src: url('../polices/agrandir-grand-black.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* LES VARIABLES CSS */
:root {
    --font-titre: 'agrandir-grand-black', Helvetica, Arial, sans-serif;
    --font-contenu: Helvetica, Arial, sans-serif;
    --coul-fond: #f3f3f3;
    --coul-texte: #231f20;
    --coul-emphase: var(--coul-fond);
    --largeur: 1000px ;
    --duree-transition: 0.4s ;
    --marge: 1rem;
    --marge-s: calc( var(--marge) / 2) ;
    --marge-l: calc( var(--marge) * 3) ;
    --marge-xl: calc( var(--marge) * 5) ;
}

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

h1, .h1, h2, .h2, h3, .h3 { font-family: var(--font-titre); line-height: 1em; text-wrap: balance;  }
h1, .h1 { font-size: 2.25rem; }
h1 small, .h1 small { font-size: 1rem; font-family: var(--font-contenu);}
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.5rem; }

small { font-family: var(--font-contenu); }
.page { font-size: 1.125rem; color: var(--coul-texte); font-family: var(--font-contenu); }
.container { margin:auto; padding:.5rem; width: var(--largeur); max-width: 100%; }

/* *** L'ENTÊTE *** */
.accueil { position: relative; display: inline-block; padding: var(--marge-s) var(--marge-l)  var(--marge-s) 0; font-family: var(--font-titre);
    background: var(--coul-texte); color: var(--coul-fond); }
#header { margin-bottom: var(--marge-l); }
.page_sommaire #header { display: none; }

/* *** LE CONTENU *** */
.chapo a, .texte a {text-decoration: underline;}
.chapo { font-weight: bold; font-size: 1.25rem;}

/* *** L'ACCUEIL *** */
.page_sommaire html, .page_sommaire body { height: 100%; }
.page_sommaire body, .page_article body { background-repeat:no-repeat; background-position: center; background-size: cover; background-attachment: fixed; }
.page_sommaire header.cartouche { height: 85vh; }
.page_sommaire h1 { margin-top: var(--marge-l); display: inline-block; padding: var(--marge) var(--marge) var(--marge) .5rem ; color: var(--coul-fond); }

#liste_articles {  display: flex; align-items: center; flex-direction: column; margin-bottom: var(--marge-l);}
#liste_articles li { max-width: 468px;}
#liste_articles a { display: block; position: relative; color: var(--coul-fond);}
#liste_articles div { position: absolute; left: 0; top: 0; padding: var(--marge); width: 100%;
    background: linear-gradient( to bottom,rgba(0,0,0,0.85),transparent); }
#liste_articles figure { margin: 0; }

#agenda, #presentation, nav#spectacles { margin-bottom: var(--marge-xl); padding: var(--marge-l); background: var(--coul-texte); color: var(--coul-fond); }
#agenda h2 { text-align: center; }
#agenda-liste h3 { font-size: 1rem; }
#agenda-liste p { margin: 0; }
#sociaux { text-align: center; }
#sociaux svg { margin-right: var(--marge); fill: var(--coul-fond); }

/* *** article *** */
.page_article .sect2 .fildariane { color: var(--coul-fond); }
.page_article .sect2 #main  { margin: 50vh 0 0 0; padding: var(--marge-l) 0; background: var(--coul-fond); }
.page_article .sect2 #footer { margin: 0; }
nav#spectacles h2 { text-align: center; }
nav#spectacles #liste_articles { margin: 0; }
nav#spectacles h3 { font-size: 1rem; }
.infos-spectacles {font-size: 1rem; }

/* *** autres pages *** */
.page_404 .chapo { margin: var(--marge-l) 0; font-size: 1.5rem; }
.page_plan .plan { margin: var(--marge-l) auto; }
.page_plan h2 { margin-bottom: .25em; }

/* *** PIED DE PAGE *** */
#footer { margin-top: var(--marge-l); padding: var(--marge); color: var(--coul-fond); text-align: right; font-size: 0.875rem;
    background: var(--coul-texte); }
.page_sommaire #footer { margin-top: 0; padding-top: var(--marge-l); background: linear-gradient( to top,rgba(0,0,0,0.85),transparent); }
#footer li { opacity: .8; }
#footer li:not(:last-of-type) { margin-right: var(--marge); }