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

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

/* LES VARIABLES CSS */
:root {
    --font-titre: 'ritamsansbold', Arial, Helvetica, sans-serif;
    --font-contenu: 'ritamsansmedium', Arial, Helvetica, sans-serif;
    --font-contenu-bold: var(--font-titre);
    --coul-vert: #00a97a;
    --coul-menthe: #75c6c5;
    --coul-mauve: #264594;
    --coul-fushia: #e50b7e;
    --coul-fushia-clair1: #fcebf3;
    --coul-fushia-clair2: #fef7fb;
    --coul-jaune: #fad527;
    --coul-gris: #373736;
    --coul-gris-clair: #efefef;
    --coul-fond: #fff;
    --coul-texte: #000;
    --coul-emphase: var(--coul-mauve);
    --largeur: 1416px ;
    --largeur-s: 850px ;
    --duree-transition: 0.4s ;
    --duree-animation: var(--duree-transition) ;
    --marge: .5rem;
    --marge-s: calc( var(--marge) / 2) ;
    --marge-l: calc( var(--marge) * 2.5) ;
    --marge-xl: calc( var(--marge) * 5) ;
    --border-radius: 20px;
}

html { font-size: clamp(90%, calc(-.8em + 3.8vw), 100%); }
body { background: 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.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.25rem; }

strong { font-weight: normal; font-family: var(--font-contenu-bold); }

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

/* *** L'ENTETE *** */
#header { position: sticky; top: 0; z-index: 1050; background: var(--coul-texte); color: var(--coul-fond); }
#header svg { fill: var(--coul-fond); }
#header::after { display: block; content: ''; position: absolute; z-index: 20; bottom: -13px; left: 0;
    z-index: 20; width: 100%; height: 13px; background: url('../images/frise.svg') top left repeat-x; }
#header a.btn { display: inline-flex; margin-bottom: var(--marge); border-color: var(--coul-gris); }
#outils { font-size: .875rem; }
#outils li { padding:0 }
#sociaux ul { display: flex; justify-content: space-between; flex-direction: row; gap: 0.5em; flex-wrap: wrap; justify-content: center;}
#header a.rs:hover svg, #header a.rs:active svg, #header a.rs:focus svg { fill: var(--coul-emphase); }

/* *** LE CONTENU PRINCIPAL *** */
#main { line-height: 1.72em }
.visuel-entete { margin-top: -13px}
.chapo { font-size: 1.4375rem; line-height: 2rem; font-family:'ritamsansbold';
    background: var(--coul-fushia); color: var(--coul-fond); }
.chapo.texte h2 { font-size: 2.375rem; }
.chapo p:last-of-type { margin: 0 }
.chapo a, .texte a { text-decoration: underline; }
.chapo a:hover, .chapo a:active, .chapo a:focus,
#infospratiques  a:hover, #infospratiques  a:focus, #infospratiques  a:active { color: var(--coul-jaune) ; }
.texte a:hover, .texte a:active, .texte a:focus { color: var(--coul-mauve) ; }
.texte h2 { font-size: 1.875rem; }
.surtitre { margin: 0;}
.padding-contenu { padding: var(--marge-l); }
#logo-residence { position: absolute; z-index: 10; bottom: -40px; width: 100%; text-align: center;}

/* *** ACCUEIL *** */
html.page_sommaire #main .container { padding: 0; width: 1400px;}
#focus, #prochains_rdv, #actus { position: relative; margin-bottom: var(--marge-l); }
#focus header { position: absolute; z-index: 10; top: 50%; left: var(--marge); color: var(--coul-fond);
    transform: translate3d(0,-50%,0); }
#focus a::after { display: block; content: ''; position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: 100%; background: var(--coul-texte); opacity: 0.5;}
#focus .filtres { margin-bottom: var(--marge); }
#focus h2 { margin-bottom: 0; }
#focus h2, .fond-image h1 { max-width: 600px; }
#encart-dons { z-index: 50; position: fixed; right: 0; bottom: 8rem; padding: 0 var(--marge-l) var(--marge-l) var(--marge-l);
    border-top-left-radius: 2em; border-bottom-left-radius: 2em; text-align: center;
    background-color: var(--coul-texte); color: var(--coul-fond); }
