:root{
    /* Gestion des couleurs */
/* Thèmes de couleurs *
*    --couleur_base-1 : menus et icones
*    --couleur_base-2 : textes et liens
*    --couleur_base-3 : Bordures
*    --couleur_base-4 : Fonds
    
    
    /*Couleurs Logo CBAP */
    --couleur_cbap-1 : #eb7b04;
    --couleur_cbap-2 : #526a04;
    --couleur_cbap-3 : #04345c;
    --couleur_cbap-4 : #950d0f;
    
    /*Couleurs terre */
    --couleur_base-1 : #849324;
    --couleur_base-2 : #6f4415;
    --couleur_base-3 : #6b5c3e;
    --couleur_base-4 : #6b5c3e;
    
      
    
    
    /* déclinaison de la palette */
    
     --couleur_dark-1 : hsl(from var(--couleur_base-1) h calc(s - 15) calc(l - 10));
     --couleur_dark-2 : hsl(from var(--couleur_base-2) h calc(s - 15) calc(l - 10));
     --couleur_dark-3 : hsl(from var(--couleur_base-3) h calc(s - 15) calc(l - 10));
     --couleur_dark-4 : hsl(from var(--couleur_base-4) h calc(s - 15) calc(l - 10));

     --couleur_light-1 : hsl(from var(--couleur_base-1) h calc(s + 10) calc(l + 15));
     --couleur_light-2 : hsl(from var(--couleur_base-2) h calc(s + 10) calc(l + 15));
     --couleur_light-3 : hsl(from var(--couleur_base-3) h calc(s + 10) calc(l + 15));
     --couleur_light-4 : hsl(from var(--couleur_base-4) h calc(s + 10) calc(l + 15));
    
    --level0_background : hsl(from var(--couleur_base-4) h calc(s - 30) calc(l + 40));
    --level1_background : hsl(from var(--couleur_base-4) h calc(s - 40) 180 );
    --level2_background : hsla(from var(--couleur_base-4) h calc(s - 40) calc(l + 20) / 35%);
    --level3_background : hsla(from var(--couleur_base-4) h calc(s - 40) calc(l + 20) / 75%);
 
    
    --text_color : var(--couleur_dark-2);
    --link_color : var(--couleur_base-2);
    --link_underline : var(--couleur_light-2);
    
    --menu_color : var(--couleur_base-1);
    --button_color : var(--couleur_dark-1); /*ajuster en fonction du contraste*/

    --titre_color : var(--couleur_cbap-1); 
    --slogan_color : #000;
    --bzh_color : #000;
    --h1_color : #000;
    --h2_color : #000;
    --h3_color : #000;
    --h4_color : #000;

    --actif_color: #232220;
	--inactif_color: #88816d;
    --administration_color: rgba(255,255,255,0.2);
	 

    --link_background : var(--couleur_light-3);
    --menu_background : #000;
    
    
    /*bordures*/
    --ombre-claire-color: hsla(from var(--couleur_base-4) h calc(s + 20) calc(l + 35) / 35%);
    --ombre-sombre-color : hsla(from var(--couleur_base-4) h calc(s - 20) calc(l - 25) / 35%);
   --ombre-legere-claire: 1px 1px var(--S) var(--ombre-claire-color);
   --ombre-legere-sombre: 1px 1px var(--S) var( --ombre-sombre-color);
   --ombre-claire: 5px 5px 0.7rem var(--ombre-claire-color);
   --ombre-sombre: 5px 5px 0.7rem var( --ombre-sombre-color);
    
    
   --border-light : 1px solid hsla(from var(--couleur_light-3) h s calc(l + 15) / 75%);
   --border-dark : 1px solid var(--couleur_dark-3);
   --border-radius : 0.5rem;
   --border-diapo : 0 1px 1px 0;    
    
    /* Gestion des polices */
    --font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;  
    --font-family-heading: var(--font-family-base);
    
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */

    
     /* Tailles de police  */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;

    /* Poids de police */
    --font-weight-light: 300;   
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    

    /* Hauteur de ligne */
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.6;
    
    
    /*Espacements et dimensions diverses */
--menu_space-1 : 0.5rem;
--menu_space-2 : 0.2rem;

--space-1 : 1rem;
--space-2 : 0.5rem;
--space-3 : 0.2rem;
    
    --XXL: 3rem;
    --XL: 2rem;    
    --L: 1rem; 
    --M: 0.8rem;
    --S: 0.5rem;
    --XS: 0.2rem;
    
    --vignette-galerie : 150px;
    --vignette-illustration : 300px;
    --taille-galerie :calc( var(--vignette-galerie) * 2 );
    

 --transition_fast : 0.4s;
 --transition_slow : 0.8s;
    
    


}

