#home-third
{
    background-color: #9A7420;
}

#home-third h2, #home-third h5
{
    color: white;
}

#home-third h5
{
    font-size: 1.3em;
    font-weight: 300 !important;
    margin-top: -5px;
}

#home-third .row
{
    max-width: 90%;
    margin: auto !important;
    margin-top: 8% !important;
    display: flex;
}

#home-third .row .col-md-4
{
    margin: 15px;
    position: relative;
    background-color: white;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center
}

#home-third .image-cover
{
    width: 90px;
    margin: auto;
    background: #e1e1e1;
    border-radius: 50px;
    position: absolute;
    top: -35px;
}

#home-third .image-cover img
{
    padding: 20px;
}

#home-third h3
{
    color: #9A7420;
    font-size: 1.7em;
    margin-top: 45px;
}

#home-third p
{
    font-size: 1.5em;
    margin-top: 15px;
    line-height: 35px;
    font-size: 1.5em;
    margin-top: 15px;
    line-height: 35px; 
    padding: 0 30px;
}

#home-fourth .row
{
    max-width: 90%;
    margin: auto;
    display: flex;
    align-items: center;
}

#home-fourth .col-md-4 img
{
    width: 100%;
    height: auto;
}

#home-fourth .col-md-8 h2, #home-fourth .col-md-8 p, #home-fourth .col-md-8 h4
{
    text-align: left;
}

#home-fourth .col-md-8 h2
{
    margin-top: 0;
    font-size: 2.6em;
}

#home-fourth .col-md-8 h4
{
    font-size: 22px;
    font-weight: 400 !important;
}

#home-fourth .col-md-8 p
{
    color: #9A7420;
    margin-bottom: 0px;
    font-size: 1.3em;
}

@media screen and (max-width: 800px) {
    #home-third h2
    {
        font-size: 1.7em;
    }

    #home-third h5
    {
        margin-top: 0px;
    }

    #home-third .row
    {
        flex-direction: column;
    }

    #home-third .row .col-md-4
    {
        margin-top: 55px;
    }

    /* #home-third .image-cover
    {
        top: -17%;
    } */

    #home-third p
    {
        padding: 10px;
    }

    #home-fourth .row
    {
        flex-direction: column-reverse;
    }

    #home-fourth .col-md-8 h2
    {
        font-size: 2.2em;
    }

    #home-fourth .col-md-4 img
    {
        margin-top: 40px;
    }
}

/* ==========================================================================
   NETAH — Surcharges de palette
   Or #D4AF37 / Or foncé #9A7420 / Violet #4B0082 / Rouge #8B0000 / Noir #0C0A0F

   Ce bloc surcharge bootstrap.min.css, qui est un fichier vendor minifié :
   on ne le modifie jamais directement, sous peine de tout reperdre à la
   première mise à jour. custom.css est chargé après lui dans header.php,
   la cascade suffit donc.

   Tout le vert de Bootstrap passe en or, y compris les indicateurs de statut.
   Le rouge (#8B0000) reste donc le seul repère chromatique distinguant un
   échec d'une réussite : garde bien les libellés textuels des statuts.
   ========================================================================== */

:root {
  --netah-or:           #D4AF37;
  --netah-or-clair:     #F0CE6A;
  --netah-or-fonce:     #9A7420;
  --netah-violet:       #4B0082;
  --netah-violet-fonce: #2E0050;
  --netah-rouge:        #8B0000;
  --netah-noir:         #0C0A0F;
}

/* --- Boutons d'action (décoratifs) --------------------------------------- */
.btn-success,
.btn-success:focus {
  background-color: var(--netah-or);
  background-image: none;
  border-color: var(--netah-or-fonce);
  color: var(--netah-noir);
  font-weight: 500;
}
.btn-success:hover,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  background-color: var(--netah-or-clair);
  border-color: var(--netah-or);
  color: var(--netah-noir);
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success {
  background-color: var(--netah-or);
  border-color: var(--netah-or-fonce);
  color: var(--netah-noir);
}

