/* Les couleurs ne vivent plus ici. Elles sont toutes dans tokens.css,
   qui porte les deux modes, jour et nuit.

   Ce fichier en gardait une copie, et comme il est charge APRES
   tokens.css, c'est cette copie qui gagnait : le fichier des couleurs
   ne servait a rien, sans que rien ne le signale. C'est le meme piege
   que deux liens de partenaire stockes des deux cotes, deux verites qui
   divergent au premier changement.

   Ne pas redeclarer ici une couleur, meme « juste pour essayer ». */
:root {
  --hero-desktop-y: 58%;
  --hero-tablet-y: 56%;
  --hero-mobile-y: 54%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Le fond de toutes les pages.

   Les deux halos de couleur des coins ont ete retires : la charte
   refuse « les gros effets neon » et « les degrades inutiles », et
   ceux-la etaient les deux a la fois, un bleu et un vert diffuses en
   permanence derriere le contenu. Le fond est desormais une seule
   teinte, celle du jeton, donc il suit la bascule jour et nuit sans
   qu'on ait rien d'autre a faire.

   La taille du texte est posee ici et pas ailleurs : c'est la reference
   dont tout le reste herite. 16 px est un plancher, pas une moyenne,
   parce que sept visiteurs sur dix ont plus de cinquante ans. */
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

/* Intro Ascendra */

@keyframes intro-pulse {
  0% { opacity: 0; transform: scale(0.82); }
  55% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* Quatre animations tournaient en boucle sur toutes les pages : deux
   filets lumineux verts qui glissaient sous l'en-tete et au-dessus du
   pied de page, et deux halos qui pulsaient derriere les logos. Elles
   ont ete retirees le 26 aout 2026.

   La liste des animations interdites de la charte s'ouvre sur
   « animations permanentes » et « elements qui bougent sans raison ».
   Aucune ne portait d'information, et les quatre repeignaient en
   continu, sur chaque page, y compris pendant la lecture. */

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 5px 14px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.site-header.scrolled {
  /* color-mix garde la transparence tout en suivant le mode : ecrit en
     dur, ce fond restait sombre quand la page passe en clair, et la
     barre du haut devenait une bande noire sur une page blanche. */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

/* Cinq entrees suffisent : les raccourcis de famille et le gage ont ete
   retires, la barre n'a plus besoin de 1400 px. Elle revient a 1120 px
   et la hauteur tombe de moitie — 103 px d'en-tete pour cinq liens,
   c'etait une banniere, pas une barre de navigation. */
.navbar {
  width: min(100%, 1120px);
  min-height: 34px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Le logo et le nom ne se compriment jamais : ce sont eux qu'on retire
   en dernier, pas en premier. */
.brand {
  margin-right: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.brand img {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Le nom de la marque, a cote du logo.
   Il vivait dans recompenses.css, une feuille de page : toute page qui
   ne la chargeait pas affichait « ASCENDRA » en Inter maigre, colle au
   menu au lieu d'etre pose contre le logo. C'etait le cas de la page
   partenaires, des deux pages legales et de la page d'erreur.

   Cette regle appartient a l'en-tete, pas a une page : elle vit donc
   avec lui, et toute page qui porte l'en-tete l'a desormais sans avoir
   rien a charger de plus.

   10 px pour un nom de marque, c'etait une mention legale, pas une
   signature. La barre est calee sur le logo, donc l'agrandir ne la fait
   pas grandir : hauteur mesuree avant et apres, elle ne bouge pas. */
.resource-brand-name {
  margin-right: auto;
  color: var(--text);
  font: 700 15px var(--ff-marque);
  letter-spacing: .13em;
}

/* ==========================================================
   La bascule jour et nuit
   ----------------------------------------------------------
   Sa forme vient de la maquette que Joris a jointe a son pense-bete :
   une pilule, un pouce rond qui glisse, un soleil d'un cote et une lune
   de l'autre. Il en avait choisi la variante sobre, en gris et
   anthracite, plutot que celles en ambre et en bleu.

   Elle vit dans la feuille de base et non dans celle d'une page :
   l'en-tete est partage, donc ses regles le sont aussi. Une regle
   d'en-tete rangee dans une feuille de page avait deja coute une
   journee le 23 aout 2026, toutes les pages sauf trois affichant le nom
   de la marque de travers.
   ========================================================== */

.bascule-theme {
  position: relative;
  flex: 0 0 auto;
  width: 60px;
  height: var(--tap);
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}

.bascule-theme:hover {
  border-color: var(--accent-line);
}

.bascule-theme:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

/* Le pouce. Il porte les deux pictogrammes ; c'est le mode qui decide
   lequel se voit, et la meme regle deplace le pouce. */
.bascule-pouce {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--text);
  display: grid;
  place-items: center;
  transition: transform .34s cubic-bezier(.4, .1, .2, 1);
}

.bascule-pouce svg {
  width: 16px;
  height: 16px;
  display: block;
  color: var(--bg);
}

.bascule-pouce .bascule-soleil { display: none; }

:root[data-theme="light"] .bascule-pouce {
  transform: translateY(-50%) translateX(24px);
}

:root[data-theme="light"] .bascule-pouce .bascule-lune { display: none; }
:root[data-theme="light"] .bascule-pouce .bascule-soleil { display: block; }

@media (prefers-reduced-motion: reduce) {
  .bascule-theme,
  .bascule-pouce { transition: none; }
}

/* Sur telephone le menu se replie derriere le bouton hamburger, mais la
   bascule reste visible : c'est un reglage de confort, il ne doit pas
   demander d'ouvrir un menu pour etre atteint. */
@media (max-width: 900px) {
  .bascule-theme {
    order: 2;
    margin-left: auto;
    margin-right: 8px;
  }
}

.nav-links {
  display: flex;
  gap: 4px;
}

.nav-links a {
  min-height: var(--tap);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 11px;
  color: var(--muted);
  text-decoration: none;
  font-size: 16px;
}

.nav-links a:hover {
  color: var(--text);
  background: var(--surface-2);
}

.menu-toggle {
  display: none;
  width: var(--tap);
  height: var(--tap);
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
}

.menu-toggle span {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: var(--green);
}

/* Global layout */
.shell {
  width: min(100%, 960px);
  margin: auto;
  padding: 92px 14px 36px;
}

/* Hero */
.hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 34px;
  background: #07100b;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.36);
}

.hero h1 {
  margin: 0;
  font: 700 clamp(58px, 13vw, 96px) var(--ff-titre);
  letter-spacing: 0.12em;
}

.hero-subline {
  margin: 10px 0 0;
  color: #d5e3dc;
  font: 500 14px var(--ff-titre);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.78;
}

.social-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.social-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(13, 21, 18, 0.72);
  color: #d9e4de;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.social-button:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: 0 0 18px rgba(85, 230, 149, 0.10);
}

.social-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-button[data-project="Discord"] svg {
  fill: currentColor;
  stroke: none;
}

.social-button[data-project="Discord"] svg circle {
  fill: #08100e;
}

/* Identity */
.identity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.identity-card {
  min-height: 112px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(22, 32, 29, 0.82),
      rgba(11, 18, 16, 0.92)
    );
}

.identity-card span {
  color: var(--green);
  font: 600 14px var(--ff-titre);
}

.identity-card strong {
  font-size: 14px;
}

/* Sections */
.section-panel {
  margin-top: 14px;
  padding: 30px 24px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    linear-gradient(
      145deg,
      rgba(20, 29, 26, 0.92),
      rgba(10, 17, 15, 0.95)
    );
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.19);
}

.section-heading {
  margin-bottom: 24px;
  text-align: center;
}

.section-heading h2 {
  margin: 0;
  font: 600 clamp(26px, 5vw, 34px) var(--ff-titre);
}

.section-heading p {
  max-width: 620px;
  margin: 10px auto 0;
  color: var(--muted);
  font-size: 14px;
}

/* Partner cards — stable V1, no broken orbit */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.partner-card {
  position: relative;
  min-height: 132px;
  padding: 17px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(22, 32, 29, 0.985),
      rgba(10, 17, 15, 0.995)
    );
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.partner-card:hover,
.partner-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(85, 230, 149, 0.55);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.24),
    0 0 24px rgba(85, 230, 149, 0.12);
}

