/* ==========================================================================
   Reprisia, feuille de style unique
   Notice technique du transfert conventionnel du personnel de proprete
   Colonne centrale etroite, double filet a encoche, traces de circuit,
   barres de progression qui se remplissent a l apparition.
   ========================================================================== */

:root {
  --papier: #FBF6EF;
  --papier-ambre: #F3E9DB;
  --surface: #FFFFFF;
  --cacao: #2A1B12;
  --cacao-doux: #6B5142;
  --safran: #B34319;
  --safran-fonce: #93340F;
  --safran-clair: #E8C6AE;
  --cacao-profond: #43291B;
  --ocre: #E2D3C0;
  --ocre-pale: #EFE3D2;
  --sur-safran: #FFFFFF;

  --colonne: 720px;
  --gouttiere: 96px;
  --depliant: 1040px;
  --marge-tel: 20px;
  --marge-large: 40px;

  --titre: "Prata", "Times New Roman", serif;
  --courant: "Cabin", "Segoe UI", Arial, sans-serif;
  --annote: "Amatic SC", "Cabin", sans-serif;

  --biseau: 14px;
  --biseau-bouton: 12px;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Bases
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--cacao);
  font-family: var(--courant);
  font-size: 1.0625rem;
  line-height: 1.66;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--titre);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0;
  margin: 0 0 0.6em;
}

h1 { font-size: 3.1rem; }
h2 { font-size: 2.05rem; }

h3, h4 {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.3125rem;
  line-height: 1.34;
  margin: 0 0 0.45em;
}

h4 { font-size: 1.125rem; }

p { margin: 0 0 1.05em; max-width: 66ch; }

a { color: var(--safran-fonce); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--cacao);
  outline-offset: 3px;
}

img { max-width: 100%; height: auto; display: block; }

ul { margin: 0 0 1.05em; padding-left: 1.15em; }
li { margin-bottom: 0.35em; }

strong { font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--ocre); margin: 2.4rem 0; }

/* Lien de texte, filet safran decale sous la ligne de base */
.nt-corps a,
.nt-legal a,
p a {
  text-decoration: none;
  border-bottom: 2px solid var(--safran);
  padding-bottom: 1px;
  color: inherit;
}

.nt-corps a:hover,
p a:hover { color: var(--safran-fonce); border-bottom-color: var(--cacao); }

/* Reference de texte conventionnel */
.nt-reference {
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--cacao-doux);
  display: block;
}

.nt-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cacao);
  color: var(--papier);
  padding: 12px 18px;
  z-index: 90;
  font-weight: 600;
}

.nt-evitement:focus {
  left: 12px;
  top: 12px;
  position: fixed;
}

/* --------------------------------------------------------------------------
   Colonne de notice et gouttiere de marge
   -------------------------------------------------------------------------- */

.nt-colonne {
  width: 100%;
  max-width: var(--colonne);
  margin-inline: auto;
  padding-inline: var(--marge-tel);
  position: relative;
}

.nt-depliant {
  width: 100%;
  max-width: var(--depliant);
  margin-inline: auto;
  padding-inline: var(--marge-tel);
}

.nt-feuillet { padding: 4.6rem 0 4.2rem; position: relative; }
.nt-feuillet--ambre { background: var(--papier-ambre); }
.nt-feuillet--serre { padding: 3.4rem 0 3.2rem; }

.nt-surtitre {
  font-family: var(--annote);
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--safran-fonce);
  margin: 0 0 0.35rem;
  line-height: 1;
}

.nt-chapeau {
  font-size: 1.1875rem;
  color: var(--cacao-doux);
  max-width: 62ch;
}

.nt-note {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cacao-doux);
}

/* Etiquette verticale posee dans la gouttiere gauche */
.nt-etiquette {
  display: none;
  font-family: var(--annote);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cacao-doux);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  position: absolute;
  left: calc(50% - (var(--colonne) / 2) - var(--gouttiere) + 18px);
  top: 4.8rem;
  white-space: nowrap;
}

@media (min-width: 1100px) {
  .nt-etiquette { display: block; }
}

@media (min-width: 1024px) {
  .nt-colonne,
  .nt-depliant { padding-inline: var(--marge-large); }
}

/* --------------------------------------------------------------------------
   Motif signature, traces de circuit imprime avec pastilles
   -------------------------------------------------------------------------- */

.nt-piste { display: block; color: var(--ocre); }
.nt-piste line,
.nt-piste polyline,
.nt-piste path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: square;
  stroke-linejoin: miter;
  opacity: 0.7;
}

.nt-piste circle { fill: currentColor; opacity: 0.85; }
.nt-piste circle.nt-soudure { fill: var(--safran); opacity: 1; }
.nt-piste circle.nt-percage { fill: var(--papier); opacity: 1; }

/* Separateur horizontal de section */
.nt-separateur {
  margin: 3rem auto 2.6rem;
  color: var(--ocre);
  width: 100%;
}

