/**
 * QUIZ HÉBERGEMENT - Styles CSS v3.2
 * Avec affichage unifié et masquage des questions
 */

:root {

  --menthe: #9BDEBA;
  --turquoise: #2F9D9A;



}
/* ============================================
   CONTENEUR PRINCIPAL
============================================ */
.quiz-wrapper {
    position: relative;
}

/* ============================================
   QUESTION
============================================ */
.quiz-question {
    animation: fadeIn 0.4s ease;
    position: relative;
    margin-bottom: 1.25rem!important;
}
.quiz-question h3{
    color: #333!important;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}


/* ============================================
   BOUTON RETOUR
============================================ */
.quiz-back-container {
    margin-top: 20px;
}

.quiz-back-btn {
    padding: 0;
    background: transparent;
    color: #333!important;
    border: none;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: slideIn 0.3s ease;
    font-weight: 600;
}

.quiz-back-btn:hover {
    transform: translateX(-3px);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   RÉPONSES
============================================ */
.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 15px;
}

.quiz-answer-btn {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    background: #fff;
    color: #333 !important;
    border: 2px solid var(--turquoise);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}

.quiz-answer-btn:nth-child(1){
  border: 2px solid var(--vert)!important;
  
}
.quiz-answer-btn:nth-child(1):focus{
    outline: 3px solid var(--vert);
}
.quiz-answer-btn:nth-child(1):hover{
    background: var(--vert);
    border-color: var(--vert);
}
.quiz-answer-btn:nth-child(2):focus{
   outline: 3px solid var(--turquoise);
}
.quiz-answer-btn:nth-child(2):hover{
    background: var(--turquoise);
    border-color: var(--turquoise);
}
.quiz-answer-btn:nth-child(2){
  border: 2px solid var(--turquoise)!important;
}
.quiz-answer-btn:nth-child(3):focus{
   outline: 3px solid var(--orangeP);
}
.quiz-answer-btn:nth-child(3):hover{
    background: var(--orangeP);
    border-color: var(--orangeP);
}
.quiz-answer-btn:nth-child(3){
  border: 2px solid var(--orangeP)!important;
  
}

.quiz-answer-btn:hover {
    background: var(--turquoise);
    color: white !important;
    border-color: var(--turquoise);
    transform: translateX(5px);
}

.quiz-answer-icone {
    margin-right: 1.25rem;

}
.quiz-answer-icone  img{
 width: 100%;
 max-width: 20px;   
}
.quiz-answer-icone svg {
  width: 24px;
  height: 24px;
}
.quiz-answer-icone svg path{
   fill: #333!important; 

}


.quiz-answer-text {
    flex: 1;
    color: inherit;
}

/* ============================================
   HISTORIQUE
============================================ */
.quiz-history {
    background: #e8f4f8;
    padding: 20px 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    border-left: 4px solid #0073aa;
}

.quiz-history h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: #0073aa;
}

.quiz-history ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quiz-history li {
    margin: 10px 0;
    color: #333;
    font-size: 15px;
    line-height: 1.6;
}

/* ============================================
   RÉSULTATS - TEXTE
============================================ */
.quiz-result-text,
.quiz-text-result {
    padding: 30px;
    animation: fadeIn 0.5s ease;
}

.quiz-result-text h2,
.quiz-text-result h2 {
    font-size: 28px;
    margin-bottom: 25px;
    color: #0073aa;
}

.quiz-result-content,
.quiz-text-content {
    margin: 20px 0;
    line-height: 1.7;
}

/* Actions (conteneur pour les boutons) */


/* ============================================
   RÉSULTATS - FICHES
============================================ */
.quiz-result-fiches {
    animation: fadeIn 0.5s ease;
    border-top: 1px solid #333;
    padding-top: 3.75em;
}
.quiz-result-fiches h4{
    margin-bottom: 0;
}



.quiz-result-count {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

.fiches-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 30px 0;
    z-index: 1;
    position: relative;
}

.fiche-item {
    background: var(--cyanF);
    color: white;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}
