/* =====================================================================
   Réalisations — page générale, pages de catégorie, pages détaillées.
   Voir docs/realisations.md.

   Chargée après prestation-web.css, dont elle réutilise sans les modifier
   le hero, la prose et le CTA final. Tous les éléments propres aux
   réalisations sont préfixés `nc-real-`.

   Couleur pilotée par la catégorie : la classe `nc-real--{id}` (posée
   automatiquement à partir du champ `category` de chaque réalisation)
   définit les variables utilisées par les filets, repères, boutons et
   accents. Aucune nouvelle nuance : uniquement les variables de tokens.css.
     --real-color     couleur dominante de la catégorie ;
     --real-on-color  texte lisible sur cette couleur (contraste AA) :
                      noir sur cyan et jaune, blanc sur magenta ;
     --real-bar       filet 70/15/15 en paliers nets (même règle que les
                      lignes d'accent des pages de prestation, AGENTS.md §12) ;
     --cat-*          variables attendues par les composants partagés de
                      prestation-web.css (repère, bouton du CTA final).
   Le noir et le blanc structurent la page.
   ===================================================================== */

.nc-real--site-internet {
  --real-color: var(--nc-cyan);
  --real-on-color: var(--nc-noir);
  --real-bar: linear-gradient(90deg,
    var(--nc-cyan) 0% 70%,
    var(--nc-magenta) 70% 85%,
    var(--nc-jaune) 85% 100%);
  --cat-color: var(--nc-cyan);
  --cat-accent: var(--nc-cyan);
  --cat-accent-text: var(--nc-noir);
  /* Zones colorées (.nc-real-surface) : règle de Christian pour les fonds
     bleus — titres blancs, texte noir (comme les blocs cyan des
     prestations). */
  --real-surface-title: var(--nc-blanc);
  --real-surface-text: var(--nc-noir);
  --real-surface-hover-bg: var(--nc-noir);
  --real-surface-hover-text: var(--nc-blanc);
}

.nc-real--impression {
  --real-color: var(--nc-jaune);
  --real-on-color: var(--nc-noir);
  --real-bar: linear-gradient(90deg,
    var(--nc-jaune) 0% 70%,
    var(--nc-cyan) 70% 85%,
    var(--nc-magenta) 85% 100%);
  --cat-color: var(--nc-jaune);
  --cat-accent: var(--nc-jaune);
  --cat-accent-text: var(--nc-noir);
  --real-surface-title: var(--nc-noir);
  --real-surface-text: var(--nc-noir);
  --real-surface-hover-bg: var(--nc-noir);
  --real-surface-hover-text: var(--nc-jaune);
}

.nc-real--graphisme {
  --real-color: var(--nc-magenta);
  --real-on-color: var(--nc-blanc);
  --real-bar: linear-gradient(90deg,
    var(--nc-magenta) 0% 70%,
    var(--nc-cyan) 70% 85%,
    var(--nc-jaune) 85% 100%);
  --cat-color: var(--nc-magenta);
  --cat-accent: var(--nc-magenta);
  --cat-accent-text: var(--nc-blanc);
  --real-surface-title: var(--nc-blanc);
  --real-surface-text: var(--nc-blanc);
  --real-surface-hover-bg: var(--nc-blanc);
  --real-surface-hover-text: var(--nc-magenta);
}

/* Filet de catégorie, placé AU-DESSUS d'une image (jamais superposé :
   aucun pixel de l'image n'est masqué). */
.nc-real-bar {
  display: block;
  flex: none;
  height: clamp(6px, .5vw, 11px);
  background: var(--real-bar);
}

/* Domaines : étiquette de la catégorie principale, puis catégories
   associées séparées par « · » (ex. « Impression · Création graphique »). */
.nc-real-domains {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  width: auto;
  margin: 0;
  font: 500 var(--nc-text-meta) var(--nc-police-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-gris-600);
}

.nc-real-domains__sep {
  color: var(--nc-noir);
}

/* Étiquette de la catégorie principale (couleur de la catégorie). */
.nc-real-tag {
  padding: 5px 9px;
  background: var(--real-color);
  color: var(--real-on-color);
}

/* ===== Boutons de catégorie ===== */
.nc-real-cats__list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, .8vw, 14px);
  margin: clamp(4px, .4vw, 10px) 0 0;
  padding: 0;
  list-style: none;
}