/* Reseau de traces qui descend dans la gouttiere gauche */
.nt-cablage {
  display: none;
  position: absolute;
  left: calc(50% - (var(--colonne) / 2) - var(--gouttiere) + 8px);
  top: 0;
  height: 100%;
  width: 72px;
  color: var(--ocre);
  pointer-events: none;
}

@media (min-width: 1100px) {
  .nt-cablage { display: block; }
}

/* Filigrane dense derriere le bandeau de chiffres cles */
.nt-filigrane {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  color: var(--safran);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Forme signature, encoche a pastille
   -------------------------------------------------------------------------- */

.nt-encoche {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--cacao);
  padding: 1.5rem 1.6rem;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}

.nt-encoche::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--ocre);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  pointer-events: none;
}

/* Pastille soudee posee sur le biseau, suivie d un court trace */
.nt-encoche::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--safran);
  background-image: radial-gradient(circle at 50% 50%, var(--papier) 0 1.6px, var(--safran) 1.7px 100%);
}

.nt-encoche--ambre { background: var(--papier-ambre); }
.nt-encoche--papier { background: var(--papier); }

.nt-encoche > :last-child { margin-bottom: 0; }

.nt-fil {
  display: block;
  height: 1px;
  width: 20px;
  background: var(--ocre);
  position: absolute;
  top: 9px;
  right: 18px;
}

/* --------------------------------------------------------------------------
   En tete fixe
   -------------------------------------------------------------------------- */

.nt-bandeau {
  position: fixed;
  inset: 0 0 auto 0;
  height: 68px;
  background: rgba(251, 246, 239, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ocre);
  z-index: 60;
}

.nt-bandeau__rang {
  max-width: var(--depliant);
  height: 68px;
  margin-inline: auto;
  padding-inline: var(--marge-tel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .nt-bandeau__rang { padding-inline: var(--marge-large); }
}

.nt-lecture {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--safran);
}

.nt-marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--cacao);
  border: 0;
}

.nt-marque__nom {
  font-family: var(--titre);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

.nt-marque__carre { flex: 0 0 auto; }

.nt-ancres {
  display: none;
  gap: 1.35rem;
  align-items: center;
}

.nt-ancres a {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--cacao);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.nt-ancres a:hover { border-bottom-color: var(--safran); }

.nt-appel-entete {
  display: none;
  height: 42px;
  padding: 0 18px;
  font-size: 0.9375rem;
}

@media (min-width: 900px) {
  .nt-ancres { display: flex; }
  .nt-appel-entete { display: inline-flex; }
  .nt-declic { display: none; }
}

/* Bouton a trois traits ponctues de pastilles */
.nt-declic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--cacao);
  color: var(--cacao);
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 9px 13px;
  cursor: pointer;
}

.nt-declic svg { display: block; }

.nt-panneau {
  position: fixed;
  inset: 68px 0 auto 0;
  background: var(--papier);
  border-bottom: 1px solid var(--cacao);
  transform: translateY(-14px);
  opacity: 0;
  visibility: hidden;
  transition: transform 240ms var(--courbe), opacity 240ms var(--courbe), visibility 0s linear 240ms;
  z-index: 55;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
}

.nt-panneau[data-ouvert="oui"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 240ms var(--courbe), opacity 240ms var(--courbe), visibility 0s;
}

.nt-panneau ul {
  list-style: none;
  margin: 0;
  padding: 0.6rem var(--marge-tel) 1.4rem;
}

.nt-panneau li { border-bottom: 1px solid var(--ocre); margin: 0; }

.nt-panneau a {
  display: block;
  padding: 0.85rem 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--cacao);
  text-decoration: none;
}

body[data-fige="oui"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.nt-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--biseau-bouton)) 0, 100% var(--biseau-bouton), 100% 100%, 0 100%);
  transition: background-color 160ms var(--courbe), transform 80ms linear;
}

.nt-bouton--safran { background: var(--safran); color: var(--sur-safran); }
.nt-bouton--safran:hover { background: var(--safran-fonce); }

.nt-bouton--safran::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--papier);
  opacity: 0;
  transition: opacity 160ms var(--courbe);
}

.nt-bouton--safran:hover::after { opacity: 1; }

.nt-bouton--filet {
  background: var(--surface);
  color: var(--cacao);
  box-shadow: inset 0 0 0 1px var(--cacao), inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--ocre);
}

.nt-bouton--filet:hover {
  background: var(--papier-ambre);
  box-shadow: inset 0 0 0 1px var(--cacao), inset 0 0 0 5px var(--papier-ambre), inset 0 0 0 6px var(--safran);
}

.nt-bouton:active { transform: translateY(1px); }

.nt-bouton--large { width: 100%; }

.nt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 1.6rem 0 1.9rem;
}

/* --------------------------------------------------------------------------
   Barres de progression, signature d animation
   -------------------------------------------------------------------------- */

.nt-jauge { margin: 1.15rem 0 1.35rem; max-width: 100%; }

.nt-jauge__mention {
  font-family: var(--annote);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.15;
  color: var(--cacao-doux);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.3rem;
}

