/* Boutons / CTA */
.btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(9px, .6vw, 14px);
  font: 700 var(--nc-text-cta) var(--nc-police-texte);
  padding: clamp(13px, 1.1vw, 22px) clamp(16px, 1.6vw, 32px);
  border: 0;
  cursor: pointer;
  transition: background-color var(--nc-transition-rapide), color var(--nc-transition-rapide);
}

.btn__arrow {
  display: inline-block;
  font-family: var(--nc-police-mono);
  transition: transform var(--nc-transition-rapide);
}

/* Effet centralisé : toute flèche portée par un lien ou un bouton se
   déplace légèrement au survol et au focus clavier, quel que soit le
   composant qui l'utilise (bouton, lien souligné, vignette image). Le
   survol est réservé aux dispositifs qui en disposent réellement
   (`hover: hover`) pour éviter tout état bloqué sur écran tactile ; le
   focus clavier, lui, doit toujours rester actif. */
@media (hover: hover) {
  a:hover .btn__arrow,
  button:hover .btn__arrow {
    transform: translateX(4px);
  }
}

a:focus-visible .btn__arrow,
button:focus-visible .btn__arrow {
  transform: translateX(4px);
}

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

.btn--dark:hover,
.btn--dark:focus-visible {
  background: var(--nc-magenta);
  color: var(--nc-blanc);
}

.btn--light {
  background: var(--nc-jaune);
  color: var(--nc-noir);
}

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

.btn--light-on-cyan:hover,
.btn--light-on-cyan:focus-visible {
  background: var(--nc-blanc);
  color: var(--nc-noir);
}

.btn--sm {
  padding: clamp(9px, .75vw, 16px) clamp(13px, 1.1vw, 22px);
  font: 700 var(--nc-text-cta) var(--nc-police-texte);
}

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 var(--nc-text-cta) var(--nc-police-texte);
  color: var(--nc-noir);
  border-bottom: 2px solid var(--line-color, var(--nc-noir));
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color var(--nc-transition-rapide), border-color var(--nc-transition-rapide);
}

.link-underline:hover,
.link-underline:focus-visible {
  color: var(--hover-color, var(--nc-magenta));
}

/* Variante où le trait change aussi de couleur au survol (liens sur trait noir) */
.link-underline--hover-border:hover,
.link-underline--hover-border:focus-visible {
  border-color: var(--hover-color, var(--nc-magenta));
}

/* Titres de section réutilisables — composant partagé entre la page
   d'accueil et les gabarits de pages intérieures. Chaque page peut
   redéfinir uniquement `font-size` (voir accueil.css, prestation-web.css)
   pour respecter son niveau hiérarchique, sans changer la personnalité
   graphique (famille, casse, interlettrage, interligne). */
.nc-heading {
  margin: 0;
  font: 400 clamp(1.75rem, 2.9vw, 4.5rem) var(--nc-police-titre);
  line-height: .98;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.nc-heading em {
  font: italic 400 clamp(2rem, 3.3vw, 5.125rem) var(--nc-police-italique);
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: none;
  font-style: italic;
}

/* Navigation desktop */
.nc-nav-link {
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
  transition: border-color var(--nc-transition-rapide);
}

.nc-nav-link:hover,
.nc-nav-link:focus-visible {
  border-bottom-color: var(--hover-color, var(--nc-cyan));
}

.nc-header-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: clamp(36px, 2.6vw, 44px);
  height: clamp(36px, 2.6vw, 44px);
  border: 1px solid var(--nc-noir);
  color: var(--nc-noir);
  transition: background-color var(--nc-transition-rapide), color var(--nc-transition-rapide);
}

.nc-header-phone svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) {
  .nc-header-phone:hover {
    background: var(--nc-noir);
    color: var(--nc-blanc);
  }
}

.nc-header-phone:focus-visible {
  background: var(--nc-noir);
  color: var(--nc-blanc);
}

