/* Page « À propos » (/a-propos/) — première « page violette » du site
   (voir AGENTS.md, « Familles visuelles : pages violettes »).

   Cette feuille vient en complément de prestation-web.css (chargée juste
   avant elle) : header, footer, hero, duo texte/image, pair, prose, listes,
   étapes, FAQ et CTA final réutilisent tels quels les composants partagés
   de ce fichier. Rien n'est modifié ici dans prestation-web.css lui-même :
   toutes les règles ci-dessous sont scopées à `.nc-apropos-page`, donc sans
   effet sur les pages de prestation (cyan/jaune/magenta). */

/* --- Filet propre aux pages violettes : violet 50 %, puis cyan, magenta et
   jaune à parts égales (1/6 chacun), toujours dans cet ordre, paliers nets (jamais
   de dégradé progressif) — remplace ici le filet 70/15/15 des pages de
   prestation, uniquement pour cette page. --- */
.nc-apropos-page .nc-presta-hero__bar,
.nc-apropos-page .nc-presta-figure__bar {
  background: linear-gradient(90deg,
    var(--nc-violet-page) 0% 50%,
    var(--nc-cyan) 50% 66.667%,
    var(--nc-magenta) 66.667% 83.333%,
    var(--nc-jaune) 83.333% 100%);
}

/* --- Hero : plus compact que sur les pages de prestation, pour laisser
   apparaître le début de la section suivante sur un écran d'ordinateur
   courant. --- */
.nc-apropos-hero .nc-presta-hero__text {
  padding-block: var(--nc-pad-section-md);
}

.nc-apropos-hero__media {
  min-height: clamp(260px, 20vw, 480px);
}

.nc-apropos-hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: clamp(10px, 1vw, 18px) clamp(14px, 1.6vw, 28px);
  font: 400 var(--nc-text-secondary) var(--nc-police-texte);
  color: var(--nc-blanc);
  background: linear-gradient(0deg, rgba(10, 10, 10, .55), transparent);
}

/* --- Domaines (« Un véritable couteau suisse de la communication ») :
   composition typographique sans carte ni bordure arrondie — un numéro
   coloré, un titre, un paragraphe, séparés par de simples filets. --- */
.nc-apropos-domains {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 2.2vw, 40px);
  margin-top: clamp(22px, 2.2vw, 48px);
}

.nc-apropos-domains__item {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, .6vw, 12px);
  padding-top: clamp(16px, 1.6vw, 28px);
  border-top: 1px solid var(--nc-gris-300);
}

.nc-apropos-domains__num {
  font: 400 var(--nc-text-meta) var(--nc-police-mono);
  letter-spacing: .1em;
}

.nc-apropos-domains__num--1 { color: var(--nc-violet-page); }
.nc-apropos-domains__num--2 { color: var(--nc-cyan-texte-fonce); }
.nc-apropos-domains__num--3 { color: var(--nc-magenta); }
.nc-apropos-domains__num--4 { color: var(--nc-jaune-texte); }

.nc-apropos-domains__title {
  margin: 0;
  font: 700 clamp(1.0625rem, 1.15vw, 1.375rem) var(--nc-police-texte);
  letter-spacing: -.01em;
}

.nc-apropos-domains__body {
  margin: 0;
  font: 400 var(--nc-text-body) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-gris-600);
}

/* Maillage vers les pages de prestation (12/10/2026) : titre cliquable
   (violet au survol) et liens soulignés de violet dans le texte. */
.nc-apropos-domains__title a {
  color: inherit;
  transition: color var(--nc-transition-rapide);
}

.nc-apropos-domains__title a:hover,
.nc-apropos-domains__title a:focus-visible {
  color: var(--nc-violet-page);
}

.nc-apropos-domains__body a {
  color: var(--nc-noir);
  text-decoration: underline;
  text-decoration-color: var(--nc-violet-page);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--nc-transition-rapide);
}

.nc-apropos-domains__body a:hover,
.nc-apropos-domains__body a:focus-visible {
  color: var(--nc-violet-page);
}

