/* Tonik Web Studio - styles sous la ligne de flottaison (le haut de page est en ligne dans include_page.php) */
/* Habillage tonikwebstudio.com : Raleway, noir, vert #6fbe44 / #46931c, coins droits, bulles du logo en filigrane. */

/* Avantages : bande noire (comme « L'Instant Tonik »), cercle sombre en haut à gauche, trois colonnes */
.avantages_container{background:radial-gradient(circle at 12% -40px,#222 0,#222 150px,transparent 151px) #000;padding:110px 0 100px}
.main_text2{display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:60px}
.main_text2 h3{grid-column:1/-1;font-size:56px;line-height:62px;color:#6fbe44;margin-bottom:60px}
.main_text2 p{margin:0;font-size:17px;line-height:30px;letter-spacing:.05em;color:#fff}
.main_text2 p strong{display:block;font-weight:300;font-size:24px;line-height:32px;letter-spacing:.02em;text-transform:uppercase;color:#6fbe44;margin-bottom:18px}

/* Ce qui est inclus : bande verte en dégradé + bulles Tonik, puces cercle (comme les listes Web / Stratégie) */
.services_container{padding:110px 0 120px;background:url('images/tonik-bulles.png') right 6% bottom -40px / 436px 615px no-repeat,linear-gradient(123deg,#46931c 0%,#6fbe44 100%) #6fbe44;overflow:hidden}
.liste_services h3{font-size:72px;line-height:76px;color:#000;margin-bottom:56px}
.liste_services ul{display:flex;flex-wrap:wrap;max-width:1000px}
.liste_services li{width:50%;padding:0 30px 30px 80px;font-size:22px;line-height:32px;letter-spacing:.05em;color:#fff;position:relative}
.liste_services li::before{content:'';position:absolute;left:0;top:11px;width:9px;height:9px;border:1px solid #fff;border-radius:50%}

/* Exemples : titre 900 (habillage Tonik), cartes gardées de la 1re version (blanches, arrondies, ombre douce, Roboto) */
.keywords_container{padding:110px 0 120px;background:#fff}
.paragraphe_keywords h2{font-size:64px;line-height:70px;color:#000;margin-bottom:22px}
.paragraphe_keywords p{font-size:18px;line-height:30px;letter-spacing:.05em;color:#6b6b6b;margin-bottom:56px}
.exemple{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 6px 24px rgba(31,31,31,.08);text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;font-family:'Roboto',sans-serif;font-weight:400;letter-spacing:0}
.exemple:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(31,31,31,.14);text-decoration:none}
.exemple img{width:100%;height:auto;aspect-ratio:800/389;object-fit:cover;object-position:top;border-bottom:1px solid #e6eee1}
.exemple_txt{display:flex;flex-direction:column;flex-grow:1;padding:28px 30px 30px}
.exemple_tag{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:#46931c;margin-bottom:10px}
.exemple_nom{font-weight:700;font-size:24px;line-height:30px;color:#1f1f1f;margin-bottom:12px}
.exemple_desc{font-size:16px;line-height:27px;color:#444;margin-bottom:20px;flex-grow:1}
.exemple_lien{font-weight:500;font-size:15px;color:#46931c}
.exemple:hover .exemple_lien{color:#1f1f1f}

/* Appel à l'action + coordonnées : noir (comme « Prêt à commencer votre projet ») avec la bulle Tonik au trait */
.cta_container{background:url('images/tonik-bulle-contour.png') right 4% bottom 40px / 74px 101px no-repeat #000;padding:110px 0 120px}
.cta_container .cta_titre{font-size:60px;line-height:66px;color:#fff;margin-bottom:26px}
.cta_container .cta_sous{font-size:20px;line-height:32px;letter-spacing:.05em;color:#fff;max-width:640px;margin-bottom:44px}
.cta_container .lien-plus + .lien-plus{margin-left:48px}
.coord{border-left:1px solid #333;padding:8px 0 8px 40px}
.coord .coord_titre{font-size:30px;line-height:36px;color:#fff;margin-bottom:26px}
.coord .comp_name{font-weight:400;font-size:18px;letter-spacing:.06em;color:#fff;margin-bottom:12px}
.coord .address{font-size:16px;line-height:28px;letter-spacing:.05em;color:#bbb;margin-bottom:18px}
.coord .num_tel{display:block;font-weight:400;font-size:24px;letter-spacing:.06em;color:#6fbe44;text-decoration:none;margin-bottom:10px}
.coord .site_lien{display:block;font-size:16px;letter-spacing:.06em;color:#fff;text-decoration:underline}
.coord .num_tel:hover,.coord .site_lien:hover{color:#fff;text-decoration:underline}

/* Pied de page commun (footer_template_v9) : règles reprises telles quelles de projet_template_script/generique-2019/style.css */
#footer_box{width:100%;background:#000;padding:10px 0}
#footer_text{text-align:left;line-height:22px;margin:0;float:left;color:#fff;font-size:12px}
#footer_text a{color:#fff}
#footer_text,#footer_text a{font-family:'Lato',sans-serif}
#footer_img a{float:right}
#footer_img img{margin:0 12px 0 0}
#footer_box{border-top:1px solid #222}

@media (max-width:1199.98px){
#footer_box.body-container{padding:10px 0!important}
.main_text2 h3,.liste_services h3,.paragraphe_keywords h2,.cta_container .cta_titre{font-size:48px;line-height:54px}
.coord{border-left:0;border-top:1px solid #333;padding:40px 0 0;margin-top:56px}
.exemples > div{margin-bottom:30px}
.services_container{background-size:300px 423px,auto;background-position:right -60px bottom -60px,0 0}
}
@media (max-width:991.98px){
#footer_text{text-align:center}
#footer_img a{margin:10px auto 0;display:block;width:160px;float:none}
.main_text2{grid-template-columns:1fr}
.main_text2 h3{margin-bottom:40px}
.main_text2 p{margin-bottom:40px}
.main_text2 p:last-child{margin-bottom:0}
.liste_services li{width:100%}
}
@media (max-width:767.98px){
.main_text2 h3,.liste_services h3,.paragraphe_keywords h2,.cta_container .cta_titre{font-size:36px;line-height:42px}
.liste_services h3{margin-bottom:36px}
.main_text2 p,.cta_container .cta_sous{font-size:16px;line-height:28px;letter-spacing:.03em}
.main_text2 p strong{font-size:20px;line-height:28px}
.liste_services li{font-size:18px;line-height:28px;padding:0 0 22px 40px}
.liste_services li::before{top:9px}
.paragraphe_keywords p{font-size:16px;line-height:28px;margin-bottom:36px}
.exemple_txt{padding:22px 22px 24px}
.exemple_nom{font-size:21px;line-height:27px}
.cta_container{background-position:right 16px bottom 24px;background-size:52px 71px}
.cta_container .lien-plus{display:flex;justify-content:space-between;max-width:320px}
.cta_container .lien-plus + .lien-plus{margin:22px 0 0}
}