.nc-header-cta {
  margin-left: 4px;
  /* Le CTA du header reste volontairement plus discret que les CTA
     principaux des sections : la référence lui réserve une échelle plus
     proche de la navigation (jusqu'à 18px) qu'un bouton d'appel à l'action
     pleine page. */
  font-size: var(--nc-text-nav);
  padding: clamp(10px, .85vw, 16px) clamp(16px, 1.4vw, 26px);
}

/* Survol et focus du bouton Contact du header : violet des pages violettes
   (la page Contact en est une), au lieu du magenta de .btn--dark — demande
   de Christian du 01/10/2026, sur toutes les pages. */
.nc-header-cta.btn--dark:hover,
.nc-header-cta.btn--dark:focus-visible {
  background: var(--nc-violet-page);
  color: var(--nc-blanc);
}

.nc-mega-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font: inherit;
  color: var(--nc-noir);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color var(--nc-transition-rapide);
}

.nc-mega-toggle[aria-expanded="true"] {
  border-bottom-color: var(--nc-magenta);
}

.nc-caret {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--nc-transition-rapide);
  margin-bottom: 3px;
}

.nc-mega-toggle[aria-expanded="true"] .nc-caret {
  transform: rotate(-135deg);
}

@keyframes nc-drawer-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

/* ==== Mégamenu desktop ================================================
   Superposition sous le header : positionné en absolu par rapport au
   header (qui est `position: sticky`, donc bloc conteneur), il ne
   repousse pas le hero et ne modifie pas la hauteur de la page.
   Débordé jusqu'aux bords de la fenêtre en annulant le padding inline
   du header. Affiché uniquement >= 820px (voir layout.css). */
.nc-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--nc-noir);
  color: var(--nc-blanc);
  border-bottom: 1px solid var(--nc-gris-800);
  box-shadow: 0 24px 44px -28px rgba(0, 0, 0, .65);
  animation: nc-drawer-in .18s ease both;

  /* Échelle typographique propre au mégamenu (ne touche pas aux tokens
     globaux). Progression fluide, bornée en rem ; le titre domine
     nettement la description et les liens.
       titre  : ~22px @1366 · ~27px @1920 · plafond 32px
       numéro : ~20px @1366 · ~23px @1920 · plafond 26px
       desc   : ~16px @1366 · ~18px @1920 · plafond 20px
       liens  : ~16px @1366 · ~17.5px @1920 · plafond 19px */
  --mega-title: clamp(1.375rem, 0.6rem + 0.9vw, 2rem);
  --mega-num: clamp(1.1875rem, 0.78rem + 0.56vw, 1.625rem);
  --mega-desc: clamp(1rem, 0.69rem + 0.36vw, 1.25rem);
  --mega-link: clamp(1rem, 0.77rem + 0.27vw, 1.1875rem);
  --mega-hairline: rgba(255, 255, 255, .12);
}

.nc-mega-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.nc-mega__col {
  padding: clamp(20px, 1.7vw, 40px) clamp(18px, 2vw, 48px) clamp(22px, 1.9vw, 44px);
  border-right: 1px solid var(--nc-gris-800);
  transition: background-color var(--nc-transition-rapide);
}

.nc-mega__col:last-child {
  border-right: 0;
}

@media (hover: hover) {
  .nc-mega__col:hover {
    background: rgba(255, 255, 255, .035);
  }
}

.nc-mega__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.nc-mega__num {
  flex: none;
  font: 700 var(--mega-num) var(--nc-police-mono);
  letter-spacing: .04em;
  color: var(--cat-color);
}

.nc-mega__title-text {
  font: 700 var(--mega-title) var(--nc-police-texte);
  line-height: 1.12;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--nc-blanc);
}

.nc-mega__desc {
  max-width: 34ch;
  margin-bottom: 16px;
  font: 400 var(--mega-desc) var(--nc-police-texte);
  line-height: 1.5;
  color: var(--cat-color);
}

.nc-mega__links {
  display: flex;
  flex-direction: column;
  max-width: 34ch;
  font: 600 var(--mega-link) var(--nc-police-texte);
}