.partner-logo {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
}

.partner-logo img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
  transition: transform 0.22s ease;
}

.partner-card:hover .partner-logo img,
.partner-card:focus-visible .partner-logo img {
  transform: scale(1.08);
}

.partner-copy {
  min-width: 0;
  transition: transform 0.22s ease;
}

.partner-copy strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}

.partner-copy small {
  display: block;
  min-height: 32px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.partner-cta {
  position: absolute;
  left: 90px;
  right: 17px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  color: var(--green-soft);
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.partner-card:hover .partner-copy,
.partner-card:focus-visible .partner-copy {
  transform: translateY(-8px);
}

.partner-card:hover .partner-cta,
.partner-card:focus-visible .partner-cta {
  opacity: 1;
  transform: translateY(0);
}

.partner-vinted img {
  width: 82%;
  height: 82%;
  filter:
    drop-shadow(0 0 7px rgba(9, 173, 178, 0.18))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22));
}

.partner-bourso img {
  width: 80%;
  height: 80%;
}

.partner-bitstack img {
  width: 58px;
  height: 58px;
  border-radius: 15px;
  object-fit: cover;
}

.responsible-note {
  margin: 15px 2px 0;
  color: var(--faint);
  font-size: 14px;
  text-align: center;
}

/* Book */

.vote-button {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(14, 22, 19, 0.86);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.vote-icon {
  display: grid;
  place-items: center;
}

.vote-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vote-label {
  font: 600 14px var(--ff-titre);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.vote-button.pass {
  color: #ff8c99;
}

.vote-button.pass:hover {
  color: #ffb3bc;
  transform: translateY(-2px);
  border-color: rgba(255, 91, 111, 0.78);
  background:
    linear-gradient(
      145deg,
      rgba(83, 13, 23, 0.88),
      rgba(35, 8, 12, 0.92)
    );
  box-shadow: 0 0 25px rgba(255, 91, 111, 0.20);
}

.vote-button.like {
  color: #6ee7a5;
}

.vote-button.like:hover {
  color: #baf7d4;
  transform: translateY(-2px);
  border-color: rgba(85, 230, 149, 0.82);
  background:
    linear-gradient(
      145deg,
      rgba(19, 70, 45, 0.88),
      rgba(7, 30, 19, 0.94)
    );
  box-shadow: 0 0 25px rgba(85, 230, 149, 0.20);
}

.vote-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1px solid rgba(199, 220, 211, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  font-size: 14px;
}

.vote-stats strong {
  display: block;
  color: var(--text);
  font: 700 17px var(--ff-titre);
  text-align: center;
}

.selector-dot {
  width: 38px;
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
}

.selector-dot.active {
  background: linear-gradient(90deg, #76e4aa, #9ad7f5);
}

.vote-note {
  color: var(--faint);
  font-size: 14px;
  text-align: center;
}

/* Journey */

/* Contact */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--green-soft);
  font-size: 14px;
}

input,
textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font: inherit;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

.primary-button,
.secondary-button {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.secondary-button {
  background: rgba(255, 255, 255, 0.035);
  color: var(--green-soft);
}

/* Footer */
.site-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--muted);
  font: 500 15px var(--ff-texte);
}

