/* ****************************************************************************************************************** */
/*                                           Styles pour "one-column" layout                                          */
/* ****************************************************************************************************************** */

fieldset.layout-paragraphs-field .layout--onecol .col-md-12 {
  float: left;
  width: 98%;
  margin-right: 1%;
  margin-left: 1%;
}

/* Clear floats after the columns */
fieldset.layout-paragraphs-field .layout--onecol:after {
  content: "";
  display: table;
  clear: both;
}

/* ****************************************************************************************************************** */
/*                                          Styles pour "two-cols-50-50" layout                                       */
/* ****************************************************************************************************************** */

fieldset.layout-paragraphs-field .layout--twocol-50-50 .col-md-6.first {
  float: left;
  width: 49%;
  margin-right: 2%;
}

fieldset.layout-paragraphs-field .layout--twocol-50-50 .col-md-6 {
  float: left;
  width: 49%;
}

/* Clear floats after the columns */
fieldset.layout-paragraphs-field .layout--twocol-50-50:after {
  content: "";
  display: table;
  clear: both;
}

/* ****************************************************************************************************************** */
/*                                          Styles pour "two-cols-34-66" layout                                       */
/* ****************************************************************************************************************** */

fieldset.layout-paragraphs-field .layout--twocol-34-66 .col-md-4 {
  float: left;
  width: 33%;
  margin-right: 2%;
}

fieldset.layout-paragraphs-field .layout--twocol-34-66 .col-md-8 {
  float: left;
  width: 65%;
}

/* Clear floats after the columns */
fieldset.layout-paragraphs-field .layout--twocol-34-66:after {
  content: "";
  display: table;
  clear: both;
}

/* ****************************************************************************************************************** */
/*                                          Styles pour "two-cols-66-34" layout                                       */
/* ****************************************************************************************************************** */

fieldset.layout-paragraphs-field .layout--twocol-66-34 .col-md-8 {
  float: left;
  width: 65%;
  margin-right: 2%;
}

fieldset.layout-paragraphs-field .layout--twocol-66-34 .col-md-4 {
  float: left;
  width: 33%;
}

/* Clear floats after the columns */
fieldset.layout-paragraphs-field .layout--twocol-66-34:after {
  content: "";
  display: table;
  clear: both;
}

/* ****************************************************************************************************************** */
/*                                      Styles pour "three-cols-25-50-25" layout                                      */
/* ****************************************************************************************************************** */

fieldset.layout-paragraphs-field .layout--threecol-25-50-25 .col-md-3.first {
  float: left;
  width: 24%;
  margin-right: 1%;
}

fieldset.layout-paragraphs-field .layout--threecol-25-50-25 .col-md-6 {
  float: left;
  width: 50%;
  margin-right: 1%;
}

fieldset.layout-paragraphs-field .layout--threecol-25-50-25 .col-md-3 {
  float: left;
  width: 24%;
}

/* Clear floats after the columns */
fieldset.layout-paragraphs-field .layout--threecol-25-50-25:after {
  content: "";
  display: table;
  clear: both;
}

/* ****************************************************************************************************************** */
/*                                      Styles pour "three-cols-33-34-33" layout                                      */
/* ****************************************************************************************************************** */

fieldset.layout-paragraphs-field .layout--threecol-33-34-33 .col-md-4.first {
  float: left;
  width: 32%;
  margin-right: 1%;
}

fieldset.layout-paragraphs-field .layout--threecol-33-34-33 .col-md-4 {
  float: left;
  width: 34%;
  margin-right: 1%;
}

fieldset.layout-paragraphs-field .layout--threecol-33-34-33 .col-md-4 {
  float: left;
  width: 32%;
}

/* Clear floats after the columns */
fieldset.layout-paragraphs-field .layout--threecol-33-34-33:after {
  content: "";
  display: table;
  clear: both;
}


/* ****************************************************************************************************************** */
/*                                      Styles pour paragraphe "Citation"                                             */
/* ****************************************************************************************************************** */