.nc-mega__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  color: var(--nc-blanc);
  border-top: 1px solid var(--mega-hairline);
  transition: color var(--nc-transition-rapide);
}

.nc-mega__links a:first-child {
  border-top: 0;
}

.nc-mega__arrow {
  flex: none;
  font-family: var(--nc-police-mono);
  color: var(--nc-gris-450);
  transition: color var(--nc-transition-rapide), transform var(--nc-transition-rapide);
}

.nc-mega__links a:hover,
.nc-mega__links a:focus-visible {
  color: var(--cat-color);
}

.nc-mega__links a:hover .nc-mega__arrow,
.nc-mega__links a:focus-visible .nc-mega__arrow {
  color: var(--cat-color);
  transform: translateX(3px);
}

/* ==== Tiroir hamburger : tablette et mobile (< 820px) ================ */
/* Tiroir collant sous l'en-tête collant (14/10/2026) : ouvert après un
   défilement, il apparaît juste sous le menu et non en haut de la page ;
   défilement interne s'il dépasse la hauteur de l'écran. */
.nc-drawer {
  position: sticky;
  top: clamp(56px, 4.6vw, 88px);
  z-index: 39;
  max-height: calc(100vh - clamp(56px, 4.6vw, 88px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--nc-noir);
  color: var(--nc-blanc);
  padding: 6px 0 20px;
  animation: nc-drawer-in .18s ease both;
}

/* -- Accordéons des trois pôles -- */
.nc-drawer__acc {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nc-drawer__acc-item {
  border-bottom: 1px solid var(--nc-gris-800);
}

.nc-drawer__acc-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px var(--nc-pad-inline);
  background: transparent;
  border: 0;
  color: var(--nc-blanc);
  text-align: left;
  cursor: pointer;
}

.nc-drawer__acc-num {
  flex: none;
  font: 700 clamp(0.9375rem, 0.9rem + 0.15vw, 1rem) var(--nc-police-mono);
  letter-spacing: .06em;
}

.nc-drawer__acc-title {
  flex: 1;
  font: 700 clamp(1.125rem, 1.06rem + 0.2vw, 1.25rem) var(--nc-police-texte);
  text-transform: uppercase;
  letter-spacing: .015em;
}

.nc-drawer__acc-chevron {
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0 3px 4px 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--nc-transition-rapide);
}

.nc-drawer__acc-btn[aria-expanded="true"] .nc-drawer__acc-chevron {
  transform: rotate(225deg);
}

.nc-drawer__acc-btn:focus-visible {
  outline: 3px solid var(--nc-violet);
  outline-offset: -3px;
}

.nc-drawer__acc-panel {
  padding: 0 var(--nc-pad-inline) 14px;
}

.nc-drawer__acc-desc {
  margin-bottom: 10px;
  font: 400 var(--nc-text-secondary) var(--nc-police-texte);
  line-height: 1.5;
}

.nc-drawer__acc-links {
  display: flex;
  flex-direction: column;
}

.nc-drawer__acc-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 12px 0;
  color: var(--nc-blanc);
  border-top: 1px solid rgba(255, 255, 255, .12);
  transition: color var(--nc-transition-rapide);
}

.nc-drawer__acc-links a:first-child {
  border-top: 0;
}

.nc-drawer__link-arrow {
  flex: none;
  font-family: var(--nc-police-mono);
  color: var(--nc-gris-500);
}

@media (hover: hover) {
  .nc-drawer__acc-links a:hover {
    color: var(--cat-color);
  }
}

.nc-drawer__acc-links a:focus-visible {
  color: var(--cat-color);
  outline: 3px solid var(--cat-color);
  outline-offset: -3px;
}

.nc-drawer__acc-links a:active {
  color: var(--cat-color);
}

/* -- Navigation générale : Réalisations / Blog / À propos -- */
.nc-drawer__general {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  border-top: 1px solid var(--nc-gris-800);
}

