/*--------- [THEME WAKA PAR AGENCE WAKA Copyright 2020-2026 https://agence-waka.fr/] ---------*/
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Space+Grotesk:wght@300..700&display=swap');
* { border:0; margin:0; padding:0; list-style:none;  outline:none; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
article, aside, details, figcaption, figure, footer, header, menu, nav, section, main { display:block; }
html {    font-size: 46%; }
:root {
    --couleur_noir : #000;
    --couleur_orange : #F39200;
    --couleur_bleu : #5CC4E2;
    --couleur_violet : #80466F;
    --couleur_vert : #026236;
}


/*--------- [ HOME] ---------*/
#home {  background: #F0F0F1; }
#home .bandeau { text-align: center; color:#fff; background: var(--couleur_orange); height: 100px; display: flex; align-items: center; justify-content: center; flex-direction: column  }
#home .bandeau h1 { padding: 0; margin: 0; font-size: 4.4rem; line-height: 4.6rem; font-weight: 400; padding-top: 3px;}
.hlanghome { display: flex; justify-content: center; align-items: center;  gap:1px; font-family: "Space Grotesk"; font-weight: 700; }
.hlanghome a { font-size: 13px; color:#fff}
.hlanghome a:hover { text-decoration: underline; color:#fff}
.hlanghome .active a { text-decoration: underline}
.hlanghome div:after { content:" |"; position: relative; top:-2px; margin: 0 4px 0 3px; font-size: 10px  }
.hlanghome div:last-child:after { display: none}
.home_choix { display: flex; margin: 0 auto; max-width: 1200px; padding: 60px 0 100px}
.home_choix > div { flex:0 0 50%; padding: 0 15px;}
.home_choix .content { padding: 25px 35px 15px; position: relative; min-height: 252px }
.home_choix h2 { margin: 0; padding: 0 0 28px; font-size: 30px; line-height: 37px; display: inline-block; position: relative}
.home_choix h2 span { position: relative; z-index: 2}
.home_choix .sstitre { font-size: 13px; line-height: 18px; font-weight: bold;}
.home_choix .logo { position: absolute; top:40px; right: 30px}
.home_choix a {  color:#fff; display: block; width: 100%; height: 100%;  }
.home_choix a:hover { color:#fff}
.home_choix a:hover .lien { opacity: 1; visibility: visible; transition: all 0.3s ease;}
.home_choix .deco { line-height: 0; margin-top: 0; position: relative}
.home_choix .deco img { width: 100%}
.home_choix .vero  { background: var(--couleur_vert) }
.home_choix .vero .logo img { height: 100px;}
.home_choix .vero h2:before { content:""; width: 120px; height: 120px; border-radius: 120px; background: var(--couleur_bleu); position: absolute; top:-8px; left:calc(100% - 65px);}
.home_choix .verme  { background: var(--couleur_orange) }
.home_choix .verme .logo img { height: 60px;}
.home_choix .lien  { position: absolute; left:10px; bottom: 10px; padding:10px; opacity: 0; visibility: hidden  }
.home_choix .lien span { background: #fff; padding: 15px 10px; border-radius: 100px; font-size: 15px; display: inline-block; color:var(--couleur_noir)}
@media all and (max-width:1240px) {
    .home_choix { margin: 0 -10px}
    .home_choix > div { padding: 0 10px}
}
@media all and (max-width:1100px) {
    .home_choix .vero .logo img { height: 90px;}
    .home_choix .verme .logo img { height: 50px; }
}
@media all and (max-width:1023px) {
    .home_choix {margin: 0 -20px}
    .home_choix .vero h2:before { width: 77px; height: 77px; border-radius: 77px; top:2px; left:calc(100% - 41px) }
    .home_choix h2 { font-size: 20px; line-height: 25px}
    .home_choix .vero .logo img { height: 67px;}
    .home_choix .verme .logo img { height: 35px; }
    .home_choix .sstitre br { display: none}
    .home_choix .content { min-height: 204px; padding: 20px 25px 15px}
}

@media all and (max-width:850px) {
    .home_choix { display: block; padding: 25px 0 30px}
    .home_choix > div { padding: 0 0 15px}
    .home_choix .logo { top:30px; right: 20px}
    .home_choix .lien { opacity: 1; visibility: visible; transition: all 0.3s ease; padding: 5px}
    .home_choix .lien span { font-size: 14px; padding: 12px 15px}

}


/*--------- [ STYLAGE DE BASE ] ---------*/
a {  color:var(--couleur_noir);text-decoration: none}
a:hover { color:var(--couleur_noir); }
h1, .h1 {     font-size: 6.5rem;    line-height: 8.3rem; font-family: "Space Grotesk"; font-weight: 700;  }
h2, .h2 { font-size:8.1rem; line-height:9.2rem; font-family: "Space Grotesk";  font-weight: 700; }
img { max-width: 100%}


/*--------- [ LAYOUT ] ---------*/
.row {      width: 100%;    max-width: 1400px;    margin: 0 auto; padding: 0 25px;    display: flex;    flex-wrap: wrap;    gap: 0.88%; }
.row [class^="col"] { min-width: 1px}
.col-12 { flex: 0 0 100%; }
body, input, textarea,  button { font-family: "Atkinson Hyperlegible", Arial, Verdana, sans-serif; font-size:2.6rem; line-height: 1.45; color: var(--couleur_noir) !important;   }

/* Footer */
.flogos { padding: 30px 0; line-height: 0; text-align: center  }
@media all and (max-width:989px) {
    html { font-size: 39%}
    .container { padding: 0 35px !important;}
    .row { flex-direction: column; padding: 0}
    .row [class^="col"] { max-width: 100%; flex: 0 0 100%; padding: 0  !important;  }
    .row [class^="col"]:last-child { margin-bottom: 0 !important;}
}