.panel-open .fiche-heures-speciales{
    z-index: 1;
}
.fiche-heures-speciales {
    position: absolute;
    left: -32px;
    top: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 0 0 10px;
    z-index: -1;
    backdrop-filter: blur(5px);
}

.heures-speciales-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    color: var(--cyanF);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 10px 0 0 6px;
}

.panel-open .heures-speciales-text{
    padding: 10px 0;
}


/* Variantes de couleur selon le type de fiche */
.fiche-item.type-urgence .fiche-heures-speciales {
    background-color: var(--orangeP);
}

.fiche-item.type-transition .fiche-heures-speciales {
    background-color: var(--turquoise);
}

.fiche-item.type-mixte .fiche-heures-speciales {
    background-color: var(--menthe);
}
.conditions-section{
    background-color: var(--orangeP);
    border-radius: 10px;
    padding:  1.875em 1.25em;
}
.conditions-section h4{
    margin-bottom: 0!important;
    font-weight: bold;
}
.conditions-section ul{
    margin-bottom: 0!important;
}
.conditions-section *{
    color: #333!important;
}
section.ctnQuiz li::before{
    background-color: #333333!important;
}


/* Responsive */
@media (max-width: 1500px) {
    .fiches-grid {
        padding-left: 1.75rem;
    }
}
@media (max-width: 1024px) {

    body{
        font-size: 14px!important;
    }
    .quiz-map-side-panel .fiche-item { 
        margin-left: 10px!important;
    }
    .quiz-actions{
        text-align: left!important;
    }
    .fiche-details .padLR{
        padding: 0!important;

    }
    .specialBtn .txt{
        padding: 0 1rem;
    }
    .specialBtn:hover .txt { 
        padding-left: 1.75rem;
        padding-right: 0;
    }
    .specialBtn:hover .circle {
        padding-left: 0.25rem;
        padding-right: 1.9375rem;
    }
    .conditions-section {
        margin-top: 3.125em!important;
        margin-left: -20px!important;
        margin-right: -20px!important;
        width: calc(100% + 40px)!important;
        border-radius: 0!important;
        padding-left: 20px!important;
        padding-right: 20px!important;
    }
    .fiche-item h3{
        margin-bottom: 0!important;
    }
    .fiche-details-content{
        padding: 30px 20px!important;
    }
    .criteres-section, .services-section{
        padding: 30px 0 0 0!important;
    }
    .fiche-header-content .flexThat{
        justify-content: space-between!important;
    }
    .telephone-text{
        margin-top: 0!important;
    }
    .detail-section:first-child{
        margin-bottom: 2em!important;
    }
    p .txt{
        font-size: 14px!important;
    }
        .criteres-avec-icones li, .services-avec-icones li { 
        padding: 0 10px 0 0!important;
    }

}
.fiche-details a {
    cursor: pointer;
    pointer-events: auto;
}
.fiche-item:hover {
    /*transform: translateY(-2px);*/
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* ============================================
   FIX: TOGGLE ICON - Position cohérente
============================================ */
.fiche-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    /* Dimensions fixes pour éviter le décalage */
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.fiche-toggle i {
    /* Centrer parfaitement l'icône */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* État ouvert - cercle coloré */
.fiche-toggle.open {
    width: 40px;
    height: 40px;
    border-radius: 100%;
}

.fiche-toggle.open i {
    color: var(--cyanF)!important;
    font-size: 20px;
    font-weight: 300;
}

.type-urgence .fiche-toggle.open {
    background-color: var(--orangeP);
}
.fiche-item.type-urgence .tag,
.fiche-item.type-urgence .fiche-toggle i {
    color: var(--orangeP);
}
.type-transition .fiche-toggle.open {
    background-color: var(--turquoise);
}
.fiche-item.type-transition .tag,
.fiche-item.type-transition .fiche-toggle i {
    color: var(--turquoise);
}
.fiche-item.type-transition .tag,
.fiche-item.type-transition .fiche-toggle i {
    color: var(--turquoise);
}
.type-mixte .fiche-toggle.open{
    background-color: var(--menthe);
}
.fiche-item.type-mixte .tag,
.fiche-item.type-mixte .fiche-toggle i {
    color: var(--menthe);
}

/* Header de la fiche (toujours visible) */
.fiche-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 1.75em 1.875em calc(1.75em - 8px);

}


.fiche-header-content {
    flex: 1;
    align-items: center;
    display: flex;
}

.fiche-header-content .flexThat{
    justify-content: flex-end;
}

.fiche-item h3 {
    color: white;
    margin-bottom: 10px!important;
}

/* ============================================
   TAGS DES FICHES
============================================ */
/* Tags avec icônes et tooltips */
.fiche-tags {
    display: -webkit-box;      /* Safari ancien */
    display: -webkit-flex;     /* Safari */
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 0;
    margin-top: 12px;
}

.fiche-tags .tag {
    position: relative;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    transition: all 0.2s ease;
    margin: 0 8px 8px 0;
}

.fiche-tags .tag-icon {
    height: 2em;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

.fiche-tags .tag-icon svg {
    height: 100%;
}

/* Effet hover avec scale */
.fiche-tags .tag:hover {
    transform: scale(1.15);
    z-index: 10;
}

/* Les icônes héritent de la couleur de la fiche */
.fiche-item .tag {
    color: #6b7280; /* Couleur par défaut grise */
}

/* Couleur des icônes selon le type de fiche */
.fiche-item.type-urgence .tag {
    color: var(--orangeP); /* Orange */
}
.fiche-item.type-urgence:hover{

}
.fiche-item.type-transition .tag {
    color: var(--turquoise); /* Turquoise */
}

.fiche-item.type-mixte .tag {
    color: var(--menthe); /* Vert */
}

/* Tooltip personnalisé - base */
.fiche-tags .tag::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 8px 14px;
    color: #1D2937;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fiche-tags .tag::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.fiche-tags .tag:hover::after,
.fiche-tags .tag:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

.fiche-tags .tag:hover::before {
    transform: translateX(-50%) translateY(0);
}

/* Couleurs des tooltips selon le type de fiche */
.fiche-item.type-urgence .tag::after {
    background-color: var(--orangeP);/* Orange */
}

.fiche-item.type-urgence .tag::before {
    border-top-color: var(--orangeP); /* Orange */
}

.fiche-item.type-transition .tag::after {
    background-color:var(--turquoise); /* Turquoise */
}

.fiche-item.type-transition .tag::before {
    border-top-color: var(--turquoise); /* Turquoise */
}

.fiche-item.type-mixte .tag::after {
    background-color: var(--menthe); /* Vert */
}

.fiche-item.type-mixte .tag::before {
    border-top-color: var(--menthe); /* Vert */
}

/* Couleur par défaut si pas de type */
.fiche-item .tag::after {
    background-color: #6b7280; /* Gris par défaut */
}

.fiche-item .tag::before {
    border-top-color: #6b7280; /* Gris par défaut */
}
.tag svg{
    width: 1.875em;
    height: 1.875em;
    display: inline-block;
}
.tag-type {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  margin-bottom: 1em;
  display: inline-block;
}



/* Adresse et téléphone */
.infoDroite{
    padding-right: 20px;
}
.infoDroite span {
    width: 100%;
    display: inline-block;
    margin-bottom: 5px;
}

.address-text,
.telephone-text {
    font-size: 1em;
}
.telephone-text {
    margin-top: 5px;
}

/* Bouton toggle (flèche) */
.fiche-toggle {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    font-size: 2.5em;
}

.fiche-toggle.open {
    transform: rotate(180deg);
}

/* Détails de la fiche (cachés par défaut) */
.fiche-details {
    background-color: #fff;
    display: none;
    border-radius: 0 0 8px 8px;
}

.fiche-details-content {
    padding: 60px 20px 30px 20px;
}

.detail-section {
    margin-bottom: 20px;
}
.detail-section .specialBtn:hover{
    text-decoration: none;
}
.detail-section .specialBtn i{
    rotate: 315deg;
}
.detail-section:last-child {
    margin-bottom: 0;
}

.detail-section h4 {
    color: #333333;

}

.detail-section p {
    color: #333333;
}

.detail-section a {
    color: var(--turquoise);
    text-decoration: none;
    transition: color 0.2s ease;
}

.detail-section a:hover {
    color: #1D6D6A;
    text-decoration: underline;
}

/* ============================================
   PAS DE RÉSULTATS
============================================ */
.quiz-no-results {
    padding: 30px;
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
    text-align: center;
}

.quiz-no-results h3 {
    margin-top: 0;
    color: #856404;
}

.quiz-no-results p {
    color: #856404;
}

.emergency-contact {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.emergency-contact h4 {
    margin: 0 0 10px 0;
    color: #d9534f;
}

.emergency-contact p {
    margin: 5px 0;
    font-size: 18px;
}

/* ============================================
   BOUTONS
============================================ */
.quiz-restart-btn {
    padding: 0;
    background: none;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333!important;
}

.quiz-restart-btn:hover {
    transform: translateY(-2px);
}

/* ============================================
   MESSAGES D'ERREUR
============================================ */
.quiz-error {
    padding: 20px;
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 8px;
    color: #842029;
    text-align: center;
}

.quiz-error p {
    margin: 10px 0;
}

/* ============================================
   LOADING
============================================ */
.quiz-loading {
    text-align: center;
    padding: 60px 20px;
}

.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--turquoise);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   FOCUS ACCESSIBLE
============================================ */
.quiz-answer-btn:focus,
.quiz-back-btn:focus{
    outline: 3px solid var(--turquoise);
    outline-offset: 2px;
}

/* ============================================
   HEADER AVEC TOGGLE LISTE/CARTE
============================================ */
.results-header {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.125em;
}
.results-header p{
    margin-bottom: 0!important;
}

.results-header h3 {
    margin-bottom: 0!important;
}

/* Boutons Liste/Carte */
.view-toggle-buttons {
    display: flex;
    gap: 0;
    background: transparent;
    border-radius: 50px;
    padding: 2px;
    border: 1px solid var(--vert);
}

.view-toggle-btn {
    padding: 9px 14px;
    background: transparent;
    border: none;
    border-radius: 50px;
    font-size: 13px;
    color: #1D2937!important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle-btn:hover {
    color: #374151;
}

.view-toggle-btn.active {
    background: var(--vertP);
    color: #1D2937!important;
    border-radius: 50px;
}

/* ============================================
   GOOGLE MAPS - Carte et Marqueurs
============================================ */
/* ============================================
   CARTE ET PANNEAU LATÉRAL
============================================ */
.quiz-map-container {
    margin-bottom: 20px;
    margin-top: 20px;
    position: relative;
    display: flex;
    transition: all 0.3s ease;
    width: 100%;
}

#quiz-map {
    width: 100%;
    height: 920px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: width 0.3s ease;
}

/* Quand le panneau est ouvert */
.quiz-map-container.panel-open #quiz-map {
    width: 16.6666666667%;
}

