/*=======================================================================
[Table of contents]
=========================================================================

  1. Variables CSS (design tokens)
  2. Reset & éléments de base
  3. Typographie
  4. Layout global (body, header, main, footer)
  5. Navigation desktop
  6. Navigation mobile (hamburger)
  7. Boutons
  8. Utilitaires (espacements, couleurs, texte)
  9. Responsive général

  Composants UI réutilisables (présents sur plusieurs pages)
  10. Onglets / Tabs (#nav-tab)
  11. Accordion Bootstrap (surcharge couleurs)
  12. Bloc highlight
  13. Formulaire générique (labels, form::before blob)
  14. Bloc démo (section.bloc-demo)
  15. Bloc partenaires

=========================================================================*/

/*========================
== 1. Variables CSS     ==
========================*/
:root{
    /* Polices */
    --font-roboto: "Roboto", sans-serif;
    --font-ubuntu: "Ubuntu", sans-serif;

    /* Couleurs principales */
    --color-primary: #222;
    --color-primary-light: #5B5B5B;

    /* Couleurs secondaires */
    --color-secondary: #F69F4F;
    --color-secondary-light: #febb7a;
    --color-secondary-pale: #fae4cf;
    --color-secondary-20 : #febc7a23;
    --color-secondary-70 : #febb7a;
    --color-secondary-30 : #febb7a40 ;
    /*Redéfinir les noms*/
    --variable-collection-orange1: rgba(247, 112, 54, 1);
    --variable-collection-orange2: 246, 159, 79;
    --variable-collection-orange4: rgba(252,218,187,1);
    --variable-collection-orange13: rgba(249, 118, 37, 0.13);

    /* Couleurs tertiaires */
    --color-tertiary: #49C8DF;
    --color-tertiary-pale: rgba(243, 252, 255, 1);
    --color-tertiary-dark: rgba(159, 229, 255, 0.13);

    /* Gris */
    --color-light-grey: #B8B8B8;
    --color-grey-dark: #424242;
    --color-grey-mid: #777;
    --color-grey: #8D8D8D;
}


/*========================
== 2. Reset & base      ==
========================*/
ul {
    padding-left: 15px;
}

aside ul {
   padding: 0;
}

aside div.fixed {
    position: fixed;
}


/*========================
== 3. Typographie       ==
========================*/

h1, h2, h3 {
    text-transform: uppercase;
    font-family: var(--font-ubuntu);
}
h1 { font-size: 44px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }

h3.line::before {
    content: '';
    height: 1px;
    width: calc(var(--percent));
    min-width: 15%;
    background-color: var(--color-secondary);
    display: block;
    margin-bottom: 32px;
}
h4 {
    font-size: 18px;
    font-family: var(--font-ubuntu);
}

p  {
    color: var(--color-primary-light);
    font-size: 16px;
}

/* .legend-img {
    font-size: 12px;
    text-align: center;
} */

main section a {
    color: var(--color-tertiary);
    font-size: 16px;
    font-family: var(--font-ubuntu);
    text-transform: uppercase;
    text-decoration: none;
    transition: text-shadow .3s;
}
main section a:hover {
    color: var(--color-tertiary);
    text-shadow: 0 0 .75px var(--color-tertiary), 0 0 .75px var(--color-tertiary);
}

.ref-biblio {
    color: var(--color-secondary);
    text-transform: none;
}
.ref-biblio:hover {
    color: var(--color-secondary);
    text-shadow: 0 0 .75px var(--color-secondary), 0 0 .75px var(--color-secondary);
}


/*========================
== 4. Layout global     ==
========================*/

body{
    background-image: url("/assets/img/blob_header.png");
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 40%;
    font-family: var(--font-roboto);
    color: var(--color-primary);
}

header, main {
    margin: 0px 72px;
}

header .logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 230px;
    text-decoration: none;
    color: inherit;
}

/* header .logo:hover {
    text-decoration: none;
    color: inherit;
} */