/*initialisation*/
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

/*viewport en CSS*/
@-webkit-viewport { zoom: 1; width: device-width;}
@-moz-viewport { zoom: 1; width: device-width;}
@-ms-viewport { zoom: 1; width: device-width;}
@-o-viewport { zoom: 1; width: device-width;}
@viewport { zoom: 1; width: device-width;}

@font-face { font-family: 'angelina'; font-style: normal; font-weight: normal; src: url('squelettes/css/font/angelina2-webfont.eot'); src: url('squelettes/css/font/angelina2-webfont.eot?#iefix') format('embedded-opentype'), url('squelettes/css/font/angelina2-webfont.woff2') format('woff2'), url('squelettes/css/font/angelina2-webfont.woff') format('woff'), url('squelettes/css/font/angelina2-webfont.ttf') format('truetype'), url('squelettes/css/font/angelina2-webfont.svg#angelinaregular') format('svg');}


@font-face { font-family: 'poiret'; font-style: normal; font-weight: normal; src: url('squelettes/css/font/PoiretOne-Regular.eot'); src: url('squelettes/css/font/PoiretOne-Regular.eot?#iefix') format('embedded-opentype'), url('squelettes/css/font/PoiretOne-Regular.woff2') format('woff2'), url('squelettes/css/font/PoiretOne-Regular.woff') format('woff'), url('squelettes/css/font/PoiretOne-Regular.ttf') format('truetype'), url('squelettes/css/font/PoiretOne-Regular.svg#PoiretOneRegular') format('svg');}

@font-face {
  font-family: 'cbap';
  src: url('https://www.beta.centrebreton.org/squelettes/css/font/cbap.eot?#iefix') format('embedded-opentype'),  
  url('https://www.beta.centrebreton.org/squelettes/css/font/cbap.woff') format('woff'), 
  url('https://www.beta.centrebreton.org/squelettes/css/font/cbap.ttf')  format('truetype'), 
  url('https://www.beta.centrebreton.org/squelettes/css/font/cbap.svg#cbap') format('svg');
  font-weight: normal;
  font-style: normal;
}



html, body { height: 100%; scroll-behavior: smooth;} 
body, div, ul, li { margin: 0; padding: 0; border: 0;}


body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--text_color);
	background-color: var(--level0_background);
}

body > div:first-of-type {
	display: table;
	height: 100%;
	width: 100%;
}

ul {list-style: none;}

a, a:hover { 
    color: var(--link_color);
    text-decoration: underline var(--link_underline) 1px;
    transition: all var(--transition_fast);

}
a:hover{
    filter: brightness(1.8);
}

/*conserver les images au bon ratio */
img {
	max-width: 100%;
	height: auto;
}

/*titrage*/
h1, h2, h3 {    font-family: var(--font-family-heading) ;
}
h1 {
    font-size: var(--font-size-xl) ;
    font-weight: var(--font-weight-semibold) ;
    line-height: var(--line-height-tight) ;
    color: var(--h1_color) ;
    margin: var(--space-4) var(--space-0) var(--space-2) var(--space-0) ;
	text-transform: uppercase;
	border-bottom: var(--border-dark);
}

h2 {
    font-size: var(--font-size-lg) ;
    font-weight: var(--font-weight-semibold) ;
    line-height: var(--line-height-tight) ;
    color: var(--h2_color) ;
    margin: var(--space-0) var(--space-0) var(--space-3) var(--space-0) ;
}

h3 {
    font-size: var(--font-size-md) ;
    font-weight: var(--font-weight-semibold) ;
    line-height: var(--line-height-tight) ;
    color: var(--h3_color) ;
}

h4 {
    font-size: var(--font-size-base) ;
    font-weight: var(--font-weight-semibold) ;
    line-height: var(--line-height-tight) ;
    color: var(--h4_color) ;
    margin: var(--space-3) var(--space-0) ;
}

/* style des titres bilingues, séparés par un slash '/' dans le texte */

