/* =========================================================================
   PAGE EXPERTISE : ce que fait Oriq, dit au dirigeant.
   Tout est rangé sous main.xp : l'en-tête et le pied restent ceux du site
   (guides.css), cette feuille ne les touche pas.
   ========================================================================= */
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.xp {
  --xp-paper: #ffffff;
  --xp-paper-2: #f4f6fa;
  --xp-ink: #0c1e44;
  --xp-ink-2: #3d4a63;
  --xp-ink-3: #5d6880;
  --xp-rule: #d7dce6;
  --xp-navy: #0c1e44;
  --xp-navy-rule: rgba(190, 210, 255, 0.18);
  --xp-navy-text: #c6d3ea;
  --xp-blue: var(--brand, #0066ff);
  --xp-blue-ink: #0052cc;
  --xp-blue-wash: #eef4ff;

  --xp-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --xp-text-s: 0.875rem;
  --xp-text-m: 1.1875rem;
  --xp-title-hero: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
  --xp-title-section: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  --xp-gutter: clamp(1rem, 0.5rem + 2.4vw, 2.5rem);
  --xp-section: clamp(4rem, 3rem + 3.5vw, 6.5rem);
  --xp-ease: cubic-bezier(0.16, 1, 0.3, 1);

  display: block;
  width: 100%;
  color: var(--xp-ink);
  font-size: 1.0625rem;
  line-height: 1.6;
}
body { overflow-x: clip; }
.xp ::selection { background: var(--xp-blue); color: #fff; }
.xp :focus-visible { outline: 2px solid var(--xp-blue); outline-offset: 3px; border-radius: 2px; }
.xp :where(h1, h2, h3) { font-family: var(--xp-display); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; margin: 0; color: inherit; }
.xp :where(p) { margin: 0; text-wrap: pretty; }
.xp :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.xp :where(img) { display: block; max-width: 100%; height: auto; }
.xp-wrap { width: min(100% - 2 * var(--xp-gutter), 76rem); margin-inline: auto; }
.xp-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Boutons : le bleu plein est réservé à l'audit gratuit */
.xp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1; padding: 1rem 1.375rem; border-radius: 4px; text-decoration: none; border: 1px solid transparent; transition: background-color 0.2s var(--xp-ease), border-color 0.2s, color 0.2s, box-shadow 0.2s var(--xp-ease), transform 0.15s; }
.xp-btn:active { transform: translateY(1px); }
.xp-btn--audit { background: var(--xp-blue); color: #fff; box-shadow: 0 1px 2px rgba(12, 30, 68, 0.18); }
.xp-btn--audit:hover { background: var(--xp-blue-ink); color: #fff; box-shadow: 0 8px 20px -8px rgba(0, 82, 204, 0.6); }
.xp-btn--ghost { border-color: var(--xp-rule); color: var(--xp-ink); background: var(--xp-paper); }
.xp-btn--ghost:hover { border-color: var(--xp-ink); color: var(--xp-ink); }
.xp-btn .xp-icon { width: 18px; height: 18px; stroke-width: 2; transition: transform 0.25s var(--xp-ease); }
.xp-btn:hover .xp-icon { transform: translateX(3px); }

/* Fil d'Ariane */
.xp-crumbs { padding-top: 1.5rem; font-size: var(--xp-text-s); color: var(--xp-ink-3); }
.xp-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.xp-crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--xp-rule); }
.xp-crumbs a { color: var(--xp-ink-2); text-decoration: none; }
.xp-crumbs a:hover { color: var(--xp-ink); text-decoration: underline; }

/* Héros */
.xp-hero { padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem) var(--xp-section); border-bottom: 1px solid var(--xp-rule); }
.xp-hero .xp-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.xp-hero h1 { font-size: var(--xp-title-hero); line-height: 1.07; letter-spacing: -0.03em; max-width: 18ch; }
.xp-hero__lead { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.55; color: var(--xp-ink-2); max-width: 34rem; }
.xp-hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.xp-hero__reassure { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--xp-text-s); color: var(--xp-ink-2); }
.xp-hero__reassure li { display: inline-flex; align-items: center; gap: 0.45rem; }
.xp-hero__reassure .xp-icon { width: 16px; height: 16px; color: var(--xp-blue); stroke-width: 2.2; }

/* Visuel du héros : ce que l'audit repère */
.xp-finding { position: relative; margin: 0; }
.xp-finding__back { position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--xp-rule); border-radius: 6px; background: var(--xp-paper-2); }
.xp-finding__sheet { position: relative; background: var(--xp-paper); border: 1px solid var(--xp-rule); border-radius: 6px; box-shadow: 0 2px 4px rgba(12, 30, 68, 0.04), 0 30px 60px -30px rgba(12, 30, 68, 0.35); }
.xp-finding__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 1.375rem; border-bottom: 1px solid var(--xp-rule); }
.xp-finding__title { font-family: var(--xp-display); font-weight: 600; font-size: 1.0625rem; }
.xp-finding__sample { font-size: 0.75rem; font-weight: 600; color: var(--xp-ink-3); border: 1px solid var(--xp-rule); border-radius: 3px; padding: 0.2rem 0.45rem; }
.xp-finding__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: center; padding: 1rem 1.375rem; border-bottom: 1px solid var(--xp-rule); }
.xp-finding__task { font-weight: 500; line-height: 1.4; }
.xp-finding__dept { grid-column: 1; font-size: 0.8125rem; color: var(--xp-ink-3); }
.xp-finding__answer { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; color: var(--xp-blue-ink); background: var(--xp-blue-wash); border-radius: 3px; padding: 0.35rem 0.6rem; white-space: nowrap; }
.xp-finding__answer .xp-icon { width: 15px; height: 15px; stroke-width: 2; }
.xp-finding__foot { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.375rem; background: var(--xp-paper-2); border-radius: 0 0 6px 6px; font-size: var(--xp-text-s); color: var(--xp-ink-2); }
.xp-finding__foot .xp-icon { color: var(--xp-blue); width: 18px; height: 18px; }