.nc-real-cats__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: clamp(10px, .8vw, 16px) clamp(14px, 1.2vw, 24px);
  border: var(--nc-bordure);
  background: var(--nc-blanc);
  color: var(--nc-noir);
  font: 700 var(--nc-text-cta) var(--nc-police-texte);
  transition: background-color var(--nc-transition-rapide), color var(--nc-transition-rapide), box-shadow var(--nc-transition-rapide);
}

.nc-real-cats__mark {
  flex: none;
  width: .7em;
  height: .7em;
  background: var(--real-color);
  transition: background-color var(--nc-transition-rapide);
}

.nc-real-cats__btn:hover,
.nc-real-cats__btn:focus-visible,
.nc-real-cats__btn[aria-current="page"] {
  background: var(--real-color);
  color: var(--real-on-color);
}

.nc-real-cats__btn:hover .nc-real-cats__mark,
.nc-real-cats__btn:focus-visible .nc-real-cats__mark,
.nc-real-cats__btn[aria-current="page"] .nc-real-cats__mark {
  background: var(--real-on-color);
}

/* État actif distinct du survol, sans dépendre de la seule couleur :
   épais trait noir en bas du bouton. */
.nc-real-cats__btn[aria-current="page"] {
  box-shadow: inset 0 -5px 0 var(--nc-noir);
}

/* Mobile : boutons empilés sur toute la largeur, alignés. */
@media (max-width: 559px) {
  .nc-real-cats__list {
    flex-direction: column;
  }

  .nc-real-cats__btn {
    width: 100%;
  }
}

/* ===== Grille de cartes ===== */
.nc-real-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nc-real-grid > li {
  display: flex;
  min-width: 0;
}

@media (min-width: 700px) {
  .nc-real-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .nc-real-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.nc-real-empty {
  max-width: 40rem;
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-gris-600);
}

/* ===== Pagination (« Précédent · 1 · 2 · 3 · Suivant ») ===== */
/* Même famille visuelle que les boutons de catégorie : cadre noir, page
   courante dans la couleur de la catégorie affichée (noir sur la page
   générale) avec le même trait noir en bas, cibles de 44 px minimum. */
.nc-real-pagination {
  margin-top: var(--nc-pad-section-md);
}

.nc-real-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nc-real-pagination__list > li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Séparateur décoratif, ignoré par les lecteurs d'écran (texte alternatif
   vide). */
.nc-real-pagination__list > li + li::before {
  content: "·";
  content: "·" / "";
  font: 700 var(--nc-text-cta) var(--nc-police-texte);
  color: var(--nc-gris-500);
}

.nc-real-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: var(--nc-bordure);
  background: var(--nc-blanc);
  color: var(--nc-noir);
  font: 700 var(--nc-text-cta) var(--nc-police-texte);
  transition: background-color var(--nc-transition-rapide), color var(--nc-transition-rapide);
}

.nc-real-pagination__link:hover,
.nc-real-pagination__link:focus-visible {
  background: var(--nc-noir);
  color: var(--nc-blanc);
}

.nc-real-pagination__link[aria-current="page"] {
  background: var(--real-color, var(--nc-noir));
  color: var(--real-on-color, var(--nc-blanc));
  box-shadow: inset 0 -5px 0 var(--nc-noir);
}

/* ===== Carte ===== */
.nc-real-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: var(--nc-bordure);
  background: var(--nc-blanc);
}

/* Cadre régulier 4:3 pour toutes les cartes. */
.nc-real-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--nc-gris-900);
}

/* Image de carte dédiée (`cardImage`, préparée pour la vignette) : remplit
   le cadre. */
.nc-real-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--nc-transition-douce);
}

/* Secours sans `cardImage` : l'image principale est affichée ENTIÈRE dans
   le cadre (aucun recadrage, aucune déformation), centrée sur un fond
   neutre clair. Une photo 4:3 remplit exactement le cadre ; une capture
   plus large laisse une bande neutre en haut et en bas ; une image
   verticale ou carrée, des bandes latérales. */
.nc-real-card__media--entiere {
  background: var(--nc-gris-200);
}

.nc-real-card__media--entiere img {
  object-fit: contain;
}