h1 span, h2 span, h3 span, h4 span, h5 span, .lire span {
color: var(--bzh_color);
font-style: italic;
margin: 0; 
display: inline-block;
}
h1 span::before, h2 span::before, h3 span::before, h4 span::before, h5 span::before, .lire span::before {
   content: " / ";
}


/* Mise en page générale, commun à toutes les pages*/


#page section {
	margin-bottom: var(--XL);
	background-color: var(--level1_background);
	padding: var(--XL) var(--L);
	border: var(--border-light);
	box-shadow: var(--ombre-legere-sombre);
	border-radius: var(--border-radius);
    position: relative;
}


.logo_cbap {
	width: 40%;
	background-image: url("img/logoCBAP-min.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.conteneur_haut {
	width: 100%;
	display: grid;
	align-content: center;
	align-items: center;
	justify-items: center;
	justify-content: center;
}

div.conteneur_haut > div > div {
	display: table-cell;
	vertical-align: middle;
	height: 100%;
}
.conteneur_haut span {
	display: block;
	/*margin: 0.4em auto;*/
}

.slogan {
	font-size: var(--font-size-2xl);
	font-family: cbap,sans-serif;
	line-height: 1;
	color: var(--slogan_color);
	text-shadow: var(--ombre-legere-claire);
}
.titre_site {
	font-size: var(--font-size-3xl);
	font-family: cbap,sans-serif;
	line-height: 1;
	color: var(--titre_color);
	text-shadow: var(--ombre-legere-sombre);
}


/*reseaux*/
.reseau {
	float: right;
    margin-top: -1rem;
}


#reseaux {
	height: 0;
	text-align: center;
	position: absolute;
	padding: 1rem;
	margin: 1rem;
	right: 0;
	top: 0;
}

#reseaux.administration[name] {
    height: auto;
}


.item .reseaux {
	/* float: none; */
	grid-column: span 3;
}
.socialtags img { 
	height: 1.5rem;
}
.socialtags-hovers {
	opacity: .6;
}

#reseaux .m29 button::before {
	background-color: indianred;
}


/* Page d'accueil div class=sommaire */
#accueil {
	background-color: #011c35;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	background-position: top;
	-webkit-background-size: cover;
	background-size: cover;
	position: fixed;
	z-index: -1;
	background-image: url("img/fond_0_web.jpg");
}

.sommaire .conteneur_haut {
	min-height: 100vh;
	height: 100%;    
}




#splash {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: calc(100% - 6em);
	cursor: pointer;
}

/*pages internes rubriques et articles */

.conteneur_haut {
	background-image: url("img/fond_0_pages.jpg");
	background-repeat: no-repeat;
	height: 180px;
	background-position: bottom;
	webkit-background-size: cover;
	background-size: cover;
}


.item {
	/* border: var(--border-light); */
	display: grid;
	grid-template-columns: 0 calc( var(--vignette-illustration) + ( var(--space-2) * 2) ) 2fr;
	margin-top: var(--space-2); 
	/* padding: 0.5em; */
}

.item > div:first-of-type {
	border-right: var(--border-dark);
	padding-right: var(--space-1);
	max-width: calc( var(--vignette-illustration) + ( var(--space-2) * 2) );
}

.item > div:nth-of-type(2) {
	margin-left: var(--space-1);
}

.article .item  {
	/*grid-template-rows: 1fr auto;*/
} 

.item  > div:last-of-type {
	grid-column: span 3;
}
.item div {
	word-wrap: anywhere;
    display : inline-block;
}

/*menu et boutons*/
/* #conteneur_menu : contient le menu, en dessous du bandeau */
#conteneur_menu {position:sticky;	top: 0px; width: 100%; opacity: .99; text-align:center; z-index:1;}
 
#conteneur_menu::before {
	content: "";
	backdrop-filter: blur(0.5rem) !important;
	-webkit-backdrop-filter: blur(0.5rem) !important;
	mask: linear-gradient(black 60%,transparent);
	width: 100%;
	height: 3rem;
	display: block;
	position: absolute;
}


.menuder ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .2s;
-webkit-transition: .8s all .2s;
transition: .8s all .2s;
background-color: var(--menu_background);
} 
 
 
.menuder, .menuder ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}

.menuder li{
display:inline-block;
position:relative;
padding: var(--menu_space-1);
}

.menuder ul li{
display:inherit;
border-top:1px #dfcfa1 solid;
}

.menuder li:hover ul{
max-height:20em;
}


