/* ============================================================
   MySide — Styles spécifiques aux PAGES DE SERVICE
   ============================================================ */

/* ============ Fil d'Ariane ============ */
    .breadcrumb { padding-block: 22px 0; }
    .breadcrumb ol {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      list-style: none;
      font-size: 13.5px;
      color: var(--muted);
    }
    .breadcrumb a { color: var(--bordeaux); text-decoration: none; font-weight: 500; }
    .breadcrumb a:hover { text-decoration: underline; }
    .breadcrumb li + li::before { content: "›"; margin-right: 8px; opacity: 0.5; }
    .breadcrumb [aria-current="page"] { opacity: 0.8; }

    /* ============ En-tête de page (orienté contenu) ============ */
    .page-head { background: var(--blush); border-bottom: 1px solid var(--line); }
    .page-head .breadcrumb { padding-block: 28px 0; }
    .page-head__inner { padding-block: 18px 60px; }
    .page-head h1 { font-size: clamp(40px, 6vw, 62px); font-weight: 300; line-height: 1.06; margin-bottom: 24px; max-width: 900px; }
    .page-head h1 .accent { color: var(--bordeaux); font-style: normal; }
    .page-head__lead { font-size: 19px; line-height: 1.7; color: var(--muted); max-width: 660px; margin-bottom: 32px; }
    .page-head__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

    /* ============ Sections ============ */
    .section { padding-block: 84px; }
    .section--tint { background: var(--blush); }
    .section--cocoa { background: var(--cocoa); color: var(--rose-light); }
    .section__head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
    .section__head h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 600; line-height: 1.12; margin: 14px 0 16px; }
    .section__head p { font-size: 17px; color: var(--muted); }
    .section--cocoa .section__head p { color: var(--rose-light); }

    /* ============ Définition (mise en page « À propos ») ============ */
                            .about__text strong { color: var(--ink); font-weight: 600; }
    .about__text a, .card p a, .lead-intro a { color: var(--bordeaux); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
    .about__text a:hover, .card p a:hover, .lead-intro a:hover { color: var(--bordeaux-dark); }

    /* ============ Grilles ============ */
    .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
    .card {
      position: relative;
      background: #FFFFFF;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 32px;
    }
    .card__icon {
      width: 50px;
      height: 50px;
      border-radius: 13px;
      background: var(--blush);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      color: var(--bordeaux);
    }
    .card h3 { font-size: 21px; font-weight: 600; margin-bottom: 10px; }
    .card p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }
    .card__step {
      position: absolute;
      top: 22px;
      right: 26px;
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 600;
      color: var(--bordeaux);
      opacity: 0.55;
    }
    .grid-4 .card h3 { font-size: 18px; }

    /* ============ Intro de section ============ */
    .lead-intro { max-width: 720px; margin: 0 auto 40px; text-align: center; font-size: 17px; line-height: 1.7; color: var(--muted); }

    /* ============ Bénéfices ============ */
    .benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 32px; list-style: none; max-width: 900px; margin: 0 auto; }
    .benefit { display: flex; gap: 14px; align-items: flex-start; }
    .benefit__ico { flex-shrink: 0; width: 26px; height: 26px; color: var(--bordeaux); margin-top: 2px; }
    .benefit h3 { font-size: 17px; font-weight: 700; letter-spacing: 0; margin-bottom: 4px; }
    .benefit p { font-size: 15px; line-height: 1.6; color: var(--muted); }

    /* ============ FAQ ============ */
    .faq { max-width: 820px; margin: 0 auto; }
    .faq__item {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #FFFFFF;
      margin-bottom: 14px;
      overflow: hidden;
    }
    .faq__item summary {
      list-style: none;
      cursor: pointer;
      padding: 22px 26px;
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 600;
      color: var(--ink);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }
    .faq__item summary::-webkit-details-marker { display: none; }
    .faq__item summary::after {
      content: "+";
      font-size: 26px;
      font-weight: 300;
      color: var(--bordeaux);
      transition: transform 0.25s ease;
      flex-shrink: 0;
    }
    .faq__item[open] summary::after { transform: rotate(45deg); }
    .faq__item .faq__answer { padding: 0 26px 24px; font-size: 16px; line-height: 1.7; color: var(--muted); }

    /* ============ CTA ============ */
    .cta { text-align: center; }
    .cta h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 600; line-height: 1.12; margin-bottom: 16px; color: #FFFFFF; }
    .cta p { font-size: 17px; line-height: 1.6; color: var(--rose-light); max-width: 560px; margin: 0 auto 32px; }

    /* ============ Responsive (pages service) ============ */
    @media (max-width: 900px) {
      .container { padding-inline: 24px; }
      .page-head__inner { padding-block: 14px 48px; }
      .grid-2, .benefits { grid-template-columns: 1fr 1fr; }
      .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .section { padding-block: 64px; }
    }

    @media (max-width: 680px) {
      .container { padding-inline: 16px; }
      .page-head h1 { font-size: 34px; }
      .grid-2, .benefits, .grid-4 { grid-template-columns: 1fr; }
      .section__head h2 { font-size: 26px; }
      .about__grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
      .about__media { order: -1; }
      .about__media img { width: 71.2%; max-width: 262px; margin-inline: auto; }
      .about__title { font-size: 30px; }
    }

    /* ============ Hero centré (variante page Suivi) ============ */
    .page-head--center .page-head__inner { text-align: center; }
    .page-head--center h1 { margin-left: auto; margin-right: auto; }
    .page-head--center .page-head__lead { margin-left: auto; margin-right: auto; }
    .page-head--center .page-head__actions { justify-content: center; }