.btn-primary,
.btn-primary:focus {
  background-color: var(--netah-violet);
  background-image: none;
  border-color: var(--netah-violet-fonce);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:active {
  background-color: var(--netah-violet-fonce);
  border-color: var(--netah-violet-fonce);
  color: var(--netah-or-clair);
}

.btn-danger,
.btn-danger:focus {
  background-color: var(--netah-rouge);
  background-image: none;
  border-color: var(--netah-rouge);
  color: #fff;
}
.btn-danger:hover,
.btn-danger:active {
  background-color: #A81212;
  border-color: #A81212;
}

/* --- Liens et éléments actifs -------------------------------------------- */
a { color: var(--netah-or-fonce); }
a:hover, a:focus { color: var(--netah-violet); }

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background-color: var(--netah-violet);
  border-color: var(--netah-violet-fonce);
}
.pagination > li > a { color: var(--netah-or-fonce); }

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: var(--netah-violet);
}

.progress-bar { background-color: var(--netah-or); }

.form-control:focus {
  border-color: var(--netah-or);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(212,175,55,.5);
}

/* --- Rond porte-icône de #home-third -------------------------------------
   Le gris #e1e1e1 d'origine tombe à 3,28:1 face à l'or foncé. Un fond crème
   très clair rétablit le contraste sans casser le rendu.
   -------------------------------------------------------------------------- */
#home-third .image-cover {
  background: #F6EFDC;
  border: 2px solid var(--netah-or);
}

/* Le h5 est en font-weight 300 sur le fond doré : trop fin pour rester lisible */
#home-third h5 {
  font-weight: 400 !important;
}


/* --- Vert de Bootstrap -> or ---------------------------------------------
   bootstrap.min.css étant un fichier vendor minifié, on ne le touche pas :
   custom.css est chargé après lui dans header.php, la cascade suffit.
   Sur fond clair on utilise l'or FONCÉ (#9A7420, 4,29:1) ; l'or vif tombe
   à 2,10:1 sur blanc et devient illisible.
   -------------------------------------------------------------------------- */

.text-success,
a.text-success,
.text-success:hover,
.has-success .control-label,
.has-success .help-block {
  color: var(--netah-or-fonce) !important;
}

.label-success,
.badge-success {
  background-color: var(--netah-or) !important;
  color: var(--netah-noir) !important;
}

.bg-success,
a.bg-success:hover {
  background-color: var(--netah-or) !important;
  color: var(--netah-noir) !important;
}

.alert-success {
  background-color: #FBF3DC;
  border-color: var(--netah-or);
  color: #6B5115;
}
.alert-success hr { border-top-color: var(--netah-or); }
.alert-success .alert-link { color: #4A3809; }

.panel-success {
  border-color: var(--netah-or);
}
.panel-success > .panel-heading {
  background-color: #FBF3DC;
  border-color: var(--netah-or);
  color: #6B5115;
}
.panel-success > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: var(--netah-or);
}

.progress-bar-success {
  background-color: var(--netah-or);
}

.list-group-item-success {
  background-color: #FBF3DC;
  color: #6B5115;
}
a.list-group-item-success:hover,
a.list-group-item-success:focus {
  background-color: #F6E9C2;
  color: #6B5115;
}

.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tbody > tr.success > td,
.table > tbody > tr.success > th {
  background-color: #FBF3DC !important;
}

.has-success .form-control {
  border-color: var(--netah-or-fonce);
}
.has-success .form-control:focus {
  border-color: var(--netah-or-fonce);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(212,175,55,.6);
}
.has-success .input-group-addon {
  background-color: #FBF3DC;
  border-color: var(--netah-or-fonce);
  color: #6B5115;
}

/* Icônes de validation (icon-check et équivalents) */
.icon-check.text-success,
.fa-check.text-success,
.glyphicon-ok.text-success {
  color: var(--netah-or-fonce) !important;
}