/*
01. Couleurs
02. Titraille
 02.01 h3
03. Table
04. Onglets (cf. Couteau suisse)
05. spip_documents
06. Lignes de séparation
07. Liste numérotée
08. Liste 'bullet points'
09. Blockquote
  09.01 spip_poesie
  09.02 spip_poesie
  09.03. twitter
10. Blocs dépliables
11. Pagination
12. Blocs de tri
13. Plugin emb PDF
14. Exposants
15. Division, découpe d'une page (cf. Couteau suisse)
16. Boutons spip d'admin
17 Plugin Social Tags / Imprimir_documento  
18. Notes de bas de page (cf. plugin littlefootnote)
19. Plugin Spip colonnes 
20. Glossaire interne / Liens directs
21. Enluminures typographiques V3
  21.01   Encadré 
22. Liens*/
/*


/* 01  Couleur 
-----------------------ƒ----------------------------------------------------------------*/
/* .texte p a {color: var(--theme-color); }
.texte p a:focus, .texte p a:hover {color:var(--themehover-color); }*/


.bloc-pagination a, .bloc-pagination .on,
.bloc-pagination span.next a, .bloc-pagination span.prev a {
color:var(--theme-color); border: 2px solid var(--theme-color);}

.bloc-pagination .on, .bloc-pagination a:hover, .bloc-pagination span.next a:hover, .bloc-pagination span.prev a:hover {
background-color:var(--theme-color);border: 2px solid var(--theme-color); }



/* 02. Titraille
---------------------------------------------------------------------------------------*/
/* 02.01 Intertitres - reprise des styles de fancy-title title-border du modèle intertitre*/
.intertitre h2.spip, .intertitre h3.spip  {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-top :0.25rem !important;
  margin-bottom: 2rem;
  text-align:left;
}
/*  Lien glossaire dans un intertitre : on désactive le flex pour que le mot glossaire ne soit pas collé au reste d el'intertitre */
h2.spip a, h3.spip a {
  display: inline-block;
}

h2.spip::after, h3.spip::after  {
  border:none;
}

/*  en test : display: flex; a été retiré  de h4.spip et h5.spip car cela colle le lien glossaire au reste du texte */

h4.spip, h5.spip  {
  position: relative;
  display: -ms-flexbox;
  -ms-flex-align: center;
  align-items: center;
  margin-top :0.25rem !important;
  margin-bottom: 1rem;
  text-align:left;
}


h2.spip::after, h3.spip::after  {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color : var(--theme-color);
  opacity: 0.2;
  content: '';
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  height: 0;
  margin-left:0.75rem
}
.page_article h2.spip::after, .page_article h3.spip::after,
.page_evenement h2.spip::after, .page_evenement h3.spip::after {
  border: none;
}

.page_article h2.spip, .page_article h3.spip,
.page_evenement h2.spip, .page_evenement h3.spip {
  border: none;
  margin-top :2rem !important;
  margin-bottom: 1rem;
}






/* 03. Table
---------------------------------------------------------------------------------------*/
.table th, table.spip th {
font-family: var(--cnvs-secondary-font);
text-transform : var(--cnvs-featured-box-font-tt);
font-weight :600
}


table.spip > caption {
  font-weight:bold;
  text-align:left;
  font-family:var(--font-text);
  caption-side :top;
  color:inherit;}
table > caption {caption-side :top;}}


:root,[data-bs-theme=dark] {
--bs-border-color: red;}
/* Petits écrans : adaptation styles spip  */
@media (max-width: 640px) {
   table.spip tr {border-bottom: 1px solid var(--bs-border-color);}}



.dark table.spip {
color: var(--blanc);}
.dark table.spip tr {border-bottom: 1px solid var(--blanc);}}







/* 04. Onglets (Tabs) (customisation des tabs spip cf. couteau suisse/outils/decoupe.css) sur base de ce modèle
https://themes.semicolonweb.com/html/canvas/block-content-tab-2.html
---------------------------------------------------------------------------------------*/
div.onglets_bloc {
  position:relative;width:100%;clear:both;
  background:transparent; 
  padding:15px ; 
  margin: 20px 0px; 
  z-index:1;}


div.onglets_bloc .onglets_liste  {
  display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    border-bottom: 1px solid #ddd;
    list-style: none;
    padding:0 15px;
    white-space: normal;
    justify-content: space-around !important;
  }

div.onglets_bloc .onglets_liste h2.onglets_titre {
float: left;
border: 0;
height: auto; 
text-align: center;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
background-color:transparent;
color:var(--noir);
top:0px;
margin:1px 1px 20px 1px;
padding:0px 1rem;
font-family: var(--primary-font)}
.dark div.onglets_bloc .onglets_liste h2.onglets_titre {color:var(--blanc);}