/* Panneau latéral */
.quiz-map-side-panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 100%;
    max-height: 920px;
    border-radius: 0 12px 12px 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    z-index: 10;
    padding: 0;
}
.quiz-map-side-panel .fiche-heures-speciales{
    left: 0;
}
.quiz-map-side-panel .fiche-item{
    padding-left: 35px;
    margin-left: 20px;
}

.quiz-map-container.panel-open .quiz-map-side-panel {
    width: 83.3333333333% ;
}

/* La fiche dans le panneau */
.quiz-map-side-panel .fiche-item {
    box-shadow: none;
    margin-top: 0;
}

/* FIX: Icône toggle dans le panneau de carte */
.quiz-map-side-panel .fiche-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.quiz-map-side-panel .fiche-toggle.open {
    border-radius: 100%;
}

.quiz-map-side-panel .fiche-toggle.open i {
    color: var(--cyanF)!important;
    font-size: 20px;
    font-weight: 300;
}

/* Couleurs du toggle selon le type dans le panneau */
.quiz-map-side-panel .type-urgence .fiche-toggle.open {
    background-color: var(--orangeP);
}

.quiz-map-side-panel .type-transition .fiche-toggle.open {
    background-color: var(--turquoise);
}

.quiz-map-side-panel .type-mixte .fiche-toggle.open {
    background-color: var(--menthe);
}

