/* Réalisations : page liste et fiches (archive-realisation.php, single-realisation.php).
   Maquettes Claude Design « Maquettes Realisations pages built » (27/09), valeurs relevées à 1920 et 390.
   Composants communs (fil d'Ariane, pastilles, liens, boutons, dernier appel) : expertises.css. */

.lw-rf-h2 { font-weight: var(--lw-fw-bold); font-size: var(--lw-fs-h2); line-height: var(--lw-lh-h2); letter-spacing: -0.02em; }

/* ---------- Page liste ---------- */
.lw-ra-hero { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 40px; }
.lw-ra-hero::before, .lw-rf-hero::before {
  content: ""; position: absolute; left: 50%; top: -700px; width: 1280px; height: 1280px; z-index: -1;
  transform: translateX(-50%); border-radius: 50%; background: var(--lw-gradient-blob); pointer-events: none;
}
/* 13/10 : en-tête de la liste plus court que les autres, le cercle était coupé à plat. On l'ancre par le bas pour garder sa courbe. */
.lw-ra-hero::before { top: auto; bottom: 24px; }
.lw-ra-hero__surtitle { margin-top: 28px; }
.lw-ra-hero__title { margin-top: 28px; /* 12/10 : sur-titre retiré, même écart que sous le fil d’Ariane du hub et du Studio */ font-weight: var(--lw-fw-bold); font-size: 3.75rem; /* 60 */ line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.lw-ra-hero__intro { margin-top: 24px; font-size: 1.25rem; line-height: 1.55; text-wrap: pretty; }

.lw-ra-projets { padding: 8px 0 var(--lw-sp-section-end); }
.lw-ra-filtres { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.lw-ra-filtre { cursor: pointer; transition: transform .15s var(--lw-ease-out), box-shadow .15s var(--lw-ease-out); }
.lw-ra-filtre.lw-pill--dark { border-color: var(--lw-black); }
.lw-ra-filtre:hover { transform: translateY(-1px); }
/* Filtre actif : l’ombre portée des boutons du design system, pas de second contour (lu comme une double bordure). */
.lw-ra-filtre[aria-pressed="true"] { box-shadow: 3px 4px 0 0 var(--lw-black); transform: translate(-1px, -2px); }
/* Arbitrage du 12/10 : le filtre actif porte une coche à la place du point (l'état ne repose plus sur la seule ombre). */
.lw-ra-filtre[aria-pressed="true"]::before { width: 13px; height: 13px; border-radius: 0; background: var(--lw-black); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.lw-ra-filtre.lw-pill--dark[aria-pressed="true"]::before { background: var(--lw-lime); }
.lw-ra-filtre:focus-visible { outline: 2px solid var(--lw-black); outline-offset: 3px; }

.lw-ra-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.lw-ra-item--une { grid-column: 1 / -1; }
/* Case « D'autres projets en route » : même gabarit qu'une carte, en pointillés, sans visuel */
.lw-ra-avenir { display: flex; flex-direction: column; justify-content: center; gap: 12px; height: 100%; min-height: 320px; padding: 40px; border: 2px dashed var(--lw-black); border-radius: var(--lw-radius); }
.lw-ra-avenir__titre { margin: 0; font-weight: var(--lw-fw-bold); font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; }
.lw-ra-avenir p { max-width: 440px; font-size: 1.125rem; line-height: 1.5; text-wrap: pretty; }
.lw-ra-carte {
  display: flex; flex-direction: column; height: 100%; padding: 10px; border-radius: var(--lw-radius);
  background: var(--lw-white); color: var(--lw-black); box-shadow: inset 0 0 0 2px var(--lw-black), var(--lw-shadow-card);
  transition: transform .2s var(--lw-ease-out), box-shadow .2s var(--lw-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a.lw-ra-carte:hover { transform: translate(-2px, -2px); box-shadow: inset 0 0 0 2px var(--lw-black), 8px 10px 0 0 var(--lw-shadow); } /* 13/10 : la carte se soulève, comme les cartes Offre de la home (avant : enfoncement, à l'inverse) */
  a.lw-ra-carte.lw-card--dark:hover { box-shadow: inset 0 0 0 2px var(--lw-black), 8px 10px 0 0 #d0d0d0; }
}
.lw-ra-carte.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-ra-carte.lw-card--lime { background: var(--lw-lime); }
/* Mises en scène avec leur propre fond (outils/mockups) : l'image remplit le cadre, recadrée au centre. */
.lw-ra-carte__visuel { display: block; aspect-ratio: 16 / 9; border-radius: var(--lw-radius-inner); overflow: hidden; background: var(--lw-off-white); }
.lw-ra-item--une .lw-ra-carte__visuel { aspect-ratio: 21 / 9; }
.lw-ra-carte__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--lw-ease-out); }
@media (hover: hover) and (pointer: fine) { a.lw-ra-carte:hover .lw-ra-carte__visuel img { transform: scale(1.04); } }
.lw-ra-carte__corps { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 64px 16px 10px; }
/* Pastille noire sur carte noire, pastille lime sur carte lime : sans ces deux règles elles disparaissent dans la carte. */
.lw-ra-carte .lw-pill--dark { border-color: var(--lw-white); }
.lw-ra-carte.lw-card--lime .lw-pill--lime { background: var(--lw-white); }
.lw-ra-carte__nom { margin: 4px 0 0; color: inherit; font-weight: var(--lw-fw-bold); font-size: 1.5rem; /* 24 */ line-height: 1.15; letter-spacing: -0.02em; }
.lw-ra-carte__angle { font-size: 1.25rem; /* 20 */ line-height: 1.4; text-wrap: pretty; }
.lw-ra-carte__fleche { position: absolute; right: 10px; bottom: 16px; }
.lw-ra-carte__fleche svg { width: 28px; height: 28px; }
.lw-ra-carte--bientot .lw-ra-carte__angle { opacity: .85; }

/* ---------- Fiche ---------- */
.lw-rf-hero { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 112px; }
.lw-rf-hero__pill { margin-top: 28px; }
.lw-rf-hero__title { max-width: 980px; margin-top: 20px; font-weight: var(--lw-fw-bold); font-size: 3.75rem; /* 60 */ line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.lw-rf-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "texte fiche" "visuel visuel"; gap: 0 64px; align-items: start; }
.lw-rf-hero__texte { grid-area: texte; }
.lw-rf-fiche { grid-area: fiche; margin-top: 28px; }
.lw-rf-hero__client { margin-top: 20px; }
.lw-rf-hero__site { margin-top: 20px; }
/* Fiche d'identité du projet : la carte récapitulative, remontée dans l'en-tête (retour Pierre 29/09), avec le premier appel.
   Même dessin que l'ancienne carte du bas (.lw-rf-recap__card), en plus compact. */
.lw-rf-fiche { padding: 4px 24px 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-rf-fiche__card { margin: 0; }
.lw-rf-fiche__card > div { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--lw-black); }
.lw-rf-fiche__card dt { font-weight: var(--lw-fw-semibold); font-size: 0.9375rem; /* 15 */ line-height: 1.5; }
.lw-rf-fiche__card dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; }
.lw-rf-fiche__card dd a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lw-rf-fiche__card dd a:hover { text-decoration-color: var(--lw-lime); }
.lw-rf-fiche__cta { width: 100%; justify-content: center; margin-top: 20px; }
.lw-rf-hero__client { max-width: 760px; font-size: 1.25rem; line-height: 1.55; text-wrap: pretty; }
.lw-rf-hero__visuel { grid-area: visuel; margin-top: 64px; }
.lw-rf-hero__visuel img { display: block; width: 100%; height: auto; border-radius: var(--lw-radius); }

.lw-rf-chiffres { background: var(--lw-cream); /* 15/10, DA de la home déclinée : gris → blanc cassé */ padding: var(--lw-sp-section) 0; }
.lw-rf-chiffres__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 80px; border-bottom: 1px solid var(--lw-black); }
.lw-rf-chiffres__list li { display: flex; align-items: baseline; gap: 16px; padding: 28px 0; border-top: 1px solid var(--lw-black); font-weight: var(--lw-fw-bold); font-size: 1.75rem; /* 28 */ line-height: 1.2; letter-spacing: -0.02em; text-wrap: pretty; }
.lw-rf-chiffres__list li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lw-lime); box-shadow: 0 0 0 1.5px var(--lw-black); transform: translateY(-4px); }
.lw-rf-chiffres__date { margin-top: 24px; font-size: 0.875rem; line-height: 1.3; color: var(--lw-grey-label); }