div.onglets_bloc .onglets_liste h2.onglets_titre.selected {border: 0;height:auto;background-color:transparent;}
div.onglets_bloc .onglets_liste h2.onglets_titre a{
  top: 0; 
  color:var(--noir);
  height: auto;
  line-height: 1;
  background-color: transparent;
  font-size: 1em;
  font-weight: bold;
  padding: 0;
 text-transform: uppercase}
.dark div.onglets_bloc .onglets_liste h2.onglets_titre a {color:var(--blanc);}

div.onglets_bloc .onglets_liste h2.onglets_titre.selected a {color: var(--theme-color)}
div.onglets_bloc .onglets_liste h2.onglets_titre.hover a{color: var(--theme-color)}
.dark div.onglets_bloc .onglets_liste h2.onglets_titre.selected a {color: var(--blanc)}
.dark div.onglets_bloc .onglets_liste h2.onglets_titre.hover a{color: var(--blanc)}


div.onglets_bloc .onglets_liste h2.onglets_titre i {display: block; font-size: 42px;margin: 0 0 17px 0;color: var(--noir);}
div.onglets_bloc .onglets_liste h2.onglets_titre.selected i {color: var(--theme-color)}
div.onglets_bloc .onglets_liste h2.onglets_titre.hover i{color: var(--theme-color)}
.dark div.onglets_bloc .onglets_liste h2.onglets_titre i {display: block; font-size: 42px;margin: 0 0 17px 0;color: var(--blanc);}
.dark div.onglets_bloc .onglets_liste h2.onglets_titre.selected i {color: var(--blanc)}
.dark div.onglets_bloc .onglets_liste h2.onglets_titre.hover i{color: var(--blanc)}

div.onglets_bloc .onglets_liste h2.onglets_titre span, 
div.onglets_bloc .onglets_liste h2.onglets_titre.selected span,
div.onglets_bloc .onglets_liste h2.onglets_titre.hover span {display: block; color: var(--grismoyen) ; font-weight: normal; font-size:  90%; text-transform: none; margin-top:  1em}
.dark div.onglets_bloc .onglets_liste h2.onglets_titre span, 
.dark div.onglets_bloc .onglets_liste h2.onglets_titre.selected span,
.dark div.onglets_bloc .onglets_liste h2.onglets_titre.hover span {color: var(--blanc)}



div.onglets_bloc .onglets_contenu {
  display:none;
  clear:both;
  z-index:1;
  position:relative;
  top:0px;
  border:none;
  background:none;
  padding:20px 5px 20px 5px; margin: 0px;
  border :none;
}

div.onglets_bloc .onglets_contenu.selected {
display:block;
overflow:hidden;
border:none;}

div.onglets_bloc .onglets_contenu h3.soustitre {
color:var(--theme-color);
text-align: center;
}
.dark div.onglets_bloc .onglets_contenu h3.soustitre {
color:var(--blanc);
}

div.onglets_bloc .onglets_contenu p {padding-left: 5px ;padding-right:5px;}





/* 05. Spip_documents
----------------------------------------------------------------------------------------*/
.spip_documents_left{float:none;margin:20px auto; display:block;width: 100%;max-width: 100%}
 .spip_documents_right{float:none;margin:20px auto;display:block;width: 100%;max-width: 100%}
.spip_documents_center{float:none;margin:20px auto;display:block;width: 100%;max-width: 100%}

@media (min-width: 1200px) {
.spip_documents_left{float:left;margin : 0px 20px 20px -20px; width: 40%;max-width: 40%}
.spip_documents_right{float:right;margin : 0px -20px 20px 20px;width: 40%;max-width: 40%}
}

/* On annule le style de oembed.css */
.spip_documents .oembed {
    display: block;background: transparent;padding: 0px;border: 0px;}

/* On stylise le modèle  document_legende.html */
.spip_doc_legende { display: block; max-width: 100%; }
.spip_doc_titre, .spip_doc_descriptif, .spip_doc_credits {margin : 0px 0px; font-style: normal}


/* /* On annule style spip */

  
  @media (max-width: 576px) {
  .w-md-50 {
    width: 100% !important; } 


}

/* 06. Ligne séparation
----------------------------------------------------------------------------------------*/

hr.spip, hr, .filet_sep, .filet_sep_0, .filet_sep_1, .filet_sep_2  {border-color: var(--cnvs-contrast-500); margin:50px auto; clear:both;}
hr{margin:10px auto}
.filet_sep{width:100%;}
.filet_sep_0{border: 2px}
.filet_sep_1{border:15px ;}
.filet_sep_2{margin:30px auto;}



/* 07. Liste numérotées
----------------------------------------------------------------------------------------*/
/* styles issus de  http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/*/
ol.spip {
  counter-reset:li; /* Initiate a counter */
  margin-left:0; /* Remove the default left margin */
  padding-left:0; /* Remove the default left padding */
  margin-bottom:30px; }