/* V1.9 — lisibilité, accessibilité et liens de confiance */
/* Le lisere de navigation au clavier, pour tout ce qui se focalise.
   « summary » y a ete ajoute le 26 aout 2026 : les accordeons des
   cartes d'offres et des questions frequentes en sont, et ils etaient
   les seuls elements atteignables au clavier sans retour visible.
   Le [tabindex] couvre ce qui est rendu focalisable a la main. */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.footer-legal{grid-column:1/-1;width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;padding-top:16px;margin-top:8px;border-top:1px solid var(--line)}
.footer-legal a{font-size:15px;color:var(--muted);text-decoration:none;letter-spacing:.03em}.footer-legal a:hover,.footer-legal a:focus-visible{color:var(--text)}
@media(max-width:760px){.nav-links a,.menu-toggle,.platform-btn,.shop-header a,.resource-footer a{min-height:44px}.footer-legal{gap:6px 12px}.footer-legal a{min-height:36px;display:inline-flex;align-items:center}}

.footer-home img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.footer-center {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-center a {
  text-decoration: none;
}

.footer-right {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
}

/* Modal */
[hidden] {
  display: none !important;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 6, 4, 0.72);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.project-modal {
  position: relative;
  width: min(100%, 420px);
  padding: 32px 26px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, #15201c, #0a110f);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.modal-backdrop.is-open .project-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: none;
  color: #c8d3cd;
  font-size: 26px;
  cursor: pointer;
}

.project-modal h2 {
  margin: 0;
  font: 600 22px var(--ff-titre);
}

.project-modal p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* Tablet */
@media (max-width: 780px) {
  .visit-counter span {
    display: none;
  }

  .nav-links {
    position: absolute;
    top: 70px;
    right: 14px;
    width: min(250px, calc(100vw - 28px));
    display: none;
    padding: 10px;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(2, 10, 7, 0.96);
  }

  .nav-links.open {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  .hero {
    min-height: 700px;
  }

  .hero-image {
    object-position: center var(--hero-tablet-y);
  }

  .identity-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .partner-card {
    min-height: 164px;
    padding: 15px;
    grid-template-columns: 1fr;
    align-content: start;
    text-align: center;
  }

  .partner-logo {
    width: 56px;
    height: 56px;
    margin: 0 auto;
  }

  .partner-copy strong {
    font-size: 14px;
  }

  .partner-copy small {
    font-size: 14px;
  }

  .partner-cta {
    left: 14px;
    right: 14px;
    justify-content: center;
    gap: 9px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 520px) {
  .shell {
    padding-top: 84px;
  }

  .brand img {
    width: 48px;
    height: 48px;
  }

  .hero {
    min-height: 640px;
    border-radius: 26px;
  }

  .hero-image {
    object-position: center var(--hero-mobile-y);
  }

  .hero-content {
    left: 16px;
    right: 16px;
    bottom: 24px;
  }

  .hero h1 {
    font-size: clamp(52px, 16vw, 82px);
  }

  .hero-subline {
    font-size: 14px;
    letter-spacing: 0.07em;
  }

  .identity-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .identity-card {
    min-height: 100px;
    padding: 15px;
  }

  .identity-card strong {
    font-size: 14px;
  }

  .section-panel {
    padding: 24px 16px;
  }

  .partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .partner-card {
    min-height: 172px;
    padding: 13px 10px;
    border-radius: 20px;
  }

  .partner-logo {
    width: 52px;
    height: 52px;
  }

  .partner-copy strong {
    margin-bottom: 5px;
    font-size: 14px;
  }

  .partner-copy small {
    font-size: 14px;
    line-height: 1.35;
  }

  .partner-cta {
    font-size: 14px;
    opacity: 1;
    transform: none;
  }

  .partner-card:hover .partner-copy,
  .partner-card:focus-visible .partner-copy {
    transform: none;
  }

  .book-actions {
    grid-template-columns: 76px 1fr 76px;
  }

  .vote-button {
    flex-direction: column;
    gap: 3px;
  }

  .vote-icon svg {
    width: 19px;
    height: 19px;
  }

  .vote-label {
    font-size: 14px;
  }

  .mail-actions {
    grid-template-columns: 1fr;
  }

  .site-footer {
    grid-template-columns: auto 1fr;
  }

  .footer-right {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
}


/* =========================================================
   ACCUEIL V1.4 — CARBON, ACQUISITION ET HEADER PREMIUM
   ========================================================= */

/* Deux halos de couleur et un degrade sombre, reposes ici par-dessus le
   fond du haut de la feuille. Retires le 26 aout 2026 : ils figeaient la
   page en sombre, et la charte refuse les degrades qui n'apportent rien.
   C'etait la troisieme couche de fond du site, sur trois. */

/* La texture en damier posee sur toute la page a ete retiree : elle
   melangeait du blanc et du noir translucides, donc elle se voyait a
   l'envers en mode jour, et la charte demande « quelque chose de tres
   propre, sobre ». */

.site-header {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.site-header::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -1px;
  height: 1px;
  background: none;
  opacity: 0;
}

.site-header .brand {
  position: relative;
}

.site-header .brand::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: none;
  opacity: 0;
}

.site-header .brand img {
  position: relative;
  z-index: 1;

}

.nav-links a {
  position: relative;
  /* « Nous contacter » passait sur deux lignes et grandissait sa
     pastille, cassant l'alignement de toute la rangee. */
  white-space: nowrap;
}

/* En-tete complet : raccourcis de famille, bouton de contact, gage de
   verification.
 *
 * Les raccourcis pointent vers les familles et non vers des marques
 * precises. Une marque citee dans l'en-tete de quatorze pages statiques
 * se perime le jour ou l'offre s'arrete, et il faudrait repasser sur les
 * quatorze. Une famille, elle, ne bouge pas.
 *
 * Ils disparaissent sous 1300 px : dix entrees ne tiennent pas sur une
 * barre de 1120 px sans que tout devienne minuscule. Ils restent
 * accessibles dans le menu deroulant sur mobile, ou la place ne manque
 * pas. */
.nav-famille {
  opacity: .78;
  font-weight: 600;
}

.nav-famille:hover {
  opacity: 1;
}

@media (min-width: 901px) and (max-width: 1299px) {
  .nav-famille {
    display: none;
  }
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -8px;
  height: 1px;
  background: linear-gradient(90deg, var(--green), var(--blue));
  transition: left .22s ease, right .22s ease, opacity .22s ease;
  opacity: 0;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  left: 10%;
  right: 10%;
  opacity: 1;
}

.hero {
  box-shadow:
    0 34px 90px rgba(0,0,0,.38),
    0 0 0 1px rgba(85,230,149,.055),
    0 0 46px rgba(85,230,149,.045);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(120deg, transparent 0 64%, rgba(85,230,149,.045) 77%, transparent 91%);
  mix-blend-mode: screen;
}

.section-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(85,230,149,.055), transparent 23rem),
    linear-gradient(145deg, rgba(17,27,23,.96), rgba(7,14,11,.985));
}

.section-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 55%;
  height: 135%;
  right: -23%;
  top: -28%;
  opacity: .12;
  pointer-events: none;
  border-radius: 50%;
  background:
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25% 75%, rgba(255,255,255,.035) 75%),
    linear-gradient(45deg, rgba(0,0,0,.27) 25%, transparent 25% 75%, rgba(0,0,0,.27) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  transform: rotate(9deg);
}

