/* =====================================================================
   Gabarit des pages « 01 Sites Internet » (prestation Web).

   Prolonge le système visuel de l'accueil : mêmes polices, mêmes tokens
   (`--nc-text-*`, `--nc-pad-*`, couleurs, `--nc-bordure`,
   `--nc-transition-rapide`, `--nc-mesure`), mêmes composants globaux
   (`.nc-heading`, `.btn*`, `.link-underline*`, `.nc-section`).

   Valeurs propres au gabarit (justifiées dans le compte rendu) :
   - `--nc-presta-flow`  : rythme vertical interne d'un bloc (gap).
   - `.nc-presta-section__title { font-size }` : les H2 d'une page
     intérieure très sectionnée descendent d'un cran sous le H1 tout en
     gardant la personnalité de `.nc-heading` (famille, casse,
     interlettrage, interligne).
   - tailles décoratives des numéros (hero /étapes) : per-composant,
     comme le fait déjà accueil.css (`.nc-service__number`,
     `.nc-method__number`…).
   ===================================================================== */

.nc-presta-hero,
.nc-presta-section,
.nc-presta-cta {
  --nc-presta-flow: clamp(13px, 1.1vw, 24px);
  /* Mesure de lecture UNIQUE du gabarit, en `rem` fixes (jamais en `ch` :
     un plafond en `ch` se recalcule sur la taille de police propre à
     chaque paragraphe et donnerait des largeurs différentes selon la
     taille du texte — problème déjà rencontré sur l'accueil). Tous les
     paragraphes de lecture d'une même colonne partagent ainsi exactement
     la même largeur. Valeur alignée sur `.nc-service__description` de
     l'accueil (38rem), très légèrement élargie. */
  --nc-presta-measure: 40rem;
}

/* ---------------------------------------------------------------------
   Alignement des paragraphes éditoriaux — voir AGENTS.md §5
   « Invariants typographiques des textes courants ».

   Choix graphique validé : les paragraphes éditoriaux des blocs de contenu
   sont justifiés à TOUTES les résolutions (desktop, tablette, mobile),
   dernière ligne alignée à gauche. Règle unique, sans condition de largeur
   de fenêtre, de largeur de colonne ni de type de bloc. Ne concerne ni les
   titres, ni les repères, ni les numéros, ni les boutons/liens, ni les
   questions de FAQ (`<summary>`), ni les listes à puces. */
.nc-presta-hero__intro p,
.nc-presta-prose p,
.nc-presta-step__body,
.nc-presta-faq__a p,
.nc-presta-cta__content p,
.nc-presta-info-grid__intro,
.nc-presta-info-grid__outro,
.nc-presta-info-grid__part p {
  text-align: justify;
  text-align-last: left;
}

/* Protection contre la césure automatique — appliquée à tous les
   paragraphes éditoriaux et aux listes, à toutes les résolutions.
   Un mot comme « activité », « visiteurs » ou « répétitives » ne doit
   jamais être coupé par un tiret pour remplir une ligne. */
.nc-presta-hero p,
.nc-presta-section p,
.nc-presta-section li,
.nc-presta-cta p {
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
}

/* ===== Hero ===== */
.nc-presta-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.nc-presta-hero__text {
  flex: 1 1 min(100%, 440px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--nc-presta-flow);
  padding: clamp(26px, 2.8vw, 68px) var(--nc-pad-inline);
}

/* Fil d'Ariane intégré au hero (`components/breadcrumbs.njk`, variante
   "hero") : au-dessus du repère de catégorie, dans la même colonne déjà
   paddée par `.nc-presta-hero__text` — sans cela le composant garderait son
   padding autonome de bande pleine largeur (`.nc-breadcrumbs`) et créerait
   un double espacement. Le hero commence ainsi immédiatement sous le
   header, sans bande blanche intermédiaire. */
.nc-breadcrumbs--hero {
  padding: 0;
}

.nc-presta-hero__eyebrow {
  font: 400 var(--nc-text-meta) var(--nc-police-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cat-color, var(--nc-cyan));
}

.nc-presta-hero__title {
  font-size: clamp(2rem, 3.6vw, 4.75rem);
  max-width: 18ch;
  text-wrap: balance;
}

.nc-presta-hero__intro {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, .9vw, 18px);
}

/* Introduction du hero : traitée exactement comme les paragraphes de
   lecture du reste de la page (`.nc-presta-prose p`) — même taille
   `--nc-text-body`, même couleur, même interligne, même largeur fixe en
   `rem`, justifiée avec dernière ligne à gauche. Les deux paragraphes
   sont donc strictement identiques, y compris à l'œil (bords gauche ET
   droit alignés). */
.nc-presta-hero__intro p {
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-gris-600);
  width: 100%;
  max-width: var(--nc-presta-measure);
}

/* Prix d'appel optionnel du hero (`hero.priceNote`) : accroche courte,
   donc `--nc-text-lead` comme le sous-titre du hero de l'accueil — pas
   `--nc-text-body`, réservé aux paragraphes de lecture. */
.nc-presta-hero__price {
  margin: 0;
  font: 700 var(--nc-text-lead) var(--nc-police-texte);
  color: var(--nc-noir);
}

.nc-presta-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.2vw, 26px);
  margin-top: clamp(4px, .4vw, 10px);
}

/* Le CTA principal du hero est une action générale de prise de contact
   (comme « Décrivez votre projet ») : au repos il garde l'état sombre
   commun (`.btn--dark`), mais au survol / focus il prend le violet flash
   déjà réservé aux actions générales du site (`--nc-violet`), au lieu du
   magenta de `.btn--dark`. Texte en noir pour conserver le contraste sur
   ce violet clair. La transition est celle héritée de `.btn`. */
.nc-presta-hero__cta-primary:hover,
.nc-presta-hero__cta-primary:focus-visible {
  background: var(--nc-violet);
  color: var(--nc-noir);
}

.nc-presta-hero__media {
  flex: 1 1 min(100%, 380px);
  position: relative;
  background: var(--nc-noir);
  overflow: hidden;
  /* même boîte image que le hero de l'accueil (.nc-hero__media) */
  min-height: clamp(300px, 25vw, 640px);
}

.nc-presta-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Filet tricolore : 70 % cyan, 15 % magenta, 15 % jaune - meme degrade
   que .nc-presta-figure__bar, applique ici au filet du hero. */
.nc-presta-hero__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(6px, .5vw, 11px);
  background: linear-gradient(90deg,
    var(--nc-cyan) 0% 70%,
    var(--nc-magenta) 70% 85%,
    var(--nc-jaune) 85% 100%);
  z-index: 1;
}

/* Variante Imprimerie (catégorie 02) : 70 % jaune, 15 % cyan, 15 % magenta —
   voir AGENTS.md, « Lignes d'accent tricolores des pages de prestation ». */
.nc-presta-hero__bar--02 {
  background: linear-gradient(90deg,
    var(--nc-jaune) 0% 70%,
    var(--nc-cyan) 70% 85%,
    var(--nc-magenta) 85% 100%);
}

/* Variante Création graphique (catégorie 03) : 70 % magenta, 15 % cyan,
   15 % jaune — voir AGENTS.md, « Lignes d'accent tricolores des pages de
   prestation ». */
.nc-presta-hero__bar--03 {
  background: linear-gradient(90deg,
    var(--nc-magenta) 0% 70%,
    var(--nc-cyan) 70% 85%,
    var(--nc-jaune) 85% 100%);
}

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

/* ===== Section générique ===== */
.nc-presta-section {
  padding: var(--nc-pad-section-lg) var(--nc-pad-inline);
}

.nc-presta-section__title {
  font-size: clamp(1.5rem, 2.3vw, 3rem);
  max-width: 24ch;
  text-wrap: balance;
}

.nc-presta-section--cyan {
  background: var(--nc-cyan);
}

.nc-presta-section--cyan .nc-heading {
  color: var(--nc-blanc);
}

.nc-presta-section--cyan .nc-presta-section__eyebrow {
  color: var(--nc-blanc);
}

/* Variante Imprimerie (fond jaune) : texte noir obligatoire pour le
   contraste — contrairement au cyan, le jaune ne supporte pas un titre
   blanc (voir AGENTS.md, ligne d'accent tricolore / dominante Imprimerie). */
.nc-presta-section--jaune {
  background: var(--nc-jaune);
}

