/* Page /partenaires/ (components/Partenaires.tsx), reprise de la maquette validée le 5 novembre 2026.
   Même charte que la page Espace patient : héros vert pâle, fonds alternés, rouge réservé aux actions,
   accent vert foncé. Tout est préfixé par .pt. */
.pt {
  --ink: #0a2935;
  --text: #33505b;
  --muted: #536770;
  --red: #bc2624;
  --red-soft: #fbeaea;
  --tint: #e4e9e6;
  --soft: #eef2ef;
  --line: #d5ddd9;
  --accent: #3f6d63;
  --accent-soft: #dfe9e5;
  --on-dark: #c9d5cf;
  --f: "Space Grotesk", sans-serif;
  background: #fff;
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
}
.pt, .pt * { box-sizing: border-box; }
.pt h1, .pt h2, .pt h3 { font-family: var(--f); color: var(--ink); margin: 0; text-wrap: balance; line-height: 1.15; }
.pt p { margin: 0; }
.pt a { color: var(--red); }
.pt [id] { scroll-margin-top: 92px; }
.pt ul, .pt ol { margin: 0; padding: 0; list-style: none; }

.pt .band { padding-inline: max(16px, env(safe-area-inset-left, 0px)); padding-block: clamp(56px, 7vw, 88px); }
.pt .white { background: #fff; }
.pt .tint { background: var(--tint); --muted: #4b5e66; }
.pt .soft { background: var(--soft); }
.pt .dark { background: radial-gradient(700px 380px at 88% 10%, rgba(228, 233, 230, .10), transparent 60%), #0a2935; color: var(--on-dark); }
.pt .dark h2, .pt .dark h3 { color: #fff; }
.pt .wrap { max-width: 1120px; margin: 0 auto; display: grid; gap: 36px; }
.pt .head { display: grid; gap: 12px; justify-items: start; }
.pt .head.center { text-align: center; justify-items: center; }
.pt .h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.01em; }
.pt .sub { color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.pt .dark .sub { color: var(--on-dark); }
.pt .eyebrow { font: 700 12.5px/1 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.pt .dark .eyebrow { color: #e4e9e6; opacity: .8; }

.pt .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 28px; border-radius: 999px; background: var(--red); color: #fff; font: 600 16px/1.2 var(--f); text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(188, 38, 36, .7); transition: filter .2s, transform .2s; }
.pt .btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pt .btn:disabled { opacity: .7; cursor: progress; }
.pt .btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pt .btn:focus-visible, .pt a:focus-visible, .pt button:focus-visible, .pt summary:focus-visible, .pt input:focus-visible, .pt select:focus-visible, .pt textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pt .ctas { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }

/* Héros */
.pt .hero { background: radial-gradient(900px 480px at 85% 30%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, #e4e9e6 0%, #eef2ef 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: clamp(40px, 5vw, 64px); }
.pt .hero .wrap { gap: 28px; }
.pt .hero h1 { font-size: clamp(32px, 3.6vw, 46px); letter-spacing: -.015em; max-width: 24ch; line-height: 1.08; }
.pt .hero .lead { font-size: 18.5px; max-width: 62ch; text-wrap: pretty; }
.pt .picker { display: grid; gap: 12px; margin-top: 8px; }
.pt .picker__label { font: 600 16px/1 var(--f); color: var(--ink); }
.pt .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.pt .seg button { display: grid; gap: 8px; justify-items: start; align-content: start; text-align: start; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 600 15px/1.25 var(--f); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.pt .seg button:hover { border-color: var(--ink); transform: translateY(-2px); }
.pt .seg button[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), 0 14px 30px -18px rgba(10, 41, 53, .45); }
.pt .seg .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.pt .seg button[aria-selected="true"] .ic { background: var(--accent); color: #fff; }
.pt .seg .ic svg { width: 21px; height: 21px; }
.pt .seg small { font-weight: 400; font-size: 13px; color: var(--muted); }

/* Panneau du métier */
.pt #cas { padding-top: clamp(40px, 5vw, 56px); }
.pt .panel { background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: grid; box-shadow: 0 1px 2px rgba(10, 41, 53, .04), 0 24px 60px -30px rgba(10, 41, 53, .25); }
.pt .panel[hidden] { display: none; }
/* Titre sur toute la largeur, puis deux colonnes de poids proche (enjeu et bénéfices ; intégration),
   puis une rangée commune : exemple à gauche, bouton à droite */
@media (min-width: 900px) { .pt .panel { grid-template-columns: 1fr 1fr; } }
.pt .panel__head { grid-column: 1 / -1; display: grid; gap: 10px; padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) 0; }
.pt .panel__title { font-size: clamp(23px, 2.4vw, 30px); text-wrap: pretty; }
.pt .panel__main { padding: clamp(18px, 2.4vw, 28px) clamp(22px, 3vw, 36px) 0; display: grid; gap: 18px; align-content: start; min-width: 0; }
.pt .panel__side { background: var(--soft); margin: clamp(18px, 2.4vw, 28px) clamp(22px, 3vw, 36px) 0 0; border-radius: 16px; padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 16px; align-content: start; min-width: 0; }
.pt .panel__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin: clamp(18px, 2.4vw, 28px) clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px); padding-top: clamp(18px, 2.4vw, 24px); border-top: 1px solid var(--line); }
.pt .panel__foot .example { flex: 1 1 420px; min-width: 0; }
@media (max-width: 899px) { .pt .panel__side { margin: 18px clamp(16px, 4vw, 22px) 0; } .pt .panel__foot { margin-inline: clamp(16px, 4vw, 22px); } .pt .panel__foot .btn { width: 100%; } }
.pt .pain { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--red-soft); color: var(--ink); }
.pt .pain b { font: 700 12.5px/1.2 var(--f); letter-spacing: .05em; text-transform: uppercase; color: var(--red); }
.pt .example { border-inline-start: 3px solid var(--accent); padding-inline-start: 14px; color: var(--ink); font-size: 16px; text-wrap: pretty; }
.pt .kv { display: grid; gap: 6px; }
.pt .kv > span { font: 600 12.5px/1.3 var(--f); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pt .kv p { color: var(--ink); }
.pt .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt .chip { font: 600 12.5px/1 var(--f); padding: 7px 11px; border-radius: 999px; background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.pt .chip.on { background: var(--accent); color: #fff; box-shadow: none; }

/* Puces */
.pt .checks { display: grid; gap: 10px; }
.pt .checks li { display: flex; gap: 12px; text-wrap: pretty; }
.pt .checks li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f6d63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/13px no-repeat; }
.pt .tint .checks li::before { background-color: #fff; }
.pt .checks b { color: var(--ink); font-weight: 600; }

/* Chiffres */
.pt .stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pt .stats--4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pt .stat { background: #fff; border-radius: 16px; padding: 20px; display: grid; gap: 6px; align-content: start; box-shadow: 0 1px 2px rgba(10, 41, 53, .05); }
.pt .white .stat { box-shadow: inset 0 0 0 1px var(--line); }
.pt .stat b { font: 700 34px/1 var(--f); color: var(--ink); font-variant-numeric: tabular-nums; }
.pt .stat span { font-size: 15.5px; color: var(--ink); }
.pt .stat small { font-size: 13px; color: var(--muted); }
.pt .source { justify-self: center; font-size: 14px; color: var(--muted); }

/* Principe */
.pt .flow { display: grid; gap: 14px; align-items: stretch; }
@media (min-width: 900px) { .pt .flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; } }
.pt .node { background: var(--soft); border-radius: 16px; padding: 20px; display: grid; gap: 6px; min-width: 0; }
.pt .node h3 { font-size: 18px; }
.pt .node p { font-size: 15.5px; }
.pt .node--core { background: #0a2935; color: var(--on-dark); }
.pt .node--core h3 { color: #fff; }
.pt .arrow { justify-self: center; color: var(--accent); font-size: 22px; transform: rotate(90deg); }
@media (min-width: 900px) { .pt .arrow { transform: none; } }
.pt .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; font-size: 15px; color: var(--muted); }
.pt .links a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.pt .links a:hover { text-decoration-color: var(--ink); }
.pt .links--light { justify-content: flex-start; color: var(--on-dark); }
.pt .links--light a { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); }

/* Intégration */
.pt .ladder { display: grid; gap: 12px; counter-reset: step; }
@media (min-width: 760px) { .pt .ladder { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pt .ladder { grid-template-columns: repeat(4, 1fr); } }
.pt .step { background: #fff; border-radius: 16px; padding: 20px; display: grid; gap: 8px; align-content: start; box-shadow: 0 1px 2px rgba(10, 41, 53, .05); }
.pt .step .lvl { display: flex; gap: 3px; margin-bottom: 4px; }
.pt .step .lvl i { width: 20px; height: 6px; border-radius: 3px; background: var(--line); }
.pt .step .lvl i.on { background: var(--accent); }
.pt .step h3 { font-size: 18px; }
.pt .step p { font-size: 15.5px; }
.pt .step .tag { font: 600 12.5px/1.3 var(--f); color: var(--accent); }
.pt .brands { display: grid; gap: 10px; }
@media (min-width: 760px) { .pt .brands { grid-template-columns: repeat(3, 1fr); } }
.pt .brand { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.pt .brand b { display: block; color: var(--ink); font-family: var(--f); }
.pt .brand small { color: var(--muted); font-size: 14.5px; }
.pt .swatch { flex: none; width: 46px; height: 34px; border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.pt .swatch--solo i { background: var(--red); }
.pt .swatch--duo i:first-child { background: var(--red); }
.pt .swatch--duo i:last-child { background: var(--accent); }
.pt .swatch--white i { background: var(--accent); }

/* Socle */
.pt .tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.pt .tiles li { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 18px; display: grid; gap: 6px; align-content: start; font-size: 15px; line-height: 1.45; }
.pt .tiles b { color: #fff; font: 600 16px/1.3 var(--f); }

/* Contact */
.pt .contact { align-items: start; }
@media (min-width: 900px) { .pt .contact { grid-template-columns: 1fr 1.1fr; gap: 56px; } }
.pt .mail { font-size: 15.5px; }
.pt .form { background: #fff; border-radius: 20px; padding: clamp(20px, 3vw, 30px); display: grid; gap: 14px; box-shadow: 0 1px 2px rgba(10, 41, 53, .05), 0 24px 60px -30px rgba(10, 41, 53, .3); }
.pt .form label { display: grid; gap: 6px; font: 600 14px/1.2 var(--f); color: var(--ink); }
.pt .form input, .pt .form select, .pt .form textarea { font: 400 16px/1.4 var(--f); padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); width: 100%; }
.pt .form textarea { resize: vertical; }
.pt .form .btn { justify-self: start; }
.pt .row2 { display: grid; gap: 14px; }
@media (min-width: 600px) { .pt .row2 { grid-template-columns: 1fr 1fr; } }
.pt .form__msg { padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.pt .form__msg--ok { background: var(--accent-soft); color: var(--ink); }
.pt .form__msg--err { background: var(--red-soft); color: var(--ink); }

/* FAQ */
.pt .faq-grid { align-items: start; }
@media (min-width: 900px) { .pt .faq-grid { grid-template-columns: 1fr 2fr; gap: 56px; } .pt .faq-grid > .head { position: sticky; top: 110px; } }
.pt .faq details { border-top: 1px solid var(--line); padding: 18px 4px; }
.pt .faq details:last-child { border-bottom: 1px solid var(--line); }
.pt .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 600 18px/1.35 var(--f); color: var(--ink); }
.pt .faq summary::-webkit-details-marker { display: none; }
.pt .faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--soft); color: var(--ink); display: grid; place-items: center; font-size: 20px; line-height: 1; }
.pt .faq details[open] summary::after { content: "–"; background: var(--ink); color: #fff; }
.pt .faq p { margin-top: 10px; max-width: 68ch; font-size: 16.5px; text-wrap: pretty; }

@media (max-width: 600px) {
  .pt .hero .ctas { display: grid; width: 100%; }
  .pt .hero .ctas .btn { width: 100%; }
  .pt .seg { grid-template-columns: 1fr 1fr; }
  .pt .seg button { padding: 14px; }
  .pt .links { flex-direction: column; align-items: center; }
  .pt .links--light { align-items: flex-start; }
  .pt .links span { display: none; }
  .pt .form .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .pt .btn, .pt .seg button { transition: none; } }

/* aidiagme.com (05/11/2026): the site's WordPress styles capitalise headings and put buttons in capitals; keep the
   .fr look. Grid columns may shrink below the longest unbreakable line (longer words in some languages). */
.pt h1, .pt h2, .pt h3, .pt .btn, .pt summary, .pt button, .pt label, .pt .chip, .pt .tag { text-transform: none; letter-spacing: normal; }
.pt .eyebrow { text-transform: uppercase; }
.pt .wrap > *, .pt .stats > li, .pt .ladder > li, .pt .tiles > li { min-width: 0; }
.pt h1, .pt h2, .pt h3, .pt p, .pt li, .pt summary, .pt button { overflow-wrap: anywhere; }
.pt p, .pt li { white-space: normal; }
@media (min-width: 900px) { [dir="rtl"] .pt .flow .arrow { transform: scaleX(-1); } }