:root {
    --background-color: #ffffff;
    --default-color: #444444;
   /*  --heading-color: #37517e; */
    --heading-color: #147aa2;
    --accent-color: #ea8300;
    --contrast-color: #ffffff;

  --custom-color-main : #147aa2;
  --custom-color-secondary: rgb(255, 196, 0);
  --custom-color-action: orange;

}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: #ffffff;  /* The default color of the main navmenu links */
    --nav-hover-color: #b9d3df; /* Applied to main navmenu links when they are hovered over or active */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #47b2e4; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  }

h1, h2, h3, h4, h5, h6 {
    color: var(--custom-color-main);
    font-family: var(--heading-font);
}

/* ══════════════════════════════════════════════════════════════════
   TITRES — hiérarchie de mise en forme (.titre-1 > .titre-2 > .titre-3)
   Point d'entrée unique pour tester une nouvelle police : taille,
   graisse et letter-spacing de tous les gros titres du site regroupés
   ici. Des classes plutôt que des balises h1-h3 : ce sont des titres
   d'accroche marketing, pas des titres de section porteurs de sens pour
   la structure du document (un seul <h1> par page reste la référence).
   Couleurs et espacements propres à un contexte (fond sombre du CTA,
   etc.) restent définis à côté de leur composant.

   Niveau 1 (.titre-1) — Promesse (accueil) + CTA final
   Niveau 2 (.titre-2) — Titre de section (Témoignages)
   Niveau 3 (.titre-3) — Titres secondaires (colonnes du footer)
   ══════════════════════════════════════════════════════════════════ */
.titre-1,
.titre-2,
.titre-3 {
    font-family: var(--heading-font);
    color: var(--custom-color-main);
    margin: 0;
}

.titre-1 {
    font-size: 55px;
    font-weight: 700;
    letter-spacing: -3px;
    line-height: 50px;
}
@media (max-width: 640px) {
    .titre-1 {
        font-size: 45px;
        margin-top: 10px !important;
    }
}

.titre-2 {
    font-size: 45px;
    font-weight: 600;
    letter-spacing: -3px;
}

.titre-3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -1px;
    padding-bottom: 12px;
}

.pricing .pricing-item .line-through {
    text-decoration: line-through;
    font-size: 48px;
    display: block;
    text-align: center;
    font-weight:300;
    margin-bottom: 3px;
}
.pricing ul .highlight{
    color: var(--accent-color);
}
.pricing h4 {
    color: var(--accent-color);
    font-size: 35px;
    font-weight: 400;
    font-family: var(--heading-font);
    margin-bottom: 0;
    text-align: left;
}
.pricing h4 sup {
    font-size: 20px;
}

/* Call to action */
.call-to-action {
    --background-color: var(--custom-color-main);
    --default-color: #ffffff;
    --contrast-color: #ffffff;
    padding: 70px 0;
    position: relative;
    clip-path: inset(0);
}