.nc-apropos-domains__outro {
  margin-top: clamp(22px, 2.2vw, 44px);
}

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

  .nc-apropos-domains__item {
    border-top: 0;
    padding-top: 0;
    padding-left: clamp(20px, 2vw, 36px);
    border-left: 1px solid var(--nc-gris-300);
  }

  .nc-apropos-domains__item:nth-child(2n+1) {
    border-left: 0;
    padding-left: 0;
  }
}

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

  .nc-apropos-domains__item {
    border-top: 0;
    padding-top: 0;
    padding-left: clamp(20px, 2vw, 36px);
    border-left: 1px solid var(--nc-gris-300);
  }

  .nc-apropos-domains__item:nth-child(4n+1) {
    border-left: 0;
    padding-left: 0;
  }
}

/* --- Méthode de travail : première couleur violette, puis cyan, magenta,
   jaune (au lieu de cyan/magenta/jaune sur les pages de prestation). --- */
.nc-apropos-steps .nc-presta-step:nth-child(1) .nc-presta-step__num { color: var(--nc-violet-page); }
.nc-apropos-steps .nc-presta-step:nth-child(2) .nc-presta-step__num { color: var(--nc-cyan); }
.nc-apropos-steps .nc-presta-step:nth-child(3) .nc-presta-step__num { color: var(--nc-magenta); }
.nc-apropos-steps .nc-presta-step:nth-child(4) .nc-presta-step__num { color: var(--nc-jaune); }

/* --- Pourquoi faire appel à Netcreation : six raisons en deux colonnes,
   sans carte ni encadré — simples paires titre/paragraphe. --- */
.nc-apropos-reasons {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 2.2vw, 40px);
  margin-top: clamp(22px, 2.2vw, 48px);
}

@media (min-width: 820px) {
  .nc-apropos-reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 2.8vw, 56px) clamp(32px, 3.4vw, 76px);
  }
}

/* --- Bandeau « Le conseil de Netcreation » : violet plein, texte blanc —
   même composition que les encarts teintés des pages de prestation
   (.nc-presta-split), couleur propre à cette page uniquement. --- */
.nc-apropos-section--violet {
  background: var(--nc-violet-page);
  padding: var(--nc-pad-section-lg) var(--nc-pad-inline);
}

.nc-apropos-section--violet .nc-heading,
.nc-apropos-section--violet .nc-presta-prose p {
  color: var(--nc-blanc);
}

/* Sections texte + image sur fond violet (12/10/2026, rythme demandé par
   Christian : « Votre imprimeur… » et « À La Ciotat, autour et à
   distance »). Fond seul : la structure du duo (image bord à bord, marges
   de la colonne de texte) reste celle de prestation-web.css. */
.nc-apropos-duo--violet {
  background: var(--nc-violet-page);
}

.nc-apropos-duo--violet .nc-heading,
.nc-apropos-duo--violet .nc-presta-prose p,
.nc-apropos-duo--violet .nc-presta-prose__subheading {
  color: var(--nc-blanc);
}

.nc-apropos-duo--violet .nc-presta-prose a {
  color: var(--nc-blanc);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: background-color var(--nc-transition-rapide), color var(--nc-transition-rapide);
}

.nc-apropos-duo--violet .nc-presta-prose a:hover,
.nc-apropos-duo--violet .nc-presta-prose a:focus-visible {
  background: var(--nc-blanc);
  color: var(--nc-violet-page);
  text-decoration: none;
}

.nc-apropos-duo--violet :focus-visible {
  outline-color: var(--nc-blanc);
}

/* Filet de séparation entre les deux colonnes de `.nc-presta-pair` : gris
   clair par défaut, peu lisible sur fond violet — éclairci pour ce bloc. */
.nc-apropos-section--violet .nc-presta-pair__col + .nc-presta-pair__col {
  border-color: rgba(255, 255, 255, .35);
}

/* --- FAQ : survol des questions au fond violet de la page (texte blanc).
   Sur les pages de prestation, ce survol n'existe que lorsque le système
   d'animation est actif (`.nc-presta-anim`) ; cette page ne l'utilise pas,
   d'où cette règle dédiée, propre à `.nc-apropos-page`. --- */
@media (hover: hover) {
  .nc-apropos-page .nc-presta-faq__q {
    transition: background-color var(--nc-transition-rapide), color var(--nc-transition-rapide);
  }

  .nc-apropos-page .nc-presta-faq__q:hover {
    background: var(--nc-violet-page);
    color: var(--nc-blanc);
  }
}