.section-panel > * {
  position: relative;
  z-index: 1;
}

#bons-plans::before,
#contact::before {
  opacity: .07;
}

.resource-promo-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(30px, 5vw, 62px);
}

.resource-promo-panel::before {
  width: 70%;
  right: -28%;
  opacity: .22;
}

.section-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--green);
  font: 600 14px var(--ff-titre);
  letter-spacing: .16em;
}

.home-platform-selector {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.resource-promo-points {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--muted);
  font-size: 14px;
}

.resource-promo-cta {
  width: max-content;
  margin-top: 24px;
  text-decoration: none;
}

.resource-format-chip {
  width: max-content;
  margin-bottom: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(85,230,149,.2);
  border-radius: 999px;
  color: var(--green-soft);
  font: 600 14px var(--ff-titre);
  letter-spacing: .08em;
}

.resource-format-frame {
  width: 100%;
  aspect-ratio: var(--resource-ratio);
  min-height: 190px;
  max-height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(190,211,201,.14);
  border-radius: 20px;
  background: #020604;
  transition: aspect-ratio .32s ease;
}

.resource-preview-note {
  display: block;
  margin-top: 12px;
  color: var(--faint);
  text-align: center;
}

@keyframes headerLightTravel {
  from { transform: translateX(-4%); opacity: .35; }
  to   { transform: translateX(4%); opacity: .8; }
}

