:root {
  --font-size-base: 1rem; /* 16px par défaut */
  --spacing-unit: 1rem;
}

html {
    font-size: var(--font-size-base);
    font-family: 'open sans', sans-serif;
}

body {
    font-size: var(--font-size-base);
    line-height: 1.5rem; /* 24px */
    margin: 0;
    padding: var(--spacing-unit); /* 16px */
}
/* 
body::before {
    margin-top: 20px;
    content: 'WEIJLAND.NET';
    font-weight: bold;
    color: red;
    font-size: 30px;
    background-color: yellow;
    float:right;
} */

h1 {
    font-size: var(--font-size-base) !important;
    text-transform: uppercase;
    padding:0.6em 0 0.6em 0.6em!important;
    line-height: 1.1em;
}

.introimage{
    display:none;
}
/* Couleurs de base pour chaque section "deel" */
.deel1  { --base-color: #FFF208; }
.deel1som  { --base-color: #FFF208; }
.deel2  { --base-color: #009C49; }
.deel2som  { --base-color: #C2E3C3; }
.deel2nav  { --base-color: #A1D4A4; }
.deel3  { --base-color: #02ECCB; }
.deel3nav  { --base-color: #02ECCB; }
.deel3som  { --base-color: #D4F7EE; }
.deel4  { --base-color: #E74040; }
.deel4som  { --base-color: #F4A7A7; }
.deel4nav  { --base-color: #ED6D6D; }
.deel5  { --base-color: #9F6718; }
.deel5som  { --base-color: #F3D094; }
.deel5nav  { --base-color: #E5A752; }
.deel6  { --base-color: #1086ED; }
.deel6som  { --base-color: #7CDAF6; }
.deel6nav  { --base-color: #80B5EF; }
.deel7  { --base-color: #F068A7; }
.deel7som  { --base-color: #F2DFF2; }
.deel7nav  { --base-color: #F19EC5; }
.deel8  { --base-color: #F2DFF2; }
.deel9  { --base-color: #65625C; color:white; }
.deel9som  { --base-color: #E6E6DD; }
.deel9nav  { --base-color: #B8B6B1; }
.deel10 { --base-color: #FFF208; }

[class^="deel"] {
    background-color: var(--base-color);
    font-size: var(--font-size-base);
    padding: 10px 10px 10px 20px;
    margin: 10px 0;
}

a{
    color:black;
}
#content {
    max-width: 1024px;
    margin: auto;
}

img {
    max-width: 100%;
}

/* Grille et flexbox */


/* Classes pour les colonnes */
.EenOpVier {  
    float: left;
    padding:5px;
}
.EenopTwee {
     float: left;
    padding:5px;
}

.illustrationpar2 {
    width:100%;
    float:left;
    padding:1%;
}
.illustrationpar3 {
    width:100%;
    float:left;
    padding:1%;
}
.illustrationpar22{
    width:24%;
    float:left;
    padding:1%;
}
/* Responsive */


@media screen and (min-width: 768px) {
    .EenOpVier {
        width: 48%;
    }
    .illustrationpar2{
        width:48%;
    }
    .illustrationpar3{
        width:31%;
    }
    .illustrationpar22,
    .EenopTwee{
        width: 100%;
    }
    h1 {
         font-size: calc(var(--font-size-base) * 2) !important;     
        padding:0.6em !important;
    }
    /* .cell-md-4, .colspan-md-4 {
        flex: 0 0 33.33334%;
        max-width: 33.33334%;
    }
    .cell-md-6, .colspan-md-6 {
        flex: 0 0 50.00001%;
        max-width: 50.00001%;
    }
    .cell-md-6 p {
        padding-right: 10px;
    } */
}

@media only screen and (min-width: 1224px) {
     .EenOpVier {
        width: 24%;
    }
    .EenopTwee{
        width: 49%;
    }
    /* #container-weave {
        max-width: 1024px;
    } */
}

@media only screen and (min-width: 1824px) {
    /* #container-weave {
        max-width: 1524px;
    } */
}




h2 {
    font-size: 1.175em;
    margin-bottom: 0px;
    clear:both;
}

h3 {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: -10px;
    clear:both;
}

p {
    font-size: 1.2em;
}

p i {
    margin-right: 2px;
    font-weight: 500;
}

/* Classes spécifiques pour le texte */
#introInterview img {
    float: right;
    width: 33%;
    margin-left: 20px;
}


.txtvraag {
    font-size: 1.1em;
    color: #4c028c;
    line-height: 1.25em;
    padding-bottom: 1em;
}
audio{
    float:left;
    margin-right:2em;
}

.txtantwoord {
    font-size: 1.1em;
    line-height: 1.25;
}

.txtlegende {
    font-size: 0.8em;
    clear:left;
}

.textIntro {
    font-size: 1.5em;
    line-height: 1.25;
}

/* Listes */
.internUL {
    padding: 15px 10px 15px 30px;
}

li {
    line-height: 150%;
    list-style-type: disc;
}

/* Sections spécifiques */
#achtergrond h2,
#praktijkstrategien h2,
#illustratiequartre h2,
#idtweepraktijk h2 {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 0px;
}
#achtergrond p,
#praktijkstrategien p,
#illustratiequartre p,
#idtweepraktijk p {
    font-size: 1em;
}
#achtergrond{
    background-color: rgba(184,182,177,1);
    color:white;
    padding:15px 15px 15px 20px;
}
.intro p {
    font-size: 1em;
}
.serre{
    list-style: none;
    position: relative;
    left: -40px;
}
.footnote-ref{
    font-size: 0.8em;
    font-weight: bold;
    color: black;
    margin-left: 5px;
    background-color: yellow;
    border-radius: 50%;
    width: 16px;
    display: inline-block;
    text-align: center;
}
/* Accordeon */
.accordeon {
    display: block;
    margin-top: 10px;
}

.accordeon-input {
    display: none;
}

.accordeon-label {
    display: block;
    padding: 10px;
    background: #f0f0f0;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
}

.accordeon-contenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease-out;
    padding-left: 20px;
}

.accordeon-input:checked ~ .accordeon-contenu {
    max-height: 500px;
}

/* Navigation */
.paddingnav {
    padding: 10px;
    line-height: 150%;
    margin: 10px 0 -10px;
}

.newnav {
    clear:both;
    display: block;
    max-width: 500px;
    padding: 0px 0 10px 10px;
    line-height: 150%;
}

.nav {
    width: 100%;
    height: 345px;
}

#som h2{
       margin: 0 0 -10px;
}
#som p{
   
}
.blokvideo{
     display: flex;
  justify-content: center;
}
.bgvideo{
     /* width: 620px;
    height: 350px; */
   
}
.bgvideo video {
    /* width: 620px;
    height: 350px; */
    object-fit: contain;
    /* opacity: 0.5; Réduis l'opacité pour voir l'image de fond */
}

video {
  width: 100%;
  height: auto;
  max-height: 100vh;
  object-fit: contain;
}
/* Citation */
cit {
    clear:both;
    font-size: 1.5em;
    font-style: italic;
    color: #ff6b02;
    display: block;
    text-align: center;
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: #FF6B02;
    padding: 20px;
    margin: 35px 0;
}

/* Chapitres avec puces */
.chapBullet {
    padding: 10px 10px 10px 20px;
    margin: 10px 0;
}
.QR{
    display:none;
}
.onlyprint{
    display:none;
}
@media print {
  /* All your print styles go here */

  .illustrationpar2{
    width:47%;
  }
@page :left {
    margin-left: 1.5in;
    margin-right: 0.5in;
  }
  @page :right {
    margin-left: 0.5in;
    margin-right: 1.5in;
  }
  #content {
    max-width: 100%;
   
}
  #header,
  #footer,
  #nav {
    display: none !important;
  }
  .sectionNoBreak{
	page-break-inside:avoid;	    				
   }
   .noPrint,
   .newnav{
    display:none;
   }
   .QR {    
    display:inline-block;
   }
   .introimage{
    display:block;
    width:25%;
    float:left;
    margin-right:20px;
   }
   .EenOpVier {
        width: 23%;
    }
    .EenopTwee{
        width: 49%;
    }
    .accordeon-contenu {
    max-height: 300px;
    overflow: visible;
    }
    audio,
    .bgvideo{
        display:none;
    }
    .onlyprint{
        display: inline-block;
    }
    .onlyprint img{
       width:50%;
       float:left;
       margin-right:20px;
    }
    .audioleft{
        float:left;
        width:250px;
        font-style: italic;
    }
}
 

/* .chapEENBullet p {
    background-color: rgba(242, 211, 36, 1);
} */

/* .chapTWEEBullet p {
    padding: 10px 10px 10px 20px;
    margin: 10px 0;
    background-color: rgba(194, 227, 195, 1);
} */

/* .chapTweeBullet p {
    padding: 10px 10px 10px 20px;
    margin: 10px 0;
    background-color: rgba(137, 201, 140, 1);
} */

/* .chapTweeBullet ul {
    margin: -10px 0;
    background-color: rgba(137, 201, 140, 1);
    line-height: 150%;
} */

/* .chappraktijkBullet {
    font-size: 20px;
}

.chappraktijkBullet p {
    padding: 10px 10px 10px 20px;
    margin: 10px 0;
    background-color: rgba(242, 223, 242, 1);
} */

/* Liste à puces */
/* #listeBullet h2 {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 0px;
}

#listeBullet p {
    font-size: 1em;
    padding: 10px 10px 10px 20px;
    margin: 10px 0;
} */