.nt-jauge__rail {
  position: relative;
  height: 6px;
  background: var(--ocre-pale);
  border: 1px solid var(--cacao);
  overflow: visible;
}

.nt-jauge__bande {
  position: absolute;
  inset: 0;
  background: var(--safran);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--courbe);
}

.nt-jauge__soudure {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--safran);
  background-image: radial-gradient(circle at 50% 50%, var(--papier) 0 1.6px, var(--safran) 1.7px 100%);
  opacity: 0;
  transition: opacity 200ms linear 820ms;
}

.nt-jauge[data-remplie="oui"] .nt-jauge__bande { transform: scaleX(var(--valeur, 0)); }
.nt-jauge[data-remplie="oui"] .nt-jauge__soudure { opacity: 1; }

.nt-jauge__pied {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cacao-doux);
}

.nt-compteur {
  font-family: var(--courant);
  font-weight: 600;
  color: var(--cacao);
  font-variant-numeric: tabular-nums;
}

/* Apparition douce au defilement */
.nt-monte {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--courbe), transform 620ms var(--courbe);
}

.nt-monte[data-vu="oui"] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.nt-ouverture { padding: 8.4rem 0 3.4rem; position: relative; }

.nt-ouverture h1 { margin-bottom: 0.5rem; }

.nt-tampon {
  display: inline-block;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--safran-fonce);
  border: 1px solid var(--safran);
  padding: 4px 10px;
  margin-bottom: 1.1rem;
}

.nt-appui {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cacao-doux);
  border-left: 2px solid var(--safran);
  padding-left: 0.85rem;
}

/* Photographies enfermees dans le double filet */
.nt-planche {
  margin: 2.4rem 0 2.2rem;
  padding: 0;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--cacao);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}

.nt-planche__cadre {
  margin: 5px;
  border: 1px solid var(--ocre);
  overflow: hidden;
  position: relative;
}

.nt-planche img {
  width: 100%;
  height: auto;
  filter: saturate(0.86) contrast(1.02);
  aspect-ratio: 3 / 1.55;
  object-fit: cover;
  object-position: center;
}

.nt-planche__cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--safran);
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.nt-planche figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.55rem 1rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cacao-doux);
}

.nt-planche figcaption svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Probleme, trois encadres ouverts par un fait chiffre
   -------------------------------------------------------------------------- */

.nt-constat { margin-bottom: 1.5rem; }

.nt-constat__chiffre {
  font-family: var(--titre);
  font-size: 2.05rem;
  line-height: 1;
  color: var(--safran-fonce);
  display: block;
  margin-bottom: 0.35rem;
}

.nt-constat h3 { margin-bottom: 0.5rem; }
.nt-constat p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Solution, quatre etapes numerotees
   -------------------------------------------------------------------------- */

.nt-suite { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: pas; }

.nt-etape {
  position: relative;
  padding: 0 0 2.1rem 3.4rem;
  margin: 0;
}

.nt-etape::before {
  counter-increment: pas;
  content: counter(pas, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--annote);
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: 0.1em;
  color: var(--safran-fonce);
  width: 2.5rem;
  line-height: 1.2;
}

.nt-etape::after {
  content: "";
  position: absolute;
  left: 1rem;
  top: 2.1rem;
  bottom: 0.35rem;
  width: 1px;
  background: var(--ocre);
}

.nt-etape:last-child { padding-bottom: 0.3rem; }
.nt-etape:last-child::after { display: none; }

.nt-etape h3 { margin-bottom: 0.35rem; }
.nt-etape p { margin-bottom: 0.6rem; }

/* --------------------------------------------------------------------------
   Fonctionnalites, deux colonnes de cartes
   -------------------------------------------------------------------------- */

.nt-jeu {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

@media (min-width: 720px) {
  .nt-jeu { grid-template-columns: 1fr 1fr; }
}

.nt-cartouche h3 { margin-bottom: 0.4rem; }
.nt-cartouche p { font-size: 1rem; margin-bottom: 0.55rem; }
.nt-cartouche p:last-of-type { margin-bottom: 0; }

.nt-cartouche__glyphe { margin-bottom: 0.7rem; color: var(--cacao-profond); }

/* --------------------------------------------------------------------------
   Avantages, quatre lignes larges avec jauge a droite
   -------------------------------------------------------------------------- */

.nt-gain {
  display: grid;
  gap: 0.6rem 1.8rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--ocre);
  align-items: start;
}

.nt-gain:last-of-type { border-bottom: 1px solid var(--ocre); }

@media (min-width: 720px) {
  .nt-gain { grid-template-columns: 1fr 236px; }
}

.nt-gain h3 { margin-bottom: 0.3rem; }
.nt-gain p { margin-bottom: 0; font-size: 1rem; }
.nt-gain .nt-jauge { margin: 0.2rem 0 0; }

/* --------------------------------------------------------------------------
   Preuve sociale
   -------------------------------------------------------------------------- */