.nc-presta-section--jaune .nc-heading {
  color: var(--nc-noir);
}

.nc-presta-section--jaune .nc-presta-section__eyebrow {
  color: var(--nc-noir);
}

/* Variante Création graphique (fond magenta) : texte blanc uniforme (titre,
   repère et paragraphes courants) — le magenta offre un contraste correct
   aussi bien en noir qu'en blanc, mais un seul traitement uniforme respecte
   l'invariant typographique « même couleur pour deux paragraphes du même
   bloc » (voir AGENTS.md) sans reproduire l'atténuation « ton sur ton » du
   deuxième paragraphe utilisée sur cyan/jaune. */
.nc-presta-section--magenta {
  background: var(--nc-magenta);
}

.nc-presta-section--magenta .nc-heading {
  color: var(--nc-blanc);
}

.nc-presta-section--magenta .nc-presta-section__eyebrow {
  color: var(--nc-blanc);
}

.nc-presta-section--dark {
  background: var(--nc-noir);
  color: var(--nc-blanc);
}

/* --- Paragraphes : même aspect que les paragraphes de l'accueil
   (taille `--nc-text-body`, interligne 1.6, justifiés + dernière ligne à
   gauche via la règle groupée plus haut, largeur `--nc-presta-measure`
   identique pour tous). --- */
.nc-presta-prose {
  display: flex;
  flex-direction: column;
  gap: var(--nc-presta-flow);
  max-width: var(--nc-presta-measure);
}

.nc-presta-prose p {
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-gris-600);
  width: 100%;
}

/* Sous-titre court introduisant un paragraphe (`block.items[].title`) :
   même taille que le corps de texte, mais gras + majuscules pour se
   distinguer du paragraphe qui suit — non justifié, comme les titres et
   repères (voir AGENTS.md, invariants typographiques). */
.nc-presta-prose p.nc-presta-prose__item-title {
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
}

.nc-presta-section--cyan .nc-presta-prose p {
  color: var(--nc-noir);
}

.nc-presta-section--cyan .nc-presta-prose p + p {
  color: var(--nc-cyan-texte-fonce);
  font-size: var(--nc-text-secondary);
}

.nc-presta-section--jaune .nc-presta-prose p {
  color: var(--nc-noir);
}

.nc-presta-section--jaune .nc-presta-prose p + p {
  color: var(--nc-jaune-texte);
}

/* Bloc #conseil (page Flyers) : les deux paragraphes doivent rester de la
   même couleur noire — le second n'a pas le rôle d'un texte secondaire ici,
   contrairement au traitement par défaut des autres blocs jaunes. Correction
   ciblée par id, sans toucher aux autres blocs `tone: "jaune"`. */
#conseil .nc-presta-prose p + p {
  color: var(--nc-noir);
}

/* Bouton du même bloc #conseil (fond jaune) : survol/focus en blanc et
   texte noir, demandé explicitement — remplace le survol magenta par
   défaut de `.btn--dark`, moins lisible ici sur fond jaune. */
#conseil .btn--dark:hover,
#conseil .btn--dark:focus-visible {
  background: var(--nc-blanc);
  color: var(--nc-noir);
}

.nc-presta-section--magenta .nc-presta-prose p {
  color: var(--nc-blanc);
}

.nc-presta-section--dark .nc-presta-prose p {
  color: var(--nc-gris-400);
}

/* Encart tarifaire #tarif-site-vitrine (page Sites Internet) : titre bleu
   sur fond noir et corps blanc, demandé explicitement — diffère du
   traitement "dark" par défaut ci-dessus (titre blanc hérité, corps gris
   clair), propre à cet encart précis. */
#tarif-site-vitrine .nc-heading {
  color: var(--cat-color);
}

#tarif-site-vitrine .nc-presta-prose p {
  color: var(--nc-blanc);
}

/* Bloc #presentation-ecrans (page Sites Internet) : fond cyan avec texte
   blanc uniforme (titres et paragraphes), demandé explicitement — diffère
   du traitement "cyan" par défaut (texte noir, second paragraphe atténué
   en cyan foncé) réservé aux autres blocs `tone: "cyan"`. Même logique que
   #conseil pour le jaune : override ciblé par id, sans toucher à la règle
   générale. */
#presentation-ecrans .nc-presta-prose p,
#presentation-ecrans .nc-presta-prose p + p {
  color: var(--nc-blanc);
  font-size: var(--nc-text-body);
}

/* Filet séparant les deux colonnes d'un bloc `pair` teinté (#presentation-
   ecrans, #conserver-clarifier sur la page Refonte) : gris clair par
   défaut, peu lisible sur fond cyan — éclairci pour les deux. */
#presentation-ecrans .nc-presta-pair__col + .nc-presta-pair__col,
#conserver-clarifier .nc-presta-pair__col + .nc-presta-pair__col {
  border-color: rgba(255, 255, 255, .45);
}

/* --- Liste de points --- */
.nc-presta-list {
  margin: clamp(4px, .4vw, 10px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, .7vw, 14px);
  max-width: var(--nc-presta-measure);
}

.nc-presta-list li {
  position: relative;
  padding-left: 1.5em;
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.5;
  color: var(--nc-gris-600);
}

.nc-presta-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .5em;
  height: .5em;
  background: var(--nc-cyan);
}

/* Bloc « Les principales corrections possibles » : liste sur deux colonnes
   équilibrées à partir du desktop (une seule colonne en dessous, comportement
   par défaut de `.nc-presta-list`), puces magenta cohérentes avec l'univers
   Création graphique de la page — demandé explicitement pour ce bloc, sans
   toucher au style par défaut de `.nc-presta-list` utilisé ailleurs. */
#corrections-possibles .nc-presta-list {
  max-width: 84rem;
  gap: clamp(10px, 1vw, 20px) clamp(24px, 2.4vw, 48px);
}

#corrections-possibles .nc-presta-list li::before {
  background: var(--nc-magenta);
}

/* Liste sur fond cyan (07/10/2026, bloc #interlocuteur-services de la page
   Hébergement et maintenance passé en `tone: "cyan"`) : texte et puces
   noirs, comme les paragraphes des blocs cyan — le gris et la puce cyan par
   défaut n'étaient pas lisibles sur ce fond. */
.nc-presta-section--cyan .nc-presta-list li {
  color: var(--nc-noir);
}

.nc-presta-section--cyan .nc-presta-list li::before {
  background: var(--nc-noir);
}

