body {
    font-family: "Poppins", sans-serif;
    font-weight:normal;
    font-style: normal;
    margin: 0;
    padding: 0;
}

h1 {
    font-size:2.7em;
    font-weight:400;
    line-height:1.6em;

    span {
        display:block;
        font-size:1.5em;
        font-weight:700;
    }
}

h2 {
    font-weight: 400;
    font-style: normal;
    font-size:2em;
    margin-top:0;
}

#main {
    margin:0 auto;
    width:100%;
}

header {
    background-color:#fabb00;
}

header svg.logo-noir {
    fill:#000;
    width:250px;
}

header h1 {
    padding-left:17px;
}

header .column.left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width:38%;
    padding-left:10%;
}

header .column.right {
    width:48%;
}

.container {
    padding: 60px;
    margin:0 auto;
    max-width:1440px;
}

.pb-0 {
    padding-bottom:0;
}

.pt-0 {
    padding-top:0;
}

p.info {
    background-color:#fabb00;
    padding:20px;
}

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

p.cta {
    margin-top:60px;
    text-align:center;
}

p.legende {
    font-size:0.8em;
    margin:5px 0 0 5px;
}

a.bouton {
    border-radius:50px;
    background-color:#fabb00;
    color:#000;
    display:inline-block;
    font-size:1.1em;
    font-weight:500;
    padding:1% 2%;
    text-align:center;
    text-decoration: none;
}

a.bouton:hover {
    background-color:#000;
    color:#fff;
}

section.bkgNoir a.bouton:hover {
    background-color: #fff;
    color:#000;
}

.two-columns .container {
    display:flex;
    flex-wrap:wrap;
    gap:4%;
}

.two-columns .container h2 {
    flex-basis:100%;
}

.two-columns.layout-50-50 .container .column.left {
    width:48%;
}
.two-columns.layout-50-50 .container .column.right {
    width:48%;
}

.two-columns.layout-70-30 .container .column.left {
    width:68%;
}
.two-columns.layout-70-30 .container .column.right {
    width:28%;
}

.two-columns.layout-30-70 .container .column.left {
    width:28%;
}
.two-columns.layout-30-70 .container .column.right {
    width:68%;
}

header.two-columns .container {
    flex-wrap: nowrap;
    gap: normal;
    justify-content: space-between;
    padding-top:0;
    padding-bottom:0;
}

section.bkgGrisPale {
    background-color:#e5e6ea;
}

section.bkgNoir {
    background-color:#000;
    color:#fff;
}

.column img {
    width:100%;
    height:auto;
    display:block;
}

.column img.recherche {
    max-width:600px;
}

.clearboth {   
    clear: both;
    height: 0;
    width: 100%;
}

.mini-section-3-colonnes {
    display:flex;
    justify-content: space-between;
    gap:4%;
    margin-top:60px;
    width: 100%;
}

.mini-section-3-colonnes .carte,
.mini-section-3-colonnes .video {
    display: flex;
    flex-direction: column;
    width:33%;
}

.mini-section-3-colonnes .carte img {
    height:auto;
    width:100%;
}

