/**
* ComarquageFP : Plugin comarquage for Joomla! 5.x
* Version 5.0.0
* Creation date: Novembre 2025
* Author: Fabrice4821 - https://creation-web.pro/
* Author email: support@creation-web.pro
*
* @copyright Copyright (C) 2011 - 2016 GMapFP, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
.comarquageFP_main .comarquagefp-boutons-container {
font-family: system-ui, sans-serif;
background: #f8f9fa;
padding: 1.5rem;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.comarquageFP_main .comarquagefp-boutons-container .options {
display: flex;
gap: .5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
/* Boutons comarquage */
.comarquageFP_main .comarquagefp_button {
flex: 1;
background: white;
border: 2px solid #ccc;
border-radius: .5rem;
padding: .5rem 1rem;
cursor: pointer;
transition: all .3s ease;
color: #333;
}
.comarquageFP_main .comarquagefp_button:hover {
border-color: #999;
}
/* Bouton actif */
.comarquageFP_main .comarquagefp_button.active {
border-color: #0d6efd;
background: #e7f0ff;
color: #0d6efd;
font-weight: 600;
}
/* Divs cachées par défaut */
.comarquageFP_main .comarquagefp_button_div {
display: none;
opacity: 0;
transform: translateY(10px);
transition: all .3s ease;
background: white;
padding: 1rem;
border-radius: .5rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* Div affichée */
.comarquageFP_main .comarquagefp_button_div.show {
display: block;
opacity: 1;
transform: translateY(0);
}
.comarquageFP_main .comarquagefp_illustration {
overflow: hidden; /* empêche les débordements si l'image flotte */
margin-bottom: 1em;
}
.comarquageFP_main .comarquagefp_illustration figure.comarquagefp-left {
float: left; /* aligne la figure à gauche */
margin: 0 1em 1em 0; /* espace autour de l'image (droite et bas) */
max-width: 40%; /* facultatif : limite la largeur */
}
.comarquageFP_main .comarquagefp_illustration figure.comarquagefp-right {
float: right; /* aligne la figure à gauche */
margin: 0 1em 1em 0; /* espace autour de l'image (droite et bas) */
max-width: 40%; /* facultatif : limite la largeur */
}
.comarquageFP_main .comarquagefp_illustration figure img {
display: block; /* retire l'espace blanc sous l'image */
width: 100%; /* image adaptative */
height: auto;
border-radius: 6px; /* arrondit les coins (optionnel) */
}
.comarquageFP_main .icon, .petit-icon {
align-items: center;
}
.comarquageFP_main .petit-icon svg {
width: 18px;
}
.comarquageFP_main .minus {
font-size : 0.8rem;
}
.comarquageFP_main .qui_peut_aider .titre-icon .icon {
fill: #cd094f;
align-items: center;
}
.comarquageFP_main .titre-icon , .comarquageFP_main .titre-icon a, .comarquageFP_main .accordion-button, .comarquageFP_main .fiche, .comarquageFP_main .sous-titre {
display: flex;
gap: 16px;
}
.comarquageFP_main .qui_peut_aider .titre {
display: flex;
gap: 16px;
color: #cd094f;
}
.comarquageFP_main .qui_peut_aider .link > div{
border: solid 1px #cccccc;
border-radius: 5px;
background-color: #ffffff;
padding: 10px;
margin: 10px;
}
.comarquageFP_main .qui_peut_aider .link .accordion {
border: solid 1px #cccccc;
border-radius: 5px;
background-color: #ffffff;
padding: 0px;
margin: 10px;
}
.comarquageFP_main .qui_peut_aider .link .accordion .accordion-button {
color: #cd094f;
}
.comarquageFP_main .qui_peut_aider .contenaire_link a {
display: flex;
gap: 16px;
fill: #cd094f;
color: #cd094f;
}
.comarquageFP_main .alert-blue {
background-color: #224faa;
margin: auto;
color: #FFFFFF;
margin-bottom: 20px;
}
.comarquageFP_main .alert-medium-light {
background-color: #eeeeee;
margin: auto;
}
.comarquageFP_main .alert-blue a, .comarquageFP_main .alert-blue .icon {
color: #FFFFFF;
fill: #FFFFFF;
text-decoration: none;
display: block;
margin: auto;
text-align: center;
}
.comarquageFP_main abbr[data-bs-original-title] {
cursor: help;
text-decoration-skip-ink: none;
text-decoration: underline dotted;
}
.comarquageFP_main .numChapitre {
display: inline-flex; /* Permet le centrage avec flexbox */
align-items: center; /* Centre verticalement */
justify-content: center; /* Centre horizontalement */
border: 1px solid;
border-radius: 50%; /* 50% pour un cercle parfait */
width: 30px;
height: 30px;
background-color: #224faa;
color: #ffffff;
fill: #ffffff;
font-weight: bold;
}
.comarquageFP_main .fiche_pratique a {
display: flex;
align-items: center; /* aligne verticalement */
gap: 15px; /* espace entre icône et texte */
text-decoration: none;
}
.comarquageFP_main .fiche_pratique .pictogramme {
flex-shrink: 0; /* empêche l’icône de rétrécir */
}
.comarquageFP_main .fiche_pratique .titre {
font-size: 18px;
font-weight: bold;
}
.comarquageFP_main .voir_aussi_s, .comarquageFP_main .fiches_pratiques , .comarquageFP_main .questions_reponses, .comarquageFP_main .comment_faire_si_contenaire, .comarquageFP_main .questions_reponses_contenaire, .comarquageFP_main .services-en-ligne, .comarquageFP_main .references {
padding: 10px 0;
}
.comarquageFP_main .fiches_pratiques, .comarquageFP_main .comment_faire_si, .comarquageFP_main .questions_reponses_contenaire, .comarquageFP_main .Groupe {
padding: 20px;
border: solid 1px #cccccc;
border-radius: 5px;
}
.comarquageFP_main .fiche_pratique {
padding: 2rem 2rem 2.25rem;
border: solid 1px #cccccc;
border-radius: 5px;
border-bottom: solid 3px #224faa;
margin: 20px;
}
.comarquageFP_main .comment_faire_si_contenaire {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.comarquageFP_main .comment_faire_si_contenaire h3{
grid-column: span 2;
}
.comarquageFP_main .Groupe {
margin: 20px 0;
display: flex;
flex-wrap: wrap;
gap: 0px;
}
.comarquageFP_main .Groupe > .fiche_pratique {
flex: 0 0 calc(50% - 40px); /* 2 colonnes */
box-sizing: border-box;
}
.comarquageFP_main .Groupe > :not(.fiche_pratique) {
flex: 0 0 100%; /* les autres prennent toute la largeur */
}
.comarquageFP_main:has(> .audience) {
display: flex;
justify-content: space-evenly; /* ou space-between / space-around */
width: 100%;
flex-wrap: wrap;
}
.comarquageFP_main:has(> .audience) > .audience {
display: inline-flex;
}
.comarquageFP_main .main-icon img {
height: 96px;
}
.comarquageFP_main .main_menu {
text-align: center;
padding: 2rem 2rem 2.25rem;
border: solid 1px #cccccc;
border-radius: 5px;
border-bottom: solid 3px #224faa;
margin: 20px;
}
.comarquageFP_main .sp-red {
fill: #E0010E;
}
.comarquageFP_main .sp-blue {
fill :#031991;
}
.comarquageFP_main .accordion-item button {
color: #224faa;
font-weight: bold;
font-size: 1.2rem;
}
.comarquageFP_main .accordion-item button:hover, .comarquageFP_main .main_menu.audience:hover, .comarquageFP_main .comarquagefp_button:hover {
background-color: #eeeeee;
}
.comarquageFP_main span.highlight {
background-color: #ffff00;
}
.comarquageFP_main .search-result {
font-size: 1.2rem;
padding: 15px;
}
/* Conteneur du champ et du bouton */
.comarquageFP_recherche .search-wrapper {
display: flex;
align-items: center;
max-width: 500px;
margin: 20px auto;
background-color: #f5f5f5;
border-radius: 30px;
padding: 5px 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* Champ de recherche */
.comarquageFP_recherche .search-field {
flex: 1;
border: none;
outline: none;
background: transparent;
padding: 10px 15px;
font-size: 16px;
border-radius: 25px;
transition: background 0.2s;
}
.comarquageFP_recherche .search-field:focus {
background-color: #fff;
box-shadow: 0 0 0 2px #224faa;
}
/* Bouton */
.comarquageFP_recherche .search-btn {
background-color: #224faa;
border: none;
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
}
.comarquageFP_recherche .search-btn:hover {
background-color: #357ABD;
transform: scale(1.1);
}
.comarquageFP_recherche .search-btn svg {
fill: #fff;
width: 24px;
height: 24px;
transition: transform 0.3s;
}
/* Animation de rotation quand loading */
.comarquageFP_recherche .search-btn.loading::before {
animation: spin 1s linear infinite;
transform-origin: center center;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
/* Responsive */
@media (max-width: 500px) {
.comarquageFP_recherche .search-wrapper {
max-width: 100%;
padding: 5px;
}
.comarquageFP_recherche .search-field {
font-size: 14px;
padding: 8px 12px;
}
}
.comarquageFP_recherche .search-btn::before {
content: "";
width: 24px;
height: 24px;
display: block;
background-color: #ffffff;
mask: url("data:image/svg+xml;utf8,");
mask-size: contain;
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-size: contain;
}