/* Styles partagés du site DHP — repris à l'identique de index.html
   Utilisé par les pages d'activité (conseil, ingénierie, méthode 5 briques). */

  :root {
    --primary: hsl(204, 84%, 44%);
    --primary-dark: hsl(204, 84%, 38%);
    --navy: hsl(223, 55%, 34%);
    --navy-dark: hsl(223, 55%, 27%);
    --human: hsl(100, 50%, 50%);
    --transform: hsl(197, 75%, 50%);
    --dark: hsl(215, 52%, 28%);
    --text: hsl(215, 52%, 28%);
    --muted: hsl(212, 11%, 59%);
    --bg-light: hsl(212, 48%, 96%);
    --border: hsl(210, 24%, 92%);
    --card: #ffffff;
    --light-blue: rgb(189, 215, 238);
    --footer-muted: rgb(138, 150, 163);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--text);
    background: var(--card);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; }
  a { text-decoration: none; color: inherit; }
  .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
  @media (min-width: 768px) { .container { padding: 0 2rem; } }

  /* ---- Boutons ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
    font-family: 'Montserrat', sans-serif; font-weight: 500;
    background: var(--navy); color: #fff;
    border: none; border-radius: .6rem; cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
  }
  .btn:hover { background: var(--navy-dark); }
  .btn-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6em; height: 1.6em; border-radius: 50%;
    border: 2px solid var(--human); color: var(--human);
    font-weight: 600; flex-shrink: 0;
  }
  .btn-sm { height: 2.5rem; padding: .5rem 1rem; font-size: .875rem; }
  .btn-lg { padding: 1rem 2.5rem; font-size: 1.125rem; }
  .btn-xl { padding: 1.25rem 3rem; font-size: 1.125rem; }
  .btn-outline {
    background: transparent; border: 1px solid #fff; color: #fff; width: 100%;
  }
  .btn-outline:hover { background: #fff; color: var(--dark); }
  .link-mail { display: inline-block; margin-top: .9rem; font-size: .95rem; color: var(--primary); font-weight: 600; }
  .link-mail:hover { text-decoration: underline; }

  /* ---- Typographie ---- */
  .eyebrow {
    font-family: 'Montserrat', sans-serif; font-weight: 500;
    font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--human);
  }
  .section-head .eyebrow::after,
  .approche .eyebrow::after,
  .stats .eyebrow::after {
    content: ""; display: block; width: 46px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--human) 60%, hsl(212, 30%, 80%) 60%);
    margin: 10px auto 0;
  }
  .approche .eyebrow::after { margin-left: 0; }
  h1, h2, h3 { font-weight: 600; line-height: 1.25; }
  .muted { color: var(--muted); }

  /* ---- Décorations façon signature ---- */
  .dots {
    position: absolute; width: 130px; height: 86px; pointer-events: none;
    background-image: radial-gradient(hsl(215, 45%, 68%) 1.6px, transparent 1.6px);
    background-size: 17px 17px; opacity: .45;
  }
  .postit {
    position: absolute; width: 88px; height: 88px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(30, 50, 100, .12); pointer-events: none;
  }
  .postit svg { color: var(--navy); }
  .postit-bleu { background: hsl(212, 55%, 92%); transform: rotate(-6deg); }
  .postit-vert { background: hsl(88, 55%, 90%); transform: rotate(5deg); }
  .deco { display: none; }
  @media (min-width: 1150px) { .deco { display: block; } }

  /* ---- Animation d'apparition ---- */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.visible { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ---- Navigation ---- */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: var(--card); border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
  }
  nav .container { display: flex; align-items: center; justify-content: space-between; padding-top: .75rem; padding-bottom: .75rem; }
  nav img { height: 3rem; width: auto; }
  @media (min-width: 768px) { nav img { height: 3.5rem; } }

  /* ---- Hero ---- */
  .hero { position: relative; background: var(--card); overflow: hidden; }
  .hero-circle { position: absolute; top: 0; right: 0; width: 600px; height: 600px; opacity: .04; }
  .hero .container {
    position: relative; z-index: 10;
    padding-top: 8rem; padding-bottom: 2.5rem;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  @media (min-width: 768px) { .hero .container { padding-top: 10rem; padding-bottom: 3.5rem; } }
  .hero .eyebrow { margin-bottom: 1.5rem; }
  .hero-intro { font-size: 1.125rem; color: var(--muted); max-width: 48rem; margin-bottom: 1rem; }
  .hero h1 { font-size: 2.25rem; max-width: 48rem; margin-bottom: 1.5rem; line-height: 1.2; }
  .hero-sub { font-size: 1.125rem; color: var(--muted); max-width: 620px; margin-bottom: 2.5rem; }
  @media (min-width: 768px) {
    .hero-intro, .hero-sub { font-size: 1.25rem; }
    .hero h1 { font-size: 48px; }
  }
  .hero-note { font-size: .875rem; color: var(--muted); margin-top: 1rem; }
  .hero-trust { font-size: .875rem; color: var(--text); margin-top: 2rem; }
  .hero-logo { width: 215px; max-width: 62%; height: auto; margin-top: 3rem; }

  /* ---- Sections ---- */
  section { padding: 5rem 0; }
  @media (min-width: 768px) { section { padding: 7rem 0; } }
  .section-head { text-align: center; margin-bottom: 3.5rem; }
  .section-head .eyebrow { margin-bottom: 1rem; }
  .section-head h2 { font-size: 1.875rem; margin-bottom: 1rem; }
  .section-head p { font-size: 1.125rem; color: var(--muted); max-width: 40rem; margin: 0 auto; }
  @media (min-width: 768px) { .section-head h2 { font-size: 2.25rem; } }

  /* ---- Bandeau accroche ---- */
  .bandeau {
    background: var(--navy); color: #fff; text-align: center;
    padding: 2.5rem 1rem; position: relative; overflow: hidden;
  }
  .bandeau p {
    font-size: 1.5rem; font-weight: 600; line-height: 1.4;
    max-width: 52rem; margin: 0 auto;
  }
  @media (min-width: 768px) { .bandeau p { font-size: 1.75rem; } }
  .bandeau .trait {
    display: block; width: 46px; height: 3px; border-radius: 2px;
    background: var(--human); margin: 1.25rem auto 0;
  }

  /* ---- Facettes (3 portes d'entrée) ---- */
  .facettes { background: var(--card); }
  .facettes-grid { display: grid; gap: 1.5rem; }
  @media (min-width: 900px) { .facettes-grid { grid-template-columns: repeat(3, 1fr); } }
  .facette-card {
    background: var(--card); border: 1px solid var(--border); border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow: hidden;
    display: flex; flex-direction: column; height: 100%;
  }
  .facette-card .top { height: 6px; }
  .facette-card .body { padding: 2rem; display: flex; flex-direction: column; flex: 1; }
  .facette-card .who {
    font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: .72rem;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem;
  }
  .facette-card h3 { font-size: 1.25rem; margin-bottom: .75rem; }
  .facette-card p { color: var(--muted); font-size: .95rem; margin-bottom: 1.25rem; }
  .facette-card .go { margin-top: auto; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: .85rem; color: var(--primary); }
  .option-strip {
    margin-top: 1.75rem; background: var(--bg-light); border-radius: .75rem;
    padding: 1.25rem 1.75rem; text-align: center; color: var(--text); font-size: 1rem;
  }
  .option-strip strong { color: var(--navy); }

  /* ---- Approche ---- */
  .approche { background: var(--bg-light); }
  .approche-grid { display: grid; gap: 3rem; align-items: center; }
  @media (min-width: 1024px) { .approche-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
  .approche .eyebrow { margin-bottom: 1rem; display: block; }
  .approche h2 { font-size: 1.875rem; margin-bottom: 1.5rem; line-height: 1.3; }
  @media (min-width: 768px) { .approche h2 { font-size: 2.25rem; } }
  .approche-text p { font-size: 1.125rem; margin-bottom: 1.25rem; }
  .dims { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1.5rem 0; }
  .augment-note {
    background: var(--card); border: 1px solid var(--border); border-radius: .6rem;
    padding: 1rem 1.25rem; font-size: .95rem; color: var(--text); margin-top: .5rem;
  }
  .augment-note strong { color: var(--navy); font-family: 'Montserrat', sans-serif; }
  blockquote {
    border-left: 3px solid var(--human); padding-left: 1.5rem;
    font-style: italic; font-size: 1.25rem; color: hsl(95, 45%, 40%); margin-top: 2rem;
  }
  blockquote .author { font-style: normal; font-size: 1rem; color: var(--muted); margin-top: .5rem; display: inline-block; }
  .approche-figure { display: none; }
  @media (min-width: 1024px) { .approche-figure { display: block; } }
  .approche-figure svg { width: 100%; max-width: 320px; margin: 0 auto; display: block; }

  /* ---- Offres ---- */
  .offres-grid { display: grid; gap: 1.5rem; align-items: stretch; max-width: 820px; margin: 0 auto; }
  @media (min-width: 1024px) { .offres-grid { grid-template-columns: repeat(2, 1fr); } }
  .offre-card {
    background: var(--card); border: 1px solid var(--border); border-radius: .75rem;
    padding: 2.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.05);
    height: 100%; display: flex; flex-direction: column;
  }
  .offre-card .tag {
    font-family: 'Montserrat', sans-serif; font-weight: 500;
    font-size: .75rem; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--human); margin-bottom: .5rem;
  }
  .offre-card h3 { font-size: 1.5rem; margin-bottom: .5rem; }
  .offre-card .prix { font-size: 1.35rem; font-weight: 600; color: var(--primary); margin-bottom: .25rem; line-height: 1.3; }
  .offre-card .desc { font-size: .875rem; color: var(--muted); margin-bottom: 1.5rem; }
  .offre-card ul { list-style: none; margin-top: auto; }
  .offre-card li { display: flex; gap: .75rem; margin-bottom: .75rem; }
  .offre-card li svg { color: var(--human); flex-shrink: 0; margin-top: .25rem; }
  .offres-note { text-align: center; color: var(--muted); font-size: .95rem; max-width: 680px; margin: 2rem auto 0; }

  /* ---- Stats (section sombre) ---- */
  .stats { background: var(--dark); color: #fff; text-align: center; }
  .stats h2 { font-size: 1.875rem; margin-bottom: 3.5rem; }
  @media (min-width: 768px) { .stats h2 { font-size: 2.25rem; } }
  .stats-grid { display: grid; gap: 2.5rem; max-width: 48rem; margin: 0 auto 3rem; }
  @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
  .stat-num { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 3rem; margin-bottom: .5rem; }
  .stat-label { color: var(--light-blue); }
  .stats-quote { font-style: italic; font-size: 1.125rem; color: var(--light-blue); max-width: 42rem; margin: 0 auto; }

  /* ---- Process ---- */
  .steps { display: grid; gap: 2rem; position: relative; }
  @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
  .steps-line {
    display: none; position: absolute; top: 4rem; left: 16.67%; right: 16.67%;
    border-top: 2px dashed var(--transform);
  }
  @media (min-width: 768px) { .steps-line { display: block; } }
  .step { position: relative; text-align: center; }
  .step .num { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 40px; color: var(--border); margin-bottom: .5rem; }
  .step .icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 50%; background: var(--bg-light);
    margin-bottom: 1rem; position: relative; z-index: 10;
  }
  .step .icon svg { color: var(--primary); }
  .step h3 { font-size: 1.125rem; margin-bottom: .5rem; }
  .step p { font-size: 15px; color: var(--muted); }

  /* ---- CTA finale ---- */
  .cta-final { background: var(--bg-light); text-align: center; }
  .cta-final h2 { font-size: 1.875rem; max-width: 600px; margin: 0 auto 1.5rem; line-height: 1.3; }
  @media (min-width: 768px) { .cta-final h2 { font-size: 40px; } }
  .cta-final .sub { font-size: 1.125rem; color: var(--muted); max-width: 520px; margin: 0 auto 2.5rem; }
  .cta-final .note { font-size: .875rem; color: var(--muted); margin-top: 1rem; }

  /* ---- FAQ ---- */
  .faq .container { max-width: 720px; }
  .faq-item { border-bottom: 1px solid var(--border); }
  .faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 0; background: none; border: none; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600;
    color: var(--text); text-align: left; gap: 1rem;
  }
  .faq-q svg { flex-shrink: 0; transition: transform .2s; }
  .faq-item.open .faq-q svg { transform: rotate(180deg); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .faq-a p { padding-bottom: 1rem; color: var(--muted); font-size: .95rem; }

  /* ---- Footer ---- */
  footer { background: var(--dark); color: #fff; }
  .footer-grid { display: grid; gap: 3rem; padding: 4rem 0; }
  @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
  .footer-brand .logo-text { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 1.5rem; margin-bottom: .25rem; }
  .footer-brand .sub { font-size: .875rem; color: var(--footer-muted); }
  .footer-brand .tagline { font-style: italic; margin-top: 1rem; }
  .footer-links ul { list-style: none; }
  .footer-links li { margin-bottom: .75rem; }
  .footer-links a { font-size: .875rem; color: var(--light-blue); transition: color .2s; }
  .footer-links a:hover { color: #fff; }
  .footer-cta { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
  .footer-cta .btn-outline { width: 100%; height: 2.5rem; font-size: .875rem; }
  .footer-cta a.icon-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: #fff; }
  .footer-cta a.icon-link:hover { opacity: .8; }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1); padding: 1.25rem 0;
    font-size: .75rem; color: var(--footer-muted);
  }
  .footer-bottom .container { display: flex; flex-direction: column; gap: .5rem; justify-content: space-between; }
  @media (min-width: 640px) { .footer-bottom .container { flex-direction: row; } }
  .footer-bottom a:hover { color: #fff; }
  .footer-bottom .legal { display: flex; gap: 1rem; }