.nc-real-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, .8vw, 16px);
  padding: clamp(18px, 1.6vw, 32px);
}

.nc-real-card__title {
  margin: 0;
  font: 700 clamp(1.25rem, 1rem + .6vw, 1.75rem) var(--nc-police-texte);
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.nc-real-card__link,
.nc-real-card__link:hover,
.nc-real-card__link:focus-visible {
  color: var(--nc-noir);
}

/* Lien étendu à toute la carte. */
.nc-real-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.nc-real-card__link:focus-visible {
  outline: none;
}

.nc-real-card__link:focus-visible::after {
  outline: 3px solid var(--nc-cyan);
  outline-offset: 2px;
}

/* Résumé court : texte de carte aligné à gauche (élément court
   d'interface, colonne étroite), taille du corps de texte. */
.nc-real-card__summary {
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-gris-600);
}

.nc-real-card__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--real-color);
  font: 700 var(--nc-text-cta) var(--nc-police-texte);
}

.nc-real-card__link:focus-visible,
.nc-real-card:focus-within .nc-real-card__title a {
  text-decoration: underline;
  text-decoration-color: var(--real-color);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.nc-real-card:focus-within .nc-real-card__more .btn__arrow {
  transform: translateX(4px);
}

@media (hover: hover) {
  .nc-real-card:hover .nc-real-card__title a {
    text-decoration: underline;
    text-decoration-color: var(--real-color);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
  }

  .nc-real-card:hover .nc-real-card__media img {
    transform: scale(1.03);
  }

  .nc-real-card:hover .nc-real-card__more .btn__arrow {
    transform: translateX(4px);
  }
}

/* ===== Page détaillée : partie haute commune ===== */
/* Hero de la page détaillée (`.nc-real-hero--detail`, absent des pages de
   liste) : colonne de texte un peu plus large que l'image et H1 réduit par
   rapport au H1 des prestations — les titres de réalisation sont plus longs
   (client, activité, lieu) et occuperaient sinon cinq ou six lignes. Le H1
   garde la personnalité de `.nc-heading` et reste nettement au-dessus des
   titres de section (`clamp(1.5rem, 2.3vw, 3rem)`). */
.nc-real-hero--detail .nc-presta-hero__text {
  flex: 1.3 1 min(100%, 440px);
}

.nc-real-hero--detail .nc-real-hero__title {
  max-width: 30ch;
  font-size: clamp(1.75rem, 2.5vw, 3.5rem);
}

/* Introduction du hero des réalisations : alignée à gauche à toutes les
   largeurs (exception validée par Christian aux paragraphes justifiés,
   AGENTS.md §5) — la colonne du hero est trop étroite entre 768 et 1200px
   pour une justification sans grands blancs entre les mots. Largeur : toute
   la colonne de texte du hero, comme le H1 (demandé par Christian), au lieu
   de la mesure de 40rem. Taille, couleur et interligne
   (`.nc-presta-hero__intro p`) inchangés, sans césure. Les autres
   paragraphes de la page restent justifiés et gardent leur mesure. */
.nc-real-hero--detail .nc-presta-hero__intro p {
  max-width: none;
  text-align: left;
  text-align-last: auto;
  word-spacing: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Image principale : ratio naturel, toujours entière — équivalent de
   `width: 100%; height: auto`, sans hauteur fixe, sans ratio imposé, sans
   recadrage ni `object-fit`. Deux colonnes sur ordinateur (texte | image,
   image alignée en haut) ; empilement texte puis image en dessous de 820px,
   l'image occupant toute la largeur. */
.nc-real-hero__media {
  flex: 1 1 min(100%, 380px);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

.nc-real-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 819px) {
  .nc-real-hero__media {
    flex-basis: 100%;
    width: 100%;
  }
}

/* Cellule de l'image du hero de la page détaillée : elle occupe toute la
   hauteur du hero et prend la couleur de la catégorie (rose, bleu ou
   jaune). Quand la colonne de texte est plus haute que l'image, l'espace
   sous l'image est donc coloré au lieu de rester blanc. L'image reste en
   haut, entière, à son ratio naturel. */
.nc-real-hero--detail .nc-real-hero__media {
  align-self: stretch;
  background: var(--real-color);
}

/* ===== Effets de page (système d'animation des prestations) =====
   Actifs uniquement avec `animationsEnabled: true` (realisations.json).
   Tout le reste — H1, introduction, révélation des sections au défilement,
   titres par masque, texte décalé, masque coloré des images de section,
   appel à l'action, réduction des mouvements — vient sans copie de
   prestation-web.css / prestation-anim.js. Ne sont ajoutées ici que les
   accroches des éléments propres aux réalisations, avec les animations
   déjà définies par le gabarit des prestations. */
.nc-presta-hero--anim .nc-real-domains {
  animation: nc-presta-up .55s cubic-bezier(.2, .7, .2, 1) .05s both;
}

.nc-presta-hero--anim .nc-real-hero__media {
  overflow: hidden;
  animation: nc-presta-wipe .55s cubic-bezier(.3, .8, .2, 1) .4s both;
}

.nc-presta-hero--anim .nc-real-hero__media img {
  animation: nc-presta-img .68s cubic-bezier(.2, .7, .2, 1) .4s both;
}

/* Filet de catégorie au-dessus des images de section : se dessine pendant
   la révélation, comme `.nc-presta-figure__bar` des prestations. */
.nc-presta-anim [data-reveal] .nc-real-duo__figure .nc-real-bar {
  transform: scaleX(0);
  transform-origin: left center;
}

.nc-presta-anim [data-reveal].is-in .nc-real-duo__figure .nc-real-bar {
  transform: scaleX(1);
  transition: transform .55s cubic-bezier(.4, 0, .15, 1) .22s;
}

@media (prefers-reduced-motion: reduce) {
  .nc-presta-hero--anim .nc-real-domains,
  .nc-presta-hero--anim .nc-real-hero__media,
  .nc-presta-hero--anim .nc-real-hero__media img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* Bouton « Voir le site » : couleur de la catégorie, noir au survol. */
.nc-real-site-link {
  background: var(--real-color);
  color: var(--real-on-color);
}

.nc-real-site-link:hover,
.nc-real-site-link:focus-visible {
  background: var(--nc-noir);
  color: var(--nc-blanc);
}

/* ===== Bandeau « informations du projet » (sous le hero) =====
   Pleine largeur, compact : une zone par information fournie (client,
   localisation, année, prestations réalisées), côte à côte à partir de
   700px avec un filet vertical entre zones, empilées en dessous. Une
   information absente ne produit aucune zone ; les zones restantes se
   partagent la largeur. La zone des prestations est deux fois plus large
   et sa liste revient à la ligne à l'intérieur de sa zone. */
.nc-real-facts-band {
  padding: clamp(18px, 1.8vw, 36px) var(--nc-pad-inline);
}

.nc-real-facts {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.nc-real-facts__item {
  min-width: 0;
  padding: 12px 0;
  border-top: 1px solid var(--nc-gris-300);
}

.nc-real-facts__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.nc-real-facts__item:last-child {
  padding-bottom: 0;
}

@media (min-width: 700px) {
  .nc-real-facts {
    flex-direction: row;
  }

  .nc-real-facts__item {
    flex: 1 1 0;
    padding: 0 clamp(18px, 2vw, 44px);
    border-top: 0;
    border-left: 1px solid var(--nc-gris-300);
  }

  .nc-real-facts__item:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .nc-real-facts__item:last-child {
    padding-right: 0;
  }

  .nc-real-facts__item--services {
    flex-grow: 2;
  }
}

.nc-real-facts__item dt {
  margin-bottom: 6px;
  font: 400 var(--nc-text-meta) var(--nc-police-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nc-gris-600);
}

.nc-real-facts__item dd {
  margin: 0;
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.5;
  color: var(--nc-noir);
}

.nc-real-facts__services {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nc-real-facts__services li {
  position: relative;
  padding-left: 1.1em;
}

.nc-real-facts__services li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .45em;
  height: .45em;
  background: var(--real-color);
}

/* ===== Page détaillée : sections du corps ===== */
/* Chaque section reprend la section générique des prestations
   (`.nc-section.nc-presta-section` : filet noir en haut, mêmes marges
   verticales et latérales). Dispositions (shortcode realisationSection,
   voir docs/realisations.md) :
     --texte          titre à gauche et texte à droite (colonnes
                      équilibrées), images éventuelles en pleine largeur
                      dessous (défaut de tout titre `##`) ;
     --duo            texte sur la couleur de la catégorie + image côte à
                      côte, colonnes égales (`.nc-presta-duo` des
                      prestations), image au ratio naturel, texte avant
                      l'image sur mobile ;
     --mise-en-avant  bloc de conclusion ou de résultat sur la couleur de la
                      catégorie, titre en colonne (`.nc-presta-split`). */

/* --- Contenu Markdown d'une section : mêmes valeurs que `.nc-presta-prose`
   (corps de texte, interligne 1.6, mesure 40rem, justifié) et que les
   titres de section des prestations. --- */
.nc-real-prose {
  display: flex;
  flex-direction: column;
  gap: var(--nc-presta-flow);
  min-width: 0;
}

.nc-real-prose > * {
  margin: 0;
}

.nc-real-prose > h2 {
  max-width: 24ch;
  font: 400 clamp(1.5rem, 2.3vw, 3rem) var(--nc-police-titre);
  line-height: .98;
  letter-spacing: -.05em;
  text-transform: uppercase;
  text-wrap: balance;
}

.nc-real-prose > h3 {
  max-width: var(--nc-presta-measure);
  font: 700 clamp(1.0625rem, 1.15vw, 1.5rem) var(--nc-police-texte);
  letter-spacing: -.02em;
}

.nc-real-prose > h3:not(:first-child) {
  margin-top: calc(var(--nc-presta-flow) * .6);
}

/* Paragraphes éditoriaux : corps de texte, justifiés (dernière ligne à
   gauche), sans césure — AGENTS.md §5. */
.nc-real-prose > p {
  max-width: var(--nc-presta-measure);
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-gris-600);
  text-align: justify;
  text-align-last: left;
}

/* Listes : même rendu que `.nc-presta-list` (puce carrée), puce dans la
   couleur de la catégorie. Listes numérotées : numéros conservés. */
.nc-real-prose > ul,
.nc-real-prose > ol {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, .7vw, 14px);
  max-width: var(--nc-presta-measure);
  padding: 0;
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.5;
  color: var(--nc-gris-600);
}

.nc-real-prose > ul {
  list-style: none;
}

.nc-real-prose > ul > li {
  position: relative;
  padding-left: 1.5em;
}

.nc-real-prose > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .5em;
  height: .5em;
  background: var(--real-color);
}

.nc-real-prose > ol {
  padding-left: 1.5em;
}

.nc-real-prose > ol > li::marker {
  color: var(--nc-noir);
  font-weight: 700;
}

/* Liens internes contextuels (liens Markdown dans les paragraphes et les
   listes) : même principe que `.link-underline` des prestations — texte
   noir en gras, trait épais de la couleur de la catégorie ; au survol et au
   focus, surlignage plein de la couleur de la catégorie (texte noir sur
   bleu/jaune, blanc sur magenta : contraste AA). Focus clavier : contour
   global du site en plus. Même rendu pour les liens de l'introduction du
   hero (06/10/2026). */
.nc-real-prose a,
.nc-real-hero--detail .nc-presta-hero__intro a {
  color: var(--nc-noir);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--real-color);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
  transition: background-color var(--nc-transition-rapide), color var(--nc-transition-rapide);
}