.lw-rf-depart { padding: var(--lw-sp-section) 0 64px; }
.lw-rf-depart__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 780px); gap: 20px 80px; align-items: start; }
.lw-rf-depart p { font-size: 1.25rem; line-height: 1.55; text-wrap: pretty; }

.lw-rf-decisions { padding: 0 0 var(--lw-sp-section-end); }
.lw-rf-decisions__title { padding-top: 64px; border-top: 2px solid var(--lw-black); margin-bottom: 112px; }
.lw-rf-decision { display: flex; align-items: center; gap: 32px 96px; }
.lw-rf-decision + .lw-rf-decision { margin-top: 112px; }
.lw-rf-decision--inverse { flex-direction: row-reverse; }
.lw-rf-decision__text { flex: 1 1 340px; max-width: 440px; display: flex; flex-direction: column; gap: 16px; }
.lw-rf-decision__text h3 { font-weight: var(--lw-fw-bold); font-size: 1.75rem; /* 28 */ line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.lw-rf-decision__text p { font-size: 1.25rem; line-height: 1.55; text-wrap: pretty; }
.lw-rf-decision__figure { flex: 2 1 560px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.lw-rf-frame { padding: 10px; border-radius: var(--lw-radius); background: var(--lw-white); box-shadow: inset 0 0 0 2px var(--lw-black), var(--lw-shadow-card); }
.lw-rf-frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--lw-radius-inner); }
.lw-rf-decision__figure figcaption { font-size: 1rem; line-height: 1.35; color: var(--lw-grey-label); }
/* Décision sans capture (en attendant les figures de Pierre) : titre et texte côte à côte, séparés par un filet.
   On force flex-direction: row même en --inverse : alterner gauche/droite n'a de sens qu'avec une image.
   Ce sélecteur à deux classes l'emporte sur la règle mobile en colonne : d'où sa reprise dans le media query. */