header .logo img{
    width: 40px;
    height: 40px;
    margin-right: 16px;
}

header .logo span{
    font-family: var(--font-ubuntu);
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    max-width: 150px;
}

header nav{
    margin: 32px 0 105px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-ubuntu);
    font-weight: 400;
    font-size: 16px;
}

footer {
    border-top: 1px solid var(--color-primary);
}

footer nav ul.d-flex {
    flex-wrap: wrap;
    row-gap: 8px;
}

footer nav ul li a{
    color: var(--color-primary);
    text-decoration: none;
    transition: text-shadow .3s;
}

footer nav ul li a:hover{
    color: var(--color-primary);
    text-shadow: 0 0 .75px var(--color-primary), 0 0 .75px var(--color-primary);
}


/*=========================
== 5. Navigation desktop ==
=========================*/
header nav ul li{
    list-style: none;
    display: inline-block;
    margin-right: 32px;
}

header nav ul li.active{
    font-weight: 700;
}

header nav ul li a{
    color: var(--color-primary);
    text-decoration: none;
    transition: text-shadow .3s;
}
header nav ul li a:hover{
    color: var(--color-primary);
    text-shadow: 0 0 .75px var(--color-primary), 0 0 .75px var(--color-primary);
}

/* Navigation latérale (aside) */
aside .nav-side .nav-title {
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    font-family: var(--font-ubuntu);
}
aside .nav-side .nav-title::before {
    content: '';
    background-image: url('/assets/img/orange-dot.png');
    background-repeat: no-repeat;
    background-size: contain;
    height: 12px;
    width: 12px;
    display: block;
    position: absolute;
    top: 13px;
    left: -20px;
}

aside .nav-side ul li {list-style: none;}
aside .nav-side a {color: var(--color-primary); text-decoration: none;}
aside .nav-side a.active {color: var(--color-secondary);}


/*========================
== 6. Navigation mobile ==
========================*/
#mobile-nav .checkbox {
    position: absolute;
    display: block;
    height: 22px;
    width: 26px;
    top: 42px;
    right: 49px;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
}

#mobile-nav .hamburger-lines {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 20px;
    width: 24px;
    position: absolute;
    top: 43px;
    right: 50px;
    z-index: 2;
}

#mobile-nav .hamburger-lines .line {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 10px;
    background: #0e2431;
}

#mobile-nav .hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.4s ease-in-out;
}

#mobile-nav .hamburger-lines .line2 {
    transition: transform 0.2s ease-in-out;
}

#mobile-nav .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.4s ease-in-out;
}

#mobile-nav input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(45deg);
}

#mobile-nav input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
}

#mobile-nav input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-45deg);
}

#mobile-nav-item {
    display: none;
}
#mobile-nav-item ul {
    margin-top: 150px;
    padding: 0;
}
#mobile-nav-item li {
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
}
#mobile-nav input[type="checkbox"]:checked ~ #mobile-nav-item {
    display: block;
    background-color: white;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

body:has(#mobile-nav input[type="checkbox"]:checked){
    overflow: hidden;
    height: 100vh !important;
}
body:has(#mobile-nav input[type="checkbox"]:checked) main{
   display: none;
}


/*========================
== 7. Boutons           ==
========================*/
.btn-outline-primary {
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 50px;
}
.btn-outline-primary:hover {
    color: white;
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
}

.btn-secondary {
    color: var(--color-primary);
    border: 1px solid var(--color-secondary);
    background-color: var(--color-secondary);
    border-radius: 50px;
}
.btn-secondary:hover {
    color: var(--color-primary);
    border: 1px solid var(--color-secondary-light);
    background-color: var(--color-secondary-light);
}


/*========================
== 8. Utilitaires       ==
========================*/
/* Espacements */
.mb-6 { margin-bottom: 128px; }
.mt-6 { margin-top: 128px; }

/* Couleurs texte */
.text-color-primary { color: var(--color-secondary); }
.text-white   { color: white; }

