/* Pages Expertises, gabarit produit (page-templates/expertise-produit.php).
   Valeurs relevées dans la maquette Claude Design « Maquettes site e-commerce » (25/09) :
   « Site e-commerce Desktop.dc.html » (1920) et « … Mobile.dc.html » (390).
   Tailles de police en rem (racine 16 px), valeur px de la maquette en commentaire.
   Écart assumé : gouttière mobile 20 px (celle du thème et du header) au lieu de 16. */

.lw-nowrap { white-space: nowrap; }

.lw-xp h1, .lw-xp h2, .lw-xp h3 { letter-spacing: -0.02em; }
.lw-xp-h2 { font-weight: var(--lw-fw-bold); font-size: var(--lw-fs-h2); line-height: var(--lw-lh-h2); text-wrap: balance; } /* 13/10 : 48 → jeton H2 (36), même échelle que la home */
.lw-xp-dark { background: var(--lw-gradient-dark); color: var(--lw-white); }

/* Lien texte + flèche (Voir le site vitrine, Voir le projet, autres expertises) */
.lw-xp-link { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--lw-fw-semibold); font-size: 1.125rem; /* 18 */ line-height: 1; white-space: nowrap; }
.lw-xp-link span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lw-xp-link:hover span { text-decoration-color: var(--lw-lime); }
.lw-xp-link svg { width: 28px; height: 28px; flex: none; transition: transform .2s var(--lw-ease-out); }
.lw-xp-link span { transition: text-decoration-color .2s var(--lw-ease-out); }
@media (hover: hover) and (pointer: fine) { .lw-xp-link:hover svg { transform: translateX(3px); } } /* 13/10 : même geste que la flèche des boutons */
.lw-xp-link--small { gap: 8px; }
.lw-xp-link--small svg { width: 24px; height: 24px; }

/* ---------- 1. Hero ---------- */
.lw-xp-hero { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 var(--lw-sp-section-end); }
.lw-xp-hero::before {
  content: ""; position: absolute; left: 50%; top: -334px; width: 1280px; height: 1280px; z-index: -1;
  transform: translateX(-50%); border-radius: 50%; background: var(--lw-gradient-blob); pointer-events: none;
}
.lw-xp-hero__grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 80px; align-items: center; }
.lw-xp-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.lw-xp-crumbs ol { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-weight: var(--lw-fw-medium); font-size: 1rem; /* 16 */ line-height: 1; color: var(--lw-grey-label); }
.lw-xp-crumbs a:hover { color: var(--lw-black); }
.lw-xp-crumbs [aria-current] { color: var(--lw-black); font-weight: var(--lw-fw-semibold); }
.lw-xp-hero__title { font-weight: var(--lw-fw-bold); font-size: 4.5rem; /* 72 */ line-height: 1.02; text-wrap: balance; }
.lw-xp-hero__promise { font-weight: var(--lw-fw-bold); font-size: 1.75rem; /* 28 */ line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.lw-xp-hero__intro { font-size: 1.25rem; /* 20 */ line-height: 1.55; text-wrap: pretty; }
.lw-xp-hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 8px; }
.lw-xp-hero__badge { margin-top: 0; padding-block: 10px; } /* badge de la home, hauteur de la maquette (44) */
.lw-xp-hero__visual { position: relative; }
.lw-xp-hero__frame { padding: 14px; border-radius: var(--lw-radius-tile); background: var(--lw-white); box-shadow: inset 0 0 0 2px var(--lw-black), var(--lw-shadow-card); }
.lw-xp-hero__frame img { width: 100%; height: 560px; object-fit: cover; object-position: top; border-radius: var(--lw-radius-inner); }
.lw-xp-hero__picto { position: absolute; left: -46px; bottom: -40px; width: 93px; height: 78px; }

/* ---------- 2. C'est pour vous si… ---------- */
.lw-xp-pour { padding: var(--lw-sp-section) 0 var(--lw-sp-section-end); }
.lw-xp-pour__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.lw-xp-pour__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 24px; align-items: start; padding: 28px 0; border-top: 1px solid var(--lw-grey-wordmark); font-weight: var(--lw-fw-semibold); font-size: 1.5rem; /* 24 */ line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
.lw-xp-pour__list li > span:last-child { padding-top: 6px; }
.lw-xp-pour__check { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--lw-radius); background: var(--lw-lime); color: var(--lw-black); }
.lw-xp-pour__franc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; margin-top: 72px; padding: 40px 48px; border-radius: var(--lw-radius-tile); background: var(--lw-lime); color: var(--lw-black); }
.lw-xp-pour__franc p { max-width: 900px; font-weight: var(--lw-fw-bold); font-size: 1.75rem; /* 28 */ line-height: 1.25; letter-spacing: -0.02em; text-wrap: pretty; }

/* ---------- 3. Ce que contient votre site ---------- */
.lw-xp-contenu { padding: var(--lw-sp-section) 0 var(--lw-sp-section-end); }
.lw-xp-contenu__title { max-width: 720px; margin-bottom: 64px; }
.lw-xp-contenu__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.lw-xp-feature { display: flex; flex-direction: column; gap: 20px; padding: 36px 32px 40px; border-radius: var(--lw-radius); background: var(--lw-white); box-shadow: inset 0 0 0 2px var(--lw-black), var(--lw-shadow-card); }
.lw-xp-feature__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--lw-radius); background: var(--lw-lime); box-shadow: inset 0 0 0 2px var(--lw-black); }
.lw-xp-feature h3 { font-weight: var(--lw-fw-bold); font-size: 1.5rem; /* 24 */ line-height: 1.15; }
.lw-xp-feature p { font-size: 1.125rem; /* 18 */ line-height: 1.55; text-wrap: pretty; }
.lw-xp-feature--lime { background: var(--lw-lime); }
.lw-xp-feature--lime .lw-xp-feature__icon { background: var(--lw-white); }
.lw-xp-feature--lime p { color: var(--lw-lime-ink); }

/* ---------- 4. Réalisations ---------- */
.lw-xp-real { padding: var(--lw-sp-section) 0 var(--lw-sp-section-end); }
.lw-xp-real .lw-xp-h2 { margin-bottom: 72px; }
.lw-xp-case { display: grid; gap: 72px; align-items: center; }
.lw-xp-case__img { width: 100%; object-fit: cover; object-position: top; border-radius: var(--lw-radius-tile); }
.lw-xp-case__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.lw-xp-case__desc { font-size: 1.25rem; /* 20 */ line-height: 1.55; text-wrap: pretty; }
.lw-xp-case .lw-pill--dark { border-color: var(--lw-white); } /* un produit, une surface : pastille noire, bordée de blanc sur fond sombre */
.lw-xp-case--main { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lw-xp-case--main .lw-xp-case__img { height: 600px; }
.lw-xp-case--main h3 { font-weight: var(--lw-fw-bold); font-size: 2.5rem; /* 40 */ line-height: 1.1; }
.lw-xp-case--second { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--lw-grey-wordmark); }
.lw-xp-case--second .lw-xp-case__img { order: 2; height: 400px; }
.lw-xp-case--second .lw-xp-case__text { gap: 20px; max-width: 560px; }
.lw-xp-case--second h3 { font-weight: var(--lw-fw-bold); font-size: 2rem; /* 32 */ line-height: 1.15; }
.lw-xp-link--on-dark { color: var(--lw-white); }

