/* ====== Base ====== */
    :root{
      --bg: #ffffff;
      --fg: #0f172a;         /* slate-900 */
      --muted: #475569;      /* slate-600 */
      --border: #e5e7eb;     /* gray-200 */
      --card: #ffffff;
      --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
      --radius-xl: 20px;
      --radius-lg: 14px;
      --radius-md: 10px;
      --radius-full: 999px;
      --gap: clamp(16px, 2.5vw, 28px);
      --container: min(1100px, 92vw);
    }

    html, body {
      height: 100%;
    }

    body{
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, system-ui, sans-serif;
      line-height: 1.5;
      color: var(--fg);
      background: #ffffff;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .container{
      width: var(--container);
      margin-inline: auto;
      padding: 100px 0 64px;
    }

    /* ====== Header/Hero ====== */
    header{
text-align: left;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 80%;
    }

    .eyebrow{
      display: inline-block;
      font-size: 15px;
      color: var(--muted);
      margin-bottom: 10px;
    }
    .intro{
      margin: 2px 0 0 0;
      font-size: 15px;
      color: #242424;
      max-width:100%
    }
    .availability{
      margin: 2px 0 0 0;
      font-size: 15px;
      color: #242424;
      max-width:100%;
    }
    .availability a{
      text-decoration: none;
      color:#242424;
    }
    
    .availability a::after {
    content: "↗";
    font-size: 13px;
    color:#969696;
    margin-left: .3em;
    margin-right: .3em}

.availability a:hover::after {
    color: #242424; /* Remplacez par la couleur de votre choix */
}

        .headline a{
      text-decoration: none;
      color:#242424;
    }
    .headline a::after {
    content: "↗";
    font-size: 13px;
    color:#969696;
    margin-left: .3em;
    margin-right: .3em}

    .headline a:hover::after {
    color: #242424; /* Remplacez par la couleur de votre choix */
}
    

    /* The PNG shows two short lines as intro. We'll style like two paragraphs */
    .headline{
      font-size: 15px;
      color: #242424;
      margin: 0 0 0px 0;
    }

    h1 {
      font-size: 16px;
      font-style: normal;
      font-weight: 450;
      color: #242424;
    }

    /* Action row */
    .actions{
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 32px;
      flex-wrap: wrap;
    }

    .btn{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 36px;
      padding: 0 14px;
      border-radius: var(--radius-full);
      background: transparent;
      color: #6F6F6F;
      text-decoration: none;
      font-size: 14px;
      transition: transform .08s ease, background .2s ease;
      border: none;
    }
    .btn:hover {
      color:black;
    }
    .btn:active{ transform: translateY(0); }

    .btn-primary{
      border: 0;
      background: #EFEFEF;
      color: #000;
      font-weight: 500;
    }
    .btn-primary:hover {
      background: #E6E6E6;
    }

    /* ====== Mockup card ====== */
    .mockup{
      margin-top: 80px;
      background: var(--card);
      overflow: hidden;
    }

    .mockup img{
      display: block;
      width: 100%;
      height: auto;
      margin-bottom: 50px;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .mockup img:last-child {
      margin-bottom: 0;
    }
    .mockup img.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .subgrid{
      margin-top: 22px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: center;
    }

    /* Footer */
    footer{
      margin-top: 60px;
      color: #6F6F6F;
      font-size: 13px;
    }

    /* Small tweaks to mirror the layout from the PNG:
       The top-left avatar + name line is visually minimal; we keep a compact rhythm. */

    /* Responsive spacing */
    @media (max-width: 640px){
      .container{ padding-top: 20px; padding-bottom: 48px; }
      .actions{ gap: 8px; }
    }

    .tooltip {
      position: fixed;
      padding: 6px 10px;
      background: rgba(0, 0, 0, 0.75);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      color: #fff;
      font-size: 12px;
      border-radius: 8px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s ease;
      z-index: 1000;
      white-space: nowrap;
      box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.20);
      box-shadow: 0px 10px 24px color(display-p3 0.000 0.000 0.000 / 0.20);
    }
    .tooltip.visible {
      opacity: 1;
    }

    .companyImg {
      display: inline-block;
      vertical-align: middle;
      border-radius: 4px;
      width: 16px;
    }