/*
    Services
*/
.services {
    --background-color: 
color-mix(in srgb, #005dff, transparent 95%);
}
.service-details ul {
    font-size: 15px;
    font-weight: 600;
}
/*
    Header
*/
.header {
    background-color: var(--custom-color-main);
}
.index-page .header {
    --background-color: var(--custom-color-main);
    --heading-color: #ffffff;
    --nav-color: #ffffff;
}
.index-page.scrolled .header {
    --background-color: var(--custom-color-main);
}
.header .logo h1 {
    font-size: 30px;
    text-transform: none;
    letter-spacing: 0px;
    font-family: var(--heading-font);
    font-weight:400;
}
.header .btn-getstarted,
.header .btn-getstarted:focus {
    font-size: 13px;
}
.header .logo img {
    max-height: 40px;
    margin-right: 8px;
}
.header .navmenu .highlight {
    background-color: white;
    color: var(--accent-color);
    border-radius: 9px;
    justify-content: center;
    /* .navmenu li:last-child a met padding-right à 0 (pensé pour les liens
       à flèche de sous-menu) — ce lien étant toujours le dernier, ça
       décale visuellement le texte du fond blanc malgré le centrage. */
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Menu sandwich (mobile) : le panneau déroulant a lui-même un fond blanc
   (--nav-dropdown-background-color), donc le fond blanc du bouton desktop y
   est invisible. Plutôt que reproduire la forme de bouton, on garde un
   simple lien orange, non centré et de la largeur de son texte
   (inline-flex) au lieu d'une barre pleine largeur. */
@media (max-width: 1199px) {
    .header .navmenu .highlight {
        display: inline-flex;
        justify-content: flex-start;
        color: var(--accent-color);
    }
}


/*
    Hero
*/
.hero {
    padding: 150px 0px 130px 0px;
}
.hero h1 {
    margin: 35px 0px 20px 0px;
    font-size: 28px;
    font-weight: 500;
    line-height: 37px;
}
.hero .offre {
    font-size: 17px;
}
.hero .offre .prix {
    font-size: 35px;
}
.hero p {
    color: 
        color-mix(in srgb, #214867, transparent 25%);
    margin: 0px 0 3px 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
}
.hero .titre-hero {
    color: white;
    font-family: var(--heading-font);
    margin-top: 20px;
    font-size: 35px;
    line-height: 50px;
    margin-bottom: 60px;
}
.hero .sous-titre-hero {
    color: #214867;
    margin-top: 30px;
    margin-bottom: 35px;
}
.hero .sous-titre-hero i {
    color: white;
    font-size: 24px;
}
.hero .sous-titre-hero span{
    font-size: 30px;
}
.hero .boutons-hero {
    margin-top: 40px;
}

.hero .encart {
    color: white;
    font-size: 17px;
    display: block;
    margin-top: 4px;
    border-radius: 10px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
    padding: 10px 10px 10px 10px;
    text-align: left;
}

.hero .btn-get-started {
    font-size: 17px;
}
.call-to-action .cta-btn {
    font-family: var(--default-font);
    letter-spacing: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.call-to-action .cta-btn i,
.hero .btn-exemples i {
    margin-right: 8px;
}
.call-to-action .titre-1 {
    color: var(--default-color);
}
@media (min-width: 641px) {
    /* Le paragraphe sous le titre n'a de marge que sous 640px (règle plus
       bas, ".call-to-action p"), et .titre-1 est à margin:0 (bloc TITRES) :
       rien ne les sépare en desktop. */
    .call-to-action .titre-1 {
        margin-bottom: 16px;
    }
}

.hero .btn-exemples {
    color: var(--accent-color);
    background: white;
    font-family: var(--default-font);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: normal;
    display: inline-block;
    padding: 12px 30px 12px 30px;;
    border-radius: 9px;
    transition: 0.5s;
    margin-right: 32px;
}

.hero .boutons-hero {
    justify-content: flex-start;
}
  .hero .slogan{
    margin: 30px 0px 10px 0px;
  }
  .hero .btn-get-started {
    padding: 10px 20px 10px 20px;
  
    }
@media (max-width: 640px) {
    .hero {
        --background-color: var(--hero-background-color);
        --default-color: var(--hero-color);
        --heading-color: var(--hero-color);
        --contrast-color: var(--hero-color);
        width: 100%;
        min-height: 63vh;
        position: relative;
        padding: 100px 0px 50px 0px;
        display: flex;
        align-items: center;
        background: url(../img/hero-bg.jpg);
        /* background-size: cover; */
        background-position: center left;
    }
    .hero .offre {
        font-size: 14px;
    }
    .hero .offre .prix {
        font-size: 24px;
    }
    .hero h1 {
        font-size: 25px;
        line-height: 35px;
        margin: 20px 0px 15px 0px;
        font-weight: 500;
        text-align: center;
    }
    .hero p {
        font-size: 18px;
        line-height: 30px;
        
    }
    .hero .titre-hero, .hero .sous-titre-hero {
         text-align: center !important;
    }
    .hero .titre-hero{
        font-size: 35px;
        line-height: 55px;
        font-weight: 700;
        padding: 30px;
        margin-bottom: 0px;
    }
    .hero .sous-titre-hero {
        font-size: 15px;
        margin-top: 65px;
        margin-bottom: 60px;
    }
    .hero .sous-titre-hero i {
        color: white;
        font-size: 24px;
    }
    .hero .sous-titre-hero span {
        font-size: 25px;
    }
    .hero .boutons-hero {
        justify-content: center;
        margin-bottom: 45px;
    }
    .hero .btn-get-started, .hero .btn-watch-video {
        font-size: 1rem;
    }
    .header .logo img {
        max-height: 24px;
        margin-right: 8px;
    }

}
@media (max-width: 1200px) {
    .header .logo {
        order: 0;
    }
    .hero .slogan {
        margin: 40px 0px 30px 0px;
        width: 370px;
    }

}
.header .header-button {
    background-color: white;
    padding: 11px 24px;
    text-align: center;
    border-radius: 5px;
    margin-right: 17px;
    font-size: 12px;
    font-family: var(--default-font);
    font-weight: 400;
}

@media (min-width: 1200px) {
    .header .header-button {
        display: none;
    }
}

/*--------------------------------------------------------------
# CALL TO ACTION
--------------------------------------------------------------*/

@media (max-width: 640px) {
    .call-to-action {
        padding: 50px;
    }
    .call-to-action p {
        margin: 45px 0px 0px 0px;
    }
    .call-to-action .cta-btn {
        white-space: nowrap;
        padding: 12px 20px;
        font-size: 14px;
    }
    .cta-btn-container {
        padding-left: 0;
        padding-right: 0;
    }
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/

.clients {
    padding: 7px !important; 
    background-color: white !important;
}

.clients .container {
    padding: 5px;
    
}
.clients .container .swiper {
    background-color: none;    
}
.clients .container .swiper .swiper-wrapper {
    background-color: none; 
}

.clients .container .swiper .swiper-wrapper .swiper-slide {
    background-color: none; 
}

.clients .container .swiper .swiper-wrapper .swiper-slide img {
    height:60px;
}

.clients p{
    color: #b5b0b0;
    text-align:center;
}

/* Services Details */
.service-details h4 {
    font-size: 1.1rem;
    font-weight: 400;
}

/* Portfolio */
.portfolio .portfolio-item .portfolio-info h4 {
    font-size: 15px;
    font-weight: 400;
    padding-right: 50px;
}

/*
    Pricing
*/
.asterisque {
    font-size: 13px;
    display: block;
    text-align: left;
    color: var(--default-color);
    font-weight: bold;
    margin-top: 5px;
}
.pricing h3 {
    font-size: 20px;
    margin-bottom: 0px !important;
}
.pricing .buy-btn {
    display: block;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--heading-font);
    transition: 0.3s;
    border: 1px solid var(--accent-color);
    padding: 12px 40px;
    border-radius: 9px;
    text-align: center;
    max-width: 250px;
}
.pricing-text{
    border-radius: 7px;
    font-style: italic;
    font-size: 14px;
    padding: 16px;
    background-color: #f8f8f8;
}
.pricing-detail{
    padding: 15px;
    border: 1px solid ghostwhite;
    border-radius: 10px;
    background-color: #f8f8f8;
}
.pricing ul i {
    color: var(--custom-color-main);
    font-size: 24px;
    padding-right: 3px;
}
/* Testimonials */

.testimonials {
    /* padding-top réglé ici (desktop ci-dessous, mobile dans la media
       query) — .section-title n'en prend plus (voir plus bas), pour avoir
       un seul endroit qui contrôle l'espace au-dessus de "Témoignages". */
    padding: 70px 0px 70px 0px;
}
@media (max-width: 640px) {
    .testimonials {
        padding-top: 70px;
    }
}
.testimonials .section-title {
    /* Le thème met 50px de padding-top et 60px de padding-bottom par
       défaut (.section-title dans main.css / custom.css) — le top est
       neutralisé au profit du padding-top de .testimonials ci-dessus, le
       bottom est ramené à une valeur plus raisonnable entre le titre et
       les cartes. */
    padding-top: 0;
    padding-bottom: 20px;
}

#testimonials .swiper-slide {
    padding: 20px;
}

.ti-widget .ti-widget-container .ti-widget-header {
    background-color:red;
}

.testimonial-item .cta-btn {
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 40px;
    border-radius: 9px;
    transition: 0.5s;
    margin: 10px;
    color: var(--contrast-color);
    background-color: var(--accent-color);
}

/*
    FAQ
*/
.faq-2 .faq-container .faq-item h3 {
    font-size: 20px;
}
/*
    Contact
*/
.bloc-whatsapp {
    text-align: right;
}

@media (max-width: 1199px) {
    .bloc-whatsapp {
        text-align: center;
        margin: 0px 0px 46px 0px;
    }

    .whatsapp-code {
        width: 200px;
        margin-top: 0px;
    }
}

/*
    Footer
*/
.footer .footer-about a {
    text-transform: none;
}


/* WHY US */
.why-us {
    --background-color: color-mix(in srgb, var(--custom-color-main), transparent 95%);
}
.why-us .content h3 {
    font-weight: 400;
    font-size: 30px;
    margin-bottom: 30px;
}
.why-us .faq-container .faq-item h3 {
    font-size: 20px;
}
.why-us .faq-container .faq-item .faq-content p {
    margin-top: 5px;
}
.why-us .faq-container .faq-item {
    border-radius: 10px;
}
.why-us .content p {
    color: color-mix(in srgb, var(--default-color), transparent 0%);
    margin-bottom: 30px;
}

.why-us .why-us-img img {
  max-height: 100%;
  flex:1;
  display: none;
}



.page-title {
    margin-top: 61px;
}


/* GENERAL */
@media (max-width: 1199px) {
    section, .section {
        scroll-margin-top: 66px;
    }
}

.section-title {
    padding-top: 50px;
}

/* PROMESSE — phrase unique entre Clients et Testimonials */
.promesse {
    padding: 120px 0;
    background-color: #f6f6f6;
}
.promesse .promesse-line-1 {
    color: var(--heading-color);
}
.promesse .promesse-line-2 {
    font-size: 20px;
    font-weight: 400;
    color: color-mix(in srgb, var(--default-color), transparent 15%);
    margin: 10px 0 0 0;
}
@media (max-width: 640px) {
    .promesse .promesse-line-2 {
        font-size: 17px;
    }
}
.promesse-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 45px;
}
.promesse-service {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    font-size: 13px;
    font-weight: 500;
    color: var(--default-color);
}
.promesse-service i {
    font-size: 14px;
    color: var(--heading-color);
}

/* CGV — la règle globale "section, .section { padding: 60px 0; }" (pensée
   pour les grandes sections d'une page marketing) s'applique aussi à
   chacune des balises <section> internes du document (une par article),
   ce qui empile 120px d'espace vide entre chaque article. */
.cgv section {
    padding: 0;
    margin-bottom: 32px;
}

/* Titres des pages "utilitaires" (CGV, mentions légales, paiement) — même
   traitement sobre que .titre-2, sans les majuscules/soulignement par
   défaut du thème. Restent de vrais <h2> (titre de page, valeur
   sémantique réelle), contrairement à .titre-1/2/3. */
.starter-section .section-title {
    padding-bottom: 20px;
}
.starter-section .section-title h2 {
    font-size: 45px;
    font-weight: 600;
    text-transform: none;
    padding-bottom: 0;
}
.starter-section .section-title h2::before,
.starter-section .section-title h2::after {
    display: none;
}

/* Footer — mise en forme des titres de colonne ("Liens utiles", "Écrivez
   nous") : voir bloc "TITRES" en haut du fichier (.titre-3). */
.footer .footer-links .instagram-logo {
    /* Vrai logo Instagram (SVG, dégradé de marque) plutôt que l'icône plate
       de la police d'icônes — voir footer.php. */
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: -2px;
}