#encart-dons picture { display: block; margin: -2rem auto  var(--marge) auto; max-width: 30vw; }
#encart-dons svg { fill: var(--coul-fond); }
#prochains_rdv > header, #actus > header { text-align: center;}
#prochains_rdv h2, #actus h2 { margin-bottom: 0.5em; }
#actus ul { margin: 0; }
#missions a { padding: 2.5rem 5rem; height: 100%; background: var(--coul-vert); color: var(--coul-fond); }
#missions li:nth-of-type(2) a { background: var(--coul-mauve); }
#missions li:nth-of-type(3) a { background: var(--coul-fushia); }
#missions svg { display: block; margin: auto; max-width: 306px; }
#missions h2 { margin: var(--marge) 0; padding-top: var(--marge); border-top: 1px solid; }
#missions p { font-size: 1rem; line-height: 1.4375em; }
#missions .btn.picto svg { fill: var(--coul-fond); }
#actions { padding: var(--marge-l) 0 ; }
#actions li:not(:last-of-type) a { border-right: 1px solid; }
#actions a { padding: var(--marge) var(--marge-l); }
#actions .vignette { margin-bottom: var(--marge); text-align: center; }
#actions h2 { margin-bottom: var(--marge); }
#actions p { font-size: 1rem; line-height: 1.4375em; }
#video { position: relative; }
#video a::after { display: block; content: ''; position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: 100%; background: var(--coul-texte); opacity: 0.5;}
#video header { position: absolute; z-index: 10; left: var(--marge-l); bottom: var(--marge-l); color: var(--coul-fond); }
#video h2, #video p { margin: 0; }

/* *** AGENDA / ACTUALITE *** */
#actualites li { border-top: 1px solid; }
.resume_agenda {position: relative;}
.resume_agenda a { padding: 1.25rem; text-align: left;
    transition: color var(--duree-transition), background var(--duree-transition);}
.resume_actualite a { display: block; padding: var(--marge);
    transition: color var(--duree-transition), background var(--duree-transition);}
.resume_agenda a:hover, .resume_agenda a:active, .resume_agenda a:focus,
.resume_actualite a:hover, .resume_actualite a:active, .resume_actualite a:focus { color: var(--coul-fond); background: var(--coul-texte); }
.resume_actualite p.date_actualite, .date_rdv { font-size: 0.875rem; }
.resume_agenda .h3 { margin: 0;}
.resume_actualite .h3 { margin-bottom: var(--marge);}
.resume_agenda .soustitre { margin-bottom: var(--marge-s); padding-bottom: var(--marge-s); font-size: 1rem; line-height: 1.4375rem; border-bottom: 1px solid; }
.resume_agenda .mot { position: absolute; z-index: 10; top: var(--marge-l); right: var(--marge-l); font-size: .75rem; }
.resume_actualite p { margin: 0; font-size: 1rem; line-height: 1.4375rem;}
.texte_actualite { padding: var(--marge) 0; }
.vignette_actualite { margin: 0; }
.lieu_rdv { display: flex; align-items: center; justify-content: flex-start; gap: var(--marge-s);
    font-family: var(--font-titre); line-height: 1.25em; text-transform: uppercase; font-size: .75rem;}
.lieu_rdv span { flex: 1; }
.resume_agenda a:hover svg , .resume_agenda a:active svg , .resume_agenda a:focus svg { fill: var(--coul-fond);}
#archives-saisons ul { margin: var(--marge-l) 0; }
#archives-saisons .intro { margin-bottom: var(--marge); padding: var(--marge); background: var(--coul-texte); color: var(--coul-fond); }
#archives-saisons ul .btn { font-size: 2rem; }

/* *** LES RUBRIQUES *** */

/* rubrique saisons */
.rubrique_saison #agenda { margin-bottom: var(--marge); }
#agenda .filtres { padding: 0 1.25rem; }
#lexique { margin-top: var(--marge-l); padding: var(--marge-l) 0; text-align: center; color: var(--coul-menthe); background: var(--coul-mauve); }
#lexique h2 { margin-bottom: var(--marge); }
#lexique header { margin-bottom: var(--marge-l); }
#lexique article { padding: var(--marge); }
#lexique article p { margin: auto; max-width: 200px; font-size: 1rem; line-height: 1.4375rem; }
#lexique li:not(:last-of-type) article { height: 100%; border-right: 1px solid; }

/* *** LES ARTICLES *** */
.contenu-type { margin: auto; max-width: 850px; }
.article_actualites header.cartouche { margin-bottom: var(--marge-l); }
.article_actualites h1 { margin-bottom: 0; }
.fond-image { position: relative; overflow: hidden; margin-top: -77px; }
.fond-image figure { margin: 0; }
.fond-image header { position: absolute; z-index: 10; top: 50%; left: 0; padding: 0 var(--marge-s) 0  var(--marge-l); color: var(--coul-fond);
    transform: translate3d(0,-50%,0); }
