/* Desktop FAQ composition; existing responsive site rules are left untouched. */
.faq-page { color: #000000; }
.faq-directory { padding-top: 104px; }
.faq-wrap { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.faq-hero { position: relative; height: 410px; background: #0065a8; color: #ffffff; isolation: isolate; overflow: hidden; }
.faq-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../apropos-equipe.webp") center 38% / cover no-repeat; opacity: .2; }
.faq-hero .faq-wrap { padding-top: 92px; }
.faq-hero-icon { display: block; width: 48px; height: 48px; margin-bottom: 24px; }
.faq-hero-icon svg { width: 100%; height: 100%; }
.faq-hero h1 { color: #ffffff; font-size: 48px; line-height: 1.18; font-weight: 700; margin: 0; letter-spacing: 0; }
@media (min-width: 1051px) {
  .faq-directory { padding-top: 0; }
  .faq-hero {
    height: 514px;
    padding-top: var(--alt-interior-title-top);
    background: #082E51 url("../gestion-parc-fond-bleu-texture-v1.webp") center / cover no-repeat;
  }
  .faq-hero::before { content: none; }
  .faq-hero .faq-wrap {
    position: relative;
    width: min(var(--alt-interior-content-width), calc(100% - 48px));
    padding: 0;
  }
  /* Keep the pictogram above the shared title baseline, outside its flow. */
  .faq-hero-icon {
    position: absolute;
    left: 0;
    bottom: calc(100% + var(--alt-interior-subtitle-gap));
    margin: 0;
  }
}
.faq-content { padding-top: 80px; padding-bottom: 80px; }
.faq-categories { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-bottom: 80px; }
.faq-categories a { min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; background: #E7EFF5; border-radius: 6px; padding: 20px 12px; color: #000000; text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1.4; transition: background .15s ease; }
.faq-categories a:hover { background: #d6e7f3; }
.faq-category-icon { width: 38px; height: 38px; color: #0075bd; }
.faq-category-icon svg, .faq-section-icon svg { width: 100%; height: 100%; }
.faq-category-section { scroll-margin-top: 136px; margin-bottom: 80px; }
.faq-category-section h2 { display: flex; align-items: center; gap: 20px; font-size: 30px; font-weight: 600; line-height: 1.3; margin: 0 0 32px; letter-spacing: 0; color: #000000; }
.faq-section-icon { display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px; color: #0075bd; }
.faq-entry { border-bottom: 1px solid #dce3e8; }
.faq-entry summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px 20px; font-size: 18px; font-weight: 500; line-height: 1.5; list-style: none; cursor: pointer; color: #000000; }
.faq-entry summary::-webkit-details-marker { display: none; }
.faq-expand { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; color: #0075bd; font-size: 27px; line-height: 1; }
.faq-entry[open] { background: #f7fafc; }
.faq-entry[open] .faq-expand { font-size: 0; }
.faq-entry[open] .faq-expand::after { content: "\2212"; font-size: 27px; }
.faq-entry summary:hover, .faq-entry[open] summary { color: #0065a8; }
.faq-response { padding: 0 64px 28px 20px; max-width: 1020px; }
.faq-response p { font-size: 17px; line-height: 1.75; margin: 0 0 18px; }
.faq-response a { display: inline-flex; align-items: center; gap: 10px; color: #0065a8; font-weight: 600; font-size: 15px; text-decoration: none; }
.faq-response a svg, .faq-contact-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.faq-response a:hover { text-decoration: underline; }
.faq-contact { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 40px; border-top: 1px solid #dce3e8; }
.faq-contact h2 { font-size: 28px; line-height: 1.3; margin: 0 0 16px; color: #000000; }
.faq-contact p { margin: 0; font-size: 17px; }
.faq-contact-link { display: inline-flex; align-items: center; gap: 16px; padding: 14px 24px; border-radius: 5px; background: #0075bd; color: #ffffff; text-decoration: none; font-weight: 600; white-space: nowrap; }
.faq-directory a:focus-visible, .faq-entry summary:focus-visible { outline: 3px solid #0075bd; outline-offset: 5px; }

/* Match the service FAQ reading width and rhythm without changing this page's hero or category navigation. */
@media (min-width: 1051px) {
  .faq-directory .faq-wrap {
    width: min(var(--alt-interior-content-width), calc(100% - 48px));
  }
  .faq-content {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-block: 80px;
  }
  .faq-categories,
  .faq-category-section { margin-bottom: 0; }
  .faq-category-section,
  .faq-contact { width: min(900px, 100%); margin-inline: auto; }
  .faq-category-section h2 {
    margin-bottom: 36px;
    font-weight: 700;
  }
  .faq-category-icon,
  .faq-section-icon,
  .faq-expand { color: #1769E0; }
  .faq-entry { border-top: 1px solid #DDE1E7; border-bottom: 0; }
  .faq-entry:last-child { border-bottom: 1px solid #DDE1E7; }
  .faq-entry summary {
    padding: 20px 18px;
    gap: 22px;
    font-size: 16px;
    line-height: 1.65;
  }
  .faq-entry[open] { background: #FFFFFF; }
  .faq-entry summary:hover,
  .faq-entry[open] summary { color: #000000; }
  .faq-expand,
  .faq-entry[open] .faq-expand::after { font-size: 24px; font-weight: 400; }
  .faq-entry[open] .faq-expand { font-size: 0; }
  .faq-response { max-width: none; padding: 0 18px 24px; }
  .faq-response p { color: #000000; font-size: 16px; line-height: 1.65; margin: 0; }
  .faq-response a {
    display: inline-flex;
    max-width: 100%;
    margin-top: 16px;
    color: #1769E0;
    font-size: 16px;
    line-height: 1.65;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .faq-response a:hover { color: #1254B5; }
  /* The parent gap owns the whole space after the last answer: no extra top padding. */
  .faq-contact { padding-top: 0; border-top: 0; }
  .faq-contact h2 { font-size: 30px; font-weight: 700; }
  .faq-contact p { color: #000000; font-size: 16px; line-height: 1.65; }
  .faq-contact-link {
    justify-content: center;
    flex-shrink: 0;
    gap: 12px;
    min-height: 47px;
    padding: 12px 20px;
    border: 1px solid #1769E0;
    background: #1769E0;
    font-size: 15px;
    line-height: 1.4;
  }
  .faq-contact-link:hover { background: #1254B5; border-color: #1254B5; color: #FFFFFF; }
  .faq-contact-link svg { width: 18px; height: 18px; }
  .faq-directory a:focus-visible { outline-color: #1769E0; }
  .faq-entry summary:focus-visible { outline: 2px solid #1769E0; outline-offset: -2px; }
}