@keyframes brandGlowPulse {
  0%, 100% { transform: scale(.92); opacity: .45; }
  50%      { transform: scale(1.08); opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header::before,
  .site-header .brand::before {
    animation: none;
  }
}

@media (max-width: 940px) {
  .resource-promo-panel {
    grid-template-columns: 1fr;
  }

  .resource-promo-preview {
    width: 100%;
  }
}

@media (max-width: 700px) {
  body::before {
    opacity: .08;
    background-size: 16px 16px;
  }

  .site-header::before {
    left: 0;
    right: 0;
  }

  .visit-counter {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .resource-promo-panel {
    padding: 26px 17px;
  }

  .resource-promo-copy h2 {
    font-size: clamp(30px, 9vw, 40px);
  }

  .home-platform-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-platform {
    width: 100%;
  }

  .resource-promo-points {
    display: grid;
  }

  .resource-promo-cta {
    width: 100%;
  }

  .resource-format-frame {
    min-height: 170px;
    max-height: 320px;
  }

  .resource-preview-carbon {
    min-height: 170px;
  }
}


/* =========================================================
   ACCUEIL V1.4.1 — HERO, APERÇU ET FOOTER
   ========================================================= */

/* Zone JORIS : matière Carbon très légère + lumière verte */

.hero-subline {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

.hero-subline::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(85,230,149,.38), transparent);
  filter: drop-shadow(0 0 6px rgba(85,230,149,.3));
}

/* Aperçu : emplacement client évident, signature Ascendra discrète */

.resource-logo-placeholder {
  min-width: 122px;
  min-height: 44px;
  padding: 0 14px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(213,245,226,.34);
  border-radius: 12px;
  color: rgba(238,250,244,.76);
  background:var(--surface-2);
  font: 600 clamp(8px,1.2vw,11px) var(--ff-titre);
  letter-spacing: .12em;
  box-shadow: inset 0 0 18px rgba(85,230,149,.025);
}

/* Footer aligné sur l’identité lumineuse du header */
.premium-footer {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7,16,12,.78), rgba(5,12,9,.94));
  backdrop-filter: blur(16px) saturate(125%);
  border-color: rgba(85,230,149,.15);
  box-shadow:
    0 -14px 42px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.premium-footer::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -1px;
  height: 1px;
  background: none;
  opacity: 0;
}

.premium-footer::after {
  content: "";
  position: absolute;
  left: -10%;
  bottom: -75px;
  width: 260px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(85,230,149,.09), transparent 70%);
  pointer-events: none;
}

.premium-footer > * {
  position: relative;
  z-index: 1;
}

.premium-footer .footer-home {
  position: relative;
}

.premium-footer .footer-home::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: none;
  opacity: 0;
}

.premium-footer .footer-home img {
  position: relative;
  z-index: 1;

}

.premium-footer a {
  position: relative;
  transition: color .2s ease, text-shadow .2s ease;
}

.premium-footer a:hover,
.premium-footer a:focus-visible {
  color: var(--green-soft);
  text-shadow: 0 0 10px rgba(85,230,149,.20);
  outline: none;
}