/* Sections */
.xp-section { padding-block: var(--xp-section); }
.xp-section--tint { background: var(--xp-paper-2); border-block: 1px solid var(--xp-rule); }
.xp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 1.25rem 4rem; align-items: end; margin-bottom: 3rem; }
.xp-head h2 { font-size: var(--xp-title-section); line-height: 1.12; max-width: 20ch; }
.xp-head p { font-size: var(--xp-text-m); line-height: 1.55; color: var(--xp-ink-2); max-width: 34rem; }
.xp-head a { color: var(--xp-blue-ink); }

/* Gains par service : onglets */
.xp-services { display: grid; grid-template-columns: 16rem minmax(0, 1fr); border: 1px solid var(--xp-rule); border-radius: 6px; background: var(--xp-paper); overflow: hidden; }
.xp-tabs { display: flex; flex-direction: column; border-right: 1px solid var(--xp-rule); }
.xp-tab { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; text-align: left; padding: 1.125rem 1.375rem; border: 0; border-bottom: 1px solid var(--xp-rule); background: transparent; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--xp-ink-2); position: relative; transition: background-color 0.2s, color 0.2s; }
.xp-tab:last-child { border-bottom: 0; }
.xp-tab:hover { background: var(--xp-paper-2); color: var(--xp-ink); }
.xp-tab .xp-icon { width: 16px; height: 16px; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.25s var(--xp-ease); }
.xp-tab[aria-selected="true"] { color: var(--xp-ink); font-weight: 600; background: var(--xp-blue-wash); }
.xp-tab[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--xp-blue); }
.xp-tab[aria-selected="true"] .xp-icon { opacity: 1; transform: none; color: var(--xp-blue); }
.xp-panel { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.xp-panel[hidden] { display: none; }
.xp-panel h3 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 1.75rem; max-width: 26ch; }
.xp-ba { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
.xp-ba__col { border-radius: 4px; padding: 1.25rem 1.375rem; }
.xp-ba__col--before { background: var(--xp-paper-2); color: var(--xp-ink-2); }
.xp-ba__col--after { background: var(--xp-paper); border: 1px solid var(--xp-blue); box-shadow: 0 12px 28px -18px rgba(0, 102, 255, 0.45); }
.xp-ba__label { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--xp-ink-3); }
.xp-ba__col--after .xp-ba__label { color: var(--xp-blue-ink); }
.xp-ba__arrow { align-self: center; color: var(--xp-blue); }
.xp-ba__arrow .xp-icon { width: 24px; height: 24px; }
.xp-note { margin-top: 1.5rem; font-size: var(--xp-text-s); color: var(--xp-ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .xp-panel:not([hidden]) { animation: xp-panel-in 0.45s var(--xp-ease); }
  @keyframes xp-panel-in { from { opacity: 0; transform: translateY(6px); } }
}

/* Ce que nous construisons */
.xp-builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.xp-build { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; padding: 1.75rem; border: 1px solid var(--xp-rule); border-radius: 6px; background: var(--xp-paper); transition: border-color 0.25s, box-shadow 0.3s var(--xp-ease); }
.xp-build:hover { border-color: #b9c6dc; box-shadow: 0 16px 32px -24px rgba(12, 30, 68, 0.35); }
.xp-build__ic { width: 3rem; height: 3rem; border-radius: 6px; display: grid; place-items: center; background: var(--xp-blue-wash); color: var(--xp-blue); }
.xp-build__ic .xp-icon { width: 24px; height: 24px; }
.xp-build h3 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 0.4rem; }
.xp-build p { color: var(--xp-ink-2); }
.xp-build__eg { margin-top: 0.875rem; font-size: var(--xp-text-s); color: var(--xp-ink-3); }
.xp-build__eg b { color: var(--xp-ink); font-weight: 600; }
.xp-build__more { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1rem; font-size: 0.9375rem; font-weight: 600; color: var(--xp-blue-ink); text-decoration: none; }
.xp-build__more:hover { text-decoration: underline; }
.xp-build__more .xp-icon { width: 16px; height: 16px; stroke-width: 2; }

/* Démarche : bandeau marine */
.xp-process { background: var(--xp-navy); color: #fff; padding-block: var(--xp-section); }
.xp-process .xp-head p { color: var(--xp-navy-text); }
.xp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.xp-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 1.5rem; height: 1px; background: var(--xp-navy-rule); }
.xp-steps::after { content: ""; position: absolute; left: 0; top: calc(1.5rem - 1px); height: 3px; width: 25%; background: var(--xp-blue); border-radius: 2px; }
.xp-step { position: relative; padding-right: 2rem; }
.xp-step__n { position: relative; z-index: 1; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--xp-display); font-weight: 600; font-size: 1.25rem; background: var(--xp-navy); border: 1px solid rgba(190, 210, 255, 0.35); color: #fff; font-variant-numeric: tabular-nums; }
.xp-step--first .xp-step__n { background: var(--xp-blue); border-color: var(--xp-blue); }
.xp-step h3 { font-size: 1.25rem; line-height: 1.25; margin: 1.5rem 0 0.6rem; }
.xp-step p { color: var(--xp-navy-text); font-size: 1rem; }
.xp-step__tag { display: inline-block; margin-top: 1rem; font-size: 0.8125rem; font-weight: 600; padding: 0.3rem 0.6rem; border-radius: 3px; border: 1px solid rgba(190, 210, 255, 0.35); color: var(--xp-navy-text); }
.xp-step--first .xp-step__tag { background: #fff; border-color: #fff; color: var(--xp-blue-ink); }
.xp-process .xp-btn--audit:hover { background: #fff; color: var(--xp-blue-ink); }

/* Partenaires */
.xp-trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem 5rem; align-items: center; }
.xp-trust h2 { font-size: var(--xp-title-section); line-height: 1.12; max-width: 18ch; }
.xp-trust__lead { margin-top: 1rem; color: var(--xp-ink-2); font-size: var(--xp-text-m); max-width: 32rem; }
.xp-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--xp-rule); border-radius: 6px; overflow: hidden; background: var(--xp-paper); }
.xp-logos figure { margin: 0; display: grid; place-items: center; min-height: 7rem; padding: 1.25rem; }
.xp-logos figure + figure { border-left: 1px solid var(--xp-rule); }
.xp-logos img { max-height: 3rem; width: auto; }
.xp-facts { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.xp-facts li { display: grid; gap: 0.25rem; align-content: start; padding-top: 1rem; border-top: 2px solid var(--xp-ink); }
.xp-facts b { font-family: var(--xp-display); font-weight: 600; }
.xp-facts span { color: var(--xp-ink-2); font-size: 0.9875rem; line-height: 1.5; }

/* Appel final */
.xp-final { padding-block: 0 var(--xp-section); }
.xp-final__box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: center; padding: clamp(2rem, 1.25rem + 3vw, 3.5rem); border-radius: 8px; background: var(--xp-blue-wash); border: 1px solid #cfe0ff; }
.xp-final h2 { font-size: var(--xp-title-section); line-height: 1.12; max-width: 22ch; }
.xp-final p { margin-top: 0.875rem; color: var(--xp-ink-2); font-size: var(--xp-text-m); max-width: 38rem; }

/* Apparition au défilement, depuis un état déjà lisible */
@media (prefers-reduced-motion: no-preference) {
  .js .xp-reveal { transition: opacity 0.7s var(--xp-ease), transform 0.7s var(--xp-ease); }
  .js .xp-reveal:not(.in) { opacity: 0.001; transform: translateY(16px); }
  .js .xp-steps::after { transform-origin: left; transition: transform 1.2s var(--xp-ease) 0.3s; }
  .js .xp-steps:not(.in)::after { transform: scaleX(0); }
}

/* Tablette */
@media (max-width: 1060px) {
  .xp-hero .xp-wrap { grid-template-columns: minmax(0, 1fr); }
  .xp-finding { max-width: 36rem; }
  .xp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .xp-steps::before, .xp-steps::after { display: none; }
  .xp-trust { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .xp-head { grid-template-columns: minmax(0, 1fr); }
  .xp-services { grid-template-columns: minmax(0, 1fr); }
  .xp-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--xp-rule); scrollbar-width: none; }
  .xp-tabs::-webkit-scrollbar { display: none; }
  .xp-tab { flex: none; border-bottom: 0; border-right: 1px solid var(--xp-rule); padding: 0.9rem 1.1rem; white-space: nowrap; }
  .xp-tab .xp-icon { display: none; }
  .xp-tab[aria-selected="true"]::before { top: auto; right: 0; width: auto; height: 3px; }
  .xp-ba { grid-template-columns: minmax(0, 1fr); }
  .xp-ba__arrow { justify-self: center; transform: rotate(90deg); }
  .xp-builds { grid-template-columns: minmax(0, 1fr); }
  .xp-final__box { grid-template-columns: minmax(0, 1fr); }
}
/* Téléphone */
@media (max-width: 600px) {
  .xp-hero__actions .xp-btn { width: 100%; }
  .xp-finding__back { inset: 10px -6px -10px 6px; }
  .xp-finding__row { grid-template-columns: minmax(0, 1fr); }
  .xp-finding__answer { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.4rem; }
  .xp-build { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.5rem; }
  .xp-steps { grid-template-columns: minmax(0, 1fr); row-gap: 2.25rem; }
  .xp-step { padding-right: 0; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.125rem; }
  .xp-step__n { grid-row: span 3; }
  .xp-step h3 { margin-top: 0.6rem; }
  .xp-step__tag { justify-self: start; }
  .xp-final .xp-btn { width: 100%; }
  .xp-logos figure { min-height: 5.5rem; padding: 1rem; }
  .xp-facts { grid-template-columns: minmax(0, 1fr); }
}