/* Afficher les détails de la fiche dans le panneau */
.quiz-map-side-panel .fiche-details {
    display: block !important;
}

.panel-error {
    padding: 20px;
    color: #e53e3e;
    text-align: center;
}

.quiz-map-infowindow h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.quiz-map-infowindow p {
    margin: 0 0 10px 0;
    color: #666;
    font-size: 14px;
}

/* ============================================
   CONTENEUR DES RÉSULTATS
============================================ */
#quiz-results {
    width: 100%;
    margin-top: 3.75em;
    animation: fadeIn 0.5s ease;
    display: inline-block;

}

/* ============================================
   RESPONSIVE - MOBILE
============================================ */

@media (max-width: 768px) {


    .criteres-avec-icones, .services-avec-icones{
        -webkit-column-count: 1!important;
        -moz-column-count: 1!important;
        column-count: 1!important;
    }
    .fiche-header-content{
        display: inline-block!important;
    }
    .infoDroite{
        margin-top: 10px;
        padding-right: 0!important;
    }
    /* Positionner le bouton toggle en haut à droite de son parent direct */
    .fiche-header-content .col.d-1-2:last-child {
        position: static !important;
    }
    
    .fiche-header-content .flexThat {
        position: static !important;
    }
    
    .fiche-toggle {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
    }
    
    .fiche-header-content {
        position: relative;
        padding-right: 40px; /* Espace pour le bouton */
    }
    .quiz-text-content .flexThat{
        display: inline-block;

    }
    .quiz-text-content .flexThat .col:first-child{
        border-right: none!important;
        text-align: left!important;
    }
    .quiz-text-content .flexThat .col:last-child{
        padding-left: 0!important;
    }
    .quiz-map-container.panel-open #quiz-map {
        visibility: hidden;
    }
    
    .quiz-map-side-panel {
        height: auto;
        min-height: 800px;
    }
    
    .quiz-map-container.panel-open .quiz-map-side-panel {
        width: 100%;
        border-radius: 12px;
    }
    .quiz-map-side-panel .fiche-item{
        margin-left: 0!important;
    }
    /*.quiz-answer-btn {
        padding: 15px 18px;
        font-size: 15px;
    }
    
  
    .quiz-back-btn {
        width: 100%;
    }
    
    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .view-toggle-buttons {
        width: 100%;
    }
    
    .view-toggle-btn {
        flex: 1;
        text-align: center;
    }
    
    #quiz-map {
        height: 400px;
        border-radius: 8px;
    }
    


    
    .fiche-header {
        padding: 0;
    }
    
    .fiche-details-content {
        padding: 15px;
    }
    */
}
/* ============================================
   SECTIONS DANS LE TOGGLE DES FICHES
   Critères d'admissibilité et Services offerts
============================================ */