/* ---------- 5. Étapes ---------- */
.lw-xp-etapes { background: var(--lw-cream); /* 15/10, DA de la home déclinée : gris → blanc cassé */ padding: var(--lw-sp-section) 0 var(--lw-sp-section-end); }
.lw-xp-etapes__title { text-align: center; margin-bottom: 64px; }
.lw-xp-etapes__list {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; padding-bottom: 8px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), #d0d0d0 calc(20% - 1px) 20%);
}
.lw-xp-etape { margin: calc(var(--i) * 56px) 12px 0; }
.lw-xp-etape__card { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 22px; border-radius: var(--lw-radius); background: var(--lw-lime); box-shadow: inset 0 0 0 2px var(--lw-black), 6px 8px 0 0 #d0d0d0; }
.lw-xp-etape__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.lw-xp-etape__num { display: inline-grid; place-items: center; width: 38px; height: 37px; flex: none; border-radius: var(--lw-radius-pill); background: var(--lw-black); color: var(--lw-white); font-weight: var(--lw-fw-semibold); font-size: 1rem; /* 16 */ line-height: 1; }
.lw-xp-etape h3 { font-weight: var(--lw-fw-bold); font-size: 1.25rem; /* 20 */ line-height: 1.15; letter-spacing: -0.01em; }
.lw-xp-etape p { font-size: 1rem; /* 16 */ line-height: 1.4; color: var(--lw-lime-ink); text-wrap: pretty; }
.lw-xp-etape--last .lw-xp-etape__card { background: var(--lw-black); color: var(--lw-white); }
.lw-xp-etape--last .lw-xp-etape__num { background: var(--lw-lime); color: var(--lw-black); }
.lw-xp-etape--last p { color: var(--lw-white); }

/* ---------- 6. Et après la mise en ligne ---------- */
.lw-xp-apres { padding: var(--lw-sp-section) 0 var(--lw-sp-section-end); }
.lw-xp-apres__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: center; }
.lw-xp-apres__text { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.lw-xp-apres__text p { max-width: 520px; font-size: 1.25rem; /* 20 */ line-height: 1.55; text-wrap: pretty; }
.lw-xp-apres__btn { margin-top: 8px; box-shadow: var(--lw-shadow-btn); }
.lw-xp-apres__card-wrap { position: relative; }
.lw-xp-apres__card { padding: 32px 39px; border-radius: var(--lw-radius-tile); background: var(--lw-lime); }
.lw-xp-apres__card li { display: flex; align-items: center; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--lw-black); font-weight: var(--lw-fw-semibold); font-size: 1.375rem; /* 22 */ line-height: 1.2; }
.lw-xp-apres__card li:last-child { border-bottom-color: transparent; }
.lw-xp-apres__card svg { flex: none; }
/* Note sous la carte « Et après » : même flèche que la note du comparatif du Studio (annotation-arrow-up, tracé de Pierre du 01/10).
   Elle part du début du texte, file à gauche puis monte : la pointe (à 8 px du haut du SVG) s’arrête 4 px sous le bord de la carte (corrigé le 12/10 ;
   l'ancienne flèche tournée de 180° restait à 20 px de la carte et ne la désignait pas). */
.lw-xp-note { position: absolute; left: 16px; top: calc(100% - 4px); display: inline-flex; align-items: flex-start; gap: 2px; max-width: 400px; font-family: "Caveat", "Figma Hand", cursive; font-weight: var(--lw-fw-bold); font-size: 1.25rem; /* 20 */ line-height: 1.1; color: #6e6e6e; }
.lw-xp-note__arrow { width: 64px; height: 64px; flex: none; }
.lw-xp-note span { padding-top: 34px; }

/* ---------- 7. FAQ ---------- */
.lw-xp-faq { padding: var(--lw-sp-section) 0 var(--lw-sp-section-end); }
.lw-xp-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 96px; align-items: start; }
.lw-xp-faq__title { position: sticky; top: 40px; }
.lw-xp-faq__list { border-bottom: 1px solid var(--lw-grey-wordmark); }
.lw-xp-faq__item { border-top: 1px solid var(--lw-grey-wordmark); }
.lw-xp-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 30px 0; cursor: pointer; list-style: none; }
.lw-xp-faq__item summary::-webkit-details-marker { display: none; }
.lw-xp-faq__item summary:focus-visible { outline-offset: -3px; }
.lw-xp-faq__item h3 { font-weight: var(--lw-fw-bold); font-size: 1.5rem; /* 24 */ line-height: 1.25; }
.lw-xp-faq__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--lw-radius); box-shadow: inset 0 0 0 2px var(--lw-white); color: var(--lw-white); transition: background-color .2s var(--lw-ease-out), box-shadow .2s var(--lw-ease-out); }
.lw-xp-faq__minus, .lw-xp-faq__item[open] .lw-xp-faq__plus { display: none; }
.lw-xp-faq__item[open] .lw-xp-faq__minus { display: block; }
.lw-xp-faq__item[open] .lw-xp-faq__icon { background: var(--lw-lime); box-shadow: inset 0 0 0 2px var(--lw-lime); color: var(--lw-black); }
.lw-xp-faq__item summary:hover .lw-xp-faq__icon { box-shadow: inset 0 0 0 2px var(--lw-lime); }
.lw-xp-faq__panel p { padding: 0 76px 36px 0; font-size: 1.25rem; /* 20 */ line-height: 1.55; color: #e6e6e6; text-wrap: pretty; }
.lw-xp-faq__item::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size .3s var(--lw-ease-out), opacity .3s var(--lw-ease-out), content-visibility .3s allow-discrete; }
.lw-xp-faq__item[open]::details-content { block-size: auto; block-size: calc-size(auto, size); opacity: 1; }

