/* Surcharges propres au site — chargées APRÈS style.css et default.css.
   Le template ne fournit pas ce fichier : il survit aux mises à jour depuis
   le template. Règles reprises telles quelles de l'ancien public/css/1/style.css
   du site (commit 07f9d6e), pour retrouver l'apparence précédente. */

/* ── Palette du site (reprise de l'ancien style.css) ──
   Posee ici plutot que dans style.css : ce fichier est propre au site et
   n'est pas ecrase par une mise a jour depuis le template. */
:root {
    --heading-font: "Poppins", sans-serif;
    --heading-color: #313131;
    --accent-color: #E41B17;
    --contrast-color: #fff;
    --nav-color: #313131;
    --nav-hover-color: #E41B17;
    --nav-dropdown-color: #212529;
    --nav-dropdown-hover-color: #E41B17;
}

.light-background {
    --background-color: #f9f9f9;
    --surface-color: #fff;
}

.dark-background {
    --background-color: #060606;
    --default-color: #fff;
    --heading-color: #fff;
    --surface-color: #252525;
    --contrast-color: #fff;
}

/* ── Hero : titre, sous-titre, encarts à puce et bouton d'action ── */

.hero h1 {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: var(--accent-color);


}

.hero p {
    margin: 5px 0 30px;
    font-size: 14px;
    font-weight: 400;
}

.hero .btn-get-started {
    margin-top: 40px;
    color: var(--contrast-color);
    background: var(--accent-color);
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 40px;
    border-radius: 4px;
    transition: 0.5s;
    box-shadow: 0 8px 28px rgb(0 0 0 / 10%);
}

.hero .btn-get-started i {
    margin-left: 5px;
    font-size: 18px;
    transition: 0.3s;
}

.hero .btn-get-started:hover {
    color: var(--contrast-color);
    background: color-mix(in srgb, var(--accent-color), transparent 15%);
    box-shadow: 0 8px 28px rgb(0 0 0 / 10%);
}

.hero .btn-get-started:hover i {
    transform: translateX(5px);
}

/* Encart a puce du hero : fond noir translucide, repris de l'ancien style.css.
   La regle de base manquait — seuls h3, i et :hover avaient ete importes. */
.feature-box {
    padding: 5px 20px;
    background-color: rgb(0 0 0 / 80%);
    box-shadow: 0 0 30px rgb(0 0 0 / 10%);
    transition: 0.3s;
    margin: 10px;
}

.feature-box h3 {
    color: #FFF;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.feature-box i {
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
    color: var(--accent-color);
    line-height: 0;
    padding: 4px;
    margin-right: 10px;
    font-size: 24px;
    border-radius: 3px;
    transition: 0.3s;
}

.feature-box:hover i {
    background: var(--accent-color);
    color: var(--contrast-color);
}

/* ── Liste des services ── */

.services {
    background-color: color-mix(in srgb, var(--default-color), transparent 96%);

}

.services .service-item {
    background-color: var(--surface-color);
    box-shadow: 0 0 30px rgb(0 0 0 / 10%);
    height: 100%;
    padding: 60px 30px;
    text-align: center;
    transition: 0.3s;
    border-radius: 0;
}

.services .service-item .icon {
    font-size: 40px;
    border-radius: 0;
    position: relative;
    margin-bottom: 25px;
    display: inline-block;
    line-height: 0;
    transition: 0.3s;
}

.services .service-item h3 {
    font-size: 20px;
    font-weight: 700;
}

.services .service-item.item-red {
    border-bottom: 3px solid #df1529;
}

.services .service-item.item-red .icon {
    color: #df1529;
    background: rgb(223 21 4 / 10%);
}

.services .service-item.item-red:hover {
    background: #df1529;
}

.services .service-item:hover .icon {
    color:  #FFF;

}

.services .service-item.item-rouge {
    border-bottom: 3px solid #E41B17;
}

.services .service-item.item-rouge .icon {
    background: #E41B17;
    color: rgb(255 255 255 / 100%);
}

.services .service-item.item-rouge:hover {
    background: #E41B17;
}

/* ── Galerie des modèles ── */

.portfolio {
    background: color-mix(in srgb, var(--default-color), transparent 96%);
}

.portfolio .portfolio-content {
    position: relative;
    overflow: hidden;
}

.portfolio .portfolio-filters {
    padding: 0;
    margin: 0 auto 20px;
    list-style: none;
    text-align: center;
}

.portfolio .portfolio-filters li {
    cursor: pointer;
    display: inline-block;
    padding: 0;
    font-size: 18px;
    font-weight: 500;
    margin: 0 10px;
    line-height: 1;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
    color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
    margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
    margin-right: 0;
}

.portfolio .portfolio-content img {
    transition: 0.3s;
}

.portfolio .portfolio-content .portfolio-info {
    opacity: 0;
    position: absolute;
    inset: 0;
    z-index: 3;
    transition: all ease-in-out 0.3s;
    background: rgb(0 0 0 / 60%);
    padding: 15px;
}

