/* ============== BREADCRUMBS ============== */
nav.breadcrumbs {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 1024px) {
    nav.breadcrumbs {
        display: none;
    }
}

.breadcrumb-nav { 
    max-width: var(--largeur-site, 1200px); 
    margin: 0 auto; 
    padding: 0.25rem 2rem 0.75rem; 
}

.breadcrumb-list { 
    display: flex; 
    gap: 6px; 
    font-size: 0.8rem; 
    color: var(--muted, #9aa0a6); 
}

/* Fil d'ariane affiche en mobile uniquement : ses liens sont des cibles
   tactiles autonomes, donc inline-flex sinon min-height reste inerte. */
.breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    color: var(--muted, #9aa0a6);
    text-decoration: none;
}

.breadcrumb-item [aria-current="page"] {
    color: var(--accent-text);
}

@media (min-width: 1024px) {
    .breadcrumb-nav { 
        display: none; 
    }
}

nav.main-nav + .breadcrumb-nav { 
    margin-top: 4px; 
}

/* ============== FAQ HERO ============== */
/* Aplat opaque, arete vive, plus de cerne lime decoratif ni d'ombre diffuse.
   Surface qui bascule avec le theme : ce hero n'est pas repris par la regle
   claire globale, un aplat carbone y rendrait le titre illisible. */
/* NE PLUS APPLIQUER CECI A .faq-hero : il porte une photo de fond depuis
   qu'il a recu la classe .hero-photo, donc il est carbone dans les deux
   themes et un aplat clair y rendrait le titre illisible. Son ::before
   est neutralise pour la meme raison : c'est desormais lui qui PORTE la
   photo, et un ackground: none l'aurait effacee. Selecteurs suffixes
   en --sans-photo, qui n'existent nulle part : les regles restent la
   pour documenter l'etat d'avant et se reactivent en retirant le
   suffixe ici et la classe .hero-photo du HTML. */
.faq-hero--sans-photo {
    margin: 10px auto 40px;
    padding: 56px 20px;
    max-width: var(--largeur-site, 1200px);
    text-align: left;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: none;
    position: relative;
}

/* Voile radial neutralise : la surface reste un aplat franc. */
.faq-hero--sans-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: none;
    pointer-events: none;
}

/* Conteneur centre en largeur : ce margin auto ne centre pas du texte, il reste. */
.hero-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.title-text {
    /* Couleur pleine : le lime est porte par la barre de course sous le titre,
       pas par le titre lui-meme. Un accent qui remplit les titres n'accentue plus rien. */
    color: var(--text-primary);
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--muted, #bbb);
    line-height: 1.6;
    max-width: var(--container-text);
    margin: 0;
}

/* ============== FAQ CONTENT ============== */
.faq-content {
    max-width: var(--largeur-site, 1200px);
    margin: 0 auto;
    padding: 4rem 2rem;
}

.section-header {
    text-align: left;
    margin-bottom: 3rem;
}

.section-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    margin-bottom: 1rem;
    font-weight: 700;
}

.section-description {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--muted, #bbb);
    line-height: 1.6;
    max-width: var(--container-text);
    margin: 0;
}

/* ============== FAQ GRID ============== */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

/* ============== FAQ CARDS ============== */
/* Carte au repos : aplat opaque, filet neutre, arete vive, aucune ombre.
   Douze cartes cernees de lime, c'etait douze accents, donc aucun. */
.faq-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 1.75rem;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Voile radial neutralise : le survol se lit sur la surface et le filet. */
.faq-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.faq-card:hover {
    transform: translateY(-4px);
    background: var(--card-bg-hover);
    border-color: var(--accent-line);
    box-shadow: none;
}

.faq-card:hover::before {
    opacity: 1;
}

.faq-card:focus-within {
    border-color: var(--accent-line);
    box-shadow: none;
}

/* ============== FAQ ICON ============== */
.faq-icon {
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

.faq-card:hover .faq-icon {
    transform: scale(1.1) rotate(5deg);
}

/* ============== FAQ QUESTION ============== */
/* Declencheur d'accordeon : c'est un controle, pas un CTA. Il prend la cible
   tactile de 44px, mais pas la casse ni l'aplat d'un bouton d'action. */
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--tap-min);
    gap: 1rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--text, #f5f5f5);
    font-size: 1.15rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1.4;
}

.faq-question:hover {
    color: var(--accent-text);
}

.faq-question:focus-visible {
    outline: 2px solid var(--accent-line);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

.faq-question span {
    flex: 1;
}

/* ============== FAQ CHEVRON ============== */
.chevron {
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), color 0.2s ease;
    color: var(--muted, #999);
}

.faq-question:hover .chevron {
    color: var(--accent-text);
}

.faq-question[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
    color: var(--accent-text);
}

/* ============== FAQ ANSWER ============== */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.5s ease,
                padding-top 0.5s ease;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
}

.faq-answer > * {
    overflow: hidden;
}

/* Separateur interne : filet neutre. L'etat ouvert se lit deja sur le chevron
   et sur la question, tous deux en vert de texte. */
.faq-answer:not(.collapsed) {
    grid-template-rows: 1fr;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.faq-answer.collapsed {
    grid-template-rows: 0fr;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.faq-answer p {
    margin: 0;
    color: var(--muted, #bbb);
    line-height: 1.7;
    font-size: 1rem;
}

.faq-answer a {
    color: var(--accent-text);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-line);
    transition-property: var(--anim-proprietes);
  transition-duration: 0.2s;
  transition-timing-function: ease;
    font-weight: 500;
}

.faq-answer a:hover {
    color: var(--accent-text);
    border-bottom-color: var(--accent-line);
}

/* ============== RESPONSIVE ============== */
@media (max-width: 768px) {
    .faq-hero {
        padding: 3rem 1rem 2rem;
        margin: 5px auto 20px;
    }

    .faq-content {
        padding: 2rem 1rem;
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .faq-card {
        padding: 1.5rem;
    }

    .faq-icon {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .faq-question {
        font-size: 1.05rem;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    .breadcrumb-nav {
        padding: 0.25rem 1.5rem 0.75rem;
    }
}

/* ============== ACCESSIBILITY ============== */
@media (prefers-reduced-motion: reduce) {
    .faq-card,
    .faq-question,
    .chevron,
    .faq-icon {
        transition: none !important;
        animation: none !important;
    }
    
    /* Keep accordion animation but make it faster */
    .faq-answer {
        transition: grid-template-rows 0.15s ease,
                    margin-top 0.15s ease,
                    padding-top 0.15s ease !important;
    }
}

/* ---- Bande tablette ----
   Ces grilles passaient a une colonne des 768px (900px pour certaines), soit
   en pleine tablette : les cartes prenaient toute la largeur et la page
   devenait une longue colonne. Deux colonnes sont retablies jusqu'a 600px,
   ou une colonne unique devient reellement justifiee.
   Regle ajoutee en fin de fichier : a specificite egale, elle l'emporte sur
   la media query d'origine par l'ordre de declaration. */
@media (min-width: 601px) and (max-width: 900px) {
  .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}