@media (min-width: 820px) {
  #corrections-possibles .nc-presta-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Lien secondaire optionnel en fin de bloc `content` (`block.cta`) —
   même composant `.link-underline` que le hero, couleur de catégorie, sauf
   `cta.style: "dark"/"light"` qui le transforme en bouton (`.btn`) pour un
   CTA plus visible dans le texte courant. */
.nc-presta-prose__cta {
  margin: clamp(4px, .6vw, 12px) 0 0;
}

/* Repère optionnel (`block.eyebrow` / `presta.finalCta.eyebrow`) au-dessus
   d'un H2 de section — même composant visuel que le repère de catégorie du
   hero (`.nc-presta-hero__eyebrow`), réutilisé tel quel plutôt qu'un nouveau
   style. Sans marge propre : dans les conteneurs flex à `gap`
   (`.nc-presta-duo__text`, `.nc-presta-cta__content`) l'espacement vient du
   `gap` ; les conteneurs en flux normal (pas de `gap`) reçoivent une marge
   basse explicite ci-dessous, à la même valeur que ce `gap`. */
.nc-presta-section__eyebrow {
  margin: 0;
  font: 400 var(--nc-text-meta) var(--nc-police-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cat-color, var(--nc-cyan));
}

.nc-presta-split__head .nc-presta-section__eyebrow,
.nc-presta-info-grid > .nc-presta-section__eyebrow,
.nc-presta-steps > .nc-presta-section__eyebrow,
.nc-presta-faq > .nc-presta-section__eyebrow {
  margin-bottom: var(--nc-presta-flow);
}

/* H3 optionnel (`block.subheading`) qui prolonge un bloc `content` dans la
   même colonne sans ouvrir une nouvelle section — même gabarit typo que les
   sous-titres `info-grid`/`cyan-group`. */
.nc-presta-prose__subheading {
  margin: 0;
  font: 700 clamp(1.0625rem, 1.15vw, 1.5rem) var(--nc-police-texte);
  letter-spacing: -.02em;
}

/* --- Bloc texte seul : titre en colonne, texte en colonne (desktop) --- */
.nc-presta-split {
  display: flex;
  flex-direction: column;
  gap: var(--nc-presta-flow);
}

.nc-presta-split__body {
  display: flex;
  flex-direction: column;
  gap: var(--nc-presta-flow);
}

@media (min-width: 820px) {
  .nc-presta-split {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: clamp(28px, 3vw, 72px);
    align-items: start;
  }
}

/* Variante teintée (cyan/jaune) : un bloc « texte seul » sur fond plein
   occupe toute la largeur de la section, comme `.nc-presta-info-grid` —
   la grille 22rem/1fr habituelle laisserait une grande zone vide à droite
   du texte sur un fond de couleur. Titre puis texte empilés pleine largeur,
   y compris sur ordinateur (spécificité supérieure à la règle ci-dessus).
   #tiers et #par-ou-commencer (Hébergement, fond blanc) reçoivent le même
   traitement, demandé explicitement pour ces blocs précis — pas une règle
   générale à tous les blocs « texte seul » sans teinte. */
.nc-presta-section--cyan .nc-presta-split,
.nc-presta-section--jaune .nc-presta-split,
.nc-presta-section--magenta .nc-presta-split,
#tiers .nc-presta-split,
#par-ou-commencer .nc-presta-split,
#distinction .nc-presta-split,
#fabrication .nc-presta-split,
#format-finitions .nc-presta-split,
#format-materiau-finition .nc-presta-split,
#impression-fiable .nc-presta-split,
#charte-graphique .nc-presta-split {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.nc-presta-section--cyan .nc-presta-split__head .nc-presta-section__title,
.nc-presta-section--jaune .nc-presta-split__head .nc-presta-section__title,
.nc-presta-section--magenta .nc-presta-split__head .nc-presta-section__title,
#tiers .nc-presta-split__head .nc-presta-section__title,
#par-ou-commencer .nc-presta-split__head .nc-presta-section__title,
#distinction .nc-presta-split__head .nc-presta-section__title,
#fabrication .nc-presta-split__head .nc-presta-section__title,
#format-finitions .nc-presta-split__head .nc-presta-section__title,
#format-materiau-finition .nc-presta-split__head .nc-presta-section__title,
#impression-fiable .nc-presta-split__head .nc-presta-section__title,
#charte-graphique .nc-presta-split__head .nc-presta-section__title {
  max-width: none;
}

.nc-presta-section--cyan .nc-presta-split .nc-presta-prose,
.nc-presta-section--jaune .nc-presta-split .nc-presta-prose,
.nc-presta-section--magenta .nc-presta-split .nc-presta-prose,
#tiers .nc-presta-split .nc-presta-prose,
#par-ou-commencer .nc-presta-split .nc-presta-prose,
#distinction .nc-presta-split .nc-presta-prose,
#fabrication .nc-presta-split .nc-presta-prose,
#format-finitions .nc-presta-split .nc-presta-prose,
#format-materiau-finition .nc-presta-split .nc-presta-prose,
#impression-fiable .nc-presta-split .nc-presta-prose,
#charte-graphique .nc-presta-split .nc-presta-prose {
  max-width: none;
}

/* Variante générique équivalente aux règles ciblées par id ci-dessus, mais
   activable depuis les données (`block.fullWidth: true`) plutôt que d'ajouter
   un nouvel id à cette liste à chaque page. Les blocs déjà publiés ne sont
   pas migrés (règles ci-dessus conservées telles quelles). */
.nc-presta-split--full {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.nc-presta-split--full .nc-presta-split__head .nc-presta-section__title,
.nc-presta-split--full .nc-presta-prose {
  max-width: none;
}

/* Couleur de texte alignée sur les paragraphes des blocs teintés (noir),
   au lieu du gris par défaut — demandé explicitement pour ce bloc. */
#par-ou-commencer .nc-presta-prose p {
  color: var(--nc-noir);
}

/* CTA du bloc « Une création préparée pour l'impression » : au survol,
   seule la couleur du texte change (rose), le fond reste noir — demandé
   explicitement pour ce bloc, sans toucher au comportement standard de
   `.btn--dark` (fond → magenta) utilisé ailleurs sur le site. */
#impression-preparee .btn--dark:hover,
#impression-preparee .btn--dark:focus-visible {
  background: var(--nc-noir);
  color: var(--nc-magenta);
}

/* --- Bloc texte + image intermédiaire --- */
.nc-presta-duo {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 44px);
}

/* Variante : en une seule colonne, l'image passe au-dessus du texte
   (l'ordre du DOM reste titre + texte, puis image). */
@media (max-width: 819px) {
  .nc-presta-duo--mobile-image-first {
    flex-direction: column-reverse;
  }
}

.nc-presta-duo__text {
  display: flex;
  flex-direction: column;
  gap: var(--nc-presta-flow);
}

.nc-presta-figure {
  position: relative;
  margin: 0;
  background: var(--nc-gris-900);
  overflow: hidden;
  /* même boîte image que les blocs prestation de l'accueil (.nc-service__media) */
  min-height: clamp(280px, 26vw, 620px);
}

.nc-presta-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Variante `imageNatural` (`block.imageNatural: true`) : image affichée
   intégralement à son ratio d'origine, sans recadrage ni boîte à hauteur
   fixe — pour un visuel où le cadrage par défaut couperait une information
   utile (ex. un roll-up entier). La figure suit la hauteur naturelle de
   l'image au lieu d'être étirée par `align-items: stretch` du conteneur
   `.nc-presta-duo`. */
.nc-presta-figure--natural {
  min-height: 0;
  background: none;
}

.nc-presta-figure--natural img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (min-width: 820px) {
  .nc-presta-figure--natural {
    align-self: center;
  }
}

/* Filet tricolore : 70 % cyan, 15 % magenta, 15 % jaune — même emplacement,
   même épaisseur et même comportement (dessin au défilement) que le
   filet uni précédent. */
.nc-presta-figure__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(6px, .5vw, 11px);
  background: linear-gradient(90deg,
    var(--nc-cyan) 0% 70%,
    var(--nc-magenta) 70% 85%,
    var(--nc-jaune) 85% 100%);
  z-index: 1;
}

/* Variante Imprimerie (catégorie 02) : voir .nc-presta-hero__bar--02. */
.nc-presta-figure__bar--02 {
  background: linear-gradient(90deg,
    var(--nc-jaune) 0% 70%,
    var(--nc-cyan) 70% 85%,
    var(--nc-magenta) 85% 100%);
}

/* Variante Création graphique (catégorie 03) : voir .nc-presta-hero__bar--03. */
.nc-presta-figure__bar--03 {
  background: linear-gradient(90deg,
    var(--nc-magenta) 0% 70%,
    var(--nc-cyan) 70% 85%,
    var(--nc-jaune) 85% 100%);
}

@media (min-width: 820px) {
  .nc-presta-duo {
    flex-direction: row;
    align-items: stretch;
  }

  .nc-presta-duo--image-left {
    flex-direction: row-reverse;
  }

  /* L'image doit atteindre les limites haute, basse et extérieure
     (gauche ou droite selon son côté) visuelles de sa section, comme les
     compositions équivalentes de l'accueil (`.nc-service__media`, bord à
     bord, sans padding propre) : une section qui contient une image
     intermédiaire renonce entièrement à son padding, reporté sur la seule
     colonne de texte, uniquement du côté extérieur — le côté intérieur
     (face à l'image) reste régi par le `gap` du conteneur, inchangé.
     Mesure de lecture, justification et rythme du texte inchangés.
     Uniquement au format ordinateur/tablette ; en dessous de 820px, la
     disposition reste empilée et l'image garde sa hauteur naturelle
     (`min-height`). */
  .nc-presta-section:has(> .nc-presta-duo) {
    padding: 0;
  }

  .nc-presta-duo__text {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-block: var(--nc-pad-section-lg);
    padding-left: var(--nc-pad-inline);
  }

  .nc-presta-duo--image-left .nc-presta-duo__text {
    padding-left: 0;
    padding-right: var(--nc-pad-inline);
  }

  .nc-presta-figure {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* --- Paire de sections réunies : deux grands titres, une seule bande --- */
.nc-presta-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 2.4vw, 44px);
}

.nc-presta-pair__col {
  display: flex;
  flex-direction: column;
  gap: var(--nc-presta-flow);
}