.nc-real-prose a:hover,
.nc-real-prose a:focus-visible,
.nc-real-hero--detail .nc-presta-hero__intro a:hover,
.nc-real-hero--detail .nc-presta-hero__intro a:focus-visible {
  background: var(--real-color);
  color: var(--real-on-color);
}

/* Images et galeries dans le texte : un peu plus d'air au-dessus que
   l'espacement entre paragraphes. */
.nc-real-prose > .nc-real-figure,
.nc-real-prose > .nc-real-galerie {
  margin-top: calc(var(--nc-presta-flow) * .6);
}

/* --- Section « texte » avec titre : titre en colonne de gauche, texte en
   colonne de droite, colonnes équilibrées (`.nc-presta-split` des
   prestations, proportions 1/1 au lieu de 22rem/1fr pour occuper toute la
   largeur) ; images et galeries ensuite en pleine largeur. Sur mobile :
   titre, texte, puis images. --- */
@media (min-width: 820px) {
  .nc-real-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.nc-real-split > .nc-presta-split__head:only-child {
  grid-column: 1 / -1;
}

.nc-real-section__media {
  margin-top: clamp(24px, 2.4vw, 48px);
}

/* --- Zones sur la couleur de la catégorie (`.nc-real-surface`) : colonne
   de texte des sections avec image, bloc mis en valeur. Couleurs définies
   par catégorie (variables --real-surface-*) :
     Sites internet (cyan) : titres blancs, texte noir (règle de Christian) ;
     Impression (jaune)    : titres et texte noirs ;
     Graphisme (magenta)   : titres et texte blancs. --- */
.nc-real-surface {
  background: var(--real-color);
  color: var(--real-surface-text);
}

.nc-real-page .nc-real-surface :is(h2, h3) {
  color: var(--real-surface-title);
}

.nc-real-page .nc-real-surface :is(p, ul, ol, li, a) {
  color: var(--real-surface-text);
}

.nc-real-page .nc-real-surface li::before {
  background: var(--real-surface-text);
}

.nc-real-page .nc-real-surface a {
  text-decoration-color: var(--real-surface-text);
}

/* Liens sur une zone colorée : surlignage au survol et au focus — noir
   avec texte blanc sur cyan, noir avec texte jaune sur jaune, blanc avec
   texte magenta sur magenta. */
.nc-real-page .nc-real-surface a:hover,
.nc-real-page .nc-real-surface a:focus-visible {
  background: var(--real-surface-hover-bg);
  color: var(--real-surface-hover-text);
}

.nc-real-page .nc-real-surface a:focus-visible {
  outline-color: var(--real-on-color);
}

/* --- Disposition texte + image (`image-droite` / `image-gauche`) ---
   Structure et règles de `.nc-presta-duo` (prestation-web.css) : colonnes
   égales, texte avant l'image sur mobile. Colonne de texte sur la couleur
   de la catégorie (`.nc-real-surface`), avec sa propre marge intérieure ;
   sur ordinateur, elle occupe toute la hauteur de la section, bord à bord
   du côté extérieur, et touche l'image. Image au ratio naturel (jamais
   recadrée ni filtrée), centrée verticalement, filet de catégorie
   au-dessus. */
.nc-real-section--duo .nc-presta-duo__text {
  padding: clamp(24px, 6vw, 40px) clamp(20px, 5vw, 32px);
}

/* Option « blanc », ordinateur (08/10/2026, demande de Christian) : l'image
   s'élargit jusqu'à l'alignement des colonnes des blocs voisins (50 % + la
   moitié de l'écart de `.nc-presta-split`) — plus haute, elle rejoint mieux
   les sections situées au-dessus et en dessous. */
@media (min-width: 820px) {
  .nc-real-section--duo-blanc .nc-real-duo__figure {
    flex: 0 0 calc(50% + clamp(28px, 3vw, 72px) / 2);
  }
}

/* Ajustement « remplir » (08/10/2026, exception validée par Christian pour
   la Menuiserie Bareau) : sur ordinateur, l'image occupe toute la hauteur
   de la section, recadrée sur les côtés (object-fit: cover, sans
   déformation) lorsque le texte est plus haut qu'elle ; aucune bande
   blanche au-dessus ni au-dessous. Mobile : image entière, inchangée. */
@media (min-width: 820px) {
  .nc-real-duo__figure.nc-real-duo__figure--remplir {
    align-self: stretch;
  }

  .nc-real-duo__figure--remplir img {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    object-fit: cover;
  }
}

/* Option « blanc » (06/10/2026) : colonne de texte sur fond blanc, couleurs
   des sections blanches. Sur mobile, sans bloc coloré à délimiter, le texte
   reprend l'alignement des autres sections (pas de marge intérieure). */
@media (max-width: 819px) {
  .nc-real-section--duo-blanc .nc-presta-duo__text {
    padding: 0;
  }
}

.nc-real-duo__figure {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

.nc-real-duo__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Légende facultative de l'image d'une section avec image (06/10/2026).
   Mobile : sous l'image, style des légendes du corps. Ordinateur
   (07/10/2026, demande de Christian) : écrite sur l'image, en bas, sur un
   bandeau noir translucide (texte blanc), pour ne pas laisser de bande
   blanche entre l'image et la section suivante. */
@media (min-width: 820px) {
  .nc-real-duo__figure:has(.nc-real-duo__caption) {
    position: relative;
  }

  /* Bandeau ajusté au texte (quelques pixels d'air autour), posé en bas à
     gauche de l'image, aligné sur la marge latérale de la page. */
  .nc-real-duo__figure .nc-real-duo__caption {
    position: absolute;
    left: var(--nc-pad-inline);
    bottom: clamp(12px, 1.2vw, 20px);
    width: fit-content;
    max-width: calc(100% - 2 * var(--nc-pad-inline));
    margin: 0;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--nc-noir) 72%, transparent);
    color: var(--nc-blanc);
  }
}