/* ---------- 8. Dernier appel ---------- */
.lw-xp-appel { position: relative; isolation: isolate; overflow: hidden; padding: var(--lw-sp-section-end) 0 var(--lw-sp-section-end); }
.lw-xp-appel::before {
  content: ""; position: absolute; left: 50%; top: 40px; width: 1280px; height: 1280px; z-index: -1;
  transform: translateX(-50%); border-radius: 50%; background: var(--lw-gradient-blob); pointer-events: none;
}
.lw-xp-appel__inner { max-width: calc(880px + 2 * var(--lw-gutter)); display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.lw-xp-appel__sign { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lw-xp-appel__sign img { width: 126px; height: 126px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--lw-lime); outline: 3px solid var(--lw-lime); outline-offset: -3px; }
.lw-xp-appel__name { font-weight: var(--lw-fw-semibold); font-size: 1rem; line-height: 1.2; color: var(--lw-black); } /* 15/10 : plus en manuscrit (règle de Maxence : manuscrit seulement avec une flèche) */
.lw-xp-appel__title { font-weight: var(--lw-fw-bold); font-size: var(--lw-fs-display); line-height: var(--lw-lh-display); text-wrap: balance; } /* 13/10 : 52 → 48 (jeton display) */
.lw-xp-appel__text { max-width: 600px; font-size: 1.25rem; /* 20 */ line-height: 1.55; text-wrap: pretty; }
.lw-xp-appel__autres { display: flex; align-items: center; gap: 28px; margin-top: 24px; }
.lw-xp-appel__dot { color: #797979; font-weight: var(--lw-fw-semibold); font-size: 1.125rem; line-height: 1; }

/* ---------- Tablette et mobile (maquette 390) ---------- */
@media (max-width: 1023px) {
  .lw-xp-h2 { font-size: 1.875rem; /* 30 */ line-height: 1.15; }
  .lw-xp-link { font-size: 1.0625rem; /* 17 */ min-height: 44px; }
  .lw-xp-link:not(.lw-xp-link--small) svg { width: 26px; height: 26px; }

  .lw-xp-hero { padding: 24px 0 72px; }
  .lw-xp-hero::before { top: -200px; width: 760px; height: 760px; }
  .lw-xp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .lw-xp-hero__text { gap: 20px; }
  .lw-xp-crumbs ol { gap: 6px 8px; font-size: 0.875rem; /* 14 */ line-height: 1.3; }
  .lw-xp-hero__title { font-size: 2.5rem; /* 40 */ line-height: 1.05; }
  .lw-xp-hero__promise { font-size: 1.375rem; /* 22 */ }
  .lw-xp-hero__intro { font-size: 1.125rem; /* 18 */ }
  .lw-xp-hero__actions { align-items: stretch; gap: 16px; width: 100%; margin-top: 4px; }
  .lw-xp-hero__badge { align-self: flex-start; }
  .lw-xp-hero__visual { margin-right: 6px; }
  .lw-xp-hero__frame { padding: 10px; }
  .lw-xp-hero__frame img { height: 260px; }
  .lw-xp-hero__picto { left: auto; right: -6px; bottom: -34px; width: 67px; height: 56px; }

  .lw-xp-pour { padding: 72px 0; }
  .lw-xp-pour__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .lw-xp-pour__list li { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 20px 0; font-size: 1.125rem; /* 18 */ line-height: 1.4; letter-spacing: 0; }
  .lw-xp-pour__list li > span:last-child { padding-top: 4px; }
  .lw-xp-pour__check { width: 36px; height: 36px; border-radius: 10px; }
  .lw-xp-pour__check svg { width: 20px; height: 20px; }
  .lw-xp-pour__franc { grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: start; margin-top: 36px; padding: 28px 24px; }
  .lw-xp-pour__franc p { font-size: 1.25rem; /* 20 */ line-height: 1.3; letter-spacing: -0.01em; }

  .lw-xp-contenu { padding: 72px 0 80px; }
  .lw-xp-contenu__title { margin-bottom: 36px; }
  .lw-xp-contenu__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-right: 6px; }
  .lw-xp-feature { gap: 14px; padding: 24px 20px 26px; }
  .lw-xp-feature__icon { width: 48px; height: 48px; }
  .lw-xp-feature__icon svg { width: 26px; height: 26px; }
  .lw-xp-feature h3 { font-size: 1.3125rem; /* 21 */ line-height: 1.2; }
  .lw-xp-feature p { font-size: 1rem; /* 16 */ }

  .lw-xp-real { padding: 72px 0 80px; }
  .lw-xp-real .lw-xp-h2 { margin-bottom: 40px; }
  .lw-xp-case, .lw-xp-case--main, .lw-xp-case--second { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lw-xp-case__text { gap: 20px; }
  .lw-xp-case__desc { font-size: 1.0625rem; /* 17 */ }
  .lw-xp-case--main .lw-xp-case__img { height: 280px; }
  .lw-xp-case--main h3 { font-size: 1.75rem; /* 28 */ }
  .lw-xp-case--second { gap: 18px; margin-top: 40px; padding-top: 40px; }
  .lw-xp-case--second .lw-xp-case__img { order: 0; height: 220px; }
  .lw-xp-case--second .lw-xp-case__text { gap: 18px; }
  .lw-xp-case--second h3 { font-size: 1.5rem; /* 24 */ }

  .lw-xp-etapes { padding: 72px 0 80px; }
  .lw-xp-etapes__title { text-align: left; margin-bottom: 36px; }
  .lw-xp-etapes__list { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 0 6px 0 0; background: none; }
  .lw-xp-etapes__list::before { content: ""; position: absolute; left: 30px; top: 20px; bottom: 20px; width: 1px; background: #d0d0d0; }
  .lw-xp-etape { position: relative; margin: 0; }
  .lw-xp-etape__card { gap: 12px; padding: 18px 18px 20px; }
  .lw-xp-etape__head { flex-direction: row; align-items: center; gap: 12px; }
  .lw-xp-etape h3 { font-size: 1.1875rem; /* 19 */ }
  .lw-xp-etape p { line-height: 1.45; }

  .lw-xp-apres { padding: 72px 0 80px; }
  .lw-xp-apres__grid { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
  .lw-xp-apres__text, .lw-xp-apres__card-wrap { display: contents; }
  .lw-xp-apres__text p { font-size: 1.125rem; /* 18 */ }
  .lw-xp-apres__card { order: 1; width: 100%; margin-top: 8px; padding: 12px 24px; }
  .lw-xp-apres__card li { gap: 16px; padding: 18px 0; font-size: 1.125rem; /* 18 */ line-height: 1.25; }
  .lw-xp-apres__card svg { width: 28px; height: 28px; }
  .lw-xp-note { order: 2; position: static; align-self: flex-start; max-width: 350px; margin: -28px 0 0 16px; } /* -28 : annule le gap de 24 px ; la pointe (8 px sous le haut du SVG) arrive 4 px sous la carte */
  .lw-xp-note span { max-width: 280px; }
  .lw-xp-apres__btn { order: 3; width: 100%; margin-top: 0; }

  .lw-xp-faq { padding: 72px 0 80px; }
  .lw-xp-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lw-xp-faq__title { position: static; }
  .lw-xp-faq__item summary { gap: 16px; padding: 22px 0; }
  .lw-xp-faq__item h3 { font-size: 1.1875rem; /* 19 */ line-height: 1.3; letter-spacing: -0.01em; }
  .lw-xp-faq__icon svg { width: 22px; height: 22px; }
  .lw-xp-faq__panel p { padding: 0 0 26px; font-size: 1.0625rem; /* 17 */ }

  .lw-xp-appel { padding: 80px 0 88px; }
  .lw-xp-appel::before { top: 20px; width: 760px; height: 760px; }
  .lw-xp-appel__inner { gap: 24px; }
  .lw-xp-appel__sign { gap: 8px; }
  .lw-xp-appel__sign img { width: 104px; height: 104px; }
  .lw-xp-appel__name { font-size: 1rem; }
  .lw-xp-appel__title { font-size: 1.875rem; /* 30 */ line-height: 1.15; }
  .lw-xp-appel__text { font-size: 1.125rem; /* 18 */ }
  .lw-xp-appel__cta { align-self: stretch; }
  .lw-xp-appel__autres { flex-direction: column; gap: 4px; margin-top: 8px; }
  .lw-xp-appel__dot { display: none; }
}

/* Entre 600 et 1023 : les cartes de contenu passent sur deux colonnes */
@media (min-width: 600px) and (max-width: 1023px) {
  .lw-xp-contenu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Ajouts pour les autres produits (maquette « Site vitrine page build », 25/09) ----------
   Seuls les éléments propres au vitrine sont repris de sa maquette ; tout ce qui est commun garde
   les composants et mesures de la page e-commerce, pour que les trois pages restent homogènes. */

/* Bloc « pas pour vous » : un ou plusieurs liens */
.lw-xp-pour__liens { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* Citation d'un avis Google sous une réalisation */
.lw-xp-quote { display: flex; gap: 20px; align-items: flex-start; margin: 12px 0 0; padding-top: 28px; border-top: 1px solid #3a3a3a; }
.lw-xp-quote__picto { width: 67px; height: 56px; flex: none; }
.lw-xp-quote__body { display: flex; flex-direction: column; gap: 16px; }
.lw-xp-quote blockquote { margin: 0; }
.lw-xp-quote blockquote p { font-weight: var(--lw-fw-bold); font-size: 1.75rem; /* 28 */ line-height: 1.2; letter-spacing: -0.02em; text-wrap: pretty; }
.lw-xp-quote figcaption { font-size: 1rem; /* 16 */ line-height: 1.4; }
.lw-xp-link--lime { color: var(--lw-lime); }
.lw-xp-link--lime span { text-decoration-color: var(--lw-lime); }

/* Mention discrète sous les réalisations */
.lw-xp-real__mention { margin-top: 56px; font-size: 1.125rem; /* 18 */ line-height: 1.5; color: #cfcfcf; }

/* Section propre au produit (Refonte, V1…) : trois colonnes à filet noir */
.lw-xp-bloc { padding: var(--lw-sp-section) 0 var(--lw-sp-section-end); }
.lw-xp-bloc__head { display: flex; flex-direction: column; gap: 24px; } /* 13/10 : max-width 900 retiré (Pierre), titre et intro sur toute la largeur du contenu */
.lw-xp-bloc__head p { font-size: 1.25rem; /* 20 */ line-height: 1.55; text-wrap: pretty; } /* 13/10 : max-width 720 retiré (Pierre) */
.lw-xp-bloc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin-top: 64px; }
.lw-xp-bloc__item { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; border-top: 2px solid var(--lw-black); }
.lw-xp-bloc__item h3 { margin-top: 10px; font-weight: var(--lw-fw-bold); font-size: 1.5rem; /* 24 */ line-height: 1.15; }
.lw-xp-bloc__item p { font-size: 1.125rem; /* 18 */ line-height: 1.5; text-wrap: pretty; }

@media (max-width: 1023px) {
  .lw-xp-quote { gap: 16px; }
  .lw-xp-quote blockquote p { font-size: 1.375rem; /* 22 */ }
  .lw-xp-real__mention { margin-top: 40px; font-size: 1rem; }
  .lw-xp-bloc { padding: 72px 0 80px; }
  .lw-xp-bloc__head p { font-size: 1.125rem; }
  .lw-xp-bloc__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 40px; }
}

/* Pastille blanche (vitrine) dans une section sombre : le texte blanc hérité la rendait illisible */
.lw-xp-case .lw-pill:not(.lw-pill--dark) { color: var(--lw-black); }
/* Captures cadrées sur le coin haut gauche (logo et menu du site client toujours visibles) */
.lw-xp-hero__frame img, .lw-xp-case__img { object-position: left top; }

/* Liens vers les autres produits : pastilles à la surface du produit (idée reprise de la maquette vitrine, 25/09) */
.lw-xp-pill-link { min-height: 48px; gap: 10px; padding: 8px 16px 8px 14px; white-space: nowrap; transition: transform .15s var(--lw-ease-out); }
.lw-xp-pill-link svg { width: 24px; height: 24px; flex: none; }
.lw-xp-pill-link:hover { transform: translateY(-1px); }
.lw-xp-pill-link.lw-pill--dark { border-color: var(--lw-white); }
.lw-xp-pour__franc .lw-xp-pill-link.lw-pill--dark, .lw-xp-appel .lw-xp-pill-link.lw-pill--dark { border-color: var(--lw-black); }
.lw-xp-pour__liens { gap: 14px; }
.lw-xp-appel__autres { flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 20px; }
@media (max-width: 1023px) {
  .lw-xp-appel__autres { flex-direction: row; gap: 12px; margin-top: 8px; }
}

/* ---------- Page Suivi (maquette « Page Suivi en mise en page fluide », 25/09) ----------
   Composants harmonisés avec les pages produits : cartes blanches à bordure et ombre #1B191C,
   pastille d'icône lime 56 px, listes à filet noir de l'offre de la home (18 px, 64 px). */
.lw-xp-presta__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.lw-xp-presta { display: flex; flex-direction: column; gap: 20px; padding: 36px 32px 24px; border-radius: var(--lw-radius); background: var(--lw-white); box-shadow: inset 0 0 0 2px var(--lw-black), var(--lw-shadow-card); }
.lw-xp-presta__head { display: flex; align-items: center; gap: 20px; }
.lw-xp-presta__head .lw-xp-feature__icon { flex: none; }
.lw-xp-presta h4 { font-weight: var(--lw-fw-bold); font-size: 1.5rem; /* 24 */ line-height: 1.15; }
.lw-xp-presta__text { font-size: 1.125rem; /* 18 */ line-height: 1.55; text-wrap: pretty; }
.lw-xp-presta__list li { display: flex; align-items: center; gap: 15px; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--lw-black); font-size: 1.125rem; /* 18 */ line-height: 1.4; }
.lw-xp-presta__list li:last-child { border-bottom-color: transparent; }
.lw-xp-presta__list svg { flex: none; }

.lw-xp-panne { padding: var(--lw-sp-section) 0 var(--lw-sp-section-end); }
.lw-xp-panne__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.lw-xp-panne__text { display: flex; flex-direction: column; gap: 24px; }
.lw-xp-panne__text p { max-width: 540px; font-size: 1.25rem; /* 20 */ line-height: 1.55; text-wrap: pretty; }
.lw-xp-panne__text p.lw-xp-panne__note { font-size: 0.9375rem; line-height: 1.5; opacity: .75; }
.lw-xp-panne__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lw-xp-panne__tile { display: flex; flex-direction: column; gap: 40px; min-height: 300px; padding: 32px 31px; border-radius: var(--lw-radius-tile); background: var(--lw-lime); color: var(--lw-black); }
.lw-xp-panne__tile h3 { margin-top: auto; display: flex; flex-direction: column; gap: 12px; font-weight: var(--lw-fw-bold); font-size: 1rem; /* 16 */ line-height: 1; }
.lw-xp-panne__delai { font-size: 2.25rem; /* 36 */ line-height: 1.1; text-wrap: balance; }

@media (max-width: 1023px) {
  .lw-xp-presta__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-right: 6px; }
  .lw-xp-presta { gap: 14px; padding: 24px 20px 16px; }
  .lw-xp-presta__head { gap: 14px; }
  .lw-xp-presta h4 { font-size: 1.3125rem; /* 21 */ line-height: 1.2; }
  .lw-xp-presta__text, .lw-xp-presta__list li { font-size: 1rem; }
  .lw-xp-panne { padding: 72px 0 80px; }
  .lw-xp-panne__grid, .lw-xp-panne__tiles { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lw-xp-panne__tiles { gap: 20px; }
  .lw-xp-panne__text p { font-size: 1.125rem; }
  .lw-xp-panne__tile { min-height: 220px; gap: 28px; padding: 24px; }
  .lw-xp-panne__delai { font-size: 1.75rem; /* 28 */ }
}
/* Panne : fond gris (surface du suivi), pour ne pas enchaîner deux sections sombres avec les réalisations */
.lw-xp-panne { background: var(--lw-cream); } /* 15/10, DA de la home déclinée : gris → blanc cassé */
.lw-xp-panne__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.lw-xp-panne__tile { box-shadow: inset 0 0 0 2px var(--lw-black), 6px 8px 0 0 #d0d0d0; }
.lw-xp-panne__delai { font-size: 2rem; /* 32 */ }
@media (max-width: 1023px) { .lw-xp-panne__grid { grid-template-columns: minmax(0, 1fr); } .lw-xp-panne__delai { font-size: 1.75rem; } }
.lw-xp-panne__delai { text-wrap: pretty; }

/* ---------- Page Expertises (hub) : en-tête texte seul, puis les cartes de l'offre de la home ---------- */
.lw-xp-hero--hub { padding-bottom: 24px; }
.lw-xp-hero--hub .lw-xp-crumbs { margin-bottom: 28px; }
.lw-xp-hero--hub .lw-xp-hero__intro { margin-top: 28px; }
.lw-offre--hub { padding-top: 40px; }
@media (max-width: 1023px) {
  .lw-xp-hero--hub .lw-xp-crumbs { margin-bottom: 20px; }
  .lw-xp-hero--hub .lw-xp-hero__intro { margin-top: 20px; }
  .lw-offre--hub { padding-top: 24px; }
}

/* ---------- Page Expertises, version « page de choix » (maquette « Maquette page Expertises », 25/09) ---------- */
.lw-xp--hub .lw-xp-hero__title--hub { font-size: 4rem; /* 64 : H1 long, une ligne de moins qu'à 72 */ }
.lw-xp--hub .lw-xp-hero__text { gap: 24px; }

/* Cartes empilées aux surfaces des produits (visuel du hero) */
.lw-xp-stack { position: relative; height: 470px; }
.lw-xp-stack__card {
  position: absolute; left: calc(var(--i) * 72px); top: calc(var(--i) * 40px); width: 360px; height: 300px;
  padding: 18px; border-radius: var(--lw-radius); background: var(--lw-white);
  box-shadow: inset 0 0 0 2px var(--lw-black), var(--lw-shadow-card);
}
.lw-xp-stack__card.lw-card--dark { background: var(--lw-black); box-shadow: inset 0 0 0 2px var(--lw-black), 6px 8px 0 0 #d0d0d0; }
.lw-xp-stack__card .lw-pill--dark { border-color: var(--lw-white); }

/* Trois besoins */
.lw-xp-besoins { padding: 48px 0 var(--lw-sp-section-end); }
.lw-xp-besoins .lw-xp-h2 { margin-bottom: 56px; }
.lw-xp-besoins__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 26px; }
.lw-xp-besoin { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 28px 32px; border-radius: var(--lw-radius); background: var(--lw-white); box-shadow: inset 0 0 0 2px var(--lw-black), var(--lw-shadow-card); }
.lw-xp-besoin.lw-card--dark { background: var(--lw-gradient-dark); color: var(--lw-white); box-shadow: inset 0 0 0 2px var(--lw-black), 6px 8px 0 0 #d0d0d0; }
.lw-xp-besoin.lw-card--dark .lw-pill--dark { border-color: var(--lw-white); }
.lw-xp-besoin h3 { font-weight: var(--lw-fw-bold); font-size: 1.75rem; /* 28 */ line-height: 1.15; text-wrap: balance; }
.lw-xp-besoin__text { font-size: 1.125rem; /* 18 */ line-height: 1.55; text-wrap: pretty; }
.lw-xp-besoin .lw-xp-link { margin-top: auto; }
.lw-xp-besoin.lw-card--lime .lw-xp-besoin__text { color: var(--lw-lime-ink); }
.lw-xp-besoin--suivi { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 64px; align-items: center; }
.lw-xp-besoin--suivi > div { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lw-xp-besoin--suivi .lw-pill { background: var(--lw-white); }

/* Comparatif : trois colonnes-cartes aux surfaces des produits, lignes alignées par sous-grille */
.lw-xp-comparer { background: var(--lw-cream); /* 15/10, DA de la home déclinée : gris → blanc cassé */ padding: var(--lw-sp-section) 0 var(--lw-sp-section-end); }
.lw-xp-comparer .lw-xp-h2 { margin-bottom: 56px; }
.lw-xp-cmp { display: grid; grid-template-columns: 180px repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); column-gap: 26px; }
.lw-xp-cmp__col { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; border-radius: var(--lw-radius); background: var(--lw-white); box-shadow: inset 0 0 0 2px var(--lw-black), var(--lw-shadow-card); }
.lw-xp-cmp__col.lw-card--dark { background: var(--lw-gradient-dark); color: var(--lw-white); box-shadow: inset 0 0 0 2px var(--lw-black), var(--lw-shadow-card); }
.lw-xp-cmp__col--labels { background: none; box-shadow: none; }
.lw-xp-cmp__head { padding: 28px 28px 20px; }
.lw-xp-cmp__head h3 { font-weight: var(--lw-fw-bold); font-size: 1.5rem; /* 24 */ line-height: 1.15; }
.lw-xp-cmp__cell, .lw-xp-cmp__label { padding: 18px 28px; border-top: 1px solid rgb(0 0 0 / .15); font-size: 1.125rem; /* 18 */ line-height: 1.45; text-wrap: pretty; }
.lw-xp-cmp__col.lw-card--dark .lw-xp-cmp__cell { border-top-color: rgb(255 255 255 / .2); }
.lw-xp-cmp__label { padding-left: 0; padding-right: 0; border-top-color: rgb(0 0 0 / .25); font-weight: var(--lw-fw-semibold); font-size: 1rem; color: var(--lw-grey-label); }
.lw-xp-cmp__cell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lw-xp-cmp__cell--prix { font-variant-numeric: tabular-nums; font-weight: var(--lw-fw-bold); font-size: 1.375rem; /* 22 */ line-height: 1.25; }
.lw-xp-cmp__foot { padding: 20px 28px 28px; border-top: 1px solid rgb(0 0 0 / .15); }
.lw-xp-cmp__col.lw-card--dark .lw-xp-cmp__foot { border-top-color: rgb(255 255 255 / .2); }
.lw-xp-cmp__col--labels .lw-xp-cmp__foot { border: 0; }
.lw-xp-cmp__suivi { margin-top: 40px; font-size: 1.125rem; line-height: 1.5; }
.lw-xp-cmp__suivi a { font-weight: var(--lw-fw-semibold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lw-xp-cmp__suivi a:hover { text-decoration-color: var(--lw-lime); }

.lw-xp-bloc__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1279px) {
  .lw-xp-stack__card { width: 300px; height: 250px; left: calc(var(--i) * 48px); }
}
@media (max-width: 1023px) {
  .lw-xp--hub .lw-xp-hero__title--hub { font-size: 2.5rem; }
  .lw-xp-stack { height: 250px; margin-right: 6px; }
  .lw-xp-stack__card { width: 62%; height: 150px; left: calc(var(--i) * 12%); top: calc(var(--i) * 28px); padding: 12px; }
  .lw-xp-besoins { padding: 24px 0 80px; }
  .lw-xp-besoins .lw-xp-h2, .lw-xp-comparer .lw-xp-h2 { margin-bottom: 36px; }
  .lw-xp-besoins__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-right: 6px; }
  .lw-xp-besoin { padding: 24px 20px 26px; gap: 16px; }
  .lw-xp-besoin h3 { font-size: 1.5rem; }
  .lw-xp-besoin__text { font-size: 1rem; }
  .lw-xp-besoin--suivi { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lw-xp-comparer { padding: 72px 0 80px; }
  .lw-xp-cmp { display: flex; flex-direction: column; gap: 28px; padding-right: 6px; }
  .lw-xp-cmp__col { display: block; }
  .lw-xp-cmp__col--labels { display: none; }
  .lw-xp-cmp__head { padding: 22px 20px 16px; }
  .lw-xp-cmp__cell { display: flex; flex-direction: column; gap: 4px; padding: 14px 20px; font-size: 1rem; }
  .lw-xp-cmp__cell-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-weight: var(--lw-fw-semibold); font-size: 0.875rem; opacity: .7; }
  .lw-xp-cmp__cell--prix { font-variant-numeric: tabular-nums; font-size: 1.25rem; }
  .lw-xp-cmp__foot { padding: 14px 20px 20px; }
  .lw-xp-bloc__grid--4 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .lw-xp-bloc__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Hub : H1 à 56 px (cinq lignes à 64 dans la colonne de 560) ; cartes empilées assez décalées pour que chaque pastille reste lisible */
.lw-xp--hub .lw-xp-hero__title--hub { font-size: 3.5rem; line-height: 1.05; }
.lw-xp-stack { height: 460px; }
.lw-xp-stack__card { top: calc(var(--i) * 66px); left: calc(var(--i) * 60px); height: 262px; }
@media (max-width: 1279px) { .lw-xp-stack__card { left: calc(var(--i) * 44px); } }
@media (max-width: 1023px) {
  .lw-xp--hub .lw-xp-hero__title--hub { font-size: 2.5rem; }
  .lw-xp-stack { height: 300px; }
  .lw-xp-stack__card { top: calc(var(--i) * 52px); left: calc(var(--i) * 10%); height: 140px; }
}
.lw-xp-stack__card.lw-card--lime { background: var(--lw-lime); }
.lw-xp-stack__card.lw-card--lime .lw-pill { background: var(--lw-white); }
.lw-xp-stack__card.lw-card--grey { background: var(--lw-off-white); }
.lw-xp-stack__card .lw-pill { white-space: nowrap; }
@media (max-width: 1023px) { .lw-xp-stack__card .lw-pill { font-size: 0.875rem; } }
.lw-xp-cmp__col.lw-card--lime, .lw-xp-besoin.lw-card--lime { background: var(--lw-lime); }
.lw-xp-cmp__col.lw-card--lime .lw-xp-cmp__cell, .lw-xp-cmp__col.lw-card--lime .lw-xp-cmp__foot { border-top-color: rgb(0 0 0 / .2); }

/* Comparatif : l'exemple mène à la fiche Réalisation quand elle est ouverte (lw_realisation_url). */
.lw-xp-cmp__exemple { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lw-xp-cmp__exemple:hover { text-decoration-thickness: 2px; }

/* Audit 08/10 : « Voir l'offre Plateforme sur mesure » sortait de l'écran à 360-390 px (nowrap). */
@media (max-width: 599px) {
  .lw-xp-link, .lw-xp-pill-link { white-space: normal; max-width: 100%; }
  .lw-xp-link span, .lw-xp-pill-link span { min-width: 0; }
  .lw-xp-link svg, .lw-xp-pill-link svg { flex: none; }
}

/* Hub : la carte de devant de la pile montre une capture réelle (arbitrage du 12/10) */
.lw-xp-stack__card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lw-xp-stack__shot { display: block; width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: top center; border-radius: var(--lw-radius-inner); border: 1px solid #d0d0d0; }
@media (max-width: 1023px) { .lw-xp-stack__card { gap: 8px; } }

/* 12/10 : heros produit et pile du hub en mockup de fiche Réalisation (3200 × 2000, fond déjà composé).
   Le mockup s'affiche en entier : pas de recadrage en hauteur fixe (560 / 260 px) comme pour les captures,
   qui couperait le téléphone ou la tablette sur les côtés. Le cadre suit donc le ratio 16/10. */
.lw-xp-hero__frame--mockup img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; }
.lw-xp-stack__shot--mockup { object-position: center; border-color: transparent; }

/* Audit responsive 12/10 */
/* 3. « Voir l'offre Plateforme sur mesure » sortait de la carte lime (42 px à 1024) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .lw-xp-besoin > .lw-xp-link { white-space: normal; text-wrap: balance; }
}
/* 6. H1 sur mobile */
@media (max-width: 599px) {
  .lw-xp-hero__title, .lw-xp--hub .lw-xp-hero__title--hub { font-size: clamp(1.875rem, 6.5vw + 0.5rem, 2.5rem); overflow-wrap: break-word; }
}
/* P3 : longueur de ligne sur tablette (environ 95 caractères à 768-844) */
@media (max-width: 1023px) {
  .lw-xp-hero__intro, .lw-xp-case__desc { max-width: 65ch; }
}

/* Page Suivi (13/10) : ce qui est inclus, puis ce qui s'ajoute. Les cartes « en option » se distinguent par des codes
   lisibles d'un coup d'œil : contour en pointillés, fond gris, sans ombre portée, pastille « En option » posée sur le bord haut, comme une étiquette (dans l'en-tête, elle cassait la ligne du titre). */
.lw-xp-presta__groupe { margin: 0 0 24px; font-weight: var(--lw-fw-bold); font-size: 1.25rem; /* 20 */ line-height: 1.2; }
.lw-xp-presta__grid + .lw-xp-presta__groupe { margin-top: 64px; }
.lw-xp-presta__grid--inclus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lw-xp-presta--option { position: relative; background: var(--lw-off-white); box-shadow: none; border: 2px dashed var(--lw-black); }
.lw-xp-presta__badge { position: absolute; top: -15px; right: 24px; padding: 4px 12px; border-radius: var(--lw-radius-pill); border: 1.5px solid var(--lw-black); background: var(--lw-white); font-weight: var(--lw-fw-semibold); font-size: 0.875rem; line-height: 1.4; white-space: nowrap; }
@media (max-width: 1279px) { .lw-xp-presta__grid--inclus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .lw-xp-presta__grid--inclus { grid-template-columns: minmax(0, 1fr); }
  .lw-xp-presta__grid + .lw-xp-presta__groupe { margin-top: 44px; }
  .lw-xp-presta__badge { right: 16px; }
}

/* Délais d'intervention (13/10, Pierre : trop de vide, délai sur trois lignes) : tuiles en ligne, empilées, sans hauteur
   minimale ; le délai tient sur une ligne au large. */
.lw-xp-panne__tiles { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.lw-xp-panne__tile { flex-direction: row; align-items: center; gap: 24px; min-height: 0; padding: 28px 32px; }
.lw-xp-panne__tile > svg { flex: none; }
.lw-xp-panne__tile h3 { margin-top: 0; gap: 8px; }
.lw-xp-panne__delai { font-size: 1.75rem; /* 28 */ }
@media (max-width: 1023px) {
  .lw-xp-panne__tile { flex-direction: column; align-items: flex-start; gap: 16px; min-height: 0; padding: 24px; }
  .lw-xp-panne__delai { font-size: 1.5rem; /* 24 */ }
}

/* Cartes de la page Suivi (13/10, Pierre : alignement et vide en haut). Le titre de carte est passé en h4 sans remise à
   zéro de sa marge (marges du navigateur) : d'où le vide. Et les blocs s'alignent maintenant d'une carte à l'autre
   (sous-grille : en-tête, texte, liste sur les mêmes lignes), même quand un titre passe sur deux lignes. */
.lw-xp-presta h4 { margin: 0; }
@media (min-width: 1024px) {
  .lw-xp-presta { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 20px; align-content: start; }
}

/* Visuels des cas (13/10, Pierre : captures brutes « bas de gamme ») : mises en scène outils/mockups (16/10, fond teinté
   de la couleur du client, page du cas au premier plan). Affichées entières : pas de hauteur imposée ni de recadrage. */
.lw-xp-case--main .lw-xp-case__img--mockup, .lw-xp-case--second .lw-xp-case__img--mockup { height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; }

/* Cas des pages produit (13/10, Pierre : vide et impression de décalage). Le texte (description + avis) est plus haut que
   le visuel 16/10 : centré, le visuel flottait au milieu d'un grand vide. Il s'aligne maintenant en haut, sur la pastille.
   Essayé puis retiré : visuel sticky pendant la lecture (il glissait le long du texte, effet de décalage). Second cas en deux colonnes égales. */
@media (min-width: 1024px) {
  .lw-xp-case { align-items: start; }
  .lw-xp-case--second { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Cas, suite (13/10) : il restait un grand vide sous le visuel, le texte (description + avis) étant bien plus haut que lui.
   L'avis passe sous le visuel et la description, sur toute la largeur du cas ; visuel et description, de hauteurs voisines,
   restent côte à côte. Le bloc texte est « dissous » (display: contents) pour placer ses enfants dans la grille, sans
   changer le HTML ni l'ordre de lecture : en mobile, rien ne change (visuel, texte, avis).
   Essayé puis écarté : l'avis seul sous le visuel (il commençait plus bas que le visuel et laissait un vide en face). */
@media (min-width: 1024px) {
  .lw-xp-case { row-gap: 24px; }
  .lw-xp-case__text { display: contents; }
  .lw-xp-case__text > * { grid-column: 2; justify-self: start; }
  .lw-xp-case > .lw-xp-case__img { grid-column: 1; grid-row: 1 / span 4; }
  .lw-xp-case__text > .lw-xp-quote { grid-column: 1 / -1; grid-row: 5; justify-self: stretch; margin-top: 16px; }
  .lw-xp-case--second { row-gap: 20px; }
  .lw-xp-case--second .lw-xp-case__text > * { grid-column: 1; max-width: 560px; }
  .lw-xp-case--second > .lw-xp-case__img { grid-column: 2; }
  .lw-xp-case--second .lw-xp-case__text > .lw-xp-quote { grid-column: 1 / -1; max-width: none; }
}

/* L'avis d'un cas fait partie du cas (13/10, Pierre) : sans filet au-dessus, sinon il se lisait comme une nouvelle
   section. Le seul filet reste celui qui sépare deux réalisations. */
.lw-xp-case .lw-xp-quote { padding-top: 0; border-top: 0; }

/* Avis d'un cas (13/10, Pierre : le max-width laissait l'avis collé à gauche avec un vide à droite). L'avis devient un
   encart sur toute la largeur du cas, fond à peine éclairci : il appartient visiblement à la réalisation, et la citation
   occupe la largeur. Auteur à gauche, lien Google à droite, sur une même ligne. */
@media (min-width: 1024px) {
  .lw-xp-case .lw-xp-quote { align-items: center; gap: 32px; padding: 32px 40px; border-radius: var(--lw-radius-tile); background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
  .lw-xp-case .lw-xp-quote__body { flex: 1; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 32px; row-gap: 14px; }
  .lw-xp-case .lw-xp-quote blockquote { flex: 0 0 100%; }
  .lw-xp-case .lw-xp-quote .lw-xp-link { margin-left: auto; }
}
@media (max-width: 1023px) {
  .lw-xp-case .lw-xp-quote { flex-direction: column; gap: 16px; padding: 24px 20px; border-radius: var(--lw-radius); background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); } /* picto au-dessus : la citation garde toute la largeur */
}

/* Revue « cadre commun » (13/10, Pierre) :
   1. Note du Suivi sous le comparatif : elle flottait seule sous le tableau. Encart à la surface du Suivi (gris), aligné
      sur les trois colonnes produit, pastille en tête.
   2. Cas dont le texte est plus court que le visuel (Suivi, FDN) : les lignes de la grille s'étiraient et écartaient
      pastille, titre et texte. Une 5e ligne en 1fr absorbe le surplus ; l'avis passe en 6e ligne. */
.lw-xp-cmp__suivi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 32px 0 0 206px; padding: 20px 28px; border-radius: var(--lw-radius); background: var(--lw-off-white); box-shadow: inset 0 0 0 2px var(--lw-black), var(--lw-shadow-card); }
.lw-xp-cmp__suivi a { margin-left: auto; }
@media (max-width: 1023px) { .lw-xp-cmp__suivi { margin: 28px 6px 0 0; padding: 18px 20px; } .lw-xp-cmp__suivi a { margin-left: 0; } }
@media (min-width: 1024px) {
  .lw-xp-case { grid-template-rows: auto auto auto auto 1fr auto; }
  .lw-xp-case > .lw-xp-case__img { grid-row: 1 / span 5; }
  .lw-xp-case__text > .lw-xp-quote { grid-row: 6; }
}

/* ---------- 15/10 : DA de la home déclinée (étape 2, gabarit page produit et composants Expertises) ----------
   Vert réservé aux boutons, aux points des étiquettes, aux chiffres clés et aux étapes : les cartes et bandeaux verts
   passent en blanc à filet noir, comme les cartes de l'offre de la home. Icônes en tuile blanche à filet (comme le menu). */
.lw-xp-pour__franc { background: var(--lw-white); box-shadow: none; } /* 15/10 (Pierre) : sur fond noir, l'ombre grise faisait un double bord en bas ; carte blanche nette, comme les tuiles des Réalisations de la home */
.lw-xp-feature--lime { background: var(--lw-white); }
.lw-xp-feature--lime p { color: inherit; }
.lw-xp-feature__icon, .lw-xp-feature--lime .lw-xp-feature__icon { background: var(--lw-white); }
.lw-xp-apres__card { background: var(--lw-white); box-shadow: inset 0 0 0 2px var(--lw-black), var(--lw-shadow-card); }
.lw-xp-panne__tile { background: var(--lw-white); box-shadow: inset 0 0 0 2px var(--lw-black), var(--lw-shadow-card); }

/* Dôme de l'appel final (même mécanique que l'offre de la home) : quand l'appel suit une section noire, il monte dedans
   en arc blanc cassé au lieu du rond posé au milieu. Une seule forme : le rond habituel est remplacé, pas empilé. */


/* Le fond du hero remonte sous le header (transparent en haut de page), comme sur la home : pas de bande blanche au-dessus. */
.lw-xp-hero { margin-top: calc(-1 * var(--lw-header-h)); padding-top: calc(56px + var(--lw-header-h)); }
@media (max-width: 1023px) { .lw-xp-hero { padding-top: calc(24px + var(--lw-header-h)); } }

/* ---------- 15/10 : système de fonds (Pierre : « pense à la cohérence de l'ensemble ») ----------
   1. Les sections claires alternent blanc cassé et blanc, jamais deux blanc cassé l'une sous l'autre.
   2. Après une section noire, la section claire monte en dôme blanc cassé (comme l'offre de la home). Seul usage de l'arc.
   3. Le rond reste un rond entier, centré sur ce qu'il met en valeur : dans les heros sur deux colonnes, derrière le
      visuel de droite, loin du texte. Plus de rond coupé par une autre section. */
@media (min-width: 1024px) {
  .lw-xp-hero::before { display: none; }
  .lw-xp-hero__visual, .lw-xp-hero .lw-hb { position: relative; }
  .lw-xp-hero__visual::before, .lw-xp-hero .lw-hb::before { content: ""; position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--lw-cream); z-index: -1; pointer-events: none; }
}
/* Appel final : toujours sur blanc cassé. Après une section noire, en dôme ; sinon en aplat (plus de rond coupé par le footer). */
.lw-xp-appel { background: var(--lw-cream); }
.lw-xp-appel::before { display: none; }
.lw-xp-dark + .lw-xp-appel { background: var(--lw-black); padding-top: calc(var(--lw-sp-section-end) + 40px); }
.lw-xp-dark + .lw-xp-appel::before { display: block; top: 0; width: max(2600px, 190vw); height: auto; aspect-ratio: 1; background: var(--lw-cream); }
/* Contenus d'une offre (pages produit, Suivi) : ils suivent une section noire, ils montent en dôme (titre à gauche : arc plus large). */
.lw-xp-dark + .lw-xp-contenu { position: relative; isolation: isolate; overflow: hidden; background: var(--lw-black); padding-top: 150px; }
.lw-xp-dark + .lw-xp-contenu::before { content: ""; position: absolute; left: 50%; top: 0; width: max(4200px, 260vw); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--lw-cream); z-index: -1; }
@media (max-width: 1023px) { .lw-xp-dark + .lw-xp-contenu { padding-top: 96px; } }
/* Suivi : « en panne » suit le dôme blanc cassé des contenus, il passe en blanc */
.lw-xp-panne { background: var(--lw-white); }

/* 16/10 (Pierre : sections de 6 cartes trop blanches) : les icônes des cartes repassent en tuile lime à filet noir.
   Revient sur l'étape 2 de la déclinaison DA (15/10 : tuiles blanches) pour ces seules icônes ; cartes et bandeaux
   restent blancs. Concerne les cartes de contenu des pages produit et les cartes de prestations du Suivi. */
.lw-xp-feature__icon, .lw-xp-feature--lime .lw-xp-feature__icon { background: var(--lw-lime); }