@charset "UTF-8";
/* Le cadre du site public : l'en-tete, le pied et les boutons.

   Charge par la vitrine (`vitrine/_cadre.html`, avant vitrine.css) et par les
   pages de reference, qui gardent la feuille du produit pour leur texte
   (`_document_public.html` : confidentialite, conformite, intelligence
   artificielle, sous-traitance, mentions legales, assistance). Une seule
   source pour les deux, depuis le 19 octobre 2026 : ces six pages portaient
   la barre du produit, sans menu ni pied, et l'on ne savait plus qu'on etait
   sur le meme site.

   Les jetons sont poses sur l'en-tete et le pied eux-memes, et non sur
   `:root` : sur une page de reference, `:root` est celui du produit, qui
   donne a `--ease` et a `--entete-h` d'autres valeurs. Ils recopient ceux de
   vitrine.css, qui font foi : retoucher l'un, c'est retoucher l'autre. */

:is(.entete, .pied) {
  --encre: #0B1A2E;
  --encre-2: #3D4B5E;
  --encre-3: #5B6878;
  --alp: #0E4DBE;
  --alp-fonce: #0A3A94;
  --filet: #D5DCE6;
  --papier: #F6F8FB;
  --papier-2: #EEF2F7;
  --vitrine-blanc: #fff;
  --vitrine-blanc-rgb: 255, 255, 255;
  --vitrine-encre-rgb: 11, 26, 46;
  --vitrine-papier-rgb: 246, 248, 251;
  --vitrine-alp-rgb: 14, 77, 190;
  --vitrine-rayon-6: 6px;
  --vitrine-rayon-8: 8px;
  --vitrine-rayon-9: 9px;
  --vitrine-rayon-10: 10px;
  --vitrine-rayon-12: 12px;
  --vitrine-rayon-14: 14px;
  --texte: "Inter", "Inter repli", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gouttiere: clamp(16px, 4vw, 48px);
  --largeur: 1240px;
  --marge-page: max(var(--gouttiere), calc((100% - var(--largeur)) / 2));
  --entete-h: 68px;
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.6;
  box-sizing: border-box;
}
:is(.entete, .pied) *, :is(.entete, .pied) *::before, :is(.entete, .pied) *::after { box-sizing: border-box; }
:is(.entete, .pied) p { margin: 0; }
:is(.entete, .pied) img { display: block; max-width: 100%; }
:is(.entete, .pied) .icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* --------------------------------------------------------------- Boutons
   Pleins ou au trait, jamais de fleche : le libelle dit ou l'on va. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--vitrine-rayon-10);
  font-family: var(--texte);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .25s var(--ease), translate .3s var(--ease);
}
.bouton-plein {
  background-color: var(--alp);
  color: var(--vitrine-blanc);
  box-shadow: 0 1px 2px rgba(var(--vitrine-encre-rgb), .12), inset 0 1px 0 rgba(var(--vitrine-blanc-rgb), .16);
}
.bouton-plein:hover {
  background-color: var(--alp-fonce);
  color: var(--vitrine-blanc);
  box-shadow: 0 10px 24px -10px rgba(var(--vitrine-alp-rgb), .55), inset 0 1px 0 rgba(var(--vitrine-blanc-rgb), .16);
  translate: 0 -1px;
}
.bouton-trait {
  background-color: var(--vitrine-blanc);
  color: var(--encre);
  box-shadow: inset 0 0 0 1.5px var(--encre);
}
.bouton-trait:hover { background-color: var(--encre); color: var(--vitrine-blanc); }
.bouton:active { translate: 0 0; scale: .98; transition-duration: .08s; }
.bouton:focus-visible { outline: 2px solid var(--alp); outline-offset: 3px; }
.bouton-grand { min-height: 52px; padding: 14px 24px; font-size: 1.02rem; border-radius: var(--vitrine-rayon-12); }
.bouton:disabled, .bouton[aria-busy="true"] { opacity: .6; cursor: progress; translate: 0 0; }

/* --------------------------------------------------------------- En-tete
   Transparent sur la carte, pose sur le papier des qu'on la quitte. Sans
   script, il reste pose : c'est vitrine.js qui le rend transparent. */
/* Toute la largeur : le corps d'une page de reference est une colonne
   flexible, ou l'en-tete prendrait sinon la largeur de son contenu. */
