/* Feuille de style unique du site Rocky Solutions.
   Partagee par index.html et mentions-legales.html.
   Pas de build : ce fichier est ecrit a la main. */

  /* Polices auto-hebergees. Aucun appel a Google Fonts, donc aucune
     adresse IP de visiteur transmise a un tiers (RGPD). Ne pas
     revenir a un <link> vers fonts.googleapis.com.
     Seuls les poids reellement utilises sont embarques :
     Inter 400, Inter Tight 700, IBM Plex Mono 400 et 500. */

  @font-face{
    font-family:'IBM Plex Mono';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face{
    font-family:'IBM Plex Mono';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face{
    font-family:'IBM Plex Mono';
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face{
    font-family:'IBM Plex Mono';
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face{
    font-family:'Inter';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('fonts/inter-400-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face{
    font-family:'Inter';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url('fonts/inter-400-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face{
    font-family:'Inter Tight';
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url('fonts/inter-tight-700-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face{
    font-family:'Inter Tight';
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url('fonts/inter-tight-700-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root{
    /* Brand palette, sampled directly from the wordmark */
    --teal:   #6AB6B2;
    --cream:  #F2DDB2;
    --gold:   #E5B246;
    --orange: #D6783E;
    --red:    #C84939;

    --ink:      #08080A;
    --line-soft:#17171C;
    --text:     #ECECEE;
    --muted:    #8B8B95;
    --faint:    #5C5C66;

    --display: "Inter Tight", system-ui, -apple-system, sans-serif;
    --body:    "Inter", system-ui, -apple-system, sans-serif;
    --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Gouttiere laterale, plus serree sur mobile */
    --pad: clamp(20px, 5vw, 40px);
  }

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

  html{ -webkit-text-size-adjust:100%; }

  body{
    margin:0;
    background:var(--ink);
    color:var(--text);
    font-family:var(--body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    /* Rien ne doit deborder horizontalement sur petit ecran */
    overflow-x:hidden;
  }

  /* Very soft brand glow so the black isn't flat. Kept almost subliminal. */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(60rem 34rem at 12% -8%, rgba(106,182,178,.10), transparent 60%),
      radial-gradient(52rem 30rem at 92% 108%, rgba(200,73,57,.09), transparent 60%);
    z-index:0;
  }

  /* ---------- Ossature de page ----------
     Trois rangees : masthead en haut, hero centre, footer en bas.
     Le hero prend toute la place restante, donc il reste optiquement
     centre quelle que soit la hauteur de l'ecran. */

  .page{
    position:relative;
    z-index:1;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    /* Encoche et barre home des iPhone */
    padding:
      max(20px, env(safe-area-inset-top))
      max(var(--pad), env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(var(--pad), env(safe-area-inset-left));
  }

  /* Chaque rangee partage la meme colonne, donc tout est aligne */
  .wrap{
    width:100%;
    max-width:720px;
    margin-inline:auto;
  }

  /* ---------- Masthead : logo compact en haut a gauche ---------- */

  .masthead{
    padding-block:6px 0;
  }

  .brand{
    display:inline-block;
    line-height:0;
    border-radius:4px;
  }

  .brand img{
    display:block;
    width:clamp(104px, 22vw, 132px);
    height:auto;
  }

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

  .hero{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    /* Marge de respiration pour que le texte ne colle ni au logo ni au footer */
    padding-block:clamp(40px, 9vh, 88px);
  }

  .eyebrow{
    font-family:var(--mono);
    font-size:clamp(10px, 2.6vw, 11px);
    font-weight:500;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0;
  }

  .headline{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(34px, 7.6vw, 56px);
    line-height:1.06;
    letter-spacing:-.035em;
    margin:18px 0 0;
    /* Pas de max-width en ch : la colonne suffit, et balance repartit
       les lignes au lieu de laisser un mot seul en bas */
    text-wrap:balance;
    /* Evite qu'un mot long casse la mise en page sur tres petit ecran */
    overflow-wrap:break-word;
  }

  .standfirst{
    color:var(--muted);
    font-size:clamp(15px, 3.8vw, 18px);
    line-height:1.62;
    margin:20px auto 0;
    max-width:42ch;
    text-wrap:pretty;
  }

  /* ---------- Signature : les cinq bandes de marque ---------- */

  .bands{
    display:flex;
    gap:5px;
    width:min(210px, 56vw);
    margin:clamp(30px, 5vh, 42px) auto 0;
  }
  .bands span{
    display:block;
    flex:1;
    height:3px;
    border-radius:2px;
    background:currentColor;
    transform-origin:left center;
  }
  .bands span:nth-child(1){ color:var(--teal); }
  .bands span:nth-child(2){ color:var(--cream); }
  .bands span:nth-child(3){ color:var(--gold); }
  .bands span:nth-child(4){ color:var(--orange); }
  .bands span:nth-child(5){ color:var(--red); }

  /* ---------- Statut ---------- */

  .status{
    /* Flux inline plutot que flex : quand le texte passe sur deux lignes,
       la pastille reste collee au debut du texte au lieu de partir a gauche */
    display:inline-block;
    font-family:var(--mono);
    font-size:clamp(11.5px, 3vw, 13px);
    letter-spacing:.02em;
    color:var(--muted);
    margin:clamp(28px, 4.5vh, 38px) 0 0;
    padding:9px clamp(14px, 4vw, 18px);
    border:1px solid var(--line-soft);
    border-radius:999px;
    /* Pas de nowrap : en dessous de ~360px le texte deborderait du cadre.
       Il passe sur deux lignes centrees, la pastille reste lisible. */
    text-align:center;
    max-width:100%;
  }

  .dot{
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--teal);
    margin-right:9px;
    vertical-align:middle;
    transform:translateY(-1px);
  }

  /* Sous ~355px le texte passe sur deux lignes et la pastille devient
     bancale. On retire le cadre, la ligne redevient simple et centree. */
  @media (max-width: 355px){
    .status{
      border-color:transparent;
      padding-inline:0;
    }
  }

  @media (prefers-reduced-motion: no-preference){
    .dot{ animation:pulse 2.6s ease-in-out infinite; }
  }
  @keyframes pulse{
    0%,100%{ opacity:1;  box-shadow:0 0 0 0 rgba(106,182,178,.34); }
    50%    { opacity:.55; box-shadow:0 0 0 5px rgba(106,182,178,0); }
  }

  /* ---------- Footer ---------- */

  .footer{
    padding-top:20px;
    border-top:1px solid var(--line-soft);
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
    /* Copyright a gauche, liens a droite. Sur la page legale il n'y a
       qu'un element, space-between le laisse simplement a gauche. */
    justify-content:space-between;
    align-items:center;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--faint);
  }
  .footer a{ color:var(--faint); text-decoration:none; }
  .footer a:hover{ color:var(--text); }

  /* Sur mobile le footer se met sur une colonne centree */
  @media (max-width: 480px){
    .footer{
      justify-content:center;
      text-align:center;
      gap:6px;
    }
  }

  :focus-visible{
    outline:2px solid var(--teal);
    outline-offset:3px;
    border-radius:4px;
  }

  /* ---------- Sequence d'apparition ---------- */

  @media (prefers-reduced-motion: no-preference){
    .reveal{
      opacity:0;
      transform:translateY(10px);
      animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards;
    }
    .d0{ animation-delay:.02s; }
    .d1{ animation-delay:.12s; }
    .d2{ animation-delay:.22s; }
    .d3{ animation-delay:.32s; }
    .d4{ animation-delay:.94s; }

    .bands span{
      transform:scaleX(0);
      animation:draw .5s cubic-bezier(.2,.7,.3,1) forwards;
    }
    .bands span:nth-child(1){ animation-delay:.52s; }
    .bands span:nth-child(2){ animation-delay:.60s; }
    .bands span:nth-child(3){ animation-delay:.68s; }
    .bands span:nth-child(4){ animation-delay:.76s; }
    .bands span:nth-child(5){ animation-delay:.84s; }
  }

  @keyframes rise{ to{ opacity:1; transform:none; } }
  @keyframes draw{ to{ transform:scaleX(1); } }

/* ==========================================================
   Pages de contenu (mentions legales, et plus tard privacy
   et terms). Texte aligne a gauche, colonne plus etroite
   pour rester lisible.
   ========================================================== */

.doc{
  flex:1;
  padding-block:clamp(32px, 6vh, 56px) clamp(48px, 9vh, 80px);
  text-align:left;
}

.doc-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px, 6.4vw, 40px);
  line-height:1.1;
  letter-spacing:-.03em;
  margin:0;
}

.doc-updated{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
  margin:14px 0 0;
}

/* Bandeau d'avertissement tant que la page n'est pas finalisee.
   A retirer en meme temps que le noindex. */
.doc-draft{
  margin:28px 0 0;
  padding:14px 18px;
  border:1px solid var(--orange);
  border-radius:10px;
  background:rgba(214,120,62,.08);
  color:var(--cream);
  font-size:14.5px;
}

.doc h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(18px, 4vw, 21px);
  letter-spacing:-.015em;
  margin:44px 0 0;
  padding-top:20px;
  border-top:1px solid var(--line-soft);
}

.doc p{
  color:var(--muted);
  margin:14px 0 0;
  max-width:68ch;
}

.doc a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.doc a:hover{ color:var(--text); }

/* Liste cle/valeur des informations legales */
.doc dl{
  margin:16px 0 0;
  display:grid;
  grid-template-columns:minmax(150px, 15em) 1fr;
  gap:10px 24px;
  max-width:68ch;
}
.doc dt{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint);
  padding-top:3px;
}
.doc dd{ margin:0; color:var(--text); }

/* Sur mobile la grille passe en une colonne */
@media (max-width: 560px){
  .doc dl{ grid-template-columns:1fr; gap:3px 0; }
  .doc dd{ margin-bottom:14px; }
}

/* Champ pas encore renseigne, volontairement tres visible */
.todo{
  display:inline-block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--gold);
  background:rgba(229,178,70,.10);
  border:1px dashed rgba(229,178,70,.45);
  border-radius:5px;
  padding:1px 8px;
}