.lw-rf-decision--sans-image, .lw-rf-decision--sans-image.lw-rf-decision--inverse { flex-direction: row; align-items: flex-start; }
.lw-rf-decision--sans-image .lw-rf-decision__text { max-width: none; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 780px); gap: 16px 80px; }
.lw-rf-decision--sans-image + .lw-rf-decision--sans-image { margin-top: 56px; padding-top: 56px; border-top: 1px solid rgb(0 0 0 / .15); }

.lw-rf-qui { display: flex; align-items: center; gap: 20px; margin-top: 112px; padding-top: 40px; border-top: 1px solid var(--lw-black); }
.lw-rf-qui img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--lw-lime); }
.lw-rf-qui p { font-size: 1.125rem; line-height: 1.5; text-wrap: pretty; } /* 13/10 : pleine largeur, demande de Pierre */
.lw-rf-qui__sign { margin-left: 6px; font-weight: var(--lw-fw-semibold); font-size: inherit; line-height: inherit; color: var(--lw-black); /* 15/10 : plus en manuscrit */ white-space: nowrap; } /* line-height 0 : la signature, plus grande, n'écarte plus la dernière ligne */

.lw-rf-avis { padding: 120px 0; }
.lw-rf-avis__inner { display: flex; gap: 24px 40px; align-items: flex-start; }
.lw-rf-avis__picto { flex: none; width: 93px; height: 78px; }
.lw-rf-avis figure { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 28px; }
.lw-rf-avis blockquote { margin: 0; }
.lw-rf-avis blockquote p { font-weight: var(--lw-fw-bold); font-size: 2.25rem; /* 36 */ line-height: 1.25; letter-spacing: -0.02em; text-wrap: pretty; }
.lw-rf-avis figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; font-size: 1rem; line-height: 1.3; }