.nc-presta-pair__col + .nc-presta-pair__col {
  border-top: 1px solid var(--nc-gris-300);
  padding-top: clamp(22px, 2.4vw, 44px);
}

@media (min-width: 820px) {
  .nc-presta-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 3.4vw, 76px);
    align-items: start;
  }

  .nc-presta-pair__col + .nc-presta-pair__col {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid var(--nc-gris-300);
    padding-left: clamp(32px, 3.4vw, 76px);
  }
}

/* --- Groupe cyan de fin : un H2 principal + trois sous-parties H3 --- */
.nc-presta-cyan-group .nc-presta-section__title {
  margin-bottom: clamp(20px, 2.2vw, 48px);
  max-width: 30ch;
}

.nc-presta-cyan-group__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2vw, 36px);
}

.nc-presta-cyan-group__part {
  display: flex;
  flex-direction: column;
  gap: clamp(9px, .9vw, 18px);
}

.nc-presta-cyan-group__part + .nc-presta-cyan-group__part {
  border-top: 1px solid rgba(10, 10, 10, .18);
  padding-top: clamp(20px, 2vw, 36px);
}

.nc-presta-cyan-group__subtitle {
  margin: 0;
  font: 700 clamp(1.0625rem, 1.15vw, 1.5rem) var(--nc-police-texte);
  letter-spacing: -.02em;
}

.nc-presta-section--cyan .nc-presta-cyan-group__subtitle {
  color: var(--nc-blanc);
}

/* Variante Imprimerie : titre noir sur fond jaune (contraste). */
.nc-presta-section--jaune .nc-presta-cyan-group__subtitle {
  color: var(--nc-noir);
}

/* Part devenue un lien interne (`part.url`) : hérite la couleur du titre,
   trait souligné révélé au survol/focus — cohérent avec les liens discrets
   déjà utilisés ailleurs dans le gabarit, sans composant supplémentaire. */
.nc-presta-cyan-group__subtitle a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .2em;
  transition: text-decoration-color var(--nc-transition-rapide);
}

.nc-presta-cyan-group__subtitle a:hover,
.nc-presta-cyan-group__subtitle a:focus-visible {
  text-decoration-color: currentColor;
}

/* Dans ce bloc : tous les paragraphes en noir et à la taille courante
   (le `p + p` plus petit du bloc cyan générique ne s'applique pas ici).
   Largeur et justification : celles du gabarit (règles ci-dessus). */
.nc-presta-cyan-group .nc-presta-prose p,
.nc-presta-cyan-group .nc-presta-prose p + p {
  color: var(--nc-noir);
  font-size: var(--nc-text-body);
  line-height: 1.6;
}

/* Trois colonnes seulement quand chacune garde une largeur de lecture
   confortable (breakpoint propre à ce bloc, justifié dans le compte rendu). */
@media (min-width: 1000px) {
  .nc-presta-cyan-group__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 2.6vw, 56px);
    align-items: start;
  }

  .nc-presta-cyan-group__part + .nc-presta-cyan-group__part {
    border-top: 0;
    padding-top: 0;
  }

  /* Séparateur vertical par colonne plutôt que par ordre du DOM : avec un
     nombre de parts qui n'est pas un multiple de 3 (ex. 5 pour l'Imprimerie),
     `+ .part` placerait à tort un trait sur le premier élément de la ligne
     suivante. `:nth-child(3n+1)` cible le premier de chaque ligne, quel que
     soit le nombre total de parts. */
  .nc-presta-cyan-group__part {
    border-left: 1px solid rgba(10, 10, 10, .18);
    padding-left: clamp(24px, 2.6vw, 56px);
  }

  .nc-presta-cyan-group__part:nth-child(3n+1) {
    border-left: 0;
    padding-left: 0;
  }
}

/* ===== Grille d'information (formats, papiers, finitions...) =====
   H2 + intro + parts en grille, sur fond clair (pas de `tone`), sans
   numérotation. Points de rupture identiques à `.nc-presta-steps__grid`
   par défaut : 1 colonne mobile, 2 colonnes (2x2) en intermédiaire,
   4 colonnes sur ordinateur. Chaque palier redéfinit intégralement ses
   propres bordures (pas d'exemption héritée d'un palier inférieur), pour
   rester lisible avec un nombre de parts fixé à 4. */
/* Titre et intro occupent toute la largeur utile de la section (jusqu'aux
   padding), au lieu du plafond de lecture `--nc-presta-measure`/`24ch`
   utilisé ailleurs : ce bloc s'étend sur toute la largeur du bandeau de
   couleur (ex. le jaune d'Imprimerie), le texte doit suivre. */
.nc-presta-info-grid .nc-presta-section__title {
  max-width: none;
}

/* Quand `intro` est absent, la grille suit le H2 directement : sans cette
   marge elle vient se coller au titre (aucun espace entre les deux), car
   c'est normalement `intro` qui porte l'écart via sa propre marge basse
   ci-dessous. Sélecteur volontairement ciblé sur l'enchaînement direct
   titre + grille pour ne rien changer quand `intro` est présent (cas déjà
   validé sur Flyers/Cartes de visite). */
.nc-presta-info-grid .nc-presta-section__title + .nc-presta-info-grid__grid {
  margin-top: clamp(22px, 2.2vw, 52px);
}

.nc-presta-info-grid__intro {
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-gris-600);
  max-width: none;
  margin: clamp(16px, 1.8vw, 32px) 0 clamp(20px, 2vw, 40px);
}

/* `outro` : même paragraphe éditorial que `intro`, place sous la grille
   plutot qu'au-dessus. */
.nc-presta-info-grid__outro {
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-gris-600);
  max-width: none;
  margin: clamp(20px, 2.2vw, 40px) 0 0;
}

.nc-presta-info-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2vw, 36px);
}

.nc-presta-info-grid__part {
  display: flex;
  flex-direction: column;
  gap: clamp(9px, .9vw, 18px);
  border-top: 1px solid rgba(10, 10, 10, .18);
  padding-top: clamp(20px, 2vw, 36px);
}

.nc-presta-info-grid__part:first-child {
  border-top: 0;
  padding-top: 0;
}

.nc-presta-info-grid__subtitle {
  margin: 0;
  font: 700 clamp(1.0625rem, 1.15vw, 1.5rem) var(--nc-police-texte);
  letter-spacing: -.02em;
}

.nc-presta-info-grid__part p {
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-gris-600);
}

/* Variante Imprimerie (fond jaune) : texte noir obligatoire (contraste),
   même règle que les autres blocs en `tone: "jaune"`. */
.nc-presta-section--jaune .nc-presta-info-grid__intro,
.nc-presta-section--jaune .nc-presta-info-grid__outro,
.nc-presta-section--jaune .nc-presta-info-grid__part p {
  color: var(--nc-noir);
}

.nc-presta-section--jaune .nc-presta-info-grid__subtitle {
  color: var(--nc-noir);
}

/* Variante Création graphique (fond magenta) : texte blanc uniforme, même
   principe que la teinte jaune ci-dessus. */
.nc-presta-section--magenta .nc-presta-info-grid__intro,
.nc-presta-section--magenta .nc-presta-info-grid__outro,
.nc-presta-section--magenta .nc-presta-info-grid__part p {
  color: var(--nc-blanc);
}

.nc-presta-section--magenta .nc-presta-info-grid__subtitle {
  color: var(--nc-blanc);
}

@media (min-width: 700px) and (max-width: 999px) {
  .nc-presta-info-grid__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nc-presta-info-grid__part {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid rgba(10, 10, 10, .18);
    padding-left: clamp(20px, 2vw, 36px);
  }

  .nc-presta-info-grid__part:nth-child(2n+1) {
    border-left: 0;
    padding-left: 0;
  }

  .nc-presta-info-grid__part:nth-child(n+3) {
    border-top: 1px solid rgba(10, 10, 10, .18);
    padding-top: clamp(20px, 2vw, 36px);
  }
}

@media (min-width: 1000px) {
  .nc-presta-info-grid__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 2.6vw, 56px);
  }

  .nc-presta-info-grid__part {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid rgba(10, 10, 10, .18);
    padding-left: clamp(24px, 2.6vw, 56px);
  }

  .nc-presta-info-grid__part:nth-child(4n+1) {
    border-left: 0;
    padding-left: 0;
  }
}

.nc-presta-info-grid__figure {
  margin-top: clamp(32px, 3.4vw, 64px);
}