.menuitem button {
    background-color: transparent;
    border: 0;
    color: var(--menu_color);
}

.menuitem button:hover {
    filter: brightness(50%); -webkit-filter: brightness(150%); -moz-filter: brightness(150%); -o-filter: brightness(150%); -ms-filter: brightness(150%);
cursor: pointer;

}
.menuitem button:before {
    content:"";
    mask-image: url("https://www.beta.centrebreton.org/squelettes/css/img/sprite_cbap-min3.svg");
    font-size: 0;
    background-color: var(--menu_color);
    width: 48px;
    height: 48px;
    border: 0;
    margin: auto;
    display: block;
}


.switch.menuder {
    width: 100%;
    background-color: var(--menu_background) ;
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
    min-height : 3rem;
}

#m21 {display:block; right:20px; bottom:20px; position:fixed;} /*retour haut de page */
#m22 {display: block; bottom: 20px; position: fixed; margin-left: calc( 50% - 24px );} /*flèche suivant */


#m0 button:before{ mask-position: 0 0px;}	/*home*/
#m1 button:before{ mask-position: 0 -48px;}	/*musique*/
#m2 button:before{ mask-position: 0 -96px;}	/*info*/
#m3 button:before{ mask-position: 0 -144px;}	/*image*/
#m4 button:before{ mask-position: 0 -240px;}	/*lettre*/
#m5 button:before{ mask-position: 0 -192px;}	/*agenda*/
#m6 button:before{ mask-position: 0 -288px;}	/*forum*/
#m7 button:before{ mask-position: 0 -336px;}	/*sortir*/
#m8 button:before{ mask-position: 0 -384px;}	/*recherche*/
#m9 button:before{ mask-position: 0 -432px;}	/*poubelle*/
#m10 button:before{ mask-position: 0 -480px;}	/*ajouter aricle*/
#m11 button:before{ mask-position: 0 -528px;}	/*ajouter rubrique*/
#m12 button:before{ mask-position: 0 -576px;}	/*crayon plus*/
#m13 button:before{ mask-position: 0 -624px;}	/*lien*/
#m14 button:before{ mask-position: 0 -672px;}	/*croix fermer*/
#m15 button:before{ mask-position: 0 -720px;}	/*enregistrer*/
#m16 button:before{ mask-position: 0 -768px;}	/*lien petit*/
#m17 button:before{ mask-position: 0 -816px;}	/*crayon petit*/
#m18 button:before{ mask-position: 0 -864px;}	/*poubelle petit*/
#m19 button:before{ mask-position: 0 -912px;}	/*plus menu*/
#m20 button:before{ mask-position: 0 -960px;}	/*moins menu*/
#m21 button:before{ mask-position: 0 -1008px;}	/*fleche haut*/
#m22 button:before{ mask-position: 0 -1056px;}	/*fleche bas*/
#m23 button:before{ mask-position: 0 -1104px;}	/*archives*/
#m29 button:before {mask-position: 0 -1392px;}		/*annuler*/
#m30 button:before{ mask-position: 0 -1440px;}	/*connect*/
#m35 button:before{ 
    mask-position: 0 -1680px; 
    background-color: var(--button_color)}	/*reseaux*/

.m28 button:before {mask-position: 0 -1344px;}		/*ok*/
.m29 button:before {mask-position: 0 -1392px;}		/*annuler*/





.simple{text-decoration:none;}
.cacher_fleche {opacity: 0;}

#menuactif { display: none;}
#menu_bar > input { display: none; position: absolute; top: 0; left: -100px;}

.menuder li, .menuder a { color: var(--menu_color);}
.menuder ul { list-style: none;min-width: 180px;}
.menuitem span { display: inline-block; margin-top: 48px;}
.menuitem a {text-decoration: none;}

.fixed {
    position: fixed !important;
    top: 0 !important;
}

/* Portfolio des articles */
.galerie {
	display: flex;
	grid-template-columns: repeat(auto-fill, minmax(calc( var(--vignette-galerie) + var(--space-1)*2 + var(--space-2)*2), 1fr));
	text-align: left;
    clear: both;
    grid-column: span 3;
}