.portfolio .portfolio-content .portfolio-info h4 {
    font-size: 14px;
    padding: 5px 10px;
    font-weight: 400;
    color: #fff;
    display: inline-block;
    background-color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p {
    position: absolute;
    bottom: 10px;
    text-align: center;
    display: inline-block;
    left: 0;
    right: 0;
    font-size: 16px;
    font-weight: 600;
    color: rgb(255 255 255 / 80%);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
    position: absolute;
    left: calc(50% - 40px);
    font-size: 26px;
    top: calc(50% - 14px);
    color: #fff;
    transition: 0.3s;
    line-height: 1.2;
}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
    color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info .details-link {
    left: 50%;
    font-size: 34px;
    line-height: 0;
}

.portfolio .portfolio-content:hover .portfolio-info {
    opacity: 1;
}

.portfolio .portfolio-content .portfolio-info p {
    opacity: 1;
}

.portfolio .portfolio-content:hover img {
    transform: scale(1.1);
}

/* ── Titres de section ──
   Le template ne centre pas .section-title ; l'ancien site si. Concerne le
   titre et le sous-titre de la galerie de modeles (« Les modèles » /
   « actifs ce mois-ci ») comme des autres sections. */
.section-title {
    text-align: center;
    padding-bottom: 60px;
    position: relative;
}

/* Le <p> porte le titre (« Les modèles »), le <h2> le sous-titre en pastille
   (« ACTIFS EN AOÛT ») — c'est l'ordre du markup et le rendu de reference. */
.section-title p {
    color: var(--heading-color);
    margin: 10px 0 0;
    font-size: 32px;
    font-weight: 700;
    font-family: var(--heading-font);
}

.section-title h2 {
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 8px 20px;
    margin: 0;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
    display: inline-block;
    text-transform: uppercase;
    border-radius: 50px;
    font-family: var(--default-font);
}

/* ── Navigation du formulaire par etapes ──
   Bootstrap rend « Suivant » en .btn-info (cyan) et flottant a droite. On
   l'aligne sur le bouton de validation, deja en rouge et pleine largeur :
   fond accent, texte blanc, 100% de large.

   `float: none` porte !important parce que l'utilitaire Bootstrap
   .float-right/.float-left le declare lui-meme en !important. Sans ca, un
   element de 100% de large resterait flottant, donc hors flux, et
   « Precedent » viendrait le chevaucher des la deuxieme section. */
.form-navigation .next,
.form-navigation .next:focus {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #313131;
    width: 100%;
    float: none !important;
}

.form-navigation .next:hover {
    background-color: color-mix(in srgb, var(--accent-color), #000 12%);
    border-color: color-mix(in srgb, var(--accent-color), #000 12%);
    color: #fff;
}

/* « Precedent » : action secondaire, en gris clair, pour se distinguer de
   « Suivant » qui porte l'action principale en rouge. Meme largeur et meme
   mise en flux : plus aucun des deux n'est flottant, ils s'empilent au lieu
   de se chevaucher. */
.form-navigation .previous,
.form-navigation .previous:focus {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #313131;
    width: 100%;
    float: none !important;
    margin-bottom: 8px;
}

.form-navigation .previous:hover {
    background-color: color-mix(in srgb, var(--accent-color), #000 12%);
    border-color: color-mix(in srgb, var(--accent-color), #000 12%);
    color: #fff;
}

/* ── Module de prise de rendez-vous ──
   default.css peint l'etat selectionne des jours et des creneaux en bleu
   Bootstrap (#007bff), en !important. On le repasse au rouge de la marque.
   Le !important est ici obligatoire, pas cosmetique : la regle d'origine en
   porte un, et une surcharge sans !important ne passerait jamais devant, quelle
   que soit sa specificite. website.css etant charge apres default.css, une
   specificite egale suffit. */
.rdv .selected {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #fff !important;
}

/* Bouton « Valider mes disponibilites » du module de rendez-vous.
   Bootstrap le rend en .btn-primary (bleu). Pas de !important necessaire ici,
   contrairement a l'etat selectionne : .rdv .btn-primary (0,2,0) l'emporte sur
   .btn-primary (0,1,0) par la seule specificite. */
.rdv .btn-primary,
.rdv .btn-primary:focus {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    box-shadow: none;
}

.rdv .btn-primary:hover,
.rdv .btn-primary:active,
.rdv .btn-primary:not(:disabled):not(.disabled):active {
    background-color: color-mix(in srgb, var(--accent-color), #000 12%);
    border-color: color-mix(in srgb, var(--accent-color), #000 12%);
    color: #fff;
}

/* Libelle « Jours selectionnes » du recapitulatif : rendu en <strong> par
   updateSelectedDaysDisplay(), peint en bleu par default.css. */
.rdv .selected-days strong {
    color: var(--accent-color);
}

/* Libelles « Jours : » et « Creneaux : » du recapitulatif affiche apres
   validation des disponibilites — dernier bleu du module. */
.rdv .confirmation-item strong {
    color: var(--accent-color);
}

/* ── Galerie des modeles : espacement de la grille ──
   Le markup portait `gy-4`, une classe de Bootstrap 5 qui n'existe pas en
   Bootstrap 4 (0 regle dans la feuille servie) : les vignettes se touchaient.
   On pose donc la gouttiere a la main, sur les deux axes. */
.portfolio .isotope-container {
    margin-left: -12px;
    margin-right: -12px;
}

.portfolio .portfolio-item {
    padding: 12px;
}

/* L'image entiere est cliquable : le lien doit se comporter comme un bloc,
   sinon l'espace sous l'image laisse une bande vide cliquable. */
.portfolio .portfolio-content .portfolio-preview {
    display: block;
    line-height: 0;
}

/* Le bandeau d'informations est en position:absolute / inset:0 / z-index:3 :
   il recouvre toute la carte et, meme a opacity:0, captait les clics avant
   qu'ils n'atteignent le lien d'apercu place sous lui. Dans le markup d'origine
   le lien etait DANS ce bandeau ; maintenant que c'est l'image entiere qui est
   cliquable, le bandeau doit laisser passer les clics. Il reste purement
   visuel : son icone de zoom n'est plus un lien. */
.portfolio .portfolio-content .portfolio-info {
    pointer-events: none;
}

.portfolio .portfolio-content .portfolio-info .preview-link {
    cursor: pointer;
}