@media (min-width: 820px) {
  .nc-real-section--duo .nc-presta-duo {
    gap: 0;
  }

  .nc-real-section--duo .nc-presta-duo__text {
    padding: var(--nc-pad-section-lg) var(--nc-pad-inline);
  }

  .nc-real-duo__figure {
    flex: 1 1 0;
    align-self: center;
  }
}

/* --- Bloc mis en valeur (`mise-en-avant`) : section entière sur la couleur
   de la catégorie (`.nc-real-surface`), titre à gauche et texte à droite
   sur ordinateur, en colonnes égales comme les sections texte
   (`.nc-presta-split.nc-real-split`). --- */
.nc-real-section--mise-en-avant .nc-real-prose > h2 {
  max-width: none;
}

/* Sans titre `##`, le texte occupe toute la grille (pas de colonne de
   titre vide). */
.nc-real-section--mise-en-avant .nc-presta-split__body:only-child {
  grid-column: 1 / -1;
}


/* Image isolée (shortcode realisationImage) : ratio naturel, jamais
   recadrée ni agrandie au-delà de sa taille réelle. La hauteur est plafonnée
   à la fenêtre pour qu'une image verticale reste visible d'un coup d'œil :
   la largeur se réduit alors proportionnellement (aucun recadrage). */
.nc-real-figure img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 90vh;
}