/* Liens dans le texte courant */
.xp-link { color: inherit; }
.xp-link:hover { color: var(--xp-blue-ink); }
.xp-process .xp-link:hover { color: #fff; }

/* =========================================================================
   COMPOSANTS PARTAGÉS PAR LES PAGES SOLUTIONS (logiciel, interface web)
   ========================================================================= */

/* Fenêtre d'application : le visuel des héros Logiciel et Interface web */

.xp-window__frame { position: relative; background: var(--xp-paper); border: 1px solid var(--xp-rule); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(12, 30, 68, 0.04), 0 30px 60px -30px rgba(12, 30, 68, 0.35); }
.xp-window__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--xp-rule); background: var(--xp-paper-2); }
.xp-window__dots { display: flex; gap: 6px; }
.xp-window__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--xp-rule); }
.xp-window__url { flex: 1; font-size: 0.8125rem; color: var(--xp-ink-3); background: var(--xp-paper); border: 1px solid var(--xp-rule); border-radius: 4px; padding: 0.3rem 0.65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Liste de signaux : quand la solution devient utile */

/* Réalisations : cartes vers les pages produit */
.xp-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.xp-work { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.5rem; border: 1px solid var(--xp-rule); border-radius: 6px; background: var(--xp-paper); text-decoration: none; color: inherit; transition: border-color 0.25s, box-shadow 0.3s var(--xp-ease), transform 0.3s var(--xp-ease); }
.xp-work:hover { border-color: var(--xp-blue); box-shadow: 0 16px 32px -24px rgba(0, 82, 204, 0.5); transform: translateY(-2px); }
.xp-work__name { font-family: var(--xp-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.xp-work__what { font-size: 0.8125rem; font-weight: 600; color: var(--xp-blue-ink); }
.xp-work p { color: var(--xp-ink-2); font-size: 0.98rem; }
.xp-work__go { margin-top: auto; padding-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9375rem; font-weight: 600; color: var(--xp-ink); }
.xp-work__go .xp-icon { width: 16px; height: 16px; stroke-width: 2; transition: transform 0.25s var(--xp-ease); }
.xp-work:hover .xp-work__go .xp-icon { transform: translateX(3px); }

/* Ce que nous soignons : grille de points courts */
.xp-cares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; }
.xp-care { display: grid; gap: 0.5rem; align-content: start; padding-top: 1.25rem; border-top: 2px solid var(--xp-ink); }
.xp-care h3 { font-size: 1.1875rem; line-height: 1.25; display: flex; align-items: center; gap: 0.6rem; }
.xp-care h3 .xp-icon { color: var(--xp-blue); width: 22px; height: 22px; }
.xp-care p { color: var(--xp-ink-2); font-size: 1rem; }

/* Panneau d'onglet en liste : pour qui, ce qui change */
.xp-panel__list { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.xp-panel__list li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.6rem; color: var(--xp-ink-2); }
.xp-panel__list .xp-icon { width: 18px; height: 18px; color: var(--xp-blue); margin-top: 0.2rem; stroke-width: 2.2; }

@media (max-width: 1060px) {
  .xp-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-cares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .xp-works, .xp-cares { grid-template-columns: minmax(0, 1fr); }
}

/* Avant / après en lignes : ce qui change */
.xp-shift { display: grid; border-top: 1px solid var(--xp-ink); }
.xp-shift__row { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1.15fr); gap: 1rem 1.5rem; align-items: center; padding-block: 1.25rem; border-bottom: 1px solid var(--xp-rule); }
.xp-shift__before { color: var(--xp-ink-3); font-size: 1.0625rem; line-height: 1.45; }
.xp-shift__arrow { color: var(--xp-blue); justify-self: center; }
.xp-shift__arrow .xp-icon { width: 22px; height: 22px; }
.xp-shift__after { font-size: var(--xp-text-m); line-height: 1.45; color: var(--xp-ink); }
.xp-shift__after strong { font-weight: 600; }
.xp-shift__labels { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1.15fr); gap: 1.5rem; padding-bottom: 0.75rem; font-size: var(--xp-text-s); font-weight: 600; color: var(--xp-ink-3); }
.xp-shift__labels span:last-child { color: var(--xp-blue-ink); }