/* ===== Étapes ===== */
.nc-presta-steps .nc-presta-section__title {
  margin-bottom: clamp(22px, 2.2vw, 52px);
  max-width: 34ch;
}

/* Séparateurs par la technique du filet de 1px : le fond gris de la
   grille apparaît dans les interstices, quel que soit l'agencement. */
.nc-presta-steps__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--nc-gris-700);
  border-top: 1px solid var(--nc-gris-700);
}

.nc-presta-step {
  min-width: 0;
  background: var(--nc-noir);
  padding: clamp(20px, 1.8vw, 42px) clamp(16px, 1.4vw, 34px) clamp(22px, 2vw, 46px);
  display: flex;
  flex-direction: column;
  gap: clamp(9px, .8vw, 18px);
}

/* Nombre de colonnes adapté au nombre d'étapes de la page (3, 4 ou 5),
   jamais de colonne vide ni de dernière étape isolée :
     < 700px    : 1 colonne (mobile), quel que soit le nombre d'étapes
     >= 700px   : 3 étapes -> 3 colonnes égales, identique en résolution
                  intermédiaire et sur ordinateur (pas de palier 2 colonnes
                  pour ce cas) ;
                  4 étapes -> 2 colonnes (2x2) en intermédiaire, 4 colonnes
                  sur ordinateur ;
                  5 étapes -> 3 colonnes égales sur la première ligne puis
                  2 colonnes égales (chacune 50 %) sur la seconde en
                  intermédiaire (grille à 6 pistes, portées 2 puis 3),
                  5 colonnes sur ordinateur
   `:has(> ... :nth-child(N):last-child)` détecte un bloc d'exactement
   N étapes (le Ne enfant est aussi le dernier) sans toucher au contenu
   des pages ni dupliquer ce composant. */
@media (min-width: 700px) {
  .nc-presta-steps__grid:has(> .nc-presta-step:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

  .nc-presta-steps__grid:has(> .nc-presta-step:nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .nc-presta-steps__grid:has(> .nc-presta-step:nth-child(5):last-child) > .nc-presta-step:nth-child(-n+3) {
    grid-column: span 2;
  }
  .nc-presta-steps__grid:has(> .nc-presta-step:nth-child(5):last-child) > .nc-presta-step:nth-child(n+4) {
    grid-column: span 3;
  }
}

@media (min-width: 1000px) {
  .nc-presta-steps__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nc-presta-steps__grid:has(> .nc-presta-step:nth-child(5):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.nc-presta-step__num {
  font: italic 400 clamp(2.25rem, 3vw, 4.75rem) var(--nc-police-italique);
  line-height: .85;
}

/* Signature CMJN de l'accueil (`.nc-method__number`, coloré par étape) :
   les trois premiers numéros reprennent cyan, magenta puis jaune ; à
   partir du quatrième, le numéro garde la couleur de texte par défaut de
   la section (blanc), exactement comme sur l'accueil. */
.nc-presta-step:nth-child(1) .nc-presta-step__num { color: var(--nc-cyan); }
.nc-presta-step:nth-child(2) .nc-presta-step__num { color: var(--nc-magenta); }
.nc-presta-step:nth-child(3) .nc-presta-step__num { color: var(--nc-jaune); }

.nc-presta-step__title {
  margin: 0;
  font: 700 clamp(1.0625rem, 1.15vw, 1.5625rem) var(--nc-police-texte);
  letter-spacing: -.02em;
}

.nc-presta-step__body {
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-gris-400);
}

/* ===== FAQ (details/summary natifs : clavier + sans JavaScript) ===== */
.nc-presta-faq .nc-presta-section__title {
  margin-bottom: clamp(18px, 1.8vw, 40px);
  max-width: 34ch;
}

/* Titre plus long (page Dépliants et plaquettes) : le plafond de 34ch ci-
   dessus le coupait juste après « Dépliants et plaquettes », renvoyant le
   « : » seul en début de ligne suivante. Correction ciblée par id, sans
   toucher au plafond des autres pages FAQ (id `faq` partagé, non modifié). */
#faq-depliants-plaquettes .nc-presta-section__title {
  max-width: none;
}

.nc-presta-faq__list {
  border-top: var(--nc-bordure);
}

.nc-presta-faq__item {
  border-bottom: var(--nc-bordure);
}

/* Insertion horizontale alignée sur `.nc-blog-teaser__item` de l'accueil :
   le titre garde une marge visible avec le fond plein posé au survol et à
   l'ouverture (voir plus bas), au lieu d'être collé à son bord. */
.nc-presta-faq__q {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(14px, 1.6vw, 34px);
  padding: clamp(16px, 1.5vw, 30px) clamp(6px, .5vw, 14px);
  cursor: pointer;
  font: 700 var(--nc-text-cta) var(--nc-police-texte);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.nc-presta-faq__q::-webkit-details-marker {
  display: none;
}

/* L'icône +/× reprend `currentColor` (au lieu d'un noir fixe) : elle suit
   ainsi automatiquement la couleur de texte de la question, y compris au
   survol et à l'ouverture (voir plus bas). */
.nc-presta-faq__q::after {
  content: "";
  flex: none;
  width: clamp(11px, .9vw, 16px);
  height: clamp(11px, .9vw, 16px);
  margin-top: .35em;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform var(--nc-transition-rapide), opacity var(--nc-transition-rapide);
}

.nc-presta-faq__item[open] .nc-presta-faq__q::after {
  transform: rotate(90deg);
  opacity: .55;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

/* Fond de la question ouverte : couleur de la catégorie (--cat-color, posée
   sur .nc-presta-page — voir AGENTS.md), pas une couleur fixée par page.
   Texte et icône (`currentColor`) passent à --cat-accent-text pour rester
   lisibles sur ce fond plein (blanc sur cyan/magenta, noir sur jaune).
   Règle native <details>/<summary>, fonctionne sans JavaScript. */
.nc-presta-faq__item[open] .nc-presta-faq__q {
  background: var(--cat-accent, var(--nc-cyan));
  color: var(--cat-accent-text, var(--nc-blanc));
}

.nc-presta-faq__q:focus-visible {
  outline: 3px solid var(--nc-cyan);
  outline-offset: -3px;
}

.nc-presta-faq__a {
  padding: 0 clamp(6px, .5vw, 14px) clamp(16px, 1.5vw, 30px);
  max-width: var(--nc-presta-measure);
}

.nc-presta-faq__a p {
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-gris-600);
}

/* ===== Prestations complémentaires ===== */
.nc-presta-related .nc-presta-section__title {
  margin-bottom: clamp(14px, 1.4vw, 30px);
}

.nc-presta-related__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--nc-bordure);
}

.nc-presta-related__item {
  border-bottom: var(--nc-bordure);
  padding: clamp(16px, 1.5vw, 30px) 0;
}

/* ===== CTA final (reprend la composition sombre de l'accueil) ===== */
.nc-presta-cta {
  position: relative;
  background: var(--nc-noir);
  color: var(--nc-blanc);
  overflow: hidden;
  padding: var(--nc-pad-section-xl) var(--nc-pad-inline);
  /* Marge droite = marge gauche + largeur de la bande de drapeaux
     décorative collée au bord droit (voir `.nc-cta-final` de l'accueil). */
  padding-right: calc(var(--nc-pad-inline) + clamp(8px, .7vw, 15px));
}

.nc-presta-cta__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.2px);
  background-size: clamp(6px, .5vw, 11px) clamp(6px, .5vw, 11px);
}

.nc-presta-cta__flags {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: clamp(8px, .7vw, 15px);
  display: flex;
  flex-direction: column;
}

.nc-presta-cta__flags span { flex: 1; }
.nc-presta-cta__flags span:nth-child(1) { background: var(--nc-cyan); }
.nc-presta-cta__flags span:nth-child(2) { background: var(--nc-magenta); }
.nc-presta-cta__flags span:nth-child(3) { background: var(--nc-jaune); }

.nc-presta-cta__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nc-presta-flow);
}

.nc-presta-cta__title {
  font-size: clamp(1.875rem, 3vw, 4.5rem);
}

/* Second temps fort italique du titre (ex. « Parlons de votre projet ») :
   même principe que l'accueil (`.nc-cta-final .nc-heading em`), proportionné
   à l'échelle propre à ce gabarit. */