.lw-rf-recap { padding: 72px 0 0; }
.lw-rf-recap__grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 56px 80px; }
.lw-rf-recap__card { flex: 3 1 560px; max-width: 820px; margin: 0; padding: 8px 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-rf-recap__card > div { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 6px 24px; padding: 18px 0; border-bottom: 1px solid var(--lw-black); }
.lw-rf-recap__card > div:last-child { border-bottom: 0; }
.lw-rf-recap__card dt { font-weight: var(--lw-fw-semibold); font-size: 1rem; line-height: 1.5; }
.lw-rf-recap__card dd { margin: 0; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.lw-rf-recap__card dd a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lw-rf-recap__card dd a:hover { text-decoration-color: var(--lw-lime); }
/* Suite de la visite : le projet suivant en grande carte horizontale */
.lw-rf-suite { padding: 96px 0 24px; }
.lw-rf-suite__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: 28px; }
.lw-rf-suite__titre { margin: 0; font-weight: var(--lw-fw-bold); font-size: var(--lw-fs-h3); /* 13/10 : 32 → 24, titre de carte */ line-height: var(--lw-lh-h3); letter-spacing: -0.02em; }
.lw-rf-suite__carte { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; height: auto; }
.lw-rf-suite__carte .lw-ra-carte__corps { align-self: stretch; justify-content: center; gap: 14px; padding: 24px 72px 24px 32px; }
.lw-rf-suite__carte .lw-ra-carte__nom { font-size: 2rem; }
.lw-rf-suite__carte .lw-ra-carte__fleche { right: 24px; bottom: 24px; }

/* ---------- Tablette et mobile (maquettes 390) ---------- */
@media (max-width: 1023px) {
  .lw-rf-h2 { font-size: 1.75rem; /* 28 */ }
  .lw-ra-hero { padding: 24px 0 24px; }
  .lw-ra-hero::before { width: 760px; height: 760px; bottom: 16px; }
  .lw-ra-hero__title, .lw-rf-hero__title { font-size: 2.5rem; /* 40 */ }
  .lw-ra-hero__intro, .lw-rf-hero__client { font-size: 1.125rem; }
  .lw-ra-projets { padding-bottom: 80px; }
  /* Avant le 12/10 : une ligne qui défile (maquette 390), choisie pour garder la première carte au-dessus du pli. Remplacée par le retour à la ligne (arbitrage du 12/10). */
  .lw-ra-filtres { gap: 10px 8px; margin-bottom: 28px; } /* arbitrage du 12/10 : retour à la ligne au lieu d'une rangée coupée qui défile */
  .lw-ra-grille { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-right: 6px; }
  .lw-ra-avenir { min-height: 0; padding: 28px 24px; }
  .lw-ra-item--une .lw-ra-carte__visuel, .lw-ra-carte__visuel { aspect-ratio: 16 / 10; }
  .lw-ra-carte__nom { font-size: 1.3125rem; }
  .lw-ra-carte__angle { font-size: 1.0625rem; }
  .lw-ra-carte__corps { padding: 12px 52px 12px 8px; }

  .lw-rf-hero { padding: 24px 0 64px; }
  .lw-rf-hero__visuel { margin-top: 40px; } /* lot P3 : aligné sur la gouttière du texte (débordait de 12 px) */
  .lw-rf-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "visuel" "fiche"; }
  .lw-rf-fiche { margin-top: 32px; }
  .lw-rf-fiche { padding: 4px 20px 20px; }
  .lw-rf-fiche__card > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lw-rf-chiffres { padding: 56px 0; }
  .lw-rf-chiffres__list { grid-template-columns: minmax(0, 1fr); }
  .lw-rf-chiffres__list li { padding: 20px 0; font-size: 1.375rem; }
  .lw-rf-depart { padding: 72px 0 40px; }
  .lw-rf-depart__grid { grid-template-columns: minmax(0, 1fr); }
  .lw-rf-depart p, .lw-rf-decision__text p { font-size: 1.0625rem; }
  .lw-rf-decisions { padding-bottom: 72px; }
  .lw-rf-decisions__title { padding-top: 40px; margin-bottom: 56px; }
  .lw-rf-decision, .lw-rf-decision--inverse { flex-direction: column; align-items: stretch; }
  /* En colonne, flex-basis (340/560px) devient une hauteur : on l'annule. */
  .lw-rf-decision__text, .lw-rf-decision__figure { flex: none; min-width: 0; }
  /* Bug vu le 27/09 à 390 : sans cette ligne, les décisions « inverse » sans image restaient en ligne et débordaient de 200 px. */
  .lw-rf-decision--sans-image, .lw-rf-decision--sans-image.lw-rf-decision--inverse { flex-direction: column; }
  .lw-rf-decision + .lw-rf-decision { margin-top: 64px; }
  .lw-rf-decision__text h3 { font-size: 1.5rem; }
  .lw-rf-decision--sans-image .lw-rf-decision__text { grid-template-columns: minmax(0, 1fr); }
  .lw-rf-decision--sans-image + .lw-rf-decision--sans-image { margin-top: 40px; padding-top: 40px; }
  .lw-rf-qui { margin-top: 64px; align-items: flex-start; }
  .lw-rf-avis { padding: 72px 0; }
  .lw-rf-avis__inner { flex-direction: column; }
  .lw-rf-avis__picto { width: 67px; height: 56px; }
  .lw-rf-avis blockquote p { font-size: 1.5rem; }
  .lw-rf-recap { padding: 56px 0 0; }
  .lw-rf-recap__card { padding: 4px 20px; }
  .lw-rf-recap__card > div { grid-template-columns: minmax(0, 1fr); }
  .lw-rf-suite { padding: 64px 0 8px; }
  .lw-rf-suite__titre { font-size: 1.625rem; }
  .lw-rf-suite__carte { grid-template-columns: minmax(0, 1fr); }
  .lw-rf-suite__carte .lw-ra-carte__corps { padding: 14px 56px 16px 10px; }
  .lw-rf-suite__carte .lw-ra-carte__nom { font-size: 1.3125rem; }
  .lw-rf-suite__carte .lw-ra-carte__fleche { right: 10px; bottom: 16px; }
}