.nc-real-figure__caption {
  max-width: var(--nc-presta-measure);
  margin-top: 10px;
  font: 400 var(--nc-text-secondary) var(--nc-police-texte);
  line-height: 1.5;
  color: var(--nc-gris-600);
}

/* Galerie (shortcode realisationGalerie) : 2 colonnes à partir de 700px
   (2 images côte à côte, 4 images en 2 × 2), 1 colonne en dessous ; chaque
   image garde son ratio naturel (horizontale, verticale, carrée ou 4:3). */
.nc-real-galerie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 36px);
  align-items: start;
}

@media (min-width: 700px) {
  .nc-real-galerie {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.nc-real-galerie .nc-real-figure img {
  width: 100%;
  max-height: none;
}

/* Effet au survol des images du contenu (galeries et images isolées),
   dans l'esprit des cartes de réalisation : léger zoom de l'image dans son
   cadre et filet de la catégorie (paliers 70/15/15) qui se dessine en bas.
   Au repos, l'image est entière et non recadrée ; l'effet est temporaire et
   reste contenu dans le cadre de l'image (la légende n'est jamais
   recouverte). Dispositifs à survol réel uniquement ; sans zoom avec la
   réduction des mouvements. */
.nc-real-figure__media {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
}

.nc-real-galerie .nc-real-figure__media {
  width: 100%;
}

.nc-real-figure__media img {
  display: block;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.nc-real-figure__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(5px, .45vw, 9px);
  background: var(--real-bar);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.4, 0, .15, 1);
  pointer-events: none;
}

@media (hover: hover) {
  .nc-real-figure:hover .nc-real-figure__media img {
    transform: scale(1.04);
  }

  .nc-real-figure:hover .nc-real-figure__media::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nc-real-figure:hover .nc-real-figure__media img {
    transform: none;
  }
}

/* Repère du CTA final sur fond noir : le magenta y reste sous le seuil de
   contraste AA pour un texte de 13 px ; affiché en blanc pour Graphisme. */
.nc-real--graphisme .nc-presta-cta .nc-presta-section__eyebrow {
  color: var(--nc-blanc);
}