/* Les outils du client : logos des grands éditeurs */
.xp-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.xp-tool { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: 1.75rem; border: 1px solid var(--xp-rule); border-radius: 6px; background: var(--xp-paper); }
.xp-tool img { width: 3.5rem; height: 3.5rem; object-fit: contain; }
.xp-tool__mark { width: 3.5rem; height: 3.5rem; border-radius: 8px; display: grid; place-items: center; background: var(--xp-blue-wash); color: var(--xp-blue); }
.xp-tool__mark .xp-icon { width: 26px; height: 26px; }
.xp-tool b { display: block; font-family: var(--xp-display); font-weight: 600; font-size: 1.1875rem; }
.xp-tool span { color: var(--xp-ink-2); font-size: 0.9375rem; line-height: 1.45; }

@media (max-width: 860px) {
  .xp-shift__labels { display: none; }
  .xp-shift__row { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .xp-shift__before::before { content: "Aujourd’hui : "; font-weight: 600; }
  .xp-shift__arrow { display: none; }
  .xp-tools { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   PAGE INTERFACE WEB : des interfaces montrées, pas décrites
   ========================================================================= */
/* Héros : un ordinateur et un téléphone superposés */
.xp-devices { position: relative; margin: 0; }

/* Mini-site dans l'ordinateur */

/* Mini-portail dans le téléphone */

/* Les trois familles : blocs alternés avec leur maquette */
.xp-kinds { display: grid; gap: clamp(3.5rem, 6vw, 6rem); }
.xp-kind { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.xp-kind:nth-child(even) .xp-kind__text { order: 2; }
.xp-kind__n { font-size: var(--xp-text-s); font-weight: 600; color: var(--xp-blue-ink); }
.xp-kind h3 { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); line-height: 1.15; margin: 0.5rem 0 1rem; max-width: 20ch; }
.xp-kind__lead { font-size: var(--xp-text-m); color: var(--xp-ink-2); max-width: 32rem; }
.xp-kind .xp-panel__list { margin-top: 1.5rem; }
.xp-kind__visual { position: relative; }

/* Maquette : tableau de bord métier */

/* Ce que nous soignons : une phrase et une liste compacte */
.xp-craft { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem 5rem; align-items: start; }
.xp-craft__quote { font-family: var(--xp-display); font-weight: 600; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; max-width: 16ch; }
.xp-craft__quote em { font-style: normal; color: var(--xp-blue); }
.xp-craft__sub { margin-top: 1.25rem; color: var(--xp-ink-2); font-size: var(--xp-text-m); max-width: 28rem; }
.xp-craft__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.xp-craft__list li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.75rem; padding-block: 1.125rem; border-bottom: 1px solid var(--xp-rule); }
.xp-craft__list li:nth-child(-n+2) { border-top: 1px solid var(--xp-ink); }
.xp-craft__list .xp-icon { color: var(--xp-blue); width: 22px; height: 22px; margin-top: 0.1rem; }
.xp-craft__list b { display: block; font-weight: 600; }
.xp-craft__list span { color: var(--xp-ink-2); font-size: 0.9375rem; line-height: 1.45; }

@media (max-width: 1060px) {
  .xp-devices { max-width: 40rem; }
  .xp-craft { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .xp-kind { grid-template-columns: minmax(0, 1fr); }
  .xp-kind:nth-child(even) .xp-kind__text { order: 0; }
}
@media (max-width: 600px) {
  .xp-craft__list { grid-template-columns: minmax(0, 1fr); }
  .xp-craft__list li:nth-child(2) { border-top: 0; }
}

/* Vraies captures dans un cadre de navigateur */
.xp-shot { margin: 0; }
.xp-shot__img { display: block; width: 100%; height: auto; }
.xp-devices .xp-window__frame { box-shadow: 0 2px 4px rgba(12, 30, 68, 0.04), 0 40px 70px -35px rgba(12, 30, 68, 0.45); }

/* Bandeau des réalisations : logos */
.xp-clients { border-block: 1px solid var(--xp-rule); padding-block: 2rem; }
.xp-clients .xp-wrap { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem 3rem; align-items: center; }
.xp-clients__label { font-size: var(--xp-text-s); color: var(--xp-ink-3); max-width: 12rem; line-height: 1.4; }
.xp-clients__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 2rem 3rem; }
.xp-clients__logos img { height: 2.75rem; width: auto; }
.xp-lockup { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--xp-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: #1b1f3b; white-space: nowrap; }
.xp-lockup img { height: 2.75rem; width: auto; }
.xp-lockup em { font-style: normal; color: #5b3fa8; }

@media (max-width: 860px) {
  .xp-clients .xp-wrap { grid-template-columns: minmax(0, 1fr); }
  .xp-clients__logos { justify-content: flex-start; }
}

.xp .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Héros des pages à captures : le visuel prend plus de place */
.xp-hero--shots .xp-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4rem); }
.xp-hero--shots h1 { font-size: clamp(2.125rem, 1.4rem + 1.9vw, 3rem); max-width: 20ch; }
@media (max-width: 1060px) { .xp-hero--shots .xp-wrap { grid-template-columns: minmax(0, 1fr); } }

/* Deux écrans superposés : l'espace membre derrière, le tableau de bord devant */
.xp-stack { position: relative; }
.xp-stack__back { width: 82%; }
.xp-stack__front { position: relative; width: 62%; margin: -38% 0 0 auto; box-shadow: 0 30px 60px -25px rgba(12, 30, 68, 0.45); }
.xp-stack .xp-shot__cap { margin-top: 1.25rem; }
.xp-process .xp-steps { margin-bottom: 0; }
@media (max-width: 600px) {
  .xp-stack__back { width: 100%; }
  .xp-stack__front { width: 78%; margin-top: -20%; }
}

/* Cartes de réalisations : icône de la marque, puis son nom */
.xp-work__head { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.875rem; align-items: center; }
.xp-work__head > span { display: grid; gap: 0.1rem; }
.xp-work__mark { width: 3rem; height: 3rem; border-radius: 12px; object-fit: contain; box-shadow: 0 6px 14px -8px rgba(12, 30, 68, 0.35); }
.xp-work__mark--draw { background: var(--xp-paper-2); padding: 0.3rem; border: 1px solid var(--xp-rule); }

/* Légende des captures : une étiquette avec l'icône du produit */
.xp-shot__cap { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.125rem; padding: 0.45rem 0.9rem 0.45rem 0.45rem; background: var(--xp-paper); border: 1px solid var(--xp-rule); border-radius: 999px; box-shadow: 0 8px 18px -12px rgba(12, 30, 68, 0.3); font-size: 0.875rem; color: var(--xp-ink-3); line-height: 1.35; max-width: 100%; }
.xp-shot__cap b { color: var(--xp-ink); font-weight: 600; white-space: nowrap; }
.xp-shot__cap span { min-width: 0; }
.xp-shot__icon { width: 2rem; height: 2rem; border-radius: 8px; object-fit: contain; flex: none; background: var(--xp-paper-2); }
@media (max-width: 600px) { .xp-shot__cap { border-radius: 14px; align-items: flex-start; } }

/* Bandeau « sur mesure » : ce qui est créé pour le client */
.xp-bespoke { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); background: var(--xp-navy); color: #fff; }
.xp-bespoke .xp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem 5rem; align-items: center; }
.xp-bespoke__title { font-family: var(--xp-display); font-weight: 600; font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; color: #fff; max-width: 18ch; }
.xp-bespoke__title em { font-style: normal; color: #7ab0ff; }
.xp-bespoke__lead { margin-top: 1rem; color: var(--xp-navy-text); font-size: 1.0625rem; max-width: 30rem; }
.xp-bespoke__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.xp-bespoke__list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.875rem; padding: 1.125rem; border: 1px solid var(--xp-navy-rule); border-radius: 8px; background: rgba(255, 255, 255, 0.03); }
.xp-bespoke__ic { width: 2.5rem; height: 2.5rem; border-radius: 8px; display: grid; place-items: center; background: var(--xp-blue); color: #fff; }
.xp-bespoke__ic .xp-icon { width: 20px; height: 20px; }
.xp-bespoke__list b { display: block; color: #fff; font-weight: 600; margin-bottom: 0.15rem; }
.xp-bespoke__list span { color: var(--xp-navy-text); font-size: 0.9375rem; line-height: 1.45; }
@media (max-width: 960px) { .xp-bespoke .xp-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .xp-bespoke__list { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   INTERFACE WEB : de la maquette à l'écran (héros), familles en colonnes
   ========================================================================= */
.xp-proto { position: relative; margin: 0; padding: 3.5rem 0 0 3.5rem; }
.xp-proto__screen { position: relative; }
.xp-proto__sketch { position: absolute; left: 0; top: 0; width: 52%; z-index: 2; background: #fff; border: 1.5px dashed #9aa8c2; border-radius: 10px; padding: 1rem; box-shadow: 0 24px 48px -28px rgba(12, 30, 68, 0.45); transform: rotate(-2.5deg); }
.xp-proto__tag { position: absolute; top: -0.85rem; left: 1rem; background: var(--xp-navy); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; }
.xp-proto__tag--live { left: auto; right: 1rem; background: var(--xp-blue); z-index: 3; }
.xp-sk { display: grid; gap: 0.55rem; }
.xp-sk__nav { display: flex; gap: 0.4rem; align-items: center; }
.xp-sk__nav i { height: 0.45rem; border-radius: 3px; background: #dfe5ef; flex: 0 0 1.6rem; }
.xp-sk__nav i:first-child { flex-basis: 3rem; background: #c3cddf; margin-right: auto; }
.xp-sk__row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0.6rem; align-items: center; }
.xp-sk__lines { display: grid; gap: 0.35rem; }
.xp-sk__lines i { height: 0.55rem; border-radius: 3px; background: #c3cddf; }
.xp-sk__lines i:nth-child(2) { width: 80%; }
.xp-sk__lines i:nth-child(3) { width: 60%; height: 0.4rem; background: #e3e8f1; }
.xp-sk__btn { width: 45%; height: 0.9rem; border-radius: 4px; background: var(--xp-blue); opacity: 0.85; margin-top: 0.2rem; }
.xp-sk__img { aspect-ratio: 4 / 3; border-radius: 6px; background: repeating-linear-gradient(45deg, #eef1f6 0 6px, #e4e9f1 6px 12px); border: 1px solid #dfe5ef; }
.xp-sk__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.xp-sk__cards i { height: 1.6rem; border-radius: 4px; border: 1px solid #dfe5ef; }
.xp-sk__note { font-size: 0.6875rem; color: var(--xp-ink-3); }

.xp-families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.xp-family { display: flex; flex-direction: column; border: 1px solid var(--xp-rule); border-radius: 8px; background: var(--xp-paper); overflow: hidden; }
.xp-family__thumb { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--xp-rule); background: var(--xp-paper-2); }
.xp-family__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.xp-family__body { padding: 1.5rem; display: grid; gap: 0.6rem; }
.xp-family h3 { font-size: 1.3125rem; line-height: 1.2; }
.xp-family p { color: var(--xp-ink-2); }
.xp-family .xp-panel__list { margin-top: 0.4rem; gap: 0.5rem; font-size: 0.9375rem; }
.xp-families__more { margin-top: 1.75rem; }

/* RÉALISATIONS : mosaïque d'écrans en tête de page */
.xp-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.xp-mosaic .xp-window__frame:nth-child(even) { transform: translateY(1.75rem); }
.xp-mosaic .xp-window__bar { padding: 0.5rem 0.75rem; }
.xp-mosaic .xp-window__url { font-size: 0.75rem; padding: 0.2rem 0.5rem; }
.xp-mosaic .xp-shot__img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }

@media (max-width: 960px) { .xp-families { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .xp-proto { padding: 2.5rem 0 0 1rem; }
  .xp-proto__sketch { width: 62%; padding: 0.7rem; }
  .xp-mosaic .xp-window__frame:nth-child(even) { transform: none; }
}

/* =========================================================================
   ACCUEIL : secteurs en pastilles, FAQ repliée, contact sur fond marine
   ========================================================================= */
.xp-trust-strip { border-block: 1px solid var(--xp-rule); padding-block: 1.75rem; }
.xp-trust-strip .xp-wrap { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem 3rem; align-items: center; }
.xp-trust-strip__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
.xp-trust-strip__logos img { height: 2.5rem; width: auto; }
.xp-sectors { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--xp-rule); display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem 2rem; align-items: start; }
.xp-sectors__label { font-family: var(--xp-display); font-weight: 600; font-size: 1.0625rem; padding-top: 0.35rem; }
.xp-sectors__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.xp-sectors__list a { font-size: 0.875rem; color: var(--xp-ink-2); text-decoration: none; padding: 0.35rem 0.75rem; border: 1px solid var(--xp-rule); border-radius: 999px; background: var(--xp-paper); transition: border-color 0.2s, color 0.2s; }
.xp-sectors__list a:hover { border-color: var(--xp-blue); color: var(--xp-blue-ink); }

.xp-faq { max-width: 52rem; }
.xp-faq details { border-bottom: 1px solid var(--xp-rule); }
.xp-faq details:first-of-type { border-top: 1px solid var(--xp-ink); }
.xp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; font-family: var(--xp-display); font-weight: 600; font-size: 1.125rem; }
.xp-faq summary::-webkit-details-marker { display: none; }
.xp-faq summary::after { content: "+"; font-family: var(--xp-display); font-size: 1.5rem; line-height: 1; color: var(--xp-blue); transition: transform 0.25s var(--xp-ease); }
.xp-faq details[open] summary::after { transform: rotate(45deg); }
.xp-faq details p { padding-bottom: 1.25rem; color: var(--xp-ink-2); max-width: 46rem; }

@media (max-width: 960px) {
  .xp-trust-strip .xp-wrap, .xp-sectors { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .xp-trust-strip__logos { justify-content: flex-start; }
  .xp-trust-strip__logos img { height: 2rem; }
}
.xp-sectors__list a.xp-sectors__all { border-color: transparent; color: var(--xp-blue-ink); font-weight: 600; }

/* =========================================================================
   ACCUEIL : héros de marque, fond marine, vitrine des solutions
   ========================================================================= */
.xp-brand { position: relative; background: var(--xp-navy); color: #fff; overflow: hidden; padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.xp-brand::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(190, 210, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(190, 210, 255, 0.07) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%); pointer-events: none; }
.xp-brand .xp-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.xp-brand h1 { font-size: clamp(2.25rem, 1.4rem + 2.3vw, 3.25rem); line-height: 1.05; letter-spacing: -0.035em; color: #fff; max-width: 17ch; }
.xp-brand h1 em { font-style: normal; color: #7ab0ff; }
.xp-brand__lead { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.55; color: var(--xp-navy-text); max-width: 32rem; }
.xp-brand__pills { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.xp-brand__pills span { font-size: 0.875rem; font-weight: 600; color: #fff; padding: 0.4rem 0.8rem; border: 1px solid rgba(190, 210, 255, 0.28); border-radius: 999px; background: rgba(255, 255, 255, 0.04); }
.xp-brand .xp-btn--ghost { background: transparent; color: #fff; border-color: rgba(190, 210, 255, 0.4); }
.xp-brand .xp-btn--ghost:hover { border-color: #fff; color: #fff; }
.xp-brand .xp-btn--audit:hover { background: #fff; color: var(--xp-blue-ink); }
.xp-brand .xp-hero__reassure { color: var(--xp-navy-text); }
.xp-brand .xp-hero__reassure .xp-icon { color: #7ab0ff; }

/* La vitrine : écrans réels et éléments vivants, composés */
.xp-show { position: relative; margin: 0; aspect-ratio: 1.15 / 1; }
.xp-show > * { position: absolute; }
.xp-show .xp-window__frame { border-color: rgba(190, 210, 255, 0.25); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); }
.xp-show__main { left: 0; top: 4%; width: 78%; }
.xp-show__dash { right: 0; top: 34%; width: 46%; }
.xp-show__phone { left: 6%; bottom: 0; width: 22%; background: #fff; border: 5px solid #05101f; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
.xp-show__phone img { display: block; width: 100%; height: auto; }
.xp-chip { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: 10px; background: #fff; color: var(--xp-ink); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.55); font-size: 0.8125rem; line-height: 1.35; max-width: 17rem; }
.xp-chip b { display: block; font-weight: 600; font-size: 0.8125rem; }
.xp-chip span { color: var(--xp-ink-3); }
.xp-chip__ic { flex: none; width: 2rem; height: 2rem; border-radius: 8px; display: grid; place-items: center; background: var(--xp-blue); color: #fff; }
.xp-chip__ic .xp-icon { width: 16px; height: 16px; stroke-width: 2; }
.xp-chip--agent { right: 6%; top: 0; }
.xp-chip--flow { left: 30%; bottom: 3%; max-width: none; }
.xp-chip--flow .xp-chip__ic { background: #17663a; }
.xp-chip--badge { right: 2%; bottom: 14%; padding: 0.55rem 0.8rem; }
.xp-chip--badge .xp-chip__ic { background: var(--xp-navy); width: 1.75rem; height: 1.75rem; }
.xp-flow-steps { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--xp-ink); white-space: nowrap; }
.xp-flow-steps i { font-style: normal; color: #17663a; }

@media (prefers-reduced-motion: no-preference) {
  .xp-show .xp-chip { animation: xp-float 6s ease-in-out infinite; }
  .xp-show .xp-chip--flow { animation-delay: -2s; }
  .xp-show .xp-chip--badge { animation-delay: -4s; }
  @keyframes xp-float { 50% { transform: translateY(-6px); } }
}
@media (max-width: 1060px) {
  .xp-brand .xp-wrap { grid-template-columns: minmax(0, 1fr); }
  .xp-show { max-width: 40rem; }
}
.xp-brand .xp-hero__actions .xp-btn { white-space: nowrap; }
@media (min-width: 1061px) { .xp-brand .xp-hero__actions { flex-wrap: nowrap; } }
@media (max-width: 600px) {
  .xp-show { aspect-ratio: 1 / 0.95; }
  .xp-show__dash, .xp-chip--flow, .xp-chip--badge { display: none; }
  .xp-show__main { width: 100%; top: 14%; }
  .xp-show__phone { width: 34%; left: auto; right: 4%; bottom: 0; }
  .xp-chip { font-size: 0.75rem; padding: 0.5rem 0.65rem; max-width: 12.5rem; }
  .xp-chip--agent { left: 0; right: auto; top: 0; max-width: 15rem; }
}
.xp-family--link { text-decoration: none; color: inherit; transition: border-color 0.25s, box-shadow 0.3s var(--xp-ease); }
.xp-family--link:hover { border-color: var(--xp-blue); box-shadow: 0 16px 32px -24px rgba(0, 82, 204, 0.5); }
.xp-trust-strip__presse { grid-column: 1 / -1; }
.xp-trust-strip__presse .creds__divider { display: none; }
.xp-trust-strip__presse .creds__label { display: inline; font-size: var(--xp-text-s); color: var(--xp-ink-3); margin-right: 0.75rem; text-transform: none; letter-spacing: 0; }
.xp-trust-strip__presse .creds__presse { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; text-decoration: none; color: var(--xp-ink); padding: 0.6rem 0.9rem; border: 1px solid var(--xp-rule); border-radius: 6px; }
.xp-trust-strip__presse .creds__presse:hover { border-color: var(--xp-blue); }
.xp-trust-strip__presse .creds__presse-src { font-weight: 700; }
.xp-trust-strip__presse .creds__presse-titre { font-weight: 600; }
.xp-trust-strip__presse .creds__presse-meta { font-size: 0.8125rem; color: var(--xp-ink-3); }

/* SOPHIE : portrait vivant dans un cadre vertical */
.xp-avatar { position: relative; margin: 0 auto; width: min(100%, 22rem); }
.xp-avatar__frame { position: relative; border-radius: 22px; overflow: hidden; border: 6px solid var(--xp-navy); box-shadow: 0 40px 70px -30px rgba(12, 30, 68, 0.55); background: var(--xp-navy); aspect-ratio: 540 / 972; }
.xp-avatar__frame video, .xp-avatar__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xp-avatar__bubble { position: absolute; left: -2.5rem; bottom: 18%; max-width: 15rem; background: #fff; color: var(--xp-ink); border-radius: 12px; padding: 0.8rem 1rem; font-size: 0.875rem; line-height: 1.4; box-shadow: 0 20px 40px -18px rgba(12, 30, 68, 0.45); }
.xp-avatar__bubble b { display: block; font-size: 0.75rem; color: var(--xp-blue-ink); margin-bottom: 0.2rem; }
.xp-avatar__langs { position: absolute; right: -1.5rem; top: 12%; display: flex; flex-direction: column; gap: 0.4rem; }
.xp-avatar__langs span { background: #fff; border: 1px solid var(--xp-rule); border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.75rem; font-weight: 600; color: var(--xp-ink-2); box-shadow: 0 10px 20px -14px rgba(12, 30, 68, 0.4); }
@media (max-width: 600px) { .xp-avatar__bubble { left: 0; } .xp-avatar__langs { right: 0; } }