.nc-drawer__general-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 12px var(--nc-pad-inline);
  border-bottom: 1px solid var(--nc-gris-800);
  border-left: 3px solid transparent;
  color: var(--nc-blanc);
  font: 700 var(--nc-text-cta) var(--nc-police-texte);
  transition: border-color var(--nc-transition-rapide), background-color var(--nc-transition-rapide), color var(--nc-transition-rapide);
}

.nc-drawer__general-link span {
  flex: none;
  font-family: var(--nc-police-mono);
  color: var(--nc-gris-500);
}

/* Survol / focus en violet clair (lisible sur fond noir) au lieu du magenta
   des liens (a:hover de base.css) — Réalisations, Blog, À propos
   (demande de Christian du 01/10/2026). */
@media (hover: hover) {
  .nc-drawer__general-link:hover {
    border-left-color: var(--nc-violet);
    background: rgba(155, 124, 255, .08);
    color: var(--nc-violet);
  }
}

.nc-drawer__general-link:focus-visible {
  outline: 3px solid var(--nc-violet);
  outline-offset: -3px;
  color: var(--nc-violet);
}

.nc-drawer__general-link:active,
.nc-drawer__general-link[aria-current="page"] {
  border-left-color: var(--nc-violet);
}

.nc-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px var(--nc-pad-inline) 0;
  padding: 16px 18px;
  background: var(--nc-blanc);
  color: var(--nc-noir);
  font: 700 var(--nc-text-cta) var(--nc-police-texte);
}

.nc-drawer__cta span {
  font-family: var(--nc-police-mono);
}

/* Bouton Contact du menu mobile : violet au survol et au focus, comme le
   bouton Contact du header (demande de Christian du 01/10/2026). */
.nc-drawer__cta {
  transition: background-color var(--nc-transition-rapide), color var(--nc-transition-rapide);
}

@media (hover: hover) {
  .nc-drawer__cta:hover {
    background: var(--nc-violet-page);
    color: var(--nc-blanc);
  }
}

.nc-drawer__cta:focus-visible {
  background: var(--nc-violet-page);
  color: var(--nc-blanc);
  outline: 3px solid var(--nc-violet);
  outline-offset: 2px;
}

/* Pied de page */
.nc-footer {
  background: var(--nc-noir);
  color: var(--nc-blanc);
  border-top: 1px solid var(--nc-gris-800);
  padding: var(--nc-pad-section-lg) var(--nc-pad-inline) clamp(16px, 1.2vw, 28px);
}

/* Grille du footer : présentation + 4 colonnes de liens (navigation.json).
   < 560 px : tout empilé ; 560–899 px : présentation pleine largeur puis
   2 × 2 colonnes ; 900–1199 px : présentation pleine largeur puis 4
   colonnes ; ≥ 1200 px : 5 colonnes, présentation un peu plus large. */
.nc-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 2.4vw, 48px) clamp(20px, 2vw, 48px);
}

@media (min-width: 560px) {
  .nc-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nc-footer__brand {
    grid-column: 1 / -1;
  }
}

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

@media (min-width: 1200px) {
  .nc-footer__grid {
    grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr));
  }
  .nc-footer__brand {
    grid-column: auto;
  }
}

.nc-footer__brand {
  min-width: 0;
}

.nc-footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.nc-footer__mark {
  display: grid;
  place-items: center;
  width: clamp(28px, 2vw, 40px);
  height: clamp(28px, 2vw, 40px);
  background: var(--nc-blanc);
  color: var(--nc-noir);
  font: 400 clamp(0.8125rem, .95vw, 1.125rem) var(--nc-police-titre);
}

.nc-footer__name {
  font: 400 clamp(1rem, 1.2vw, 1.5rem) var(--nc-police-titre);
  letter-spacing: -.045em;
}

.nc-footer__text {
  margin: 0 0 14px;
  font: 400 var(--nc-text-secondary) var(--nc-police-texte);
  line-height: 1.6;
  color: var(--nc-gris-400);
  max-width: 34ch;
}