/* Section critères */
.criteres-section,
.conditions-section,
.services-section {
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.criteres-section:first-child {
    border-top: none;
    padding-top: 0;
}


.criteres-section ul,
.services-section ul {
    list-style: disc;
    margin: 0;
    padding-left: 0;
}

.criteres-section li,
.services-section li {
    margin-bottom: 8px;
    line-height: 1.5;
    color: #333;
}

.criteres-section p,
.conditions-section p,
.services-section p {
    margin: 0;
    color: #333;
    line-height: 1.6;
}

/* Améliorer la lisibilité sur mobile */
@media (max-width: 768px) {
    .criteres-section .flexThat,
    .conditions-section .flexThat,
    .services-section .flexThat {
        flex-direction: column;
    }
    
    .criteres-section .col,
    .conditions-section .col,
    .services-section .col {
        width: 100% !important;
        margin-bottom: 10px;
    }
}

/* ============================================
   RÉSULTAT TEXTE - NOUVEAU STYLE
============================================ */

.quiz-text-result-container {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: inline-block;
    width: 100%;
}

.quiz-text-content {
    color: #333;
    line-height: 1.8;
    font-size: 16px;
}

.quiz-text-content h1,
.quiz-text-content h2,
.quiz-text-content h3 {
    color: #1a1a1a;
    margin-top: 0;
    margin-bottom: 15px;
}


.quiz-text-content p {
    margin-bottom: 15px;
}

.quiz-text-content ul,
.quiz-text-content ol {
    margin-bottom: 15px;
    padding-left: 25px;
}

.quiz-text-content li {
    margin-bottom: 8px;
}

.quiz-text-content a {
    color: var(--orange);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.quiz-text-content a:hover {
    color: #1D6D6A;
}

.quiz-text-content strong,
.quiz-text-content b {
    color: #1a1a1a;
    font-weight: 600;
}
.quiz-text-content .flexThat{
    align-items: start;
}
.quiz-text-content .flexThat .col:first-child{
    padding-right: 40px;
    border-right: 1px solid #000;
    text-align: right;
}
.quiz-text-content .flexThat .col:last-child{
 padding-left: 40px;
}


/* Bouton recommencer dans les résultats texte */
.quiz-actions {
    text-align: center;
}
.noMargin{
    margin-bottom: 5px!important;
}
.conditions-section{
    margin-top: 3.125em;
}
/* Responsive pour résultats texte */
@media (max-width: 768px) {
    .quiz-text-result-container {
        padding: 20px;
    }
    
    .quiz-text-content {
        font-size: 15px;
    }
}

/* ============================================
   AJUSTEMENTS POUR LES SECTIONS DANS TOGGLE
============================================ */

/* S'assurer que les sections ont le bon espacement */
.fiche-details-content > .col {
    margin-bottom: 0;
}



/* Améliorer l'apparence des titres dans le toggle */
.fiche-details-content h4 {
    font-size: 1.25em!important;
    color: #333;
}

/* Padding uniforme */
.fiche-details-content .padLR {
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 769px) {
    .fiche-details-content .padLR {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* Listes avec icônes */
.criteres-avec-icones,
.services-avec-icones {
    list-style: none !important;
    margin: 0;
    padding: 0;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}
.criteres-avec-icones li::before,
.services-avec-icones li::before{
    display: none!important;
}
.criteres-avec-icones li,
.services-avec-icones li {
    display: flex;
    align-items: flex-start;
    break-inside: avoid;
    margin-bottom: 12px;
    padding: 0 50px 0 0;
}

.criteres-avec-icones li:last-child,
.services-avec-icones li:last-child {
    margin-bottom: 0;
}

/* Icônes */
.critere-icon,
.service-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.critere-icon svg,
.service-icon svg {
    width: 100%;
    height: 100%;
    fill: var(--cyanF)!important;
}
.critere-icon svg path,
.service-icon svg path{
    fill: var(--cyanF)!important;

}

/* Texte */
.critere-text,
.service-text {
    flex: 1;
    color: #333;
    line-height: 1.2;
    font-size: 1em;
}
.titre-avec-ligne {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.titre-avec-ligne strong {
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}

.titre-avec-ligne::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #000;
    margin-left: 10px; /* espace entre le texte et la ligne */
}
.fiche-item:hover {
    background: color-mix(in srgb, var(--cyanF) 90%, white);
}
/* Couleur des icônes selon le type de fiche */
.fiche-item.type-urgence .critere-icon,
.fiche-item.type-urgence .service-icon {
    color: var(--orangeP);
}

.fiche-item.type-transition .critere-icon,
.fiche-item.type-transition .service-icon {
    color: var(--turquoise);
}

.fiche-item.type-mixte .critere-icon,
.fiche-item.type-mixte .service-icon {
    color: var(--menthe);
}

/* Par défaut (si pas de type) */
.critere-icon,
.service-icon {
    color: #6b7280;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .criteres-avec-icones li,
    .services-avec-icones li {
        margin-bottom: 10px;
    }
    
    .critere-icon,
    .service-icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }
    
    .critere-text,
    .service-text {
        font-size: 14px;
    }
}