ol.spip > li {
    position:relative; /* Create a positioning context */
    margin: 0 0 10px 0; /* Give each list item a left margin to make room for the numbers */
    padding:8px 8px 0px 50px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */

  }
ol.spip > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:0em;
    left:0em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:1.6em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it */
    margin-right:8px;
    padding:4px;
    text-align:center;
    color:  var(--theme-color);
    font-family:var(--secondary-font); 
    text-transform:uppercase;
    font-weight:500;
    font-size: 140%;

  }

.dark ol.spip > li:before, .dark ol.spip > li:before {
  color:  var(--blanc);
}
ol.spip > li strong {
  font-family:var(--primary-font); 
  text-transform:uppercase;
  font-weight:600; 
  letter-spacing:2;}
.dark ol.spip > li strong, .dark ol.spip > li strong {
  color:  var(--blanc);
}


/* 08. Liste 'bullet points'
----------------------------------------------------------------------------------------*/

ul.spip {margin-left: 0px; padding:0px; margin-bottom:30px; }
ul.spip li {margin-bottom : 1.5em;  }
ul.spip li:first-child  {margin-top : 1.5em;  }

@media (max-width: 640px) {
ul.spip{ margin-left: 0px; }}
ul.spip, li ul.spip, li li ul.spip { list-style: none; }
ul.spip > li, p.tiret {position:relative; padding-left: 40px; color:inherit;line-height: 1.6em;border:none;}
ul.spip > li:before, p.tiret:before {
  position: absolute;top: 0;left: 0;font-family: 'Font Awesome 6 Pro';content: "\f054"}
ul.spip > li > ul.spip > li:before {
  position: absolute;top: 0;left: 0;font-family: 'Font Awesome 6 Pro';content: "\f054";font-size:98%;}

p img.puce {display:none;padding-left: 15px;}
p.puce:before {position: absolute;top: 0;left: 0;font-family: 'Font Awesome 5 Pro';content: "\f054";}


/* 09. Blockquote
---------------------------------------------------------------------------------------*/
blockquote {border: none}
blockquote.spip:before, p q:before, blockquote.spip_poesie div:first-child:before { 
content:"\f10d";font-family: FontAwesome; color:var(--theme-color); display:block;}
blockquote.spip:before, q:before {font-size:60px;}
blockquote.spip_poesie div:first-child:before { font-size:40px;}

blockquote.spip, q {
text-align:center;background:none;padding :20px; width: 90%;display:block;margin : 20px auto;color:inherit; font-weight:bold;font-size:120%;}

blockquote.spip_poesie div {font-size:105%;font-weight: normal}
q:before, q:after {content:none} /* on efface les guillemets par défaut */


.lettrine p q:before {  
  padding:0px;
  margin:0px;
  line-height:inherit;
  font-weight:inherit;
  font-size:60px;
  vertical-align: baseline;
   border: 0;
   float:none}

/* 09.03. Modèle twitter */
.twitter{padding:30px; margin : 30px auto; width: 100%;position:relative;}
.twitter .twitter-tweet {margin : 0px auto;}
blockquote.twitter-tweet {display:block;}
iframe.twitter-tweet, twitter-widget {float:none; margin: 50px auto;}




/* 10. Blocs dépliables  */

.cs_blocs{
  padding:1rem; margin-bottom: 1rem;
  box-shadow: var(--cnvs-box-shadow-sm) !important;/* Equivalent à .shadow-sm */
  background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important; }
.dark .cs_blocs {
  margin-bottom: 0rem;
  background-color:rgba(var(--bs-bg-opacity,0))!important;
  box-shadow:0 0 0 rgba(0, 0, 0, 0.075) !important;
  border-bottom:  1px solid var(--cnvs-contrast-600)}
h3.blocs_titre:not(.dark):before, h3.blocs_replie:not(.dark):before {color:var(--theme-color);}
.dark h3.blocs_titre:before, .dark h3.blocs_replie:before {color:var(--blanc);}

.cs_blocs .blocs_titre {
  cursor:pointer;
  background:none;
  padding-left: 0px; /* le padding-left annule un style de header.css*/
}

.cs_blocs h3.blocs_titre{ 
  display: block;
  position: relative;
  cursor: pointer;
  color: var(--cnvs-toggle-title-color);
  font-size: var(--cnvs-toggle-font-size);
  font-family: var(--body-font)}
.dark h3.blocs_titre {text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);} 

