/* =========================================================
   PROXIMITY — FAQ.CSS
   Styles globaux + page FAQ
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {
    --green: #2e7d5a;
    --green-dark: #123f3e;
    --green-deep: #0f432b;
    --green-soft: #e9f4ed;
    --green-pale: #f4f9f6;
  
    --orange: #f4a261;
    --cream: #fff9f3;
    --warm-bg: #fdf7f3;
  
    --text: #202020;
    --text2: #4a4948;
  
    --border: #e3ded8;
  
    --shadow:
      0 4px 12px rgba(0, 0, 0, 0.06);
  
    --shadow-lg:
      0 18px 50px rgba(18, 63, 62, 0.08);
  
    --radius-lg: 24px;
    --radius-md: 18px;
  }
  
  
  /* =========================================================
     RESET / GLOBAL
  ========================================================= */
  
  * {
    box-sizing: border-box;
  }
  
  html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
  }
  
  body {
    margin: 0;
    padding: 0;
  
    font-family: "Poppins", sans-serif;
  
    color: var(--text);
  
    line-height: 1.5;
  
    background: #ffffff;
  }
  
  img {
    max-width: 100%;
  }
  
  a {
    color: inherit;
  }
  
  button {
    font: inherit;
  }
  
  .container {
    width: min(1100px, 92%);
    margin: 0 auto;
  }
  
  
  /* =========================================================
     TYPOGRAPHY
  ========================================================= */
  
  h1,
  h2,
  h3 {
    letter-spacing: -0.3px;
  }
  
  h1 {
    margin: 0;
  
    font-weight: 700;
  }
  
  h2 {
    margin: 0 0 8px;
  
    color: var(--green-dark);
  
    font-size: 30px;
    font-weight: 600;
  }
  
  h3 {
    font-weight: 600;
  }
  
  p {
    margin-top: 0;
  }
  
  ul {
    margin: 0;
    padding: 0;
  }
  
  li {
    list-style: none;
  }
  
  .muted {
    margin: 0;
  
    color: var(--text2);
  }
  
  
  /* =========================================================
     HEADER
  ========================================================= */
  
  .header {
    position: sticky;
  
    top: 0;
  
    z-index: 1000;
  
    background:
      rgba(255, 255, 255, 0.92);
  
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  
    border-bottom:
      1px solid rgba(227, 222, 216, 0.7);
  }
  
  .header__inner {
    position: relative;
  
    display: flex;
  
    align-items: center;
    justify-content: space-between;
  
    padding: 14px 0;
  }
  
  .brand {
    display: flex;
  
    align-items: center;
  
    gap: 10px;
  
    text-decoration: none;
  }
  
  .brand__logo {
    display: block;
  
    width: 28px;
    height: 28px;
  }
  
  .brand__name {
    color: var(--green-dark);
  
    font-weight: 700;
  }
  
  .nav {
    display: flex;
  
    align-items: center;
  
    gap: 18px;
  }
  
  .nav a {
    color: var(--text2);
  
    font-weight: 600;
  
    text-decoration: none;
  
    transition:
      color 0.2s ease;
  }
  
  .nav a:hover {
    color: var(--green);
  }
  
  
  /* =========================================================
     BURGER
  ========================================================= */
  
  .burger {
    display: none;
  
    width: 32px;
    height: 24px;
  
    padding: 0;
  
    border: none;
  
    background: none;
  
    cursor: pointer;
  
    flex-direction: column;
    justify-content: space-between;
  }
  
  .burger span {
    display: block;
  
    width: 100%;
    height: 3px;
  
    border-radius: 999px;
  
    background: var(--green-dark);
  }
  
  
  /* =========================================================
     BUTTONS
  ========================================================= */
  
  .btn {
    display: inline-flex;
  
    align-items: center;
    justify-content: center;
  
    min-height: 50px;
  
    padding: 0 24px;
  
    border: 1px solid transparent;
    border-radius: var(--radius-md);
  
    font-weight: 600;
  
    text-decoration: none;
  
    cursor: pointer;
  
    transition:
      transform 0.2s ease,
      background 0.2s ease,
      border-color 0.2s ease;
  }
  
  .btn--primary {
    background: var(--green);
  
    color: #ffffff;
  
    box-shadow:
      0 8px 22px rgba(46, 125, 90, 0.16);
  }
  
  .btn--primary:hover {
    background: #276e4f;
  
    transform: translateY(-1px);
  }
  
  .btn--secondary {
    background: #ffffff;
  
    color: var(--green-dark);
  
    border-color:
      rgba(46, 125, 90, 0.2);
  }
  
  .btn--secondary:hover {
    background: var(--green-soft);
  
    border-color:
      rgba(46, 125, 90, 0.35);
  }
  
  
  /* =========================================================
     FAQ HERO
  ========================================================= */
  
  .faq-hero {
    position: relative;
  
    overflow: hidden;
  
    padding: 75px 0 68px;
  
    background:
      radial-gradient(
        circle at 82% 20%,
        rgba(244, 162, 97, 0.12),
        transparent 30%
      ),
      linear-gradient(
        130deg,
        #ffffff 0%,
        #f7fbf8 58%,
        var(--warm-bg) 100%
      );
  }
  
  .faq-hero__inner {
    max-width: 800px;
  
    margin: 0 auto;
  
    text-align: center;
  }
  
  .faq-hero__eyebrow {
    display: inline-flex;
  
    align-items: center;
    justify-content: center;
  
    margin: 0 0 20px;
  
    padding: 8px 18px;
  
    border-radius: 999px;
  
    background: var(--green-soft);
  
    color: var(--green);
  
    font-size: 14px;
    font-weight: 700;
  
    letter-spacing: 1.3px;
  
    text-transform: uppercase;
  }
  
  .faq-hero h1 {
    color: var(--green-dark);
  
    font-size:
      clamp(42px, 5vw, 64px);
  
    line-height: 1.05;
  
    letter-spacing: -2px;
  }
  
  .faq-hero__intro {
    max-width: 720px;
  
    margin: 22px auto 0;
  
    color: #5d6d68;
  
    font-size: 18px;
    line-height: 1.7;
  }
  
  
  /* =========================================================
     SECTIONS
  ========================================================= */
  
  .section {
    padding: 64px 0;
  }
  
  .section--soft {
    background:
      linear-gradient(
        180deg,
        #f8fbf9 0%,
        #f3f8f5 100%
      );
  }
  
  .section__head {
    max-width: 760px;
  
    margin:
      0 auto
      30px;
  
    text-align: center;
  }
  
  .section__head h2 {
    font-size: 32px;
  }
  
  
  /* =========================================================
     FAQ
  ========================================================= */
  
  .faq {
    display: flex;
  
    flex-direction: column;
  
    gap: 14px;
  
    max-width: 900px;
  
    margin: 0 auto;
  }
  
  .faq__item {
    overflow: hidden;
  
    padding: 0 20px;
  
    background: #ffffff;
  
    border:
      1px solid rgba(46, 125, 90, 0.12);
  
    border-radius: 20px;
  
    box-shadow:
      0 6px 20px rgba(18, 63, 62, 0.045);
  
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }
  
  .faq__item:hover {
    border-color:
      rgba(46, 125, 90, 0.22);
  
    box-shadow:
      0 10px 28px rgba(18, 63, 62, 0.06);
  
    transform: translateY(-1px);
  }
  
  .faq__item[open] {
    border-color:
      rgba(46, 125, 90, 0.24);
  
    box-shadow:
      0 12px 30px rgba(18, 63, 62, 0.07);
  }
  
  .faq__item summary {
    position: relative;
  
    padding: 20px 42px 20px 0;
  
    color: var(--green-dark);
  
    font-size: 16px;
    font-weight: 700;
  
    cursor: pointer;
  
    list-style: none;
  }
  
  .faq__item summary::-webkit-details-marker {
    display: none;
  }
  
  .faq__item summary::after {
    content: "+";
  
    position: absolute;
  
    top: 50%;
    right: 0;
  
    width: 28px;
    height: 28px;
  
    display: flex;
  
    align-items: center;
    justify-content: center;
  
    transform: translateY(-50%);
  
    border-radius: 50%;
  
    background: var(--green-soft);
  
    color: var(--green);
  
    font-size: 20px;
    font-weight: 500;
  
    line-height: 1;
  
    transition:
      transform 0.2s ease,
      background 0.2s ease;
  }
  
  .faq__item[open] summary::after {
    content: "−";
  
    background: var(--green);
  
    color: #ffffff;
  }
  
  .faq__item p {
    margin: 0 0 20px;
  
    color: var(--text2);
  
    font-size: 15px;
    line-height: 1.7;
  }
  
  .faq__item a {
    color: var(--green);
  
    font-weight: 700;
  
    text-decoration: none;
  }
  
  .faq__item a:hover {
    text-decoration: underline;
  }
  
  
  /* =========================================================
     LISTES DANS FAQ
  ========================================================= */
  
  .faq__list {
    display: flex;
  
    flex-direction: column;
  
    gap: 12px;
  
    margin:
      4px 0
      20px;
  }
  
  .faq__list li {
    position: relative;
  
    padding-left: 28px;
  
    color: var(--text2);
  
    font-size: 15px;
    line-height: 1.7;
  }
  
  .faq__list li::before {
    content: "✓";
  
    position: absolute;
  
    top: 1px;
    left: 0;
  
    display: flex;
  
    align-items: center;
    justify-content: center;
  
    width: 19px;
    height: 19px;
  
    border-radius: 50%;
  
    background: var(--green-soft);
  
    color: var(--green);
  
    font-size: 12px;
    font-weight: 700;
  }
  
  .faq__list strong {
    color: var(--green-dark);
  }
  
  
  /* =========================================================
     CTA
  ========================================================= */
  
  .faq-cta {
    padding: 50px 0 70px;
  
    background: #ffffff;
  }
  
  .faq-cta__inner {
    display: flex;
  
    align-items: center;
    justify-content: space-between;
  
    gap: 35px;
  
    padding: 36px 42px;
  
    border-radius: 30px;
  
    background:
      linear-gradient(
        110deg,
        #dce9dc 0%,
        #e8f1e7 58%,
        #f7eee7 100%
      );
  
    box-shadow:
      0 18px 50px rgba(18, 63, 62, 0.07);
  }
  
  .faq-cta__inner > div:first-child {
    max-width: 650px;
  }
  
  .faq-cta h2 {
    margin: 0 0 10px;
  
    color: var(--green-dark);
  
    font-size: 30px;
    font-weight: 700;
  }
  
  .faq-cta p {
    margin: 0;
  
    color: #465b59;
  
    font-size: 15px;
    line-height: 1.65;
  }
  
  .faq-cta__actions {
    display: flex;
  
    flex-shrink: 0;
  
    gap: 12px;
  }
  
  
  /* =========================================================
     FOOTER
  ========================================================= */
  
  .footer {
    padding: 36px 0;
  
    color:
      rgba(255, 255, 255, 0.92);
  
    background: var(--green-deep);
  }
  
  .footer__inner {
    display: flex;
  
    align-items: flex-start;
    justify-content: space-between;
  
    flex-wrap: wrap;
  
    gap: 22px;
  }
  
  .brand--footer .brand__name {
    color: #ffffff;
  }
  
  .footer__text {
    max-width: 410px;
  
    margin: 10px 0 0;
  
    color:
      rgba(255, 255, 255, 0.82);
  }
  
  .footer__links {
    display: flex;
  
    align-items: flex-start;
    flex-wrap: wrap;
  
    gap: 16px;
  }
  
  .footer__links a {
    color: #ffffff;
  
    font-weight: 600;
  
    text-decoration: none;
  }
  
  .footer__links a:hover {
    opacity: 0.85;
  }
  
  
  /* =========================================================
     COOKIE BANNER
  ========================================================= */
  
  .cookie-banner {
    position: fixed;
  
    right: 0;
    bottom: 0;
    left: 0;
  
    z-index: 9999;
  
    display: flex;
  
    align-items: center;
    justify-content: space-between;
  
    gap: 20px;
  
    padding: 16px;
  
    background: #ffffff;
  
    border-top:
      1px solid rgba(46, 125, 90, 0.12);
  
    box-shadow:
      0 -4px 20px rgba(0, 0, 0, 0.08);
  }
  
  .cookie-banner p {
    margin: 0;
  
    color: var(--text2);
  
    font-size: 14px;
  }
  
  .cookie-actions {
    display: flex;
  
    flex-shrink: 0;
  
    gap: 10px;
  }
  
  
  /* =========================================================
     TABLETTE
  ========================================================= */
  
  @media (max-width: 900px) {
  
    .faq-hero {
      padding: 60px 0 55px;
    }
  
    .faq-cta__inner {
      flex-direction: column;
  
      align-items: flex-start;
    }
  
    .faq-cta__actions {
      width: 100%;
    }
  }
  
  
  /* =========================================================
     MENU MOBILE
  ========================================================= */
  
  @media (max-width: 650px) {
  
    .burger {
      display: flex;
    }
  
    .nav {
      position: absolute;
  
      top: calc(100% + 8px);
      right: 0;
  
      display: none;
  
      width: min(250px, 90vw);
  
      padding: 16px;
  
      flex-direction: column;
      align-items: stretch;
  
      gap: 6px;
  
      background:
        rgba(255, 255, 255, 0.98);
  
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
  
      border:
        1px solid rgba(46, 125, 90, 0.12);
  
      border-radius: 18px;
  
      box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.08);
    }
  
    .nav.nav--open {
      display: flex;
    }
  
    .nav a {
      padding: 9px 10px;
  
      color: var(--text);
  
      border-radius: 10px;
    }
  
    .nav a:hover {
      background: var(--green-soft);
    }
  }
  
  
  /* =========================================================
     MOBILE
  ========================================================= */
  
  @media (max-width: 600px) {
  
    .container {
      width: min(92%, 540px);
    }
  
    .faq-hero {
      padding: 46px 0 45px;
    }
  
    .faq-hero__eyebrow {
      margin-bottom: 16px;
  
      font-size: 12px;
    }
  
    .faq-hero h1 {
      font-size: 38px;
  
      letter-spacing: -1.4px;
    }
  
    .faq-hero__intro {
      margin-top: 16px;
  
      font-size: 16px;
    }
  
    .section {
      padding: 50px 0;
    }
  
    .section__head h2 {
      font-size: 27px;
    }
  
    .faq__item {
      padding: 0 17px;
  
      border-radius: 17px;
    }
  
    .faq__item summary {
      padding:
        18px 40px
        18px 0;
  
      font-size: 15px;
    }
  
    .faq__item p,
    .faq__list li {
      font-size: 14px;
    }
  
    .faq-cta {
      padding: 35px 0 55px;
    }
  
    .faq-cta__inner {
      padding: 28px 24px;
  
      border-radius: 24px;
    }
  
    .faq-cta h2 {
      font-size: 26px;
    }
  
    .faq-cta__actions {
      flex-direction: column;
    }
  
    .faq-cta__actions .btn {
      width: 100%;
    }
  
    .cookie-banner {
      flex-direction: column;
  
      align-items: flex-start;
    }
  }
  
  
  /* =========================================================
     PETITS MOBILES
  ========================================================= */
  
  @media (max-width: 450px) {
  
    .faq-hero h1 {
      font-size: 34px;
    }
  
    .footer__inner {
      flex-direction: column;
    }
  
    .footer__links {
      flex-direction: column;
  
      gap: 10px;
    }
  
    .cookie-actions {
      width: 100%;
    }
  
    .cookie-actions .btn {
      flex: 1;
    }
  }