div#field-paragraphes-wrapper--item-1 div.paragraph--type--stories-quote,
div.paragraph--type--stories-quote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "«" "»" "‹" "›";
  position: relative;
}

div.field--name-field-stories-quote-text {
  padding: 0 40px;
  font-style: italic;
  color: #666666;
  position: relative;
}

div.field--name-field-stories-quote-text:before {
  position: absolute;
  top: -8px;
  left: 8px;
  content: open-quote;
  font-size: 50px;
  line-height: 30px;
  color: #999;
  
}

div.field--name-field-stories-quote-text:after {
  position: absolute;
  bottom: 0px;
  right: 10px;
  content: close-quote;
  font-size: 50px;
  line-height: 30px;
  color: #999;
  
}

div.field--name-field-stories-quote-citation {
  padding: 0 40px;
  font-weight: bold;
  color: #666666;
}

div.field--name-field-stories-quote-citation::before {
 content: "\2014\0020"  
}

div.field--name-field-stories-quote-citation-url {
  margin-top: 5px;
  padding: 0 40px;
  font-size: 0.9em;
}

/* ****************************************************************************************************************** */
/*                                      Styles pour paragraphe "Sommaire"                                             */
/* ****************************************************************************************************************** */

div.paragraph--type--stories-summary {
    display: block;
    background-color: #eaeaea;
    border: 1px solid #a0a0a0;
    margin: 15px auto;
    padding: 20px;
    width: 80%;
}

div.paragraph--type--stories-summary  div.field--name-field-stories-summary {
    margin: 10px;
}

/* ****************************************************************************************************************** */
/*                                      Styles pour paragraphe "Image adaptative"                                     */
/* ****************************************************************************************************************** */

div.paragraph--type--stories-responsive-image {
    display: block;
    margin: 15px auto;
    padding: 20px;
    width: 100%;
}

div.paragraph--type--stories-responsive-image  div.field--name-field-stories-responsive-image {
    display: block;
    float: none !important;
    margin: 10px auto;
    text-align: center;
}

/* ****************************************************************************************************************** */
/*                                      Styles pour liens dans paragraphes                                            */
/* ****************************************************************************************************************** */

a,
.link {
  color: #354594; 
}

a:hover,
a:focus,
.link:hover,
.link:focus {
  color: #e29043; 
}

a:active,
.link:active {
  color: #e29043; 
}


/* ****************************************************************************************************************** */
/*                                      Styles divers pour texte dans paragraphes                                     */
/* ****************************************************************************************************************** */

p.code {
    text-align: left;
    margin: 20px 15px !important;
    display: block !important;
    padding: 9.5px !important;
    font-family: 'Courrier' , monospace !important;
    font-size: 90% !important;
    line-height: 1.42857143 !important;
    color: #333 !important;
    word-break: break-all !important;
    word-wrap: break-word !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    overflow: auto;
    white-space: nowrap;
}

span.purple {
    color: var(--color-purple);
}
span.green {
    color: var(--color-green);
}

span.blue {
    color: var(--color-blue);
}

span.orange {
    color: var(--color-orange);
}
span.red {
    color: var(--color-red);
}

code.special {
    padding: 2px 4px !important;
    font-size: 90% !important;
    color: #3d3d6e !important;
    font-style: italic !important;
    background-color: #f9f2f4 !important;
    border-radius: 4px !important;
    font-family: 'Courrier' , monospace !important;
}

code.language-plaintext {
    font-family: 'Courrier' , monospace !important;
}


.rtejustify, .text-align-justify {
    text-align: justify;
}

.rteindent1 {
    margin-left: 40px;
}