.nc-presta-cta__title em {
  font-size: clamp(2.125rem, 3.4vw, 5.125rem);
}

/* Toujours en colonne unique, à toutes les résolutions : comme sur l'accueil
   (`.nc-cta-final__content p`), aucune raison de plafonner la largeur de
   lecture — `width: 100%` sans `max-width` occupe tout l'espace intérieur
   de la section. */
.nc-presta-cta__content p {
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-gris-250);
  width: 100%;
  text-wrap: pretty;
}

/* Bloc final : bouton principal + lien secondaire optionnel
   (`presta.finalCta.ctaSecondary`), sur le fond sombre de la section —
   `.link-underline` reçoit donc une couleur de texte claire ici, au lieu du
   noir par défaut du composant partagé. */
.nc-presta-cta__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.2vw, 26px);
  margin-top: clamp(6px, .6vw, 14px);
}

.nc-presta-cta__ctas .link-underline {
  color: var(--nc-blanc);
}

/* Bouton principal du CTA final : couleur de la catégorie plutôt que le
   jaune par défaut de `.btn--light`, demandé explicitement pour les pages
   Sites Internet (bleu) et Création graphique (rose). `--cat-accent` /
   `--cat-accent-text` valent déjà jaune/noir en Imprimerie (identique au
   jaune par défaut), donc ce bloc reste inchangé pour cette catégorie. */
.nc-presta-cta .btn--light {
  background: var(--cat-accent);
  color: var(--cat-accent-text);
}

/* Survol/focus : fond blanc quelle que soit la catégorie, demandé
   explicitement — sélecteur plus spécifique que la règle ci-dessus, sinon
   cette dernière l'emporterait aussi au survol (même spécificité, fichier
   chargé après components.css) et le fond resterait celui de la catégorie. */
.nc-presta-cta .btn--light:hover,
.nc-presta-cta .btn--light:focus-visible {
  background: var(--nc-blanc);
  color: var(--nc-noir);
}

/* =====================================================================
   ANIMATIONS — gabarit prestation web (catégorie 01 Sites Internet)
   ---------------------------------------------------------------------
   Système autonome, actif UNIQUEMENT quand la page le déclare
   explicitement (`animationsEnabled: true` dans ses données ; voir
   prestation-web.njk et prestation-anim.js). Tant qu'une page ne pose pas
   ce champ, aucune classe ni attribut d'animation n'est émis et rien
   ci-dessous ne s'applique : le gabarit reste réutilisable tel quel par
   les futures pages de la catégorie, sans copier ce CSS ni ce JS.

   Reprend les principes validés sur l'accueil (seuils de déclenchement,
   garanties d'accessibilité, absence de minuterie) tout en restant écrit
   spécifiquement pour ce gabarit. Uniquement `opacity`, `transform`,
   `clip-path` : aucun reflow, aucun layout shift. Aucune taille, largeur,
   marge, hauteur, grille ou bordure n'est animée ; la position finale
   reste celle déjà validée du gabarit.
   ===================================================================== */

/* --- 1. Hero : entrée progressive, visible sans JavaScript (animation
       CSS pure, non conditionnée par [data-reveal]). Ordre : surtitre,
       H1, introduction, CTA principal, lien réalisations, image. --- */
.nc-presta-hero--anim .nc-presta-hero__eyebrow {
  animation: nc-presta-up .55s cubic-bezier(.2, .7, .2, 1) .05s both;
}

.nc-presta-hero--anim .nc-presta-hero__title {
  animation: nc-presta-up .58s cubic-bezier(.2, .7, .2, 1) .14s both;
}

.nc-presta-hero--anim .nc-presta-hero__intro {
  animation: nc-presta-up .58s cubic-bezier(.2, .7, .2, 1) .25s both;
}

.nc-presta-hero--anim .nc-presta-hero__price {
  animation: nc-presta-up .55s cubic-bezier(.2, .7, .2, 1) .3s both;
}

.nc-presta-hero--anim .nc-presta-hero__cta-primary {
  animation: nc-presta-up .55s cubic-bezier(.2, .7, .2, 1) .36s both;
}

.nc-presta-hero--anim .nc-presta-hero__ctas > .link-underline {
  animation: nc-presta-up .55s cubic-bezier(.2, .7, .2, 1) .44s both;
}

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

/* Léger passage cyan lors de la révélation du visuel — une seule fois,
   invisible au repos avant et après (piloté en opacité, pas seulement en
   position, pour qu'aucun rendu résiduel du transform ne laisse un voile
   permanent). */
.nc-presta-hero--anim .nc-presta-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(0, 174, 239, 0) 35%, rgba(0, 174, 239, .38) 50%, rgba(0, 174, 239, 0) 65%);
  opacity: 0;
  transform: translateX(-100%);
  animation: nc-presta-sweep .6s cubic-bezier(.4, .1, .2, 1) .46s both;
}

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

@keyframes nc-presta-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes nc-presta-wipe {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes nc-presta-img {
  from { transform: scale(1.025); }
  to { transform: scale(1); }
}

@keyframes nc-presta-sweep {
  from { opacity: 0; transform: translateX(-100%); }
  20% { opacity: 1; }
  55% { opacity: 1; transform: translateX(100%); }
  to { opacity: 0; transform: translateX(100%); }
}

/* --- 2. Révélation générique au défilement : fondu seul sur le
       conteneur, aucun déplacement propre (évite toute double animation
       avec le titre ou les groupes de contenu qu'il porte). --- */
.nc-presta-anim [data-reveal] {
  opacity: 0;
}

.nc-presta-anim [data-reveal].is-in {
  opacity: 1;
  transition: opacity .5s ease;
}

/* --- Titre de chaque section : révélation dédiée et perceptible, même
       langage que l'accueil. Arrivée du bas + dévoilement par masque
       vertical + opacité, comme un bloc complet (jamais lettre à lettre).
       Concerne tous les h2.nc-heading des sections révélées. --- */
.nc-presta-anim [data-reveal] .nc-heading {
  opacity: 0;
  transform: translateY(26px);
  clip-path: inset(-0.12em -0.35em 100% -0.05em);
}

.nc-presta-anim [data-reveal].is-in .nc-heading {
  opacity: 1;
  transform: none;
  clip-path: inset(-0.12em -0.35em -0.3em -0.05em);
  transition: opacity .66s ease,
              transform .7s cubic-bezier(.2, .7, .2, 1),
              clip-path .7s cubic-bezier(.4, 0, .15, 1);
}

/* Contenu placé juste après le titre (paragraphes, liste) : démarre
   ~140 ms après lui, mouvement plus discret. Ciblé explicitement par
   conteneur plutôt que par un sélecteur « ~ * » générique, pour ne
   jamais capter par erreur une grille ou une liste qui possède déjà sa
   propre chorégraphie (étapes, FAQ, groupe cyan). */
.nc-presta-anim [data-reveal] .nc-presta-duo__text .nc-heading ~ *,
.nc-presta-anim [data-reveal] .nc-presta-pair__col .nc-heading ~ *,
.nc-presta-anim [data-reveal] .nc-presta-split__body {
  opacity: 0;
  transform: translateY(16px);
}

.nc-presta-anim [data-reveal].is-in .nc-presta-duo__text .nc-heading ~ *,
.nc-presta-anim [data-reveal].is-in .nc-presta-pair__col .nc-heading ~ *,
.nc-presta-anim [data-reveal].is-in .nc-presta-split__body {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease .14s,
              transform .6s cubic-bezier(.2, .7, .2, 1) .14s;
}

/* --- 4. Paire de colonnes (« Une présentation claire… » / « Un site
       adapté… ») : la seconde colonne suit la première avec un délai
       modéré. Sur mobile, les deux blocs restent dans l'ordre naturel de
       lecture (une seule section, un seul déclenchement, DOM inchangé) : le
       délai suffit à les rendre successives à toutes les largeurs. --- */
.nc-presta-anim [data-reveal].is-in .nc-presta-pair__col:nth-child(2) .nc-heading {
  transition-delay: .12s;
}
.nc-presta-anim [data-reveal].is-in .nc-presta-pair__col:nth-child(2) .nc-heading ~ * {
  transition-delay: .26s;
}

/* --- 3 / 7 / 5. Blocs texte + image (structure, vérification,
       interlocuteur) : masque cyan qui se retire vers le côté où se
       trouve l'image, léger zoom 1.03→1, filet cyan déjà présent au-dessus
       de l'image qui se dessine. `overflow: hidden` déjà présent sur
       `.nc-presta-figure` : aucune image ne sort de son cadre. --- */
.nc-presta-anim [data-reveal] .nc-presta-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--cat-accent, var(--nc-cyan));
}