.nt-releve {
  position: relative;
  background: var(--cacao-profond);
  color: var(--papier);
  padding: 1.9rem 1.4rem 1.6rem;
  overflow: hidden;
  margin-bottom: 2.4rem;
}

.nt-releve__grille {
  position: relative;
  display: grid;
  gap: 1.3rem;
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 720px) {
  .nt-releve__grille { grid-template-columns: repeat(4, 1fr); }
}

.nt-releve__case { position: relative; }

.nt-releve__valeur {
  font-family: var(--titre);
  font-size: 1.9rem;
  line-height: 1.05;
  color: var(--papier);
  display: block;
  margin-bottom: 0.25rem;
}

.nt-releve__libelle {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--safran-clair);
  display: block;
  line-height: 1.45;
}

.nt-releve .nt-jauge__rail { border-color: var(--safran-clair); background: rgba(232, 198, 174, 0.22); }
.nt-releve .nt-jauge { margin: 0.55rem 0 0; }

.nt-citation {
  margin: 0 0 1.35rem;
  background: var(--surface);
}

.nt-citation blockquote { margin: 0 0 0.9rem; }
.nt-citation blockquote p { margin-bottom: 0.7rem; }
.nt-citation blockquote p:last-child { margin-bottom: 0; }

.nt-citation figcaption {
  border-top: 1px solid var(--ocre);
  padding-top: 0.65rem;
  font-size: 0.875rem;
  color: var(--cacao-doux);
  font-weight: 500;
}

.nt-citation figcaption b {
  display: block;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1rem;
  color: var(--cacao);
}

/* --------------------------------------------------------------------------
   Tableau de verdicts, zone depliante
   -------------------------------------------------------------------------- */

.nt-listing { overflow-x: auto; margin: 2.2rem 0 1rem; }

.nt-listing table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.nt-listing caption {
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cacao-doux);
  padding-bottom: 0.7rem;
}

.nt-listing thead th {
  background: var(--cacao-profond);
  color: var(--papier);
  text-align: left;
  font-weight: 600;
  padding: 0.7rem 0.85rem;
  border-right: 1px solid rgba(226, 211, 192, 0.28);
}

.nt-listing thead th:last-child { border-right: 0; }

.nt-listing tbody td,
.nt-listing tbody th {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ocre);
  vertical-align: top;
  background: var(--surface);
  text-align: left;
}

.nt-listing tbody th { font-weight: 600; }

.nt-listing tbody tr:nth-child(even) td,
.nt-listing tbody tr:nth-child(even) th { background: var(--papier-ambre); }

.nt-listing .nt-reference { margin-top: 0.3rem; }

.nt-verdict {
  display: inline-block;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.nt-verdict--repris { color: var(--safran-fonce); }
.nt-verdict--hors { color: var(--cacao-doux); }
.nt-verdict--verifier { color: var(--cacao-profond); background: var(--papier-ambre); }

/* --------------------------------------------------------------------------
   Tarifs, trois colonnes depliantes
   -------------------------------------------------------------------------- */

.nt-paliers {
  display: grid;
  gap: 1.35rem;
  margin: 2.2rem 0 1.4rem;
  align-items: start;
}

@media (min-width: 860px) {
  .nt-paliers { grid-template-columns: repeat(3, 1fr); }
}

.nt-palier { display: flex; flex-direction: column; height: 100%; }

.nt-palier__nom {
  font-family: var(--titre);
  font-size: 1.55rem;
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.nt-palier__prix {
  font-family: var(--titre);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--safran-fonce);
  display: block;
}

.nt-palier__unite {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cacao-doux);
  display: block;
  margin-bottom: 0.9rem;
}

.nt-palier__cible {
  font-size: 0.9375rem;
  color: var(--cacao-doux);
  border-bottom: 1px solid var(--ocre);
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
}

.nt-palier ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.3rem;
  font-size: 0.9375rem;
  flex: 1 1 auto;
}

.nt-palier li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.55rem;
  line-height: 1.5;
}

.nt-palier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--safran);
  background-image: radial-gradient(circle at 50% 50%, var(--surface) 0 1.3px, var(--safran) 1.4px 100%);
}

.nt-palier--tenu { background: var(--papier-ambre); }

.nt-palier__fanion {
  position: absolute;
  top: -1px;
  left: -1px;
  background: var(--cacao-profond);
  color: var(--papier);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
}

.nt-palier--tenu { padding-top: 2.6rem; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.nt-questions { margin-top: 2rem; }

.nt-question {
  border-top: 1px solid var(--ocre);
  padding: 0;
}

.nt-question:last-of-type { border-bottom: 1px solid var(--ocre); }

.nt-question summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 2.4rem 1.05rem 0;
  font-weight: 600;
  font-size: 1.0625rem;
  position: relative;
  color: var(--cacao);
}

.nt-question summary::-webkit-details-marker { display: none; }

.nt-question summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 1.45rem;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--safran);
  border-bottom: 1.5px solid var(--safran);
  transform: rotate(45deg);
  transition: transform 200ms var(--courbe);
}