.mini-section-3-colonnes .carte.text-only {
    background-color: #fabb00;
    flex-grow: 1;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.mini-section-3-colonnes .carte.text-only p {
    font-size:1.2em;
    margin:0;
}

.mini-section-3-colonnes .carte.img-and-text p {
    background-color:#fff;
    flex-grow:1;
    font-size:1.1em;
    font-weight:500;
    margin:0;
    padding:20px;
    text-align:center;
}

.mini-section-3-colonnes .video h3 {
    font-weight:500;
    margin-top:0;
}

.grid-4x4 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.grid-box {
    height:140px;
    width:140px;
}

.grid-box.image img {
    width: 100%;
    height: auto;
}

.grid-box a {
    color: #fff;
    display: block;
    font-size:1.4em;
    font-weight: 500;
    padding:10% 5% 5% 5%;
    height:85%;
    width: 90%;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-decoration: none;
}

.grid-box.uqam a {
    background-color:#0a55a0;
}
.grid-box.uqam a:hover {
    background-color: #fff;
    border: 1px solid #0a55a0;
    color: #0a55a0;
}

.grid-box.uqtr a {
    background-color:#006534;
}
.grid-box.uqtr a:hover {
    background-color: #fff;
    border: 1px solid #006534;
    color: #006534;
}

.grid-box.uqac a {
    background-color:#5a7411;
}
.grid-box.uqac a:hover {
    background-color: #fff;
    border: 1px solid #5a7411;
    color: #5a7411;
}

.grid-box.uqar a {
    background-color:#12368c;
}
.grid-box.uqar a:hover {
    background-color: #fff;
    border: 1px solid #12368c;
    color: #12368c;
}

.grid-box.uqo a {
    background-color:#005982;
}
.grid-box.uqo a:hover {
    background-color: #fff;
    border: 1px solid #005982;
    color: #005982;
}

.grid-box.uqat a {
    background-color:#e74e1d;
}
.grid-box.uqat a:hover {
    background-color: #fff;
    border: 1px solid #e74e1d;
    color: #e74e1d;
}

.grid-box.inrs a {
    background-color:#071d49;
}
.grid-box.inrs a:hover {
    background-color: #fff;
    border: 1px solid #071d49;
    color: #071d49;
}

.grid-box.enap a {
    background-color:#000;
}
.grid-box.enap a:hover {
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
}

.grid-box.ets a {
    background-color:#e70033;
}
.grid-box.ets a:hover {
    background-color: #fff;
    border: 1px solid #e70033;
    color: #e70033;
}

.grid-box.teluq a {
    background-color:#6c3;
}
.grid-box.teluq a:hover {
    background-color: #fff;
    border: 1px solid #6c3;
    color: #6c3;
}

.stats {
    background-color: #000;
    color:#fff;
}

.stats h2 {
    margin-bottom:2em;
}

.image-placeholder {
    background-color: #ccc;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper.swiper-horizontal {
    width: 100%;
    margin: auto;
}

.swiper.swiper-horizontal .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.swiper-slide p {
    margin:0;
}

.swiper-slide p.bigtext {
    font-size:3.5em;
    line-height: 1.2em;
}

.swiper-slide img {
    width:30%;
}

.swiper-controls {
    display: flex;
    justify-content: center;
    margin-top:40px;
}

.swiper-controls .swiper-button-next, .swiper-controls .swiper-button-prev {
    color:#fff;
    height:inherit;
    margin-top:0;
    position: static;
    width:inherit;
}

.swiper-controls .swiper-button-next:after, .swiper-controls .swiper-button-prev:after {
    font-size:1.5em;
}

.swiper-controls .swiper-button-next {
    margin-left:10px;
}
.swiper-controls .swiper-button-prev {
    margin-right:10px;
}

blockquote {
    border-left: 3px solid black;
    font-size:1.3em;
    margin:0;
    padding: 0 2%;
}

blockquote p {
    font-weight:500;
    margin: 0 0;
}

blockquote p:not(:first-child) {
  font-weight:400;
  margin: 1rem 0 0 0;
  font-size:0.8em;
}

.videos {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.map img {
    width:100%;
    height:auto;
}

.carte_etabs {
    display:flex;
    flex-direction: column;
    position:relative;
}

.etablissements-grid {
    display: flex;
    justify-content: space-between;
}

a.etablissement-box {
    background-color: #fabb00;
    border-left:1px solid #454545;
    border-top:1px solid #454545;
    border-bottom:1px solid #454545;
    color: #000;
    cursor:pointer;
    display: flex;
    flex:1;
    justify-content: center;
    align-items: center;
    font-size:1.4em;
    font-weight: 500;
    height:18%;
    line-height:normal;
    text-align: center;
    text-decoration: none;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);

    min-height: 100px; /* ou une valeur fixe */
    overflow: hidden;
}

a.etablissement-box:first-child {
    border-right:1px solid #454545;
    z-index:9;
}

a.etablissement-box:hover,
a.etablissement-box.active {
    color:#fff;
}

a.etablissement-box.teluq:hover,
a.etablissement-box.teluq.active {
    color:#000;
}

a.etablissement-box.uqam:hover,
a.etablissement-box.uqam.active {
    background-color:#0a55a0;
    border-bottom:1px solid #0a55a0;
}
a.etablissement-box.uqtr:hover,
a.etablissement-box.uqtr.active {
    background-color:#006534;
    border-bottom:1px solid #006534;
}
a.etablissement-box.uqac:hover,
a.etablissement-box.uqac.active {
    background-color:#5a7411;
    border-bottom:1px solid #5a7411;
}
a.etablissement-box.uqar:hover,
a.etablissement-box.uqar.active {
    background-color:#12368c;
    border-bottom:1px solid #12368c;
}
a.etablissement-box.uqo:hover,
a.etablissement-box.uqo.active {
    background-color:#005982;
    border-bottom:1px solid #005982;
}
a.etablissement-box.uqat:hover,
a.etablissement-box.uqat.active {
    background-color:#e74e1d;
    border-bottom:1px solid #e74e1d;
}
a.etablissement-box.inrs:hover,
a.etablissement-box.inrs.active {
    background-color:#071d49;
    border-bottom:1px solid #071d49;
}
a.etablissement-box.enap:hover,
a.etablissement-box.enap.active {
    background-color:#000;
    border-bottom:1px solid #000;
}
a.etablissement-box.ets:hover,
a.etablissement-box.ets.active {
    background-color:#e70033;
    border-bottom:1px solid #e70033;
}
a.etablissement-box.teluq:hover,
a.etablissement-box.teluq.active {
    background-color:#6c3;
    border-bottom:1px solid #6c3;
}

.info-etab {
    color:#fff;
    display:flex;
    gap:60px;
    padding:2%;
}

.info-etab .col-gauche {
    width:70%;
}

.info-etab .col-droite {
    width:30%;
}

.info-etab .photo-dirigeant {
    max-width:600px;
}

.info-etab a {
    color:#fff;
}

#info-etab-teluq.info-etab,
#info-etab-teluq.info-etab a {
    color:#000;
}

