/* =========================================================
   ABOUT PAGE — Azar Marrakech
   Layout : app.blade.php  ·  content depuis la DB
   ========================================================= */

/* ---------- Wrapper / prose ---------- */
#content.about {
    background: #f9f4ec;
    color: #2a2218;
    font-weight: 300;
}
#content.about main {
    background: rgba(255,253,248,0.55);
    border-radius: 10px;
    padding: 8px 32px 32px;
}

/* ---------- HERO ---------- */
#content.about .hero {
    text-align: center;
    padding: 64px 24px 48px;
    position: relative;
}
#content.about .hero::after {
    content: "";
    display: block;
    width: 80px;
    height: 1px;
    margin: 32px auto 0;
    background: linear-gradient(to right, transparent, #a8792e, transparent);
}
#content.about .hero h1 {
    font-family: 'Antic Didone', 'Playfair Display', serif;
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 400;
    line-height: 1.25;
    color: #2a1509;
    max-width: 760px;
    margin: 0 auto 20px;
}
#content.about .hero p {
    font-size: 16px;
    line-height: 1.9;
    color: #4a3d2a;           /* + foncé qu'avant (#6a6050) */
    max-width: 640px;
    margin: 0 auto 28px;
}
#content.about .hero p strong { color: #2a1509; }

/* CTA plein, contrasté */
#content.about .cta-btn {
    display: inline-block;
    padding: 13px 34px;
    background-color: #c8a96e;
    border-radius: 2px;
    color: white;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

#content.about .cta-btn:hover {
    background: #c8a96e;
    border-color: #c8a96e;
    color: #2a1509;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(66,29,20,0.32);
}

/* ---------- INFO BAR ---------- */
#content.about .info-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #d8ccb4;
    border: 1px solid #d8ccb4;
    border-radius: 8px;
    overflow: hidden;
    margin: 8px auto 56px;
    box-shadow: 0 6px 20px rgba(66,29,20,0.10);
}
#content.about .info-bar > div {
    background: #fffdf8;
    padding: 22px 16px;
    text-align: center;
}
#content.about .info-bar .label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a8792e;            /* or + soutenu */
    margin-bottom: 8px;
    font-weight: 600;
}
#content.about .info-bar .value {
    font-size: 14px;
    color: #2a1509;
    line-height: 1.4;
    font-weight: 500;
}

/* ---------- SECTIONS / HEADINGS ---------- */
#content.about section {
    margin-bottom: 48px;
}
#content.about h2 {
    font-family: 'Antic Didone', 'Playfair Display', serif;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 400;
    color: #2a1509;
    line-height: 1.3;
    margin: 0 0 20px;
    position: relative;
    padding-bottom: 14px;
}
#content.about h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    background: #a8792e;
}
#content.about h3 {
    font-family: 'Antic Didone', 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 400;
    color: #421d14;
    margin: 28px 0 10px;
}

/* ---------- PROSE ---------- */
#content.about p {
    font-size: 16px;
    line-height: 1.9;
    color: #33291b;            /* + foncé / lisible sur papier */
    margin: 0 0 16px;
}
#content.about strong {
    color: #2a1509;
    font-weight: 700;
}
#content.about a {
    color: #8a5a1e;            /* or-brun + foncé = plus lisible */
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
    transition: color .2s ease;
}
#content.about a:hover {
    color: #421d14;
}

/* ===== Table page FAQ — collapsible + / × (like the home page) ===== */
section[aria-labelledby="faq-titre"] details {
    border-bottom: 1px solid #e0d8c8;
}

section[aria-labelledby="faq-titre"] summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #1a1208;
    line-height: 1.5;
    padding: 16px 0;
}
/* hide the default disclosure triangle (Chrome/Safari + Firefox) */
section[aria-labelledby="faq-titre"] summary::-webkit-details-marker { display: none; }
section[aria-labelledby="faq-titre"] summary::marker { content: ""; }

/* the + sign on the right */
section[aria-labelledby="faq-titre"] summary::after {
    content: "+";
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    color: #c8a96e;
    transition: transform .25s ease;
    flex-shrink: 0;
}
/* rotate the + into an × when open (works with JS .open OR native [open]) */
section[aria-labelledby="faq-titre"] details.open > summary::after,
section[aria-labelledby="faq-titre"] details[open] > summary::after {
    transform: rotate(45deg);
}

/* smooth open/close — .faq-wrap / .faq-a are injected by the JS below */
section[aria-labelledby="faq-titre"] .faq-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}
section[aria-labelledby="faq-titre"] details.open > .faq-wrap {
    grid-template-rows: 1fr;
}
section[aria-labelledby="faq-titre"] .faq-wrap > .faq-a {
    overflow: hidden;
    margin: 0;
    color: #5a5040;
    line-height: 1.8;
}
section[aria-labelledby="faq-titre"] details.open > .faq-wrap > .faq-a {
    padding: 0 0 16px;
}

@media (prefers-reduced-motion: reduce) {
    section[aria-labelledby="faq-titre"] .faq-wrap,
    section[aria-labelledby="faq-titre"] summary::after { transition: none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 767px) {
    #content.about main { padding: 0 18px; }
    #content.about .hero { padding: 40px 18px 32px; }
    #content.about .info-bar {
        grid-template-columns: 1fr 1fr;
        margin-bottom: 40px;
    }
    #content.about section { margin-bottom: 36px; }
    
    .pd-mobile {margin-top: 0 !important;  }

}