h3.blocs_titre a{padding-left:1rem;color: var(--cnvs-toggle-title-color);}
h3.blocs_titre:before{font-family:FontAwesome;content:"\f057";}
h3.blocs_replie:before{font-family:FontAwesome;content:"\f055";}
.cs_blocs .blocs_destination{margin-top:20px;}
.cs_blocs table{background:var(--transparent);padding-left:100px;padding-right:25px;}
.cs_blocs .blocs_resume {padding-left:50px;color:#555; font-size: 95%;}



/* 11. Pagination Spip
----------------------------------------------------------------------------------------*/

.pagination .pagination-items { 
  list-style: none;margin: 0;padding: 1rem;display: flex;flex-direction: row;justify-content: center;}

.pagination  {
  clear:both;
  display:block;
  overflow:hidden;
  border: none;
  background:none; 
  margin: 5rem auto;
  padding: 20px;
  text-align:center;
  text-transform:uppercase;
  font-family :var(--secondary-font);}


.pagination a  { 
  margin:3px;padding: 10px 15px; border : 2px solid transparent; font-weight: 600;}
.pagination .on {color: var(--grismoyen); padding: 0px 10px;}



span.pagination-item-label .on {
border : 1px solid transparent;}

a.pagination-item-label {border : 1px solid var(--theme-color);color: var(--theme-color)}
a.pagination-item-label:hover {background-color: var(--theme-color);color: var(--blanc)}


/* 12. Blocs de tri 
----------------------------------------------------------------------------------------*/
.bloc-tri{clear:both;display:block;overflow:hidden;border:none;background:none;margin:20px auto;padding:20px;text-align:center;font-size:85%;font-family:var(--primary-font);}
.bloc-tri a{padding:10px 15px;margin:3px;font-weight:400;color:#999999;}
.bloc-tri strong.on{font-weight:400;}




/* 14. Exposants
----------------------------------------------------------------------------------------*/
sup.typo_exposants{font-size:50%;}
sup,.sup{position:relative;font-size:80%;font-variant:normal;line-height:0;vertical-align:baseline;}
sup,.sup{top:-0.2em;}


/* 15. Division d'une page (cf. Plugin Couteau suisse)
-------------------------------------------------------------------------------------*/
.decoupe_haut, .decoupe_bas {display:none !important;}

/* 16. Boutons spip d'admin  (sauf # FORMULAIRE_ADMIN)
-------------------------------------------------------------------------------------*/
#spip-admin { z-index: 100000;  left: 100px;}




/* 18. Notes de bas de page (cf. plugin littlefootnote)
----------------------------------------------------------------------------------------*/
/* Plugin Bigfoot - Customisation des notes de bas de page du fichier littlefoot.css */
.littlefoot-footnote__button {font-size: 1.4rem;font-weight:normal;}
.dark .littlefoot-footnote__button {background-color: var(--blanc)}
.littlefoot-footnote__wrapper{background:#FFF; padding: 5px;}
.littlefoot-footnote__wrapper::before {}
.littlefoot-footnote__content {background:#FFF; padding: 5px; margin:0px;}
.littlefoot-footnote__content p { overflow:hidden; font-size: 90%}
.dark .littlefoot-footnote__content, .dark .littlefoot-footnote__content p {
  shadow: none; color :var(--bs-body-color);
}
@media print {.littlefoot-footnote, .littlefoot-footnote__button {display: none !important;}}





/* 20. Glossaire du Couteau suisse */
a.cs_glossaire:hover span.gl_dl, #glossOverDiv span.gl_dl{
  background-color:inherit;font-size:inherit;color:var(--themecolor);display:none;}
a.cs_glossaire:hover span.gl_dd, #glossOverDiv span.gl_dd{text-align:left; font-weight:400;}
a.cs_glossaire span.gl_mot{border-bottom:0px dotted;}
a.cs_glossaire:hover span.gl_dt {display:none;}

span.gl_dd {font-size: 15px; color:#555; text-transform:none;}

a.cs_glossaire:hover {color:var(--theme-color);}

h3.spip a.cs_glossaire span.gl_mot {
border-bottom:none;
color:inherit;}


/* Empecher la definition de s'afficher comme les autres liens, vous pouvez donner les attributs standards de votre texte */
.dark a.cs_glossaire {
  color:var(--cnvs-contrast-800);
}


/* 21. Enluminures typographiques V3--------------------------------- 
----------------------------------------------------------------------------------------*/
/* 21.01   Encadré */
.texteencadre-spip {
  background : var(--gristresclair);
  border:1px solid var(--grisclair);
  font-family: var(--font-text);
  color : var(--noir);
  padding: 1em;
  margin : 3em auto;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}


/* 22. Liens. Surcharge styles spip 
----------------------------------------------------------------------------------------*/
a.spip_out:after, a.external:after, a.spip_mail:after, a.mailto:after, a[hreflang].spip_out:after,
a[hreflang].external:after, a.tel:after  {
  content: none;
}