.nc-presta-anim [data-reveal] .nc-presta-figure img {
  transform: scale(1.03);
}

.nc-presta-anim [data-reveal] .nc-presta-figure__bar {
  transform: scaleX(0);
  transform-origin: left center;
}

.nc-presta-anim [data-reveal].is-in .nc-presta-duo--image-right .nc-presta-figure::after {
  transform: translateX(101%);
  transition: transform .6s cubic-bezier(.5, 0, .12, 1) .34s;
}
.nc-presta-anim [data-reveal].is-in .nc-presta-duo--image-left .nc-presta-figure::after {
  transform: translateX(-101%);
  transition: transform .6s cubic-bezier(.5, 0, .12, 1) .34s;
}
/* Image `info-grid` : pleine largeur, hors `.nc-presta-duo` (pas de sens
   gauche/droite associé à un texte) — le masque se retire toujours vers
   la droite, comme la variante `image-right` ci-dessus. Sans cette règle,
   le masque reste en place indéfiniment (aucun des deux sélecteurs
   `.nc-presta-duo--image-*` ci-dessus ne correspond à ce contexte). */
.nc-presta-anim [data-reveal].is-in .nc-presta-info-grid__figure::after {
  transform: translateX(101%);
  transition: transform .6s cubic-bezier(.5, 0, .12, 1) .34s;
}
.nc-presta-anim [data-reveal].is-in .nc-presta-figure img {
  transform: scale(1);
  transition: transform .75s cubic-bezier(.2, .7, .2, 1) .3s;
}
.nc-presta-anim [data-reveal].is-in .nc-presta-figure__bar {
  transform: scaleX(1);
  transition: transform .55s cubic-bezier(.4, 0, .15, 1) .22s;
}

/* Variante « early » (bloc « Un site vérifié avant sa mise en ligne ») :
   l'image commence à se dévoiler juste après le titre, sans attendre la
   fin complète de l'apparition du texte. */
.nc-presta-anim [data-reveal].is-in .nc-presta-duo--anim-image-early .nc-presta-figure::after {
  transition-delay: .16s;
}
.nc-presta-anim [data-reveal].is-in .nc-presta-duo--anim-image-early .nc-presta-figure img {
  transition-delay: .12s;
}
.nc-presta-anim [data-reveal].is-in .nc-presta-duo--anim-image-early .nc-presta-figure__bar {
  transition-delay: .06s;
}

/* Variante « first » (bloc « Vous échangez directement… ») : composition
   plus expressive — l'image se révèle en premier, puis le grand titre,
   puis le texte, avec un très léger décalage horizontal opposé (18 px)
   entre l'image et le contenu. Aucun effet de parallaxe continu : le
   décalage fait partie de la révélation, pas d'un mouvement permanent. */
.nc-presta-anim [data-reveal].is-in .nc-presta-duo--anim-image-first .nc-presta-figure::after {
  transition-delay: 0s;
}
.nc-presta-anim [data-reveal].is-in .nc-presta-duo--anim-image-first .nc-presta-figure img {
  transition-delay: .02s;
}
.nc-presta-anim [data-reveal].is-in .nc-presta-duo--anim-image-first .nc-presta-figure__bar {
  transition-delay: 0s;
}
.nc-presta-anim [data-reveal] .nc-presta-duo--anim-image-first .nc-heading {
  transform: translateY(26px) translateX(18px);
}
.nc-presta-anim [data-reveal].is-in .nc-presta-duo--anim-image-first .nc-heading {
  transform: none;
  transition-delay: .16s;
}
.nc-presta-anim [data-reveal] .nc-presta-duo--anim-image-first .nc-presta-duo__text .nc-heading ~ * {
  transform: translateY(16px) translateX(-18px);
}
.nc-presta-anim [data-reveal].is-in .nc-presta-duo--anim-image-first .nc-presta-duo__text .nc-heading ~ * {
  transform: none;
  transition-delay: .32s;
}

/* --- 2. Bloc cyan large (« Un site utile avant d'être compliqué ») :
       titre révélé par masque, contenu ~140 ms après (règle générique
       ci-dessus), et un très bref filet clair qui traverse le haut du
       bloc au moment de la révélation. Exclut le second bloc cyan (le
       groupe en trois parties), qui a sa propre chorégraphie. --- */
.nc-presta-anim [data-reveal].nc-presta-section--cyan:not(.nc-presta-cyan-group),
.nc-presta-anim [data-reveal].nc-presta-section--jaune:not(.nc-presta-cyan-group),
.nc-presta-anim [data-reveal].nc-presta-section--magenta:not(.nc-presta-cyan-group) {
  position: relative;
  overflow: hidden;
}

.nc-presta-anim [data-reveal].nc-presta-section--cyan:not(.nc-presta-cyan-group)::before,
.nc-presta-anim [data-reveal].nc-presta-section--jaune:not(.nc-presta-cyan-group)::before,
.nc-presta-anim [data-reveal].nc-presta-section--magenta:not(.nc-presta-cyan-group)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(2px, .2vw, 4px);
  pointer-events: none;
  background: var(--nc-blanc);
  opacity: .55;
  transform: scaleX(0);
  transform-origin: left center;
}

.nc-presta-anim [data-reveal].is-in.nc-presta-section--cyan:not(.nc-presta-cyan-group)::before,
.nc-presta-anim [data-reveal].is-in.nc-presta-section--jaune:not(.nc-presta-cyan-group)::before,
.nc-presta-anim [data-reveal].is-in.nc-presta-section--magenta:not(.nc-presta-cyan-group)::before {
  transform: scaleX(1);
  transition: transform .7s cubic-bezier(.4, 0, .15, 1) .1s;
}

/* --- 6. Séquence signature : les 5 étapes. Un filet cyan progresse sur le
       bord supérieur de la grille (même principe que l'accueil), puis
       chaque étape apparaît en cascade, son numéro un cran avant son
       titre et son texte. Ordre naturel de lecture à toutes les largeurs
       (1 colonne, 3+2, ou 5 colonnes) : la grille et ses bordures ne sont
       pas modifiées. --- */
.nc-presta-anim [data-reveal] .nc-presta-steps__grid {
  position: relative;
}

.nc-presta-anim [data-reveal] .nc-presta-steps__grid::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--nc-cyan), var(--nc-magenta) 55%, var(--nc-jaune));
  transform: scaleX(0);
  transform-origin: left center;
}

.nc-presta-anim [data-reveal].is-in .nc-presta-steps__grid::after {
  transform: scaleX(1);
  transition: transform .85s cubic-bezier(.4, 0, .15, 1) .05s;
}

.nc-presta-anim [data-reveal] .nc-presta-step__num,
.nc-presta-anim [data-reveal] .nc-presta-step__title,
.nc-presta-anim [data-reveal] .nc-presta-step__body {
  opacity: 0;
  transform: translateY(16px);
}

.nc-presta-anim [data-reveal].is-in .nc-presta-step__num,
.nc-presta-anim [data-reveal].is-in .nc-presta-step__title,
.nc-presta-anim [data-reveal].is-in .nc-presta-step__body {
  opacity: 1;
  transform: none;
  transition: opacity .48s ease, transform .52s cubic-bezier(.2, .7, .2, 1);
}

.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(1) .nc-presta-step__num { transition-delay: .12s; }
.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(1) .nc-presta-step__title,
.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(1) .nc-presta-step__body { transition-delay: .18s; }
.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(2) .nc-presta-step__num { transition-delay: .2s; }
.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(2) .nc-presta-step__title,
.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(2) .nc-presta-step__body { transition-delay: .26s; }
.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(3) .nc-presta-step__num { transition-delay: .28s; }
.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(3) .nc-presta-step__title,
.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(3) .nc-presta-step__body { transition-delay: .34s; }
.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(4) .nc-presta-step__num { transition-delay: .36s; }
.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(4) .nc-presta-step__title,
.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(4) .nc-presta-step__body { transition-delay: .42s; }
.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(5) .nc-presta-step__num { transition-delay: .44s; }
.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(5) .nc-presta-step__title,
.nc-presta-anim [data-reveal].is-in .nc-presta-step:nth-child(5) .nc-presta-step__body { transition-delay: .5s; }