@keyframes footerLightTravel {
  from { transform: translateX(-4%); opacity: .36; }
  to   { transform: translateX(4%); opacity: .82; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-footer::before,
  .premium-footer .footer-home::before {
    animation: none;
  }
}

@media (max-width: 700px) {
  .hero-content::before {
    bottom: -18px;
    width: 108%;
    height: 255px;
    opacity: .47;
  }

  .hero-subline {
    width: auto;
    padding: 0 10px;
  }

  .resource-logo-placeholder {
    min-width: 104px;
    min-height: 38px;
  }

  .premium-footer {
    gap: 18px;
  }

  .premium-footer .footer-center {
    display: grid;
    justify-items: center;
    gap: 9px;
  }

  .footer-live {
    white-space: normal;
    justify-content: center;
    text-align: center;
  }
}


/* =========================================================
   ACCUEIL V1.4.4 — CORRECTIF CUMULATIF
   ========================================================= */

/* Hero : carbone fondu et JORIS davantage mis en valeur */

.hero-subline {
  padding: 0;
  background: none;
}

.hero-subline::before {
  display: none !important;
}

/* Header : survol vert clair et lisible */
.nav-links a {
  padding: 10px 13px;
  border-radius: 12px;
  transition:
    color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--text);
  background: var(--surface-2);
  box-shadow:
    inset 0 0 0 1px rgba(85,230,149,.17),
    0 0 19px rgba(85,230,149,.09);
  transform: translateY(-1px);
  outline: none;
}

/* Logos plateformes + FREE */