.entete {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--entete-h);
  background-color: rgba(var(--vitrine-papier-rgb), .97);
  box-shadow: 0 1px 0 var(--filet);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.entete-dedans {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
  padding-inline: var(--marge-page);
}
.entete-logo { flex: none; display: grid; border-radius: var(--vitrine-rayon-6); }
/* Deux logos dans la meme case, le blanc par-dessus : le ton de nuit (fin de
   feuille) fond l'un dans l'autre. */
.entete-logo img { grid-area: 1 / 1; transition: opacity .3s var(--ease); }
.entete-logo-nuit { opacity: 0; }
/* La hauteur annoncee est celle des capitales, pas celle du fichier : le
   jambage du `p` occupe le cinquieme bas du dessin, et la vitrine, qui ne
   compensait rien, montrait donc des capitales de 22 px la ou elle croyait en
   poser 28. Le calcul est dans `marque/alpboard/calage.css`, mesure sur le
   dessin ; la boite du logo depasse par le bas, et sa marge negative rend ce
   depassement a la mise en page, qui garde la hauteur qu'elle avait. */
.entete-logo img { --logo-hauteur: 28px; }
.entete-nav { display: flex; gap: 4px; margin-left: auto; }
.entete-nav a, .entete-connexion {
  padding: 8px 12px;
  border-radius: var(--vitrine-rayon-8);
  color: var(--encre-2);
  font-size: .93rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.entete-nav a:hover, .entete-connexion:hover { color: var(--encre); background-color: rgba(var(--vitrine-encre-rgb), .05); }
.entete-actions { display: flex; align-items: center; gap: 8px; }
.entete-actions .bouton { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.entete-menu { display: none; position: relative; }
.entete-menu summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--vitrine-rayon-10);
  color: var(--encre);
  cursor: pointer;
  list-style: none;
}
.entete-menu summary::-webkit-details-marker { display: none; }
.entete-menu summary .icon { width: 22px; height: 22px; }
.entete-menu summary:hover, .entete-menu[open] summary { background-color: rgba(var(--vitrine-encre-rgb), .06); }
.entete-menu-liste {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--filet);
  border-radius: var(--vitrine-rayon-14);
  background-color: var(--vitrine-blanc);
  box-shadow: var(--shadow-lg);
  animation: menu-ouvre .22s var(--ease) both;
}
.entete-menu-liste a {
  padding: 12px 14px;
  border-radius: var(--vitrine-rayon-9);
  color: var(--encre);
  font-weight: 500;
  text-decoration: none;
}
.entete-menu-liste a:hover { background-color: var(--papier); }
@keyframes menu-ouvre { from { opacity: 0; translate: 0 -6px; } }

/* Sous 1060 pixels, les cinq liens ne tiennent plus a cote du bouton : ils
   passent dans le menu (900 jusqu'a la 35.57, quand ils etaient quatre). La
   connexion reste dehors (29 septembre 2026) : un client audite ne doit pas
   la chercher dans un menu. */
.entete-menu-demo { display: none; }
@media (max-width: 1060px) {
  .entete-nav { display: none; }
  .entete-menu { display: block; }
  .entete-actions { margin-left: auto; }
}
/* Sous 560 pixels, le bouton de demonstration ne tient plus a cote de la
   connexion : il passe dans le menu, et la connexion prend sa place, dessinee
   en bouton, pour qu'on la voie d'abord. */
@media (max-width: 560px) {
  .entete-actions .entete-demo { display: none; }
  .entete-menu-demo { display: block; }
  .entete-connexion {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: var(--vitrine-rayon-10);
    background-color: var(--vitrine-blanc);
    color: var(--encre);
    font-weight: 600;
    box-shadow: inset 0 0 0 1.5px var(--encre);
  }
  @media (hover: hover) {
    .entete-connexion:hover { background-color: var(--encre); color: var(--vitrine-blanc); }
  }
}
@media (max-width: 420px) {
  .entete-dedans { gap: 10px; }
  .entete-logo img { --logo-hauteur: 24px; }
  .entete-actions .bouton, .entete-connexion { padding-inline: 12px; font-size: .85rem; }
}

/* ---------------------------------------------------------- Pied de page
   La marque, puis trois colonnes : le produit, la confiance, l'aide. Les
   questions frequentes y vivent, et non dans le menu (19 octobre 2026). */
.pied {
  width: 100%;
  padding: 56px var(--marge-page) 40px;
  border-top: 1px solid var(--filet);
  background-color: var(--papier-2);
  color: var(--encre-2);
}
.pied-dedans {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
  align-items: start;
}
/* La hauteur est dite sur le bloc, pas sur l'image : la phrase la lit aussi. */
.pied-marque { --logo-hauteur: 28px; }
/* Le jambage du logo depasse sous la boite que la mise en page lui compte : la
   phrase se decale d'autant, sans quoi le creux du `p` viendrait s'appuyer
   dessus. Le decalage se calcule, il ne se choisit pas a l'oeil. */