.info-etab a:hover {
    text-decoration:none;
}

#info-etab-uqam {
    background-color:#0a55a0;
}
#info-etab-uqtr {
    background-color:#006534;
}
#info-etab-uqac {
    background-color:#5a7411;
}
#info-etab-uqar {
    background-color:#12368c;
}
#info-etab-uqo {
    background-color:#005982;
}
#info-etab-uqat {
    background-color:#e74e1d;
}
#info-etab-inrs {
    background-color:#071d49;
}
#info-etab-enap {
    background-color:#000;
}
#info-etab-ets {
    background-color:#e70033;
}
#info-etab-teluq {
    background-color:#6c3;
}

.accordion-item {
  border-top: 1px solid #c3c3c3;
  border-right: 1px solid #c3c3c3;
  border-left: 1px solid #c3c3c3;
  overflow: hidden;
}

.accordion-item:last-child {
    border-bottom: 1px solid #c3c3c3;
}

.accordion-header {
  background-color: #ffffff;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-header .chevron {
  transition: transform 0.3s ease;
  display: inline-block;
}

.accordion-header:hover {
    background-color: #e5e6ea;
}

.accordion-header.active {
    background-color: #fabb00;
}

.accordion-header.active .chevron {
  transform: rotate(90deg);
}

.accordion-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  background: #fff;
  padding: 20px;
}

.accordion-content.open {
   max-height: 700px;
   opacity: 1;
}

.accordion-content ul {
    margin:0 20px 20px 20px;
    padding:0;
}

.accordion-content ul li {
    margin:0;
    padding:0;
}

.accordion-content a.bouton {
    padding:2% 4%;
}

footer {
    background-color: #454545;
    color: white;
}

footer .container {
    display: flex;
    justify-content: center;
}

.footer-column {
    border-right:1px solid gray;
    padding:0 5%;
}

.footer-column:last-child {
    border-right:none;
}

.footer-column svg.logo {
    fill:#fff;
    width:200px;
}

p.adresseFooter {
    margin:0;
}

.adresseFooter a {
    color:#fff;
    text-decoration:underline;
}