/* Tailles de texte */
.fs-18 { font-size: 18px; }
.fs-24 { font-size: 24px; }
.bold  { font-weight: 700; }

/* Listes avec icônes */
.list-style-blob-primary {list-style-image: url('/assets/img/orange-dot.png');}
.list-style-blob-secondary {list-style-image: url('/assets/img/blue-dot.png');}

/* Masque */
.mask-blob { mask: url("/assets/img/blob_mask.png"); }

/* Sous-items de liste */
li .sub-item { padding-left: 10px; }

.evolution {
    margin-bottom: 20px;
    width: 80% !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Blobs décoratifs */
.blob-bottom-right-secondary {
    position: relative;
}
.blob-bottom-right-secondary::after {
    content: '';
    background-image: url('/assets/img/blob_1.png');
    background-repeat: no-repeat;
    width: 177px;
    height: 197px;
    display: block;
    position: absolute;
    bottom: -80px;
    right: -60px;
    z-index: -1;
}

.temp-blob {
    background-image: url('/assets/img/blob_temp.png');
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 700;
    font-family: var(--font-ubuntu);
    width: 25%;
    min-width: 130px;
    height: 39%;
    min-height: 140px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    float: left;
    font-size: 22px;
}

.temp-blob span {
    left: 50%;
    display: block;
    position: relative;
    transform: translate(-50%);
}

.blob-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 150px;
}
.blob-icon div.blob {
    background-image: url('/assets/img/blob_icon.png');
    background-repeat: no-repeat;
    background-size: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    width: 66px;
    height: 73px;
    font-weight: 700;
    font-family: var(--font-ubuntu);
    font-size: 28px;
}
.blob-icon span {
    left: 50%;
    display: block;
    position: relative;
    transform: translate(-50%);
}

.group-blob-icon {
    max-width: 350px;
}

/*=========================
== 9. Responsive général ==
=========================*/
@media (max-width: 767px) {
    .blob-bottom-right-secondary::after {
        bottom: -80px;
        right: -20px;
    }
}


/*========================
== 10. Onglets / Tabs   ==
========================*/
.nav-tabs {
    border-bottom: 1px solid var(--color-light-grey) !important;
}

#nav-tab button {
    border: 1px solid var(--color-light-grey);
    border-right: 0;
    border-radius: 0;
    padding-top: 34px;
    padding-bottom: 34px;
    min-width: 250px;
    position: relative;
    overflow: hidden;
    font-size: 18px;
    color: var(--color-primary);
}
#nav-tab button:last-child {
    border-right:  1px solid var(--color-light-grey);
}

#nav-tab .nav-link {
    background-color: white;
    font-family: var(--font-ubuntu);
    font-size: 18px;
}

#nav-tab .nav-link:not(.active):before {
    content: '';
    background-image: url('/assets/img/blob_tabs1.png'), url('/assets/img/blob_tabs2.png') ;
    background-size: 57px, 7px;
    background-repeat: no-repeat;
    width: 97px;
    height: 97px;
    display: block;
    position: absolute;
    z-index: -1;
    background-position: top 10px left 0px, top 20px right 80px;
    top: -65px;
    left: -50px;
    transition: all 0.3s ease-in-out;
}

#nav-tab .nav-link.active {
    background-image: url('/assets/img/blob_tabs1.png'), url('/assets/img/blob_tabs2.png');
    background-size: 88px, 64px;
    background-repeat: no-repeat;
    background-color: var(--color-secondary-pale);
}

#nav-tab .nav-link:hover {
    background-color: var(--color-secondary-pale);
}
#nav-tab .nav-link:hover::before {
    top: 0px;
    left: 0px;
    background-position: top 0% left 0%, top 0% left 0%;
    background-size: 88px, 64px;
}

#nav-tab div{
    font-family: var(--font-roboto);
    font-size: 26px;
    font-weight: 500;
    text-align: center;
}