.pied-marque p {
  margin-top: calc(
    10px + var(--logo-hauteur) * var(--logo-jambage) / var(--logo-capitales));
  color: var(--encre-2);
  font-size: .95rem;
}
.pied-marque .pied-contact { margin-top: 6px; }
.pied-marque .pied-logo-nuit { display: none; }
.pied-colonne { display: flex; flex-direction: column; align-items: flex-start; }
.pied-titre {
  margin-bottom: 6px;
  color: var(--encre);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pied a { color: var(--encre-2); font-size: .95rem; text-decoration: none; }
.pied-colonne a { padding: 6px 0; }
.pied a:hover { color: var(--alp); text-decoration: underline; text-underline-offset: 3px; }
.pied-mentions { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--filet); color: var(--encre-3); font-size: .85rem; }

@media (max-width: 980px) {
  .pied-dedans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pied-dedans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .pied-colonne a { padding: 9px 0; }
}

/* Au telephone (23 octobre 2026, « mal dimensionne en mode telephone ») : le
   pied tenait trois listes l'une sous l'autre ; le produit et la confiance
   restent cote a cote, l'aide passe dessous sur deux colonnes, les lignes se
   serrent. Et a 320 px, le bouton du menu sortait de l'ecran. */
@media (max-width: 560px) {
  .pied { padding-top: 40px; }
  .pied-colonne a { padding: 7px 0; }
  .pied-colonne:last-of-type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    column-gap: 24px;
  }
  .pied-colonne:last-of-type .pied-titre { grid-column: 1 / -1; }
}
@media (max-width: 374px) {
  .entete-dedans { gap: 8px; }
  .entete-logo img { --logo-hauteur: 21px; }
  .entete-connexion, .entete-actions .entete-connexion { min-height: 36px; padding-inline: 10px; font-size: .8rem; }
  .entete-menu summary { width: 40px; height: 40px; }
}

/* L'entree du menu de la page qu'on lit. Le bleu dit ou l'on est, et le
   trait aussi : la couleur ne parle jamais seule. */
.entete-nav a[aria-current="page"] {
  color: var(--alp);
  box-shadow: inset 0 -2px 0 var(--alp);
  border-radius: var(--vitrine-rayon-8) var(--vitrine-rayon-8) 0 0;
}
.entete-menu-liste a[aria-current="page"] { color: var(--alp); font-weight: 650; }

/* ------------------------------------------------- L'apparence sombre
   Sur une page de reference seulement : c'est elle qui charge apparence.js,
   qui pose `data-theme` sur la racine ; la vitrine ne le charge pas et reste
   claire. Le corps passait en sombre sous un en-tete et un pied restes clairs,
   une barre blanche collee au-dessus d'un fond presque noir (proposition de
   la ronde de design du 21 octobre 2026, validee le 22). Les jetons du cadre
   reprennent ceux du produit en sombre, et le logo de nuit remplace l'autre,
   dans l'en-tete comme dans le pied, comme sur la carte de la vitrine. */
@media screen {
  :root[data-theme="dark"] :is(.entete, .pied) {
    --encre: var(--black);
    --encre-2: var(--gray-6);
    --encre-3: var(--gray-5);
    --alp: var(--cyan-dark);
    --alp-fonce: var(--cyan);
    --filet: var(--gray-3);
    --papier: var(--gray-2);
    --papier-2: var(--surface);
    --vitrine-blanc: var(--gray-1);
    --vitrine-encre-rgb: 233, 237, 242;
    --vitrine-papier-rgb: 15, 19, 23;
  }
  :root[data-theme="dark"] .bouton-plein { color: var(--surface); }
  :root[data-theme="dark"] .bouton-plein:hover { color: var(--surface); }
  :root[data-theme="dark"] .entete-logo-nuit { opacity: 1; }
  :root[data-theme="dark"] .entete-logo img:not(.entete-logo-nuit) { opacity: 0; }
  :root[data-theme="dark"] .pied-marque .pied-logo-nuit { display: block; }
  :root[data-theme="dark"] .pied-marque img:not(.pied-logo-nuit) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .entete, .entete-logo img, .bouton, .entete-nav a, .entete-connexion { transition: none; }
  .entete-menu-liste { animation: none; }
  .bouton:hover, .bouton:active { translate: none; scale: none; }
}