.galerie::before{
  /*  --variable: 100;

    --variable: calc( var(--vignette-galerie) + ( var(--space-1) * 2) ;
    counter-reset: variable var(--variable);
    content: counter(variable);
    width: calc( var(--vignette-galerie) + var(--space-1)*2 + var(--space-2)*2);
    height: 1rem;
    border: 1px solid black;
    */
    
}
.un_media {
	width: var(--vignette-galerie);
	height: var(--vignette-galerie);
	padding: var(--space-2);
	margin: var(--space-1);
	min-width: 0;
	min-height: 0;
	box-shadow: var(--ombre-legere-sombre);
	border: var(--border-light);
	border-width: var(--border-diapo);
}

.galerie .un_media div.logo {
	display: flex;
	justify-content: center;
	align-content: center;
	width: 150px;
	height: 150px;
	overflow: hidden;
	margin: auto;
}
.infos img {
	width: var(--font-size-xl);
	margin-top: -50%;
}

/* Pied de page */

#pied {
    background-color: var(--menu_background);
    color: var(--menu_color);
    display: table-row;
  /*  min-height: 2em; */
    text-align: center;
   /* clear: both; */
}

#pied #legal{
margin:auto;
}

#pied a{
	display: inline-block;
    color: var(--menu_color);
}


#pied a::before {
	content: " | ";
}


/*formulaires */
.boutons input {
  background-image: url("https://www.beta.centrebreton.org/squelettes/css/img/sprite_cbap-min3.svg");
  background-color: transparent;
  font-size: 0;
  width: 48px;
  height: 48px;
  border: none;
  cursor:pointer;
}

.boutons .m24 {background-position: 0 -1152px;}     /*recherche*/

.fleche {
	transition: opacity 1s;
}



/*interactivité*/
.administration {
	padding:var(--menu_space-1);
	visibility:hidden;
	opacity:0;
   transition:visibility 0.2s linear,opacity 0.2s linear;
   background-color: #FFF;
}
	 
.administration[name] {
	visibility: visible;
	opacity: 1;
}

/*formulaire de recherche*/
#lien_recherche {
   background-color: rgba(255,255,255,0.2);
}

#lien_recherche[name] {
   /* position: relative;*/
}


#lien_recherche .editer-groupe {
    display: flex;
    justify-content: center;
}

input#recherche {
    max-width: calc( 90vw - 48px );
    margin: auto 0;
}


/*mise en page */
#page {
	margin: 0 15%;
}

#page a {
	color: var(--link_color);
}

.suite {
	float: right;
	font-size: var(--font-size-sm);
	font-style: italic;
    margin: 0 0 var(--space-1) var(--space-1);
}

/*menus internes à chaque rubrique : sous-rubriques et articles */
.lire {
    clear : both;
}

.menu_rubriques li, .menu_articles li {
	margin-bottom: var(--space-2);
	border-left: var(--S) solid var(--menu_color);
	background-color: var(--level3_background);
	transition: all var(--transition-fast);
	padding: var(--XS) var(--S);
}

.menu_rubriques li a , .menu_articles li a  {
	text-decoration: none;
    color: var(--text_color) !important;
}



.menu_rubriques li a span, .menu_articles li a span {
	display: block ;
	/* font-size: var(--font-size-xs) ; */
	font-style: italic ;
	color: var(--color-text-muted) ;
	/* margin-top: var(--space-1) ; */
}

/* Styles de l'agenda */

.agenda_cbap, .agenda_partenaires, .agenda_profs {
	margin: 0;
}
.agenda_cbap::before {
	content: '\0025A0\0000A0 ';
	color: #57a3d3;
}
.agenda_partenaires::before {
	content: '\0025A0\0000A0 ';
	color: #e68d0e;
}
.agenda_profs::before {
	content: '\0025A0\0000A0 ';
	color: #93b817;
}
.agenda_fini {
	opacity: 0.6;
	font-style: italic;
}
nav.pagination {
	background-color: rgba(0,0,0,0.1);
	grid-column: inherit;
}
}
.pagination, .tri {
	background: var(--spip-color-gray-lighter);
	margin: 0;
	margin-top: 1em;
	padding: calc(var(--spip-list-spacing-y) / 2) calc(var(--spip-list-spacing-x) / 2);
	font-size: 0.85em;
	font-weight: bold;
	text-align: var(--spip-right);
	white-space: nowrap;
}
.pagination a, .tri a {
	transition: background 0.1s;
}
.pagination .pagination-items {
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	border-radius: inherit;
}
.pagination .pagination-items {
	justify-content: center !important;
}
.pagination-item:not(:first-child)::before {
	content: "\00007C";
}