/*!
Theme Name: REIWACREATIVE
Theme URI: https://www.reiwacreative.com
Author: Reiwa Creative
Author URI: Reiwacreative.com
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: reiwacreative
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

FATIMAG is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

        :root {
            --color-actif: white;
            --color-inactif: rgba(255, 255, 255, 0.463);
            --color-marron: #682f4a;
            --color-orange: #f76f46;
            --color-jaune: #edbe31;
            --largeur-conteneur: 75%;
            --font-size-principal: 0.938rem;
            /* 15px */
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "Poppins", sans-serif;
            background-color: #222222;
        }

        .header {
            width: 100%;
            height: 100vh;
            background-image: url("https://reiwacreative.com/wp-content/uploads/2026/01/VersionBureau.webp");
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            background-color: grey;
            background-blend-mode: multiply;
        }

        .header-haut {
            margin: auto;
            width: 90%;
            height: 20%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .header-logo {
            background-color: transparent;
        }

        .header-logo img {
            width: 130px;
            height: 130px;
        }

        .header-menu {
            display: flex;
        }

        .header-menu a {
            text-decoration: none;
            color: var(--color-inactif);
            font-size: var(--font-size-principal);
            padding: 0 15px;
        }

        .header-menu a:hover {
            color: var(--color-actif);
        }

        .header-menu a.actif {
            color: var(--color-actif);
        }

        .header-bas {
            height: auto;
            width: var(--largeur-conteneur);
            margin: 5.625rem auto auto auto;
        }

        .header-bas-titre p {
            color: var(--color-actif);
            font-size: var(--font-size-principal);
            font-weight: 500;
            letter-spacing: 'normal';
            padding: 0 0 1.2rem 0;
        }

        @keyframes apparition {
            from {
                opacity: 0;
                transform: translateX(5%);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .header-bas-description.actif {
            animation: apparition 0.5s ease-in-out forwards;
        }

        .header-bas-description h6 {
            color: var(--color-actif);
            font-size: 4.375rem;
            font-weight: 700;
            line-height: 4.813rem;
            padding: 0 0 3.125rem 0;
        }


        .header-bas-bouton a {
            text-decoration: none;
            color: var(--color-actif);
            font-size: var(--font-size-principal);
            font-weight: 500;
            padding: 0.938rem 1.875rem;
            background-color: var(--color-marron);
            transition: all .3s ease-in-out;
        }

        .header-bas-bouton a:hover {
            background-color: var(--color-orange);
        }

        .header-haut-mobile {
            display: none;
        }

        /* Code Services */
        .section-services {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: var(--largeur-conteneur);
            margin: 2.5rem auto;
            height: auto;
        }

        .service {
            position: relative;
            height: 320px;
            max-width: 100%;
            /* 300px */
            padding: 1rem 5%;
        }

        .service.marron {
            background-color: var(--color-marron);
        }

        .service.orange {
            background-color: var(--color-orange);
        }

        .service img {
            width: 2.5rem;
            height: 2.5rem;
        }

        .service h6 {
            font-size: 2.188rem;
            color: var(--color-actif);
            font-weight: 600;
            line-height: 42px;
        }

        .service p {
            font-size: var(--font-size-principal);
            font-weight: 500;
            color: #BFBFBF;
            padding-top: 1.875rem;
            padding-bottom: 3.125rem;
        }

        .service a {
            position: absolute;
            bottom: 2rem;
            text-decoration: none;
            font-size: var(--font-size-principal);
            font-weight: 500;
            color: #BFBFBF;
        }

        .service a:hover {
            color: var(--color-actif);
        }

        /* Section texte image */

        .section-texte-image {
            max-width: var(--largeur-conteneur);
            margin: 7rem auto;
            height: auto;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        .section-texte {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 20px;
            color: white;
        }

        .section-texte p {
            font-size: var(--font-size-principal);
        }

        .section-texte h6 {
            font-size: 2.813rem;
            line-height: 56px;
        }

        .section-texte-description {
            text-align: justify;
        }

        .section-image {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;
            max-width: 90%;
            margin: auto;
        }

        .section-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .section-image-reseaux {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .section-image-reseaux span {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            background-color: var(--color-marron);
            cursor: pointer;
        }

        .section-image-reseaux span:hover {
            background-color: var(--color-orange);
        }

        .section-image-reseaux span img {
            width: 25px;
            height: 25px;
        }

        /* Code statistiques */
        .stats-container {
            background-color: var(--color-marron);
            margin: auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .stat-item {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .stat-item span {
            color: white;
            font-size: 70px;
            font-weight: 700;
        }

        .stat-item p {
            color: var(--color-jaune);
            font-size: 12px;
            font-weight: bold;
        }

        /* Code footer */
        footer {
            color: white;
            background-color: black;
            display: grid;
            grid-template-columns: 1fr;
        }

        .footer-haut {
            padding: 6rem 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
        }

        .footer-haut a {
            color: white;
            text-decoration: none;
        }

        .footer-haut a:hover {
            color: var(--color-orange);
        }

        .footer-haut-gauche,
        .footer-haut-droite,
        .footer-bas {
            display: grid;
            grid-template-columns: 1fr;
            text-align: center;
            justify-content: center;
            align-items: center;
        }

        .footer-haut-gauche p,
        .footer-haut-droite p {
            font-size: 22px;
            font-weight: bold;
        }

        .footer-bas {
            padding: 20px 0;
            border-top: 1px solid #222222;
        }

        /* Code carrousel partenaires */
        .section-carrousel-contenu-titre {
            color: rgba(255, 255, 255, 0.66);
            font-size: 2.2rem;
            margin: 5rem auto 0 auto;
            text-align: center;
        }

        .section-carrousel-contenu-article img {
            width: 100%;
            height: 50%;
            border-radius: 10px;
            object-fit: cover;
        }

        .section-carrousel-contenu {
            width: var(--largeur-conteneur);
            height: auto;
            margin: auto;
            padding: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .un {
            display: flex !important;
            justify-content: center;
            align-items: center;
            width: 100% !important;
            height: auto;
        }

        .section-carrousel-contenu-article {
            position: relative;
            width: 90% !important;
            margin: auto;
            height: auto;
            border-radius: 10px;
        }


        .slick-list {
            padding: 0.5rem 0 !important;
        }

        /* Responsive */
        @media (max-width: 1200px) {
            .section-carrousel-contenu {
                width: 100%;
                margin: auto;
                padding: 1rem 0;
            }

            .section-carrousel-contenu-article {
                width: 90% !important;
                height: 400px;
            }
        }


        @media (max-width: 910px) {
            .header {
                background-image: url("https://reiwacreative.com/wp-content/uploads/2026/01/VersionMobile2.webp");
                background-size: cover;
                background-position: bottom center;
            }


            .header-logo,
            .header-menu,
            .header-haut {
                display: none;
            }

            .header-bas {
                margin: 0 auto auto auto;
                padding: 22rem 0 0 0;
                width: 90%;
            }

            .header-bas-description h6 {
                font-size: 2rem;
                line-height: 3rem;
                padding: 0 0 2rem 0;
            }

            .header-haut-mobile {
                background-color: transparent;
                backdrop-filter: blur(30px);
                position: fixed;
                top: 0;
                left: 50%;
                padding: 0;
                transform: translateX(-50%);
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 100;
            }

            .header-haut--mobile-boite {
                background-color: transparent;
                width: 90%;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .header-logo-mobile img {
                width: 80px;
                height: 80px;
            }

            .header-haut-bouton-menu {
                color: var(--color-actif);
                width: 50px;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                /* background-color: rgba(0, 0, 0, 0.718); */
                font-size: 30px;
            }

            .header-menu-mobile {
                transform: translateX(120%);
                position: fixed;
                top: 0;
                right: 0;
                background-color: var(--color-marron);
                width: 90%;
                height: 100vh;
                z-index: 200;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 1.5rem 0;
                transition: transform 0.5s ease-in-out;
            }

            .header-menu-mobile.actif {
                transform: translateX(0);
            }

            .header-menu-mobile a {
                text-decoration: none;
                color: var(--color-actif);
                font-size: 1.125rem;
                /* 18px */
            }

            .header-menu-mobile span {
                position: absolute;
                left: -7%;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.318);
                width: 50px;
                height: 50px;
                background-color: var(--color-orange);
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .header-menu-mobile-reseaux {
                width: 100%;
                height: auto;
                background-color: #53243a;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 1rem;
                padding: 10px 0;
            }

            .header-menu-mobile-reseaux a img {
                width: 2.188rem;
                height: 2.188rem;
            }


            .section-services {
                grid-template-columns: repeat(2, 1fr);
                gap: .5rem;
                max-width: 100%;
                margin: 2.5rem auto;
            }

            .service {
                max-width: 100%;
                height: auto;
                padding: 0.7rem 1rem;
                margin: auto;
            }

            .service h6 {
                font-size: 1rem;
            }

            .service p {
                padding-top: 0rem;
                padding-bottom: 5rem;
            }

            .service a {
                color: var(--color-actif);
            }

            .section-texte-image {
                max-width: 90%;
                margin: 7rem auto;
                height: auto;
                display: grid;
                grid-template-columns: 100%;
                gap: 30px;
            }

            .section-texte p {
                font-size: 15px;
            }

            .section-texte h6 {
                font-size: 2rem;
            }

            .section-image {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                max-width: 100%;
                margin: auto;
            }

            .section-carrousel-contenu {
                width: 95%;
                margin: auto;
                padding: 1rem 0;
            }

            .section-carrousel-contenu-article {
                width: 90% !important;
                height: 400px;
            }

            .section-carrousel-contenu-titre {
                font-size: 1.8rem;
                margin: 1rem auto;
                text-align: center;
            }
        }

        @media (max-width: 500px) {
            .section-services {
                grid-template-columns: auto;
                gap: 2.5rem 0;
                width: 100%;
                margin: 2.5rem auto;
            }

            .service {
                width: 80%;
                height: auto;
                padding: 0.7rem 1rem;
                margin: auto;
            }

            .service h6 {
                font-size: 1rem;
            }

            .service p {
                padding-top: 0rem;
                padding-bottom: 5rem;
            }

            .service a {
                color: var(--color-actif);
            }

            .footer-haut {
                padding: 4rem 0;
                display: grid;
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .section-carrousel-contenu {
                width: 90%;
                margin: auto;
                padding: 1rem 0;
            }

            .un {
                width: 100% !important;
                height: 400px;
            }

            .section-carrousel-contenu-article {
                margin: auto;
                width: 95% !important;
                height: 100%;
            }

            .slick-list {
                padding: .5rem !important;
            }

            .section-carrousel-contenu-titre {
                font-size: 1.5rem;
                margin: 1rem auto;
                text-align: center;
            }

        }

        @media (max-width: 330px) {
            .header-bas {
                margin: 0 auto auto auto;
                padding: 7rem 0 0 0;
            }
        }