/* FAQ, un seul composant pour tout le site.
   Balisage : <details class="faq-item"><summary class="faq-q">...</summary>
   <div class="faq-a"><div class="faq-a-inner">...</div></div></details>
   Sans JavaScript, <details> s'ouvre et se ferme nativement : rien n'est
   jamais masque de facon definitive. faq.js ajoute l'animation de hauteur. */

.faq-list{max-width:820px;margin:0 auto;display:block;border-top:1px solid var(--cream-dark,#e8e0d4)}

.faq-item{position:relative;margin:0;padding:0;border:0;border-bottom:1px solid var(--cream-dark,#e8e0d4);background:transparent;border-radius:0;overflow:visible}
/* Filet bronze qui se dessine sur la bordure haute : amorce au survol, entier a l'ouverture. */
.faq-item::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--bronze,#9a7b4a);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.22,1,.36,1);pointer-events:none}
.faq-item[open]:not(.is-closing)::before{transform:scaleX(1)}

.faq-q{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:56px;padding:1.55rem 0;cursor:pointer;font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:1.3rem;font-weight:400;line-height:1.35;color:var(--charcoal,#2a2320);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{content:''}
.faq-q::after{content:none!important}
.faq-q-text{transition:transform .55s cubic-bezier(.22,1,.36,1),color .35s}
.faq-item[open]:not(.is-closing) .faq-q-text{color:var(--bronze-text,#82683e)}

/* Plus qui devient moins : la barre verticale pivote a plat, le cercle se remplit. */
.faq-icon{position:relative;flex:0 0 auto;width:38px;height:38px;border:1px solid var(--cream-dark,#e8e0d4);border-radius:50%;transition:background-color .45s,border-color .45s,transform .6s cubic-bezier(.22,1,.36,1)}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--bronze,#9a7b4a);transition:transform .5s cubic-bezier(.22,1,.36,1),background-color .35s}
.faq-icon::after{transform:rotate(90deg)}
.faq-item[open]:not(.is-closing) .faq-icon{background:var(--charcoal,#2a2320);border-color:var(--charcoal,#2a2320);transform:rotate(180deg)}
.faq-item[open]:not(.is-closing) .faq-icon::before,
.faq-item[open]:not(.is-closing) .faq-icon::after{background:var(--off-white,#f7f2ea)}
.faq-item[open]:not(.is-closing) .faq-icon::after{transform:rotate(0)}

.faq-a{overflow:hidden;max-height:none!important;padding:0!important}
.faq-a-inner{padding:0 4rem 1.9rem 0;max-width:68ch}
.faq-a-inner p{margin:0;font-family:var(--sans,'DM Sans',system-ui,sans-serif);font-size:.95rem;line-height:1.85;color:var(--text-mid,#5a5550)}
.faq-a-inner p+p{margin-top:.85rem}
.faq-a-inner a{color:var(--bronze-text,#82683e);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

.faq-q:focus{outline:none}
.faq-q:focus-visible{outline:2px solid var(--bronze-text,#82683e);outline-offset:6px}

/* Survol : seulement avec une vraie souris, jamais coince apres un toucher. */
@media(hover:hover) and (pointer:fine){
  .faq-item:hover::before{transform:scaleX(.16)}
  .faq-item[open]:not(.is-closing):hover::before{transform:scaleX(1)}
  .faq-item:hover .faq-q-text{transform:translateX(6px)}
  .faq-item:hover .faq-icon{border-color:var(--bronze,#9a7b4a)}
}

@media(max-width:768px){
  .faq-q{gap:1rem;padding:1.2rem 0;font-size:1.14rem}
  .faq-icon{width:34px;height:34px}
  .faq-a-inner{padding:0 0 1.5rem}
  .faq-a-inner p{font-size:.93rem}
}

@media(prefers-reduced-motion:reduce){
  .faq-item::before,.faq-q-text,.faq-icon,.faq-icon::before,.faq-icon::after{transition:none}
}