/* ---------- Lot P3 (12/10) ---------- */
.lw-rf-chiffres__list li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* nombre impair de chiffres : pas de case vide en fin de grille */
.lw-rf-suite__carte.lw-card--dark { background: #111; } /* même fond que les mises en scène sombres : plus de raccord visible */

/* Audit responsive 12/10 */
/* 6. H1 sur mobile : 5 à 8 lignes, « documentaristes » sortait de l'écran à 320 */
@media (max-width: 599px) {
  .lw-ra-hero__title, .lw-rf-hero__title { font-size: clamp(1.875rem, 6.5vw + 0.5rem, 2.5rem); overflow-wrap: break-word; }
}
/* P3 : longueur de ligne des fiches sur tablette */
@media (max-width: 1023px) {
  .lw-rf p:not([class]), .lw-rf-hero__client, .lw-rf-fiche dd { max-width: 65ch; }
}

.lw-rf-hero { margin-top: calc(-1 * var(--lw-header-h)); padding-top: calc(56px + var(--lw-header-h)); } /* fond sous le header transparent */
@media (max-width: 1023px) { .lw-rf-hero { padding-top: calc(24px + var(--lw-header-h)); } }
/* 15/10 : hero des fiches blanc, rond entier derrière la carte « Le projet en bref » (règle 3 du système de fonds) */
@media (min-width: 1024px) {
  .lw-rf-hero::before { display: none; }
  .lw-rf-fiche { position: relative; }
  .lw-rf-fiche::before { content: ""; position: absolute; left: 50%; top: 50%; width: 125%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--lw-cream); z-index: -1; pointer-events: none; }
}