.nt-question[open] summary::after { transform: rotate(-135deg); }

.nt-question__corps { padding: 0 0 1.2rem; }
.nt-question__corps p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Formulaire, bordereau de contact
   -------------------------------------------------------------------------- */

.nt-bordereau { margin-top: 2rem; padding: 1.9rem 1.7rem; }

.nt-champ { margin-bottom: 1.1rem; }

.nt-champ label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.3rem;
}

.nt-champ .nt-aide {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cacao-doux);
  margin-bottom: 0.35rem;
}

.nt-champ input[type="text"],
.nt-champ input[type="email"],
.nt-champ select,
.nt-champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--cacao);
  background: var(--surface);
  border: 1px solid var(--cacao);
  padding: 0.65rem 0.75rem;
  border-radius: 0;
}

.nt-champ textarea { resize: vertical; min-height: 130px; }

.nt-champ select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--safran) 50%), linear-gradient(135deg, var(--safran) 50%, transparent 50%);
  background-position: calc(100% - 20px) 1.35rem, calc(100% - 14px) 1.35rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.nt-consentement {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 1.3rem;
}

.nt-consentement input { margin-top: 0.28rem; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--safran); }

.nt-suite-formulaire {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cacao-doux);
  margin-top: 1.1rem;
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.nt-pied {
  background: var(--cacao-profond);
  color: var(--papier);
  padding: 3.4rem 0 1.6rem;
  position: relative;
  overflow: hidden;
}

.nt-pied .nt-piste { color: var(--safran); }
.nt-pied .nt-piste line,
.nt-pied .nt-piste polyline { opacity: 0.35; }
.nt-pied .nt-piste circle.nt-percage { fill: var(--cacao-profond); }

.nt-pied__grille {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  position: relative;
}

@media (min-width: 700px) { .nt-pied__grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .nt-pied__grille { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } }

.nt-pied h2,
.nt-pied h3 {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--safran-clair);
  margin-bottom: 0.9rem;
}

.nt-pied p { color: var(--ocre); font-size: 0.9375rem; }

.nt-pied ul { list-style: none; padding: 0; margin: 0; }
.nt-pied li { margin-bottom: 0.5rem; }

.nt-pied a {
  color: var(--papier);
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 211, 192, 0.35);
  font-size: 0.9375rem;
}

.nt-pied a:hover { border-bottom-color: var(--safran-clair); color: var(--safran-clair); }

.nt-pied .nt-marque__nom { color: var(--papier); }
.nt-pied .nt-marque { color: var(--papier); }

.nt-social { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.9rem; }

.nt-pied__barre {
  border-top: 1px solid rgba(226, 211, 192, 0.28);
  margin-top: 2.6rem;
  padding-top: 1.2rem;
  font-size: 0.875rem;
  color: var(--ocre);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  position: relative;
}

/* --------------------------------------------------------------------------
   Pages internes
   -------------------------------------------------------------------------- */

.nt-interieur { padding: 7.6rem 0 3.4rem; }

.nt-fil-ariane {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cacao-doux);
  margin-bottom: 1.2rem;
}

.nt-fil-ariane a { color: var(--cacao-doux); }

.nt-legal h2 { font-size: 1.6rem; margin-top: 2.4rem; }
.nt-legal h3 { margin-top: 1.5rem; }
.nt-legal ul { max-width: 66ch; }
.nt-legal li { font-size: 1rem; }

.nt-portrait {
  border: 1px solid var(--cacao);
  padding: 5px;
  background: var(--surface);
  max-width: 220px;
  margin: 0 0 1.6rem;
}

.nt-portrait img { border: 1px solid var(--ocre); }

.nt-sommaire { list-style: none; padding: 0; margin: 2rem 0 0; }

.nt-sommaire li {
  border-top: 1px solid var(--ocre);
  padding: 0.9rem 0;
  margin: 0;
}

.nt-sommaire li:last-child { border-bottom: 1px solid var(--ocre); }

.nt-sommaire a { font-weight: 600; font-size: 1.0625rem; }

.nt-sommaire span { display: block; font-size: 0.9375rem; color: var(--cacao-doux); }

.nt-centre { text-align: center; }
.nt-centre .nt-actions { justify-content: center; }
.nt-centre p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Reglages typographiques mobiles
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  h1 { font-size: 2.05rem; }
  h2 { font-size: 1.7rem; }
  .nt-ouverture { padding-top: 7.2rem; }
  .nt-bouton { width: 100%; }
  .nt-releve__valeur { font-size: 1.6rem; }
}

/* --------------------------------------------------------------------------
   Mouvement reduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .nt-jauge__bande {
    transition: none;
    transform: scaleX(var(--valeur, 1));
  }

  .nt-jauge__soudure { transition: none; opacity: 1; }

  .nt-monte { opacity: 1; transform: none; transition: none; }

  .nt-panneau { transition: none; }

  *,
  *::before,
  *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   MAGAZINE, Le Cahier des Passations
   Section ajoutee a la suite de la feuille existante, sans en modifier
   une seule regle. Meme palette, meme colonne de notice, meme forme
   signature a encoche et pastille, meme motif de trace de circuit,
   meme signature d animation par barre qui se remplit a l apparition.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ajustements d integration du magazine dans le chassis existant
   -------------------------------------------------------------------------- */

