/* Généré par maquettes-site/publier-site.py : ne pas modifier à la main. */

  /* Le mot « Auxentis » est dessiné (brand-logo/auxentis-mot.svg), jamais tapé (bible, ch. 11). */
  .signature .mot { height: .78em; width: auto; fill: currentColor; flex: none; }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--aux-encre); color: var(--aux-papier);
    font-family: var(--police); font-size: var(--t-texte); line-height: var(--interligne-texte);
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }

  /* ---- En-tête ---- */
  .entete {
    max-width: calc(var(--bloc-large-max) + 2 * var(--marge-laterale)); margin: 0 auto;
    padding: var(--e-3) var(--marge-laterale);
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  }
  .signature { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
  .signature img { width: 30px; height: 30px; }
  .liens { display: flex; gap: var(--e-5); font-size: var(--t-petit); color: var(--aux-gris-sombre); }
  .liens a:hover, .liens a[aria-current] { color: var(--aux-papier); }
  .bouton {
    display: inline-flex; align-items: center; justify-content: center;
    height: var(--h-controle); padding: 0 var(--e-4);
    border-radius: var(--arrondi-controle); font-weight: 600; font-size: var(--t-petit); white-space: nowrap;
    background: var(--aux-amethyste); color: #fff; border: 0; cursor: pointer; font-family: inherit;
    transition: background var(--duree-survol) var(--courbe);
  }
  .bouton:hover { background: var(--aux-amethyste-clair); color: var(--aux-encre); }
  .bouton.secondaire {
    background: none; border: 1px solid var(--aux-gris-sombre); color: var(--aux-papier);
  }
  .bouton.secondaire:hover { border-color: var(--aux-papier); background: none; color: var(--aux-papier); }

  .bloc {
    max-width: calc(var(--bloc-large-max) + 2 * var(--marge-laterale)); margin: 0 auto;
    padding: var(--section-v) var(--marge-laterale);
  }
  .etiquette {
    display: block; margin-bottom: var(--e-3);
    font-family: var(--police-mono); font-size: var(--t-etiquette); text-transform: uppercase;
    letter-spacing: var(--espacement-etiquette); color: var(--aux-gris-sombre);
  }
  h1, h2 {
    font-stretch: var(--largeur-titre); font-weight: var(--graisse-titre);
    line-height: var(--interligne-titre); letter-spacing: var(--lettres-titre);
  }
  h1 { font-size: var(--t-titre-1); }
  h2 { font-size: var(--t-titre-2); }
  .jeu {
    font-stretch: var(--largeur-jeu); font-weight: var(--graisse-jeu);
    color: var(--aux-amethyste-clair); letter-spacing: -0.01em;
  }
  .chapeau { margin-top: var(--ecart-titre-texte); max-width: 52ch; color: var(--aux-gris-sombre); }

  /* ---------------- Le pied de page (repris de footer/, styles préfixés) ---------------- */
  .pp { background: var(--aux-encre); color: var(--aux-papier); }

  .pp * { box-sizing: border-box; margin: 0; padding: 0; }
  .pp body {
    background: var(--aux-encre); color: var(--aux-papier);
    font-family: var(--police); font-size: var(--t-texte); line-height: var(--interligne-texte);
    -webkit-font-smoothing: antialiased;
  }

  .pp .pied { border-top: 1px solid var(--aux-filet-sombre); }
  .pp .pied .bloc {
    max-width: calc(var(--bloc-large-max) + 2 * var(--marge-laterale)); margin: 0 auto;
    padding: var(--e-8) var(--marge-laterale) var(--e-6);
  }

  .pp .haut { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--e-6); }

  /* ---- La signature ---- */
  .pp .signature { display: flex; align-items: center; gap: var(--e-2); color: var(--aux-papier);
    text-decoration: none; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
  .pp .signature img { width: 24px; height: 24px; }
  .pp .marque p { margin-top: var(--e-3); max-width: 34ch; color: var(--aux-gris-sombre); font-size: var(--t-petit); }
  .pp .marque .bouton {
    display: inline-flex; align-items: center; margin-top: var(--e-4);
    height: var(--h-controle); padding: 0 var(--e-3); border-radius: var(--arrondi-controle);
    background: var(--aux-amethyste); color: #fff; text-decoration: none;
    font-weight: 600; font-size: var(--t-petit); white-space: nowrap;
    transition: background var(--duree-survol) var(--courbe);
  }
  .pp .marque .bouton:hover { background: var(--aux-amethyste-clair); color: var(--aux-encre); }
  .pp .marque .bouton:focus-visible { outline: 2px solid var(--aux-amethyste-clair); outline-offset: 3px; }
  .pp .marque .zone { margin-top: var(--e-4); font-family: var(--police-mono); font-size: var(--t-etiquette);
    text-transform: uppercase; letter-spacing: var(--espacement-etiquette); color: var(--aux-gris-sombre); }
  /* Badge officiel France Num : affiché tel quel, jamais redessiné. La bible ne traite
     pas les logos de tiers ; son fond blanc est donc un cas à trancher. */
  .pp .marque .francenum { display: inline-block; margin-top: var(--e-4); }
  .pp .marque .francenum img { display: block; width: 96px; height: auto; }

  /* ---- Les colonnes de liens ---- */
  .pp .colonne h2 {
    font-family: var(--police-mono); font-size: var(--t-etiquette); font-weight: 500;
    text-transform: uppercase; letter-spacing: var(--espacement-etiquette); color: var(--aux-gris-sombre);
  }
  .pp .colonne ul { list-style: none; margin-top: var(--e-3); display: grid; gap: var(--e-2); }
  .pp .colonne a {
    color: var(--aux-papier); text-decoration: none; font-size: var(--t-petit);
    transition: color var(--duree-survol) var(--courbe);
  }
  .pp .colonne a:hover { color: var(--aux-amethyste-clair); }
  .pp .colonne a:focus-visible { outline: 2px solid var(--aux-amethyste-clair); outline-offset: 3px; }

  /* ---- La ligne du bas ---- */
  .pp .bas {
    margin-top: var(--e-6); padding-top: var(--e-3); border-top: 1px solid var(--aux-filet-sombre);
    display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); align-items: baseline;
    justify-content: space-between;
    font-family: var(--police-mono); font-size: var(--t-etiquette); color: var(--aux-gris-sombre);
  }
  .pp .bas nav { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
  .pp .bas a { color: var(--aux-gris-sombre); text-decoration: none;
    transition: color var(--duree-survol) var(--courbe); }
  .pp .bas a:hover { color: var(--aux-papier); }
  .pp .bas a:focus-visible { outline: 2px solid var(--aux-amethyste-clair); outline-offset: 3px; }

  @media (max-width: 900px) {
    .pp .haut { grid-template-columns: 1fr 1fr; }
    .pp .marque { grid-column: 1 / -1; }
  }
  @media (max-width: 560px) {
    .pp .haut { grid-template-columns: 1fr; }
  }


  /* ---- Téléphone : l'en-tête ne tient pas sur une ligne ---- */
  @media (max-width: 760px) {
    .entete { flex-wrap: wrap; gap: var(--e-2) var(--e-3); padding: var(--e-3) var(--marge-laterale); }
    .entete .liens {
      order: 3; width: 100%; gap: var(--e-3); overflow-x: auto; padding-bottom: 2px;
      scrollbar-width: none;
    }
    .entete .liens::-webkit-scrollbar { display: none; }
    .entete .liens a { white-space: nowrap; }
    .entete .bouton, .entete .bouton.principal { padding: 0 var(--e-3); font-size: var(--t-etiquette); }
  }

  /* ---- Menu de téléphone ---- */
  .hamburger { display: none; }
  .liens .dans-menu { display: none; }
  @media (max-width: 760px) {
    .entete { flex-wrap: nowrap; gap: var(--e-3); }
    /* le bouton d'action quitte la barre : il est repris dans le panneau */
    .entete > .bouton { display: none; }
    .hamburger {
      display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
      width: 44px; height: 44px; padding: 0 10px; margin-right: -10px;
      background: none; border: 0; cursor: pointer; position: relative; z-index: 60;
    }
    .hamburger span {
      display: block; height: 2px; background: var(--aux-papier); border-radius: 2px;
      transition: transform var(--duree-etat) var(--courbe), opacity var(--duree-survol) var(--courbe);
    }
    body.menu-ouvert .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    body.menu-ouvert .hamburger span:nth-child(2) { opacity: 0; }
    body.menu-ouvert .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .liens {
      /* display explicite : le hero masque déjà « .liens » sous 900 px */
      display: flex !important;
      position: fixed; inset: 0; z-index: 50;
      background: var(--aux-encre);
      flex-direction: column; align-items: flex-start; justify-content: center;
      gap: var(--e-4); padding: var(--marge-laterale);
      overflow: visible; width: auto;
      transform: translateX(100%); visibility: hidden;
      transition: transform var(--duree-grand) var(--courbe), visibility var(--duree-grand);
    }
    body.menu-ouvert .liens { transform: none; visibility: visible; }
    .liens a {
      font-stretch: var(--largeur-titre); font-weight: var(--graisse-titre);
      font-size: var(--t-titre-2); line-height: 1.1; letter-spacing: var(--lettres-titre);
      color: var(--aux-papier);
    }
    .liens a[aria-current] { color: var(--aux-amethyste-clair); }
    .liens .dans-menu {
      display: inline-flex; align-items: center; margin-top: var(--e-4);
      height: var(--h-controle); padding: 0 var(--e-4); border-radius: var(--arrondi-controle);
      background: var(--aux-amethyste); color: #fff; font-size: var(--t-petit); font-weight: 600;
      font-stretch: 100%; letter-spacing: 0;
    }
    body.menu-ouvert { overflow: hidden; }
  }

  /* ---- L'accès à l'espace client, à côté du bouton d'action ---- */
  .actions-entete { display: flex; align-items: center; gap: var(--e-3); }
  .acces {
    display: inline-flex; align-items: center; gap: 8px;
    height: var(--h-controle); padding: 0 var(--e-3);
    border: 1px solid var(--aux-filet-sombre); border-radius: var(--arrondi-controle);
    font-size: var(--t-petit); font-weight: 500; color: var(--aux-papier); white-space: nowrap;
    transition: border-color var(--duree-survol) var(--courbe);
  }
  .acces:hover { border-color: var(--aux-gris-sombre); }
  .acces svg, .acces-menu svg { width: 14px; height: 14px; flex: none; }
  .liens .acces-menu { display: none; }
  @media (max-width: 760px) {
    .entete .actions-entete { display: none; }
    .liens .acces-menu {
      display: inline-flex; align-items: center; gap: 8px;
      font-stretch: 100%; font-weight: 500; font-size: var(--t-petit); letter-spacing: 0;
      color: var(--aux-gris-sombre); margin-top: var(--e-2);
    }
  }