pre {
    display: block !important;
    padding: 9.5px !important;
    margin: 10px 0 !important;
    font-family: 'Courrier' , monospace !important;
    font-size: 90% !important;
    line-height: 1.42857143 !important;
    color: #333 !important;
    word-break: break-all !important;
    word-wrap: break-word !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

div.paragraph li {
    padding-bottom: 12px;
    font-size: 1.071em;
    text-align: justify;
    line-height: 1.5; /** Pour équivalence vues CKeditor et Front office */
}

div.paragraph li li, div.paragraph li li li {
    padding-bottom: 12px;
    font-size: 1em;
    text-align: justify;
    line-height: 1.5; /** Pour équivalence vues CKeditor et Front office */
}

em.important {
    font-style: italic !important;
    font-size: 1em !important;
    color: black !important;
}

p.justify, p.normal {
    font-size: 1.071em;
    text-align: justify;
    line-height: 1.5; /** Pour équivalence vues CKeditor et Front office */
}

p.indented {
    display: block;
    margin: 1em 40px;
    font-size: .9em;
    text-align: justify
}

h2.defaultStyle {
    font-size: 1.5em;
    font-weight: bolder;
    margin: .75em 0;
    text-align: left;
}

h3.defaultStyle {
    font-size: 1.17em;
    font-weight: bolder;
    margin: .83em 0;
    text-align: left;
}

h4.defaultStyle {
    font-size: 1em;
    font-weight: bolder;
    margin: 1em 0;
    text-align: left;
}

h5.defaultStyle {
    font-size: .83em;
    font-weight: bolder;
    margin: 1.5em 0;
    text-align: left;
}

h6.defaultStyle {
    font-size: .67em;
    font-weight: bolder;
    margin: 1.67em 0;
    text-align: left;
}

/* ****************************************************************************************************************** */
/*                                      Style pour blockquotes dans paragraphes                                       */
/* ****************************************************************************************************************** */

blockquote {
    display: block;
    margin: 1em 40px;
    font-size: .9em;
}

blockquote::before {
    content: no-open-quote !important;
}

/* ****************************************************************************************************************** */
/*                                           Style pour texte en pali/sanscrit                                        */
/* ****************************************************************************************************************** */

span.pali {
    color: #c83244;
}

/* ****************************************************************************************************************** */
/*                                           Style pour notes de bas de page                                          */
/* ****************************************************************************************************************** */


p.footnote {
    padding-bottom: 0;
    font-size: .9em;
    text-align: justify;
    margin-bottom: 10px;
}

/* ****************************************************************************************************************** */
/*                                           Style pour lien non souligné                                             */
/* ****************************************************************************************************************** */

a.notunderlined {
    text-decoration: none;
}

/* ****************************************************************************************************************** */
/*                                  Style pour paragraphe "Texte avec titre"                                          */
/* ****************************************************************************************************************** */

div.paragraph--type--texte-avec-titre div.field--name-field-titre-element div.field__item {
    border-bottom: 1px solid #a2a9b1;
    margin-top: 1em;
    margin-bottom: 0.35em;
    font-size: 1.5em;
    font-weight: bolder;
    text-align: left;
}

/* ****************************************************************************************************************** */
/*                                           Style pour légende de tableau                                            */
/* ****************************************************************************************************************** */

div.field--name-field-stories-table table caption,
div.field--name-field-texte-simple table caption {
    /*margin: 15px 30px;*/
    background-color: #f3f3f3;
    caption-side: top;
    color: black;
    display: table-caption;
    font-size: .9em;
    font-style: italic ;
    outline-offset: -1px;
    text-align: center;
    word-break: break-word;
    margin: 0px auto 15px auto; 
    padding:7px;
}

/* ****************************************************************************************************************** */
/*                                    Centrer "image adaptative" et "media image"                                     */
/* ****************************************************************************************************************** */

div.field--name-field-media-image div.field__item,
div.field--name-field-stories-responsive-image  {
    text-align: center;
}

/* ****************************************************************************************************************** */
/*                                  Style pour paragraphe "Légende image"                                             */
/* ****************************************************************************************************************** */

div.field--name-field-image-caption {
    text-align: center;
}

div.field--name-field-image-caption div.field__item {
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #a2a9b1;
    font-size: 0.9em;
    font-style: italic;
    text-align: center;
}