/* Le lien du magazine porte la navigation a six ancres. Au dela de 900 pixels,
   les ancres sont deja depliees dans le rang: le bouton Sommaire y fait double
   emploi et consomme la place qui manque aux libelles. On le replie donc des
   900 pixels, comme le prevoit la direction artistique, et on interdit aux
   libelles de se couper en deux lignes. */
@media (min-width: 900px) {
  .nt-declic { display: none; }
  .nt-ancres a { white-space: nowrap; }
}

/* Symetriquement, le bouton d appel de l en tete se declare display:none dans
   sa propre regle, mais .nt-bouton, ecrite plus bas, lui rend display:inline-flex
   et, sous 640 pixels, une largeur pleine: sur telephone il recouvre alors le
   logotype et le bouton Sommaire. On le replie ici, sans toucher a la regle
   existante, pour que l en tete tienne la meme promesse sur toutes les pages. */
@media (max-width: 899px) {
  .nt-appel-entete { display: none; }
}

/* Entre 900 et 1080 pixels, on resserre en plus la gouttiere du rang. */
@media (min-width: 900px) and (max-width: 1080px) {
  .nt-ancres { gap: 0.95rem; }
  .nt-ancres a { font-size: 0.9rem; }
  .nt-appel-entete { padding: 0 14px; }
}

/* Intitule de colonne du pied de page, quand la page reserve ses h2 au corps
   redactionnel. Reprend trait pour trait le rendu de .nt-pied h2. */
.nt-pied__titre {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--safran-clair);
  margin: 0 0 0.9rem;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Grille de fiches et fiche d article
   -------------------------------------------------------------------------- */

.nt-fiches {
  display: grid;
  gap: 1.35rem;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .nt-fiches { grid-template-columns: 1fr 1fr; }
}

.nt-fiche {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--cacao);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: background-color 200ms var(--courbe), transform 200ms var(--courbe);
}

.nt-fiche::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--ocre);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 2;
}

/* Pastille de connexion soudee sur le biseau */
.nt-fiche::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--safran);
  background-image: radial-gradient(circle at 50% 50%, var(--papier) 0 1.6px, var(--safran) 1.7px 100%);
  z-index: 3;
}

.nt-fiche:hover { background: var(--papier); transform: translateY(-2px); }

/* Apparition douce carte par carte, sans perdre la transition de survol */
.nt-fiche.nt-monte {
  transition: opacity 620ms var(--courbe), transform 620ms var(--courbe), background-color 200ms var(--courbe);
}

.nt-fiche.nt-monte[data-vu="oui"] {
  transition: opacity 620ms var(--courbe), transform 200ms var(--courbe), background-color 200ms var(--courbe);
}
.nt-fiche:hover .nt-fiche__titre a { border-bottom-color: var(--cacao); }

.nt-fiche__planche {
  margin: 5px 5px 0;
  border: 1px solid var(--ocre);
  overflow: hidden;
  position: relative;
}

.nt-fiche__planche img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1.72;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.86) contrast(1.02);
}

.nt-fiche__planche::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--safran);
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.nt-fiche__texte {
  padding: 1.05rem 1.15rem 1.2rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.nt-fiche__angle {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--safran-fonce);
  border: 1px solid var(--safran);
  padding: 3px 9px;
  margin-bottom: 0.7rem;
}

.nt-fiche__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.18;
  letter-spacing: 0;
  margin: 0 0 0.55rem;
}

.nt-fiche__titre a {
  color: var(--cacao);
  text-decoration: none;
  border-bottom: 2px solid var(--safran);
  padding-bottom: 2px;
}

.nt-fiche__extrait {
  font-size: 1rem;
  color: var(--cacao-doux);
  margin: 0 0 1rem;
  max-width: none;
  flex: 1 1 auto;
}

.nt-fiche__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
  border-top: 1px solid var(--ocre);
  padding-top: 0.6rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cacao-doux);
  font-variant-numeric: tabular-nums;
}

/* Pastille de separation, une soudure vue de dessus */
.nt-point {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--safran);
  background-image: radial-gradient(circle at 50% 50%, var(--papier) 0 1.3px, var(--safran) 1.4px 100%);
  flex: 0 0 auto;
}

.nt-fiche__pied .nt-point {
  background-image: radial-gradient(circle at 50% 50%, var(--surface) 0 1.3px, var(--safran) 1.4px 100%);
}