.adresseFooter a:hover {
    text-decoration:none;
}

.footer-column ul {
    display: flex;
    gap:20px;
    list-style:none;
    justify-content: space-between;
    margin:0;
    padding:0;
    text-align: center;
}

.footer-column ul li a svg {
    height: 1rem;
    width: 1rem;
    fill: #fff;
}




/* RESPONSIVE */
@media screen and (max-width:1440px){
    .grid-box {
        height:120px;
        width:120px;
    }
    
    blockquote {
        font-size:1.2em;
    }
}

@media screen and (max-width:1200px){
    header .column.left {
        width:48%;
        padding-left:0;
    }
    
    .grid-box {
        height:100px;
        width:100px;
    }

    .grid-box a {
        font-size:1.2em;
    }

    .swiper-slide p.bigtext {
        font-size:3em;
    }
        
    .videos {
        flex-direction: column;
    }

    .videos iframe {
        height:450px;
        width:100%;
    }

    blockquote p:not(:first-child) {
        font-size: 0.7em;
    }
}

@media screen and (max-width:960px){
    h1 {
        font-size:1.8em;
    }

    header h1 {
        padding-left:26px;
    }

    blockquote {
        border:none;
        padding:0;
    }

    header.two-columns .container {
        padding:60px;
    }
    
    .two-columns .container {
        flex-direction: column;
    }

    .two-columns .container .column.left,
    .two-columns .container .column.right {
        margin:0;
        width:100%;
    }

    header .column.left {
        align-items: center;
    }

    header.two-columns .container .column.left,
    header.two-columns .container .column.right,
    .two-columns .container .column.left {
        margin-bottom:5%;
    }

    .two-columns.layout-50-50 .container .column.left,
    .two-columns.layout-50-50 .container .column.right,
    .two-columns.layout-70-30 .container .column.left,
    .two-columns.layout-70-30 .container .column.right,
     .two-columns.layout-30-70 .container .column.left,
    .two-columns.layout-30-70 .container .column.right {
        width:100%;
    }

    .mini-section-3-colonnes {
        flex-direction: column;
        margin-top:0;
    }

    .mini-section-3-colonnes .carte,
    .mini-section-3-colonnes .video {
        margin-top:60px;
        width:100%;
    }

    .programmes .mini-section-3-colonnes .carte:first-child {
        margin-top:0;
    }
    
    .grid-4x4 {
        justify-content: center;
    }
    
    .grid-box {
        height:5em;
        width:5em;
    }

    .grid-box a {
        font-size:1em;
    }

    .info-etab {
        padding:4%;
    }

    .info-etab p {
        font-size:0.9em;
    }
    
    footer .container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .footer-column {
        border-right:none;
        padding:2%;
        text-align: center;
    }
}


@media screen and (max-width:790px){
    .etablissements-grid {
        justify-content:center;
    }

    a.etablissement-box {
        font-size: 0.9em;
        min-height:75px;
        height:10%;
    }

    a.bouton {
        padding:2% 3%;
    }

    .info-etab {
        flex-direction:column;
    }

    .info-etab .col-gauche,
    .info-etab .col-droite {
        width:100%;
    }
}

@media screen and (max-width:520px){
    a.etablissement-box {
        font-size: 0.8em;
    }

    a.bouton {
        padding:3% 4%;
    }
}


@media screen and (max-width:480px){
   h1 {
        font-size:1.4em;
    }

    header h1 {
        padding-left:0;
    }

    .grid-box {
        height:4em;
        width:4em;
    }
    
    .info-etab {
        position:static;
        margin-bottom:10px;
    }
   
    .etablissements-grid {
        flex-wrap: wrap;
    }
    
    a.etablissement-box {
        border:1px solid #000;
        flex:none;
        writing-mode:initial;
        transform:none;
        min-height:30px;
        width:45%;
    }

    a.bouton {
        padding:5% 8%;
    }

    footer {
        font-size:0.9em;
    }
    
    .footer-column:last-child {
        margin-top:7%;
    }
}

/* Responsive pour hauteur mobile */
@media screen and (max-height:500px){
    a.etablissement-box {
        height:20%;
    }
}