.platform-icon-youtube { background:#e31d2b; }
.platform-icon-discord { background:#5865f2; }
.platform-icon-instagram { background:linear-gradient(135deg,#feda75,#d62976,#4f5bd5); }
.platform-icon-linkedin { background:#0a66c2; }

/* CTA ressources : grand, centré, bordures propres */
.resource-promo-cta {
  width: min(100%, 430px);
  min-height: 64px;
  margin: 30px auto 0;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border: 1px solid rgba(85,230,149,.68);
  border-radius: 18px;
  background: linear-gradient(135deg, #65dda0, #8ce1b8) !important;
  color: #05110a !important;
  box-shadow:
    0 12px 34px rgba(0,0,0,.23),
    0 0 24px rgba(85,230,149,.11);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  white-space: normal;
}

.resource-promo-cta:hover,
.resource-promo-cta:focus-visible {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #7ce7ae, #53cc8e) !important;
  border-color: rgba(137,255,190,.96);
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    0 0 31px rgba(85,230,149,.19);
  color: #031008 !important;
  outline: none;
}

/* Tous les boutons principaux restent dans les nuances vertes.
   Le degrade a deux teintes est remplace par le vert plein du jeton :
   c'etaient deux nuances de plus a maintenir pour un ecart que personne
   ne voit, et elles empechaient le bouton de suivre le mode jour. */
.primary-button,
.contact-submit,
.checkout-submit,
.cart-continue,
.resource-primary {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: transparent !important;
}

.primary-button:hover,
.contact-submit:hover,
.checkout-submit:hover,
.cart-continue:hover,
.resource-primary:hover,
.primary-button:focus-visible,
.contact-submit:focus-visible,
.checkout-submit:focus-visible,
.cart-continue:focus-visible,
.resource-primary:focus-visible {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  filter: brightness(1.07);
  box-shadow: var(--shadow) !important;
}

/* Utilitaire largeur pleine, referencee sur plusieurs pages (formulaires,
   boutons boutique) mais jusqu'ici sans regle CSS associee. */
.resource-primary.full {
  width: 100%;
}

/* Badge FREE dans l’aperçu */
.resource-format-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
}

.resource-format-chip::after {
  content: "FREE";
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(85,230,149,.14);
  color: var(--green);
  font: 700 14px var(--ff-titre);
}

@media (max-width:700px) {
  .hero-title::after {
    left: 12%;
    right: 12%;
  }

  .home-platform-selector {
    grid-template-columns: 1fr;
  }

  .resource-promo-cta {
    width: 100%;
    min-height: 60px;
    padding: 0 20px;
  }
}


/* =========================================================
   ASCENDRA V1.6.6 — CORRECTIF CONSOLIDÉ
   Base réelle du site, sans empilement V1.6.x.
   ========================================================= */

/* ---------------------------------------------------------
   1. FOND CARBON LÉGER ET STABLE
   --------------------------------------------------------- */

/* Le fond de tout le site tient dans cette seule declaration. C'est
   html et non body qui le porte : body est laisse transparent plus bas
   par une regle en !important, heritee d'une epoque ou trois couches de
   fond se superposaient. Une seule couche desormais, et elle suit la
   bascule jour et nuit toute seule. */
html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100%;
  background: transparent !important;
}

/* ---------------------------------------------------------
   2. HEADER FIXE, LISIBLE ET FONCTIONNEL
   --------------------------------------------------------- */

body > .site-header {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
  border-bottom: 1px solid rgba(85,230,149,.15) !important;
  backdrop-filter: none !important;
  /* Un seul fond, pris sur le jeton, donc il suit la bascule jour et
     nuit. Il y avait ici quatre declarations concurrentes empilant
     jusqu'a cinq couches de degrades, de rayures et de halos verts :
     la barre restait noire en mode jour, et le nom de la marque y
     disparaissait. La charte demande « quelque chose de tres propre,
     sobre » : c'est une couleur, pas cinq couches. */
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
}

body > .site-header .navbar,
body > .site-header .brand,
body > .site-header .nav-links,
body > .site-header .nav-links a,
body > .site-header .menu-toggle {
  pointer-events: auto !important;
}

.site-header .nav-links {
  align-items: center;
  gap: 2px !important;
}

.site-header .nav-links a {
  /* C'est cette regle qui gagne sur les trois autres du meme selecteur,
     plus haut dans la feuille : elle est la derniere et elle crie. Toute
     correction du menu se fait donc ICI, sinon elle n'a aucun effet.
     La couleur passe par le jeton, sans quoi le menu restait blanc sur
     une page blanche en mode jour. */
  min-height: var(--tap);
  padding: 0 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted) !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  font: 600 16px var(--ff-texte) !important;
  letter-spacing: .01em !important;
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.site-header .nav-links a:hover,
.site-header .nav-links a:focus-visible,
.site-header .nav-links a[aria-current="page"] {
  color: var(--text) !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
  outline: none;
}

/* ---------------------------------------------------------
   3. HERO ET IDENTITÉ
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   4. RESSOURCE GRATUITE
   --------------------------------------------------------- */

.resource-promo-panel {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr) !important;
  grid-template-areas:
    "heading heading"
    "copy preview"
    "action action";
  row-gap: clamp(26px, 3.2vw, 44px) !important;
}

.resource-promo-heading {
  grid-area: heading;
  display: grid !important;
  justify-items: center;
  gap: 12px !important;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.resource-promo-heading .section-kicker {
  margin: 0 !important;
  white-space: normal !important;
  text-align: center;
}

.resource-promo-heading h2 {
  width: min(100%, 920px);
  margin: 0 auto !important;
  padding: 0 clamp(8px, 2vw, 24px);
  white-space: normal !important;
  text-align: center;
  text-wrap: balance;
  font-size: clamp(34px, 4.2vw, 56px) !important;
  line-height: 1.08 !important;
}

/* ---------------------------------------------------------
   5. LOGOS PARTENAIRES ET RÉSEAUX
   --------------------------------------------------------- */

.partner-bricks img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
}

/* ---------------------------------------------------------
   6. PANIER : TEXTE, OVERLAY ET ORDRE DES COUCHES
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   7. RETOUR EN HAUT : MOBILE UNIQUEMENT
   --------------------------------------------------------- */

@media (max-width: 700px) {
  .back-to-top {
    position: fixed;
    z-index: 1200;
    right: 14px;
    bottom: 78px;
    width: 44px;
    height: 44px;
    display: grid !important;
    place-items: center;
    border: 1px solid rgba(85,230,149,.42);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(11,25,18,.94), rgba(5,14,9,.97));
    color: #dffff0;
    font-size: 21px;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
      0 12px 30px rgba(0,0,0,.28),
      0 0 18px rgba(85,230,149,.07);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
      opacity .2s ease,
      visibility .2s ease,
      transform .2s ease;
  }

  .back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-header .nav-links {
    gap: 8px !important;
  }

  .site-header .nav-links a {
    width: 100%;
    justify-content: flex-start;
    padding: 0 16px !important;
  }

  .resource-promo-panel {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "heading"
      "copy"
      "preview"
      "action";
  }

  .resource-promo-heading h2 {
    width: 100%;
    padding: 0;
    font-size: clamp(30px, 9vw, 40px) !important;
  }

  .resource-promo-action .resource-promo-cta {
    width: 100% !important;
    min-height: 60px;
  }

  .ascendra-bg-carbon {
    opacity: .11;
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
  }

  .ascendra-bg-glow {
    filter: blur(22px);
    opacity: .10;
  }
}
/* =========================================================
   V1.6.7 — CORRECTION CANONIQUE HEADER CARBON + HERO JORIS
   Ce bloc reste volontairement en fin de fichier afin de
   neutraliser les anciennes surcharges sans modifier le reste.
   ========================================================= */

/* Header : matière Carbon visible sur toute la largeur. */
body > .site-header {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
  isolation: isolate;
  border-bottom: 1px solid rgba(85, 230, 149, .28) !important;
  backdrop-filter: blur(12px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(112%) !important;
  /* Un seul fond, pris sur le jeton, donc il suit la bascule jour et
     nuit. Il y avait ici quatre declarations concurrentes empilant
     jusqu'a cinq couches de degrades, de rayures et de halos verts :
     la barre restait noire en mode jour, et le nom de la marque y
     disparaissait. La charte demande « quelque chose de tres propre,
     sobre » : c'est une couleur, pas cinq couches. */
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
}

body > .site-header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .65 !important;
  background:
    linear-gradient(105deg,
      transparent 0 28%,
      rgba(199, 255, 222, .055) 42%,
      transparent 58% 100%) !important;
  transform: none !important;
  animation: none !important;
}

body > .site-header::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    rgba(85, 230, 149, .62) 24%,
    rgba(198, 255, 221, .82) 50%,
    rgba(85, 230, 149, .62) 76%,
    transparent);
  box-shadow: 0 0 10px rgba(85, 230, 149, .32);
}