/* Variante resserree, employee en bande de trois dans une colonne etroite */
.nt-fiche--bande .nt-fiche__planche img { aspect-ratio: 3 / 1; }
.nt-fiche--bande .nt-fiche__texte { padding: 1rem 1.2rem 1.15rem; }
.nt-fiche--bande .nt-fiche__angle { margin-bottom: 0.6rem; }
.nt-fiche--bande .nt-fiche__titre { font-size: 1.35rem; margin-bottom: 0.45rem; }
.nt-fiche--bande .nt-fiche__extrait { font-size: 1rem; margin-bottom: 0.85rem; }
.nt-fiche--bande .nt-fiche__pied { font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   Page d index du magazine
   -------------------------------------------------------------------------- */

.nt-cahier { padding: 7.6rem 0 3.6rem; position: relative; }

.nt-cahier h1 { margin-bottom: 0.5rem; }

.nt-cahier__jauge { margin-top: 1.8rem; }

/* --------------------------------------------------------------------------
   Entete d article, fil d Ariane, angle, dates et temps de lecture
   -------------------------------------------------------------------------- */

.nt-article { padding: 7.4rem 0 3.4rem; position: relative; }

.nt-jalons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cacao-doux);
  font-variant-numeric: tabular-nums;
  max-width: none;
}

.nt-jalons__angle {
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--safran-fonce);
  border: 1px solid var(--safran);
  padding: 3px 9px;
}

/* Exergue du chapeau */
.nt-exergue {
  font-size: 1.1875rem;
  line-height: 1.58;
  color: var(--cacao);
  border-left: 3px solid var(--safran);
  padding: 0.15rem 0 0.15rem 1.1rem;
  margin: 1.5rem 0 1.9rem;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Corps d article, balises nues sans aucun attribut de classe
   -------------------------------------------------------------------------- */

.nt-corps { margin-top: 2.2rem; }

.nt-corps > :first-child { margin-top: 0; }
.nt-corps > :last-child { margin-bottom: 0; }

.nt-corps h2 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 2.05rem;
  line-height: 1.18;
  letter-spacing: 0;
  margin: 2.9rem 0 0.75rem;
  padding-top: 1.5rem;
  position: relative;
  max-width: 26ch;
}

/* Double filet de section, trait cacao double a 4 pixels d un trait ocre */
.nt-corps h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--cacao);
}

.nt-corps h2::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--ocre);
}

.nt-corps h3 {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.3125rem;
  line-height: 1.34;
  margin: 1.9rem 0 0.5rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--safran);
  max-width: 34ch;
}

.nt-corps p {
  margin: 0 0 1.1em;
  max-width: 66ch;
}

.nt-corps strong { font-weight: 600; color: var(--cacao); }
.nt-corps em { font-style: italic; }

/* Listes a puce en pastille de connexion */
.nt-corps ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  max-width: 66ch;
}

.nt-corps ul li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.6rem;
  line-height: 1.6;
}

.nt-corps ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--safran);
  background-image: radial-gradient(circle at 50% 50%, var(--papier) 0 1.4px, var(--safran) 1.5px 100%);
}

/* Listes numerotees, numerotation annotee dans la marge */
.nt-corps ol {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  counter-reset: notice;
  max-width: 66ch;
}

.nt-corps ol li {
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 0.7rem;
  line-height: 1.6;
}

.nt-corps ol li::before {
  counter-increment: notice;
  content: counter(notice, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--annote);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1.1;
  color: var(--safran-fonce);
}

.nt-corps ul ul,
.nt-corps ol ol,
.nt-corps ul ol,
.nt-corps ol ul { margin: 0.55rem 0 0; }

/* Tableau recapitulatif, entete cacao et lignes paires ambrees */
.nt-corps table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  margin: 1.9rem 0;
  border: 1px solid var(--cacao);
}

.nt-corps thead th {
  background: var(--cacao-profond);
  color: var(--papier);
  text-align: left;
  font-family: var(--courant);
  font-weight: 600;
  padding: 0.7rem 0.85rem;
  border-right: 1px solid rgba(226, 211, 192, 0.28);
  vertical-align: bottom;
}

.nt-corps thead th:last-child { border-right: 0; }

.nt-corps tbody td,
.nt-corps tbody th {
  padding: 0.68rem 0.85rem;
  border: 1px solid var(--ocre);
  vertical-align: top;
  text-align: left;
  background: var(--surface);
  line-height: 1.5;
}

.nt-corps tbody th { font-weight: 600; }

.nt-corps tbody tr:nth-child(even) td,
.nt-corps tbody tr:nth-child(even) th { background: var(--papier-ambre); }

/* Encadre, forme signature complete avec biseau et pastille soudee */
.nt-corps aside {
  position: relative;
  background-color: var(--papier-ambre);
  border: 1px solid var(--cacao);
  box-shadow: inset 0 0 0 4px var(--papier-ambre), inset 0 0 0 5px var(--ocre);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  background-image: radial-gradient(circle at 50% 50%, var(--papier-ambre) 0 1.6px, var(--safran) 1.7px 4.5px, transparent 4.6px);
  background-repeat: no-repeat;
  background-position: right 5px top 5px;
  background-size: 9px 9px;
  padding: 1.5rem 1.6rem;
  margin: 2rem 0;
  max-width: 66ch;
}

