/* ===========================================================
   MDC · FAQ — accordéon natif <details> (zéro JS, increvable)
   =========================================================== */
.mdc-faq{
    width:100%;
    --mdc-accent:#b8252e;
    --mdc-primary:#080a0a;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.mdc-faq-item{
    background:#fff;
    border:1.5px solid #e7eaf2;
    border-radius:14px;
    overflow:hidden;
    transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

/* ---- Question (summary) : reset fort ---- */
.mdc-faq summary.mdc-faq-q{
    list-style:none !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:16px;
    padding:20px 22px;
    margin:0;
    color:var(--mdc-primary);
    line-height:1.4;
    font-family:inherit;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    transition:color .25s ease;
}
/* Masque le triangle natif (Chrome/Safari/Firefox) */
.mdc-faq summary.mdc-faq-q::-webkit-details-marker{ display:none; }
.mdc-faq summary.mdc-faq-q::marker{ content:""; }
.mdc-faq summary.mdc-faq-q:focus{ outline:none; }

.mdc-faq-q-no{
    flex:0 0 auto;
    font-size:.95rem; font-weight:800;
    color:var(--mdc-accent); opacity:.55;
    min-width:26px; display:none;
}
.mdc-faq-q-txt{ flex:1; font-size:1.05rem; font-weight:700; line-height:1.4; }
.mdc-faq-ic{
    flex:0 0 auto;
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:rgba(255,99,1,0.12);
    color:var(--mdc-accent);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .25s ease, color .25s ease;
}
.mdc-faq-ic svg{ display:block; width:16px; height:16px; }

/* Icône plus -> moins / chevron / flèche (état ouvert = details[open]) */
.mdc-faq-ic-v{ transition:transform .3s ease; transform-origin:center; }
.mdc-faq.ic-plus .mdc-faq-item[open] .mdc-faq-ic-v{ transform:scaleY(0); }
.mdc-faq.ic-plus .mdc-faq-item[open] .mdc-faq-ic{ background:var(--mdc-accent); color:#fff; }
.mdc-faq.ic-chevron .mdc-faq-item[open] .mdc-faq-ic{ transform:rotate(180deg); background:var(--mdc-accent); color:#fff; }
.mdc-faq.ic-arrow .mdc-faq-item[open] .mdc-faq-ic{ transform:rotate(90deg); background:var(--mdc-accent); color:#fff; }

/* ---- Réponse (ouverture douce) ---- */
.mdc-faq-a{ overflow:hidden; }
.mdc-faq-a-inner{
    color:#5a6472;
    font-size:1rem;
    line-height:1.7;
    padding:0 22px 22px;
}

/* Animation fluide moderne (Chrome/Edge/Safari récents) :
   interpolation de la hauteur du contenu de <details>. */
.mdc-faq-item::details-content{
    block-size:0;
    overflow:hidden;
    transition:block-size .38s cubic-bezier(.2,.8,.2,1), content-visibility .38s allow-discrete;
}
.mdc-faq-item[open]::details-content{
    block-size:auto;
}
@supports (interpolate-size: allow-keywords){
    .mdc-faq{ interpolate-size: allow-keywords; }
}

/* Repli pour navigateurs sans ::details-content :
   on anime le contenu interne (fondu + glissement). */
@supports not selector(::details-content){
    .mdc-faq-item[open] .mdc-faq-a-inner{ animation:mdcFaqReveal .35s ease; }
}
@keyframes mdcFaqReveal{
    from{ opacity:0; transform:translateY(-8px); }
    to{ opacity:1; transform:none; }
}

/* ===========================================================
   VARIANTES
   =========================================================== */
/* 1 — Cartes douces */
.mdc-faq.is-card .mdc-faq-item[open]{ border-color:var(--mdc-accent); box-shadow:0 14px 34px rgba(255,99,1,0.12); }
.mdc-faq.is-card .mdc-faq-item:hover{ box-shadow:0 10px 26px rgba(31,30,143,0.08); }

/* 2 — Liste bordée */
.mdc-faq.is-bordered{ gap:0; border:1.5px solid #e7eaf2; border-radius:14px; overflow:hidden; }
.mdc-faq.is-bordered .mdc-faq-item{ border:none; border-bottom:1.5px solid #e7eaf2; border-radius:0; }
.mdc-faq.is-bordered .mdc-faq-item:last-child{ border-bottom:none; }
.mdc-faq.is-bordered .mdc-faq-item[open]{ background:rgba(255,99,1,0.03); }

/* 3 — Minimaliste */
.mdc-faq.is-minimal{ gap:0; }
.mdc-faq.is-minimal .mdc-faq-item{ border:none; border-bottom:1.5px solid #e7eaf2; border-radius:0; background:transparent; }
.mdc-faq.is-minimal .mdc-faq-item:last-child{ border-bottom:none; }
.mdc-faq.is-minimal summary.mdc-faq-q{ padding-left:0; padding-right:0; }
.mdc-faq.is-minimal .mdc-faq-a-inner{ padding-left:0; padding-right:0; }
.mdc-faq.is-minimal .mdc-faq-item[open] summary.mdc-faq-q{ color:var(--mdc-accent); }

/* 4 — Fond teinté */
.mdc-faq.is-soft .mdc-faq-item{ background:#f5f6fb; border-color:transparent; }
.mdc-faq.is-soft .mdc-faq-item[open]{ background:#fff; border-color:var(--mdc-accent); box-shadow:0 14px 34px rgba(31,30,143,0.10); }

/* 5 — Numéroté à gauche */
.mdc-faq.is-split .mdc-faq-q-no{ display:block; }
.mdc-faq.is-split .mdc-faq-item{ border-color:#eceef5; }
.mdc-faq.is-split .mdc-faq-item[open]{ border-color:var(--mdc-accent); box-shadow:0 14px 34px rgba(255,99,1,0.10); }
.mdc-faq.is-split .mdc-faq-item[open] .mdc-faq-q-no{ opacity:1; }

/* 6 — Glassmorphism */
.mdc-faq.is-glass .mdc-faq-item{
    background:rgba(255,255,255,0.55);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:1.5px solid rgba(255,255,255,0.7);
    box-shadow:0 8px 30px rgba(31,30,143,0.10);
}
.mdc-faq.is-glass .mdc-faq-item[open]{ background:rgba(255,255,255,0.78); border-color:rgba(255,99,1,0.5); }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:600px){
    .mdc-faq summary.mdc-faq-q{ padding:16px 16px; gap:12px; }
    .mdc-faq-q-txt{ font-size:1rem; }
    .mdc-faq-a-inner{ padding:0 16px 18px; font-size:.95rem; }
    .mdc-faq.is-minimal summary.mdc-faq-q,
    .mdc-faq.is-minimal .mdc-faq-a-inner{ padding-left:0; padding-right:0; }
}