body > .site-header .navbar,
body > .site-header .brand,
body > .site-header .nav-links,
body > .site-header .nav-links a,
body > .site-header .menu-toggle {
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
}

body > .site-header .nav-links a {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  font-weight: 650 !important;
}

body > .site-header .nav-links a:hover,
body > .site-header .nav-links a:focus-visible,
body > .site-header .nav-links a[aria-current="page"] {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* Hero : le HTML réel utilise maintenant cette classe. Le sélecteur
   de secours garantit aussi le rendu si le titre est régénéré. */

@media (max-width: 900px) {
  body > .site-header {
  /* Un seul fond, pris sur le jeton, donc il suit la bascule jour et
     nuit. Il y avait ici quatre declarations concurrentes empilant
     jusqu'a cinq couches de degrades, de rayures et de halos verts :
     la barre restait noire en mode jour, et le nom de la marque y
     disparaissait. La charte demande « quelque chose de tres propre,
     sobre » : c'est une couleur, pas cinq couches. */
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
}

  body > .site-header .nav-links {
    background:
      linear-gradient(180deg, rgba(4, 13, 9, .985), rgba(3, 10, 7, .99)),
      repeating-linear-gradient(135deg,
        rgba(116, 255, 174, .055) 0 1px,
        transparent 1px 8px) !important;
  }
}

/* V1.8.3 — logos sociaux entièrement visibles et optiquement alignés */

/* ==========================================================
   En-tete : le bouton de contact et le gage de verification
   ----------------------------------------------------------
   Ces deux regles vivent en fin de feuille, et pas a cote des autres
   regles de navigation, parce qu'un bloc plus bas impose
   `background: transparent !important` a toutes les entrees. Les poser
   plus haut, meme avec !important, ne servait a rien : a poids egal
   c'est la derniere declaree qui gagne. La classe ajoute en plus le
   point de specificite qui manquait.
   ========================================================== */

body > .site-header .nav-links a.nav-contact {
  /* Le seul bouton colore de la barre, et le seul vert de l'en-tete.
     Fond plein plutot que degrade translucide : sur un fond clair, un
     vert a 18 % d'opacite ne se voit plus, et le texte vert pose dessus
     tombait a 2,5 pour 1. Ici le contraste est celui du bouton
     principal, dans les deux modes. */
  background: var(--accent-fonce) !important;
  color: #ffffff !important;
}

body > .site-header .nav-links a.nav-contact:hover {
  filter: brightness(1.12);
  color: var(--on-accent) !important;
}

/* Le gage n'est pas un autocollant : il mene a la question de la FAQ qui
   explique comment les montants sont releves. Un badge qui ne prouve
   rien ne vaut rien.

   La coche est un SVG du balisage et non un masque CSS : le masque
   calculait juste — 14 px, fond vert, mask-image resolue — et ne
   peignait rien. Le site a deja paye ce genre de piege ailleurs, et le
   pictogramme en `use` est le motif employe partout dans les fiches. */
body > .site-header .nav-links a.nav-verifie {
  gap: 7px;
  color: #8CF5B8 !important;
}

body > .site-header .nav-links a.nav-verifie svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #55E695;
}

/* ==========================================================
   Les cibles tactiles isolees
   ----------------------------------------------------------
   Mesure du 26 aout 2026, bloc 8 : les fils d'Ariane, les liens de
   fiche et les mentions legales faisaient 17 a 22 px de haut. Ce sont
   des liens seuls sur leur ligne, donc de vraies cibles qu'on vise au
   doigt, et pas des mots soulignes au fil d'un paragraphe : la norme
   exclut les seconds, pas les premiers.

   Trois vues sur quatre sont sur telephone. « Grandes zones cliquables »
   est dans la liste de lisibilite du pense-bete, juste apres les
   contrastes.

   La regle vit ici et non dans les cinq feuilles de page concernees :
   c'est un motif partage, et le recopier cinq fois donnerait cinq
   endroits ou le corriger. Le meme piege que le nom de la marque, paye
   le 23 aout 2026.
   ========================================================== */

.pt-fil a,
.pa-fil a,
.bl-fil a,
.me-fil a,
.bl-offre-fiche a,
.pt-fiche-lien a,
.pt-pied > a,
.footer-legal a {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

/* Le champ de recherche des offres : 43 px, soit un pixel sous le
   seuil. C'est le premier element qu'on touche sur cette page. */
.pt-recherche input {
  min-height: var(--tap);
}