/* --- 8. Second temps fort : bloc cyan en trois parties (« Des bases
       solides pour votre site »). Titre (règle générique), puis les
       séparateurs entre colonnes se dessinent, puis les trois groupes
       apparaissent comme des ensembles complets — jamais paragraphe par
       paragraphe. Le séparateur statique est neutralisé (couleur
       transparente, même épaisseur : aucun changement de dimension) et
       remplacé par un filet animé strictement à la même place. --- */
.nc-presta-anim [data-reveal] .nc-presta-cyan-group__part {
  position: relative;
  opacity: 0;
  transform: translateY(18px);
}

.nc-presta-anim [data-reveal].is-in .nc-presta-cyan-group__part {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}

.nc-presta-anim [data-reveal].is-in .nc-presta-cyan-group__part:nth-child(1) { transition-delay: .16s; }
.nc-presta-anim [data-reveal].is-in .nc-presta-cyan-group__part:nth-child(2) { transition-delay: .26s; }
.nc-presta-anim [data-reveal].is-in .nc-presta-cyan-group__part:nth-child(3) { transition-delay: .36s; }

.nc-presta-anim [data-reveal] .nc-presta-cyan-group__part + .nc-presta-cyan-group__part {
  border-color: transparent;
}

.nc-presta-anim [data-reveal] .nc-presta-cyan-group__part + .nc-presta-cyan-group__part::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background: rgba(10, 10, 10, .18);
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
}

.nc-presta-anim [data-reveal].is-in .nc-presta-cyan-group__part + .nc-presta-cyan-group__part::before {
  transform: scaleX(1);
  transition: transform .55s cubic-bezier(.4, 0, .15, 1) .08s;
}

@media (min-width: 1000px) {
  .nc-presta-anim [data-reveal] .nc-presta-cyan-group__part + .nc-presta-cyan-group__part::before {
    top: 0;
    left: -1px;
    width: 1px;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top center;
  }

  .nc-presta-anim [data-reveal].is-in .nc-presta-cyan-group__part + .nc-presta-cyan-group__part::before {
    transform: scaleY(1);
  }

  /* Premier élément de chaque ligne (voir la règle statique équivalente
     plus haut) : jamais de trait vertical, même quand ce n'est pas le
     premier élément du DOM (cas d'un nombre de parts non multiple de 3). */
  .nc-presta-anim [data-reveal] .nc-presta-cyan-group__part:nth-child(3n+1)::before {
    display: none;
  }
}

/* --- 9. FAQ : titre (règle générique), lignes en cascade courte, légère
       réaction du fond au survol, transition sobre de la réponse
       (amélioration progressive : sans prise en charge de
       `@starting-style`, l'ouverture reste instantanée, toujours
       accessible). La rotation du signe « + » existe déjà et n'est pas
       modifiée. `--i` (index de la ligne) est posé par le gabarit. --- */
.nc-presta-anim [data-reveal] .nc-presta-faq__item {
  opacity: 0;
  transform: translateY(14px);
}

.nc-presta-anim [data-reveal].is-in .nc-presta-faq__item {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease calc(.14s + var(--i, 0) * 45ms),
              transform .48s cubic-bezier(.2, .7, .2, 1) calc(.14s + var(--i, 0) * 45ms);
}

@media (hover: hover) {
  .nc-presta-anim .nc-presta-faq__q {
    transition: background-color var(--nc-transition-rapide), color var(--nc-transition-rapide);
  }
  .nc-presta-anim .nc-presta-faq__q:hover {
    background: var(--cat-accent, var(--nc-cyan));
    color: var(--cat-accent-text, var(--nc-blanc));
  }
}

@media not (prefers-reduced-motion: reduce) {
  .nc-presta-anim .nc-presta-faq__a {
    transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
    transition-behavior: allow-discrete;
    opacity: 0;
    transform: translateY(-6px);
  }
  .nc-presta-anim .nc-presta-faq__item[open] .nc-presta-faq__a {
    opacity: 1;
    transform: none;
  }
  @starting-style {
    .nc-presta-anim .nc-presta-faq__item[open] .nc-presta-faq__a {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
}

/* --- 10. CTA final : titre (règle générique), texte, bouton, puis dessin
       successif des trois filets CMJN déjà présents (`.nc-presta-cta__flags`).
       Aucun nouvel élément décoratif permanent. --- */
.nc-presta-anim [data-reveal] .nc-presta-cta__content > p {
  opacity: 0;
  transform: translateY(16px);
}
.nc-presta-anim [data-reveal].is-in .nc-presta-cta__content > p {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease .14s, transform .6s cubic-bezier(.2, .7, .2, 1) .14s;
}

.nc-presta-anim [data-reveal] .nc-presta-cta__ctas > .btn,
.nc-presta-anim [data-reveal] .nc-presta-cta__ctas > .link-underline {
  opacity: 0;
  transform: translateY(16px);
}
.nc-presta-anim [data-reveal].is-in .nc-presta-cta__ctas > .btn,
.nc-presta-anim [data-reveal].is-in .nc-presta-cta__ctas > .link-underline {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease .26s, transform .55s cubic-bezier(.2, .7, .2, 1) .26s;
}

.nc-presta-anim [data-reveal] .nc-presta-cta__flags span {
  transform: scaleY(0);
  transform-origin: top center;
}
.nc-presta-anim [data-reveal].is-in .nc-presta-cta__flags span {
  transform: scaleY(1);
  transition: transform .5s cubic-bezier(.4, 0, .15, 1);
}
.nc-presta-anim [data-reveal].is-in .nc-presta-cta__flags span:nth-child(1) { transition-delay: .34s; }
.nc-presta-anim [data-reveal].is-in .nc-presta-cta__flags span:nth-child(2) { transition-delay: .4s; }
.nc-presta-anim [data-reveal].is-in .nc-presta-cta__flags span:nth-child(3) { transition-delay: .46s; }

/* --- Micro-interactions : très léger relèvement des boutons au survol
       (dispositifs à survol réel uniquement, 1 px maximum). Les flèches
       (`.btn__arrow`) et le survol violet du CTA principal du hero
       restent ceux, déjà validés, de components.css / prestation-web.css. --- */
@media (hover: hover) {
  .nc-presta-anim .btn {
    transition: background-color var(--nc-transition-rapide),
                color var(--nc-transition-rapide),
                transform var(--nc-transition-rapide);
  }
  .nc-presta-anim .btn:hover {
    transform: translateY(-1px);
  }
}

/* --- Réduction des mouvements : tout est visible immédiatement, aucun
       masque, aucun déplacement, aucune transition, aucun délai
       d'apparition. FAQ et navigation restent pleinement fonctionnelles
       (le HTML natif <details>/<summary> n'est jamais touché). --- */
@media (prefers-reduced-motion: reduce) {
  .nc-presta-hero--anim .nc-presta-hero__eyebrow,
  .nc-presta-hero--anim .nc-presta-hero__title,
  .nc-presta-hero--anim .nc-presta-hero__intro,
  .nc-presta-hero--anim .nc-presta-hero__price,
  .nc-presta-hero--anim .nc-presta-hero__cta-primary,
  .nc-presta-hero--anim .nc-presta-hero__ctas > .link-underline,
  .nc-presta-hero--anim .nc-presta-hero__media,
  .nc-presta-hero--anim .nc-presta-hero__media img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .nc-presta-hero--anim .nc-presta-hero__media::after {
    display: none !important;
  }

  .nc-presta-anim [data-reveal],
  .nc-presta-anim [data-reveal] * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .nc-presta-anim [data-reveal] .nc-presta-figure::after,
  .nc-presta-anim [data-reveal] .nc-presta-steps__grid::after,
  .nc-presta-anim [data-reveal].nc-presta-section--cyan::before,
  .nc-presta-anim [data-reveal].nc-presta-section--jaune::before,
  .nc-presta-anim [data-reveal].nc-presta-section--magenta::before,
  .nc-presta-anim [data-reveal] .nc-presta-cyan-group__part + .nc-presta-cyan-group__part::before {
    display: none !important;
  }

  .nc-presta-anim [data-reveal] .nc-presta-cyan-group__part + .nc-presta-cyan-group__part {
    border-color: rgba(10, 10, 10, .18) !important;
  }

  .nc-presta-anim .btn {
    transition: none !important;
  }
}