.nc-footer__flags {
  display: flex;
}

.nc-footer__flags span {
  width: clamp(20px, 1.6vw, 34px);
  height: clamp(7px, .55vw, 12px);
}

.nc-footer__flags span:nth-child(1) { background: var(--nc-cyan); }
.nc-footer__flags span:nth-child(2) { background: var(--nc-magenta); }
.nc-footer__flags span:nth-child(3) { background: var(--nc-jaune); }
.nc-footer__flags span:nth-child(4) { background: var(--nc-blanc); }

.nc-footer__col {
  min-width: 0;
}

.nc-footer__col-title {
  font: 400 var(--nc-text-meta) var(--nc-police-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nc-gris-450);
  margin-bottom: 14px;
}

.nc-footer__links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font: 400 var(--nc-text-secondary) var(--nc-police-texte);
}

.nc-footer__links a {
  color: var(--nc-gris-250);
  transition: color var(--nc-transition-rapide);
}

.nc-footer__links a:hover,
.nc-footer__links a:focus-visible {
  color: var(--hover-color);
}

/* Lien des réalisations en fin de colonne métier : légèrement détaché. */
.nc-footer__links .nc-footer__link--sep {
  margin-top: 10px;
}

.nc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  margin-top: clamp(22px, 2vw, 46px);
  padding-top: 14px;
  border-top: 1px solid var(--nc-gris-800);
  font: 400 var(--nc-text-meta) var(--nc-police-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nc-gris-450);
}

/* Hero générique (pages éditoriales futures) */
.nc-generic-hero__eyebrow {
  font: 400 var(--nc-text-meta) var(--nc-police-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nc-gris-550);
  margin-bottom: 10px;
}

.nc-generic-hero__chapo {
  font: 400 var(--nc-text-lead) var(--nc-police-texte);
  line-height: 1.55;
  max-width: var(--nc-mesure);
  margin: 14px 0 22px;
}

/* Fil d'Ariane */
.nc-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px var(--nc-pad-inline);
  font: 500 13px var(--nc-police-texte);
  color: var(--nc-gris-550);
}

.nc-breadcrumbs a {
  color: var(--nc-gris-550);
}

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

.nc-breadcrumbs [aria-current="page"] {
  color: var(--nc-noir);
}


/* ===== Bandeau de consentement (mesure d'audience, 09/10/2026) =====
   Carte fixée en bas à gauche, sobre (fond blanc, filet noir, ombre
   légère), deux boutons de même importance. Lien « Gérer les cookies »
   dans le bas du footer pour rouvrir le bandeau. */
.nc-consent {
  position: fixed;
  z-index: 90;
  left: var(--nc-pad-inline);
  right: var(--nc-pad-inline);
  bottom: 16px;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 20px;
  background: var(--nc-blanc);
  color: var(--nc-noir);
  border: var(--nc-bordure);
  border-top: 4px solid var(--nc-noir);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.nc-consent[hidden] {
  display: none;
}

.nc-consent__title {
  font: 400 var(--nc-text-meta) var(--nc-police-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nc-gris-600);
}

.nc-consent__text {
  font: 400 1rem var(--nc-police-texte);
  line-height: 1.5;
  color: var(--nc-noir);
}

.nc-consent__text a {
  font-weight: 600;
  color: var(--nc-noir);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.nc-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nc-consent__btn {
  flex: 1 1 8rem;
  justify-content: center;
  background: var(--nc-noir);
  color: var(--nc-blanc);
}

.nc-consent__btn:hover,
.nc-consent__btn:focus-visible {
  background: var(--nc-violet-page);
  color: var(--nc-blanc);
}

.nc-consent__btn:focus-visible {
  outline: 3px solid var(--nc-violet-page);
  outline-offset: 2px;
}

.nc-footer__cookies {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--nc-transition-rapide);
}

.nc-footer__cookies:hover,
.nc-footer__cookies:focus-visible {
  color: var(--nc-violet);
}