/* =============================================================================
   LE CERCLE ID — compléments écrits à la main.

   Le site suit le gabarit Laxmi au pixel près : cette feuille ne change AUCUNE
   mise en page. Elle ne contient que la francisation des titres, les éléments
   que le gabarit n'a pas (pot de miel, retours du formulaire, page « merci »)
   et la couleur de la pastille e-mail du pied de page.

   La feuille générée (charte-cercle.css) se charge avant celle-ci.
   ============================================================================= */

:root {
    --cercle-noir: #0D0D0D;
    --cercle-anthracite: #2E2E2E;
    --cercle-beige: #D9D3C8;
    --cercle-gris-clair: #F4F4F4;
    --cercle-terracotta: #C5846A;
}

/* -- Localisation française -------------------------------------------------
   Le gabarit est anglais : il capitalise chaque mot des titres (« La Carte De
   Fidélité »), ce qui est fautif en français. On neutralise la capitalisation
   sur les sélecteurs concernés, sans rien changer d'autre.  */
.section-title h2,
.menu-top li a,
.menu_dropdown ul li ul.sub-menu li a,
.hero-text h2,
.single_about h4,
.single_feature_btn_light,
.single_feature h3,
.single_how_work h4,
.our-team .title,
.our-team .post,
.plan .head h1, .plan .head h2, .plan .head h3,
.plan .price h4,
.plan ul li,
.btn-price-bg,
.signup_form button,
.btn-contact-bg,
.single-address h4,
.single_footer h4 {
    text-transform: none;
}

/* -- Pied de page : pastille e-mail (le gabarit n'a que des réseaux sociaux) */
.f_courriel {
    background: var(--cercle-terracotta);
}

/* -- Formulaire de contact -------------------------------------------------- */
.contact-intro {
    font-size: 14px;
    line-height: 1.75;
    color: #666;
    margin-bottom: 22px;
}

/* Pot de miel : invisible à l'écran comme au lecteur d'écran, mais rempli
   par les robots — jamais display:none, que certains robots détectent. */
.champ-cache {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-retour {
    display: none;
    margin-bottom: 18px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
}

.contact-retour.est-visible {
    display: block;
}

.contact-retour.succes {
    background: var(--cercle-gris-clair);
    border-left: 3px solid var(--cercle-noir);
    color: var(--cercle-noir);
}

.contact-retour.erreur {
    background: #fbf1ed;
    border-left: 3px solid var(--cercle-terracotta);
    color: #8a4a32;
}

/* -- Page de remerciement : seule sous la barre de navigation fixe --------- */
.page-merci {
    padding-top: 170px;
}

.page-merci .app-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 14px 34px;
    border: 2px solid #fff;
    border-radius: 30px;
    color: #fff;
    font-weight: 500;
    transition: background .3s ease, color .3s ease;
}

.page-merci .app-btn:hover,
.page-merci .app-btn:focus {
    background: #fff;
    color: var(--cercle-noir);
    text-decoration: none;
}

/* -- Grilles ---------------------------------------------------------------
   Bootstrap 3 n'égalise pas les hauteurs : si une carte dépasse d'une ligne,
   la rangée suivante se décale. Ces retours à la ligne gardent les rangées
   du gabarit (3 x 2 et 4 x 1) sans rien changer quand les hauteurs sont égales. */
.amazing_feature .row > .col-md-4:nth-child(3n+1),
.about-content .row > .col-md-3:nth-child(4n+1) {
    clear: left;
}

@media (min-width: 768px) and (max-width: 991px) {
    .amazing_feature .row > .col-md-4:nth-child(3n+1),
    .about-content .row > .col-md-3:nth-child(4n+1) {
        clear: none;
    }
    .amazing_feature .row > .col-sm-6:nth-child(2n+1),
    .about-content .row > .col-sm-6:nth-child(2n+1) {
        clear: left;
    }
}