#nav-tabContent {
    border:  1px solid var(--color-light-grey);
    border-top: 0px;
    background-color: white;
}

.tab-title {
    font-family: var(--font-roboto);
    font-size: 24px;
    font-weight: 500;
}

.tab-title.mobile {
    font-family: var(--font-roboto);
    font-size: 20px;
    font-weight: 500;
}


/*===========================
== 11. Accordion Bootstrap ==
===========================*/
.accordion-button:focus {
    border-color: var(--color-secondary-70);
    box-shadow: 0 0 0 .25rem var(--color-secondary-30);
}
.accordion-button:not(.collapsed) {
    color: var(--color-secondary);
    background-color: var(--color-secondary-20);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

/* .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F69F4F'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
} */
.accordion-button:not(.collapsed)::after {
    background-image: none; /* ← écrase l'URL Bootstrap */
    background-color: var(--color-secondary);
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}


/*========================
== 12. Bloc highlight   ==
========================*/
/* .highlight-wrapper {
    background: white;
    border-radius: 2rem;
    border: 2px solid rgba(var(--variable-collection-orange2));
    padding: 8px;
    line-height: 1.733;
    margin: 15px 60px;
}

.highlight {
    color: white;
    padding: 15px 15px 15px 20px;
}

.highlight p:last-child {
    margin-bottom: 0;
}

.highlight img {
    box-shadow: 0px 6px 12px #00000040;
} */


/*============================
== 13. Formulaire générique ==
============================*/
form label {
    text-transform: uppercase;
    font-family: var(--font-ubuntu);
    font-weight: 700;
    font-size: 18px;
}

section.form {
    position: relative;
}
form::before {
    content: '';
    background-image: url('/assets/img/blob_3.png');
    background-repeat: no-repeat;
    width: 460px;
    height: 440px;
    z-index: -1;
    position: absolute;
    left: 190px;
    bottom: -80px;
}

@media (max-width: 767px) {
    form::before {
        left: 20px !important;
    }
}
@media (max-width: 376px) {
    form::before {
        left: 20px !important;
        background-size: 300px;
        width: 300px;
    }
}


/*========================
== 14. Bloc démo        ==
========================*/
section.bloc-demo {
    max-width: 850px;
    margin: auto;
    margin-bottom: 128px;
    border: 1px solid var(--color-light-grey);
    border-radius: 10px;
    position: relative;
    background-color: white;
    overflow: hidden;
}
section.bloc-demo div {
    max-width: 615px;
}
section.bloc-demo div p {
    max-width: 550px;
    font-size: 18px;
    color: var(--color-primary);
}

section.bloc-demo::before {
    content: '';
    background-image: url('/assets/img/blob_3.png');
    background-repeat: no-repeat;
    width: 460px;
    height: 440px;
    z-index: -1;
    position: absolute;
    left: -140px;
    top: -80px;
}

section.bloc-demo::after {
    content: '';
    background-image: url('/assets/img/blob_1.png');
    background-repeat: no-repeat;
    width: 180px;
    height: 200px;
    z-index: -1;
    position: absolute;
    left: 730px;
    top: 160px;
}

@media (max-width: 991px) {
    section.bloc-demo::after {
        left: 530px;
        top: 220px;
    }
}
@media (max-width: 767px) {
    section.bloc-demo::after {
        left: 330px;
        top: 270px;
    }
}
@media (max-width: 376px) {
    section.bloc-demo::after {
        left: 165px;
        top: 530px;
    }
}


/*========================
== 15. Bloc partenaires ==
========================*/
/* .item-ancre a {
    text-transform: none;
}
.partner-block {
    margin-bottom: 32px;
}
.partner-logo {
    max-height: 90px;
    width: auto;
    object-fit: contain;
}
@media (max-width: 575px) {
    .partner-logo {
        max-height: 60px;
    }
} */










/* .legend{
    font-size: 12px;
    text-align: center;
}

.button-bottom {
  position: absolute;
  width: 100%;
  bottom: 0;
} */