.fond-image::after { display: block; content: ''; position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: 100%; background: var(--coul-texte); opacity: 0.5;}
/* Article saison */
#infos-spectacle { display: flex; align-items: center; flex-wrap: wrap; gap: var(--marge-s); }
.a11y li { width: 38px; }
.a11y svg { fill: var(--coul-fond); }
.article_saison h1 small { font-family: var(--font-contenu); font-size: 1.5rem; }
.article_saison .chapo { background: var(--coul-vert);}
.residence .chapo { background: var(--coul-fushia);}
#infospratiques { line-height: 1.25em; background: var(--coul-texte); color: var(--coul-fond);}
.residence #infospratiques { background: var(--coul-mauve); }
#infospratiques li { margin-bottom: var(--marge); padding-bottom: var(--marge) ; border-bottom: 1px solid;}
#infospratiques a { display: inline;}
#infospratiques p { margin: 0;}
#infospratiques strong { color: var(--coul-jaune); }
#embarquement { padding-bottom: var(--marge-l); background: var(--coul-fushia); color: var(--coul-fond); }
#embarquement .container { padding-top: 0; line-height: 1.5em; }
#embarquement .demi-colonne { align-items: center; }
#embarquement h2 { font-size: 2.375rem; }
#embarquement a { text-decoration: underline; }
.embarquement-infos { font-size: 1rem; }
.embarquement-image { text-align: center;}
#connexe  { padding: var(--marge-l) 0;}
#connexe #agenda { padding: 0 var(--marge-l);}

/* Article présentation */
#frise-fourneau { position: relative; background: var(--coul-fushia-clair2); }
#frise-fourneau .annees { overflow: auto; padding: 0 var(--marge-l); background: var(--coul-fushia-clair1);  }
#frise-fourneau .annee {  position: relative; }
#frise-fourneau .wrapper {  padding: var(--marge-l); background: var(--coul-fond);
    max-width: 600px; border-radius: var(--border-radius);}
#frise-fourneau .annee .wrapper { margin-bottom: var(--marge-l);}
#frise-fourneau h2, #frise-fourneau h3 { position: relative; margin: 0;padding-top: var(--marge-l);  font-size: 5rem; color: var(--coul-fushia); }
#frise-fourneau h3 { padding: 0; font-size: 2.5rem; }
#frise-fourneau p { margin: 0; }
#frise-fourneau .puce { position: absolute; transform: translate3d(-50%,0,0);}

/* Article Temps fort (Programmation / Résidence) */
.article_tempsfort .fond-image .datesevenement, .article_tempsfort .fond-image .soustitre { font-size: 1.25rem; font-family: var(--font-contenu); }
#afficheevenement { margin-bottom: var(--marge); }
#documentsevenement ul { margin:0; }
#documentsevenement li { margin-bottom: var(--marge-s); }
#tempsfort h2 { margin-bottom: var(--marge-l);; text-align: center; font-size: 3rem; }
#agendatempsfort { border-top: 1px solid; }
#agendatempsfort a { padding-bottom: var(--marge-s); padding-top: var(--marge-s); border-bottom: 1px solid; }
#agendatempsfort figure {margin: 0; }
#agendatempsfort .horaires { font-size: 0.875rem; }
#agendatempsfort .soustitre { margin: 0; padding: 0; border: 0; }
#agendatempsfort .lieu_rdv { text-wrap: balance; }
#archivestempfort { padding-top: var(--marge-l); }
#archivestempfort .btn { font-size: 1.25rem; }

/* *** AUTRES PAGES *** */
.page_404 #prochains_rdv { margin-top: var(--marge-l);}
.page_plan #main h2 { margin-bottom: .75em ; }

/* *** PIED DE PAGE *** */
#footer { margin-top: var(--marge-l); padding: var(--marge-l) 0; position: relative; background: var(--coul-texte); color: var(--coul-fond);
    font-size: 1rem;}
.page_sommaire #footer { margin: 0; }
#footer::before { display: block; content: ''; position: absolute; z-index: 20; top: -13px; left: 0;
    z-index: 20; width: 100%; height: 13px; background: url('../images/frise.svg') top left repeat-x;
    transform: rotate3d(0,0,1,180deg); }
#footer svg { fill: var(--coul-fond); }
#footer .logo-site {margin-bottom: var(--marge-l); }
#menus-pied { margin: auto; max-width: 945px; }
#menus-pied a { display: block; transition: transform var(--duree-transition);}
#menus-pied ul.liste-items { width: 230px;}
#menus-pied ul.liste-items a:hover, #menus-pied ul.liste-items a:active, ul.liste-items #menus-pied a:focus { transform: translate3d(.25em, 0, 0); }
.slogan-site, .schema.organization, #menus-pied .liste-items { margin-bottom: var(--marge); }
#menus-pied .liste-items li { padding: .2em 0; }
#menus-pied .liste-items li:not(:last-of-type) { border-bottom: 1px solid; }
.slogan-site { max-width: 180px; }
#footer #formulaire_recherche { margin-top: var(--marge-l); }
#logos-partenaires { text-align: center;}
#logos-partenaires img { margin: var(--marge-s);}