.nt-corps aside > :last-child { margin-bottom: 0; }
.nt-corps aside p { font-size: 1rem; }

/* Citation */
.nt-corps blockquote {
  margin: 2rem 0;
  padding: 1.15rem 1.3rem 1.15rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--ocre);
  border-left: 3px solid var(--safran);
  max-width: 62ch;
  color: var(--cacao);
}

.nt-corps blockquote p {
  margin-bottom: 0.7rem;
  font-size: 1.0625rem;
}

.nt-corps blockquote > :last-child { margin-bottom: 0; }

/* Figure de corps */
.nt-corps figure {
  margin: 2rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--cacao);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  max-width: 66ch;
}

.nt-corps figure > :last-child { margin-bottom: 0; }

.nt-corps figcaption {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cacao-doux);
  border-top: 1px solid var(--ocre);
  padding-top: 0.5rem;
  margin-top: 0.6rem;
}

.nt-corps a { color: var(--cacao); }

/* --------------------------------------------------------------------------
   Appel a l action de fin d article
   -------------------------------------------------------------------------- */

.nt-relance { margin: 2.8rem 0 0; }
.nt-relance p:last-of-type { margin-bottom: 0; }
.nt-relance .nt-actions { margin: 1.2rem 0 0; }

/* --------------------------------------------------------------------------
   Encart auteur
   -------------------------------------------------------------------------- */

.nt-signature {
  display: grid;
  grid-template-columns: 106px 1fr;
  gap: 0.2rem 1.25rem;
  align-items: start;
  margin: 3rem 0 0;
  padding: 1.5rem 1.6rem;
}

.nt-signature__photo {
  grid-row: span 4;
  margin: 0;
  padding: 4px;
  background: var(--papier);
  border: 1px solid var(--ocre);
  width: 106px;
}

.nt-signature__photo img { width: 96px; height: 96px; object-fit: cover; }

.nt-signature__nom {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0 0 0.15rem;
  max-width: none;
}

.nt-signature__role {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--cacao-doux);
  margin: 0 0 0.6rem;
  max-width: none;
}

.nt-signature__bio { font-size: 1rem; margin-bottom: 0.6rem; }
.nt-signature > :last-child { margin-bottom: 0; }

@media (max-width: 520px) {
  .nt-signature { grid-template-columns: 1fr; }
  .nt-signature__photo { grid-row: auto; margin-bottom: 0.9rem; }
}

/* --------------------------------------------------------------------------
   Bloc A lire aussi
   -------------------------------------------------------------------------- */

.nt-relais { margin: 3.2rem 0 0; }

.nt-relais__intitule {
  font-family: var(--annote);
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--safran-fonce);
  margin: 0 0 1.1rem;
  line-height: 1;
  max-width: none;
}

.nt-relais__grille {
  display: grid;
  gap: 1.1rem;
}

@media (min-width: 700px) {
  .nt-relais__grille { grid-template-columns: repeat(3, 1fr); }
}

.nt-relais__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--cacao);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: background-color 200ms var(--courbe);
}

.nt-relais__carte::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--ocre);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 2;
}

.nt-relais__carte::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--safran);
  background-image: radial-gradient(circle at 50% 50%, var(--papier) 0 1.6px, var(--safran) 1.7px 100%);
  z-index: 3;
}

.nt-relais__carte:hover { background: var(--papier); }

.nt-relais__planche {
  margin: 5px 5px 0;
  border: 1px solid var(--ocre);
  overflow: hidden;
  position: relative;
}

.nt-relais__planche img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1.72;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.02);
}

.nt-relais__planche::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--safran);
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.nt-relais__texte { padding: 0.9rem 1.05rem 1.05rem; }

.nt-relais__titre {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  margin: 0 0 0.4rem;
  max-width: none;
}

.nt-relais__titre a {
  color: var(--cacao);
  text-decoration: none;
  border-bottom: 2px solid var(--safran);
  padding-bottom: 1px;
}

.nt-relais__accroche {
  font-size: 0.9375rem;
  color: var(--cacao-doux);
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Section Derniers articles de la page d accueil
   -------------------------------------------------------------------------- */

.nt-derniers .nt-fiches { grid-template-columns: 1fr; gap: 1.2rem; }
.nt-derniers .nt-actions { margin: 1.9rem 0 0.2rem; }

/* --------------------------------------------------------------------------
   Parutions listees sur les pages internes
   -------------------------------------------------------------------------- */

.nt-parution {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cacao-doux);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Reglages mobiles du magazine
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .nt-cahier { padding-top: 7rem; }
  .nt-article { padding-top: 6.8rem; }
  .nt-corps h2 { font-size: 1.7rem; margin-top: 2.4rem; }
  .nt-exergue { font-size: 1.0625rem; }
}

/* --------------------------------------------------------------------------
   Mouvement reduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nt-fiche,
  .nt-relais__carte { transition: none; }
  .nt-fiche:hover { transform: none; }
}