/* ---------------------------------------------------------------------------
   Design tokens + primitives partagees.
   Source de verite : content-studio/design/SYSTEM.md (v1, figee le 2026-08-10).
   Ne jamais introduire de seconde couleur : la framboise porte toute l'identite.
   --------------------------------------------------------------------------- */

:root {
  --paper: #FAF8F5;
  --card:  #FFFEFC;
  --ink:   #1C1C1C;
  /* Legerement plus dense que SYSTEM.md (#6E6A64) : sur la grille, le gris
     d'origine tombait a 5,07:1 de contraste, ce qui fatiguait la lecture des
     paragraphes. On passe a 6,46:1. Les visuels LinkedIn gardent #6E6A64. */
  --sub:   #5E5A54;
  --acc:   #C2255C;
  --acc-dark: #A81D4E;
  --hair:  #E3DED6;
  /* Grille attenuee par rapport a SYSTEM.md (#F0EBE2 / #E7E0D4) : a l'ecran,
     le maillage de 45px vibrait derriere les paragraphes en `sub` et genait
     la lecture. Les valeurs d'origine restent la reference pour les visuels
     LinkedIn, ou il n'y a pas de texte courant par-dessus. */
  --grid1: #F5F1EA;
  --grid2: #EDE7DC;

  --mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --measure: 46em;   /* longueur de ligne confortable */
  --gutter: 32px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  background-image:
    linear-gradient(var(--grid2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid2) 1px, transparent 1px),
    linear-gradient(var(--grid1) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid1) 1px, transparent 1px);
  background-size: 225px 225px, 225px 225px, 45px 45px, 45px 45px;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* --- Rythme vertical : les pages doivent RESPIRER ------------------------- */

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter); }

section { padding: 84px 0; }
section + section { border-top: 1px solid var(--hair); }

/* --- Micro-typographie code (les 4 details canoniques, et rien d'autre) --- */

.path {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--acc);
  margin-bottom: 20px;
}

.cursor {
  display: inline-block;
  width: 0.13em;
  height: 0.74em;
  background: var(--acc);
  margin-left: 0.1em;
  vertical-align: -0.03em;
}

/* Le curseur ne doit JAMAIS tomber seul sur une ligne : il suit le dernier
   mot, colle a lui. On enveloppe donc ce mot et le curseur ensemble.
   (SYSTEM.md : « il suit automatiquement la longueur du titre, jamais
   d'ecart ».) */
.nb { white-space: nowrap; }

.num {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--acc);
  letter-spacing: 1px;
}

/* --- Titres --------------------------------------------------------------- */

h1 {
  font-size: clamp(38px, 6.2vw, 64px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.08;
  max-width: 15em;
}

h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.2;
  max-width: 18em;
}

h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.lead {
  margin-top: 26px;
  font-size: 19px;
  max-width: var(--measure);
}

.lead + .lead { margin-top: 16px; }

p.sub, .sub { color: var(--sub); }

.section-intro {
  margin-top: 20px;
  font-size: 17px;
  color: var(--sub);
  max-width: var(--measure);
}

/* --- Liens ---------------------------------------------------------------- */

a { color: var(--ink); }

a.inline {
  color: var(--acc);
  text-decoration: none;
  border-bottom: 1.5px solid var(--acc);
  font-weight: 700;
}
a.inline:hover { color: var(--acc-dark); border-color: var(--acc-dark); }

/* --- Boutons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 15px 28px;
  text-decoration: none;
  border: 1.5px solid var(--acc);
  transition: background .15s, color .15s, border-color .15s;
}

.btn-primary { background: var(--acc); color: var(--paper); }
.btn-primary:hover { background: var(--acc-dark); border-color: var(--acc-dark); }

.btn-ghost { background: transparent; color: var(--acc); }
.btn-ghost:hover { background: var(--acc); color: var(--paper); }

/* --- Cartes + croix de reperage ------------------------------------------ */

.card {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--ink);
  padding: 32px 30px 34px;
}

.cross { position: absolute; width: 15px; height: 15px; }
.cross::before, .cross::after { content: ''; position: absolute; background: var(--acc); }
.cross::before { left: 0; top: 7px; width: 15px; height: 1.5px; }
.cross::after  { left: 7px; top: 0; width: 1.5px; height: 15px; }
.cross.tl { top: -8px; left: -8px; }
.cross.tr { top: -8px; right: -8px; }
.cross.bl { bottom: -8px; left: -8px; }
.cross.br { bottom: -8px; right: -8px; }

/* --- Marque (lockup) : `>_ wiredstack`, wordmark mono bold en minuscules,
   dans l'esprit du chemin de terminal. Nom arrete le 2026-08-23.
   --------------------------------------------------------------------- */

.lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.lockup svg { display: block; }
.brand-name {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.5px;
  color: var(--ink);
}

/* --- Signature de pied de page ------------------------------------------- */

footer {
  border-top: 1px solid var(--ink);
  padding: 22px 0 48px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--sub);
}
footer .slash { color: var(--acc); }
footer .sig b { color: var(--acc); font-weight: 400; margin: 0 10px; }
footer .privacylink { text-decoration: none; }
/* Sur sa propre page, le lien devient un simple reperage. */
footer .privacylink.current { color: var(--ink); border-bottom: 1px solid var(--hair); }
footer .tag { letter-spacing: 2px; }
footer a { color: var(--sub); text-decoration: none; border-bottom: 1px solid var(--hair); }
footer a:hover { color: var(--acc); border-color: var(--acc); }

@media (max-width: 700px) {
  :root { --gutter: 20px; }
  section { padding: 60px 0; }
}

/* ===========================================================================
   MOUVEMENT
   Regle : l'air prime sur la densite, et le calme prime sur le mouvement.
   Rien ne bouge en boucle sauf le curseur et le flux du schema, qui EST le
   sujet. Tout le reste se joue une fois, a l'apparition.
   Durees 400-600ms, translation 14px maximum, easing sortant.
   =========================================================================== */

:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 620ms;
}

/* --- Apparition au scroll ------------------------------------------------- */

/* Le masquage n'existe QUE si le script tourne : la classe `js` est posee en
   tete de page. Sans JavaScript, rien n'est jamais cache. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
.js .reveal.seen { opacity: 1; transform: none; }

/* --- Curseur bloc : le battement du terminal ------------------------------ */

@keyframes blink { 0%, 46% { opacity: 1; } 54%, 100% { opacity: 0; } }
.cursor { animation: blink 1.15s steps(1, end) infinite; }

/* --- Barre de navigation collante ----------------------------------------- */

/* Le bandeau colle en haut : c'est le conteneur pleine largeur qui porte le
   sticky, pas la barre elle-meme (un sticky ne peut coller qu'a l'interieur
   de son parent, et un parent a la hauteur de la barre ne laisse aucune
   marge).

   Deux etats : framboise pleine en haut de page, puis il se decolore des que
   l'on descend, pour ne plus voler la vedette au contenu et rendre les
   libelles pleinement lisibles. */
.navbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--acc);
  border-bottom: 1px solid transparent;
  transition: background 320ms var(--ease), border-color 320ms var(--ease);
}
.navbar.stuck {
  background: rgba(250, 248, 245, .92);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--hair);
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 30px; flex-wrap: wrap; padding: 16px 0;
}

.nav-links {
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.5px;
}
.nav-links a { text-decoration: none; }

/* --- La marque suit l'etat du bandeau ------------------------------------ */

.lockup { color: var(--paper); transition: color 320ms var(--ease); }
.navbar.stuck .lockup { color: var(--acc); }
.nav .brand-name { color: var(--paper); transition: color 320ms var(--ease); }
.navbar.stuck .brand-name { color: var(--ink); }

/* --- Les liens aussi ------------------------------------------------------ */

.nav-links a { position: relative; color: rgba(250, 248, 245, .95);
  transition: color 320ms var(--ease); }
.nav-links a:hover { color: var(--paper); }
.navbar.stuck .nav-links a { color: var(--sub); }
.navbar.stuck .nav-links a:hover { color: var(--acc); }

.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px;
  background: var(--paper); transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease), background 320ms var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }
.navbar.stuck .nav-links a::after { background: var(--acc); }

.nav-links a.cta { color: var(--paper); font-weight: 700;
  border-bottom: 1.5px solid var(--paper);
  transition: color 320ms var(--ease), border-color 320ms var(--ease); }
.navbar.stuck .nav-links a.cta { color: var(--acc); border-bottom-color: var(--acc); }
.nav-links a.cta::after { display: none; }

/* --- Rangees numerotees : le numero avance au survol ---------------------- */

.row { transition: border-color 300ms var(--ease); }
.row .num { transition: transform 300ms var(--ease); }
.row:hover { border-top-color: var(--acc); }
.row:hover .num { transform: translateX(4px); }

/* --- Cartes : les croix se posent a l'apparition -------------------------- */

.card { transition: transform 400ms var(--ease), box-shadow 400ms var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--hair); }

/* Les croix ne se cachent QUE dans un bloc en attente d'apparition : une
   carte hors de ce mecanisme (une modale, par exemple) garde les siennes. */
.js .reveal .cross { opacity: 0; transition: opacity 420ms var(--ease); transition-delay: 260ms; }
.js .reveal.seen .cross { opacity: 1; }

/* --- Boutons : la poussee ------------------------------------------------- */

.btn { transition: background 180ms var(--ease), color 180ms var(--ease),
                   border-color 180ms var(--ease), transform 180ms var(--ease); }
.btn:active { transform: translateY(1px); }

/* --- Focus visible, au clavier -------------------------------------------- */

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 3px;
}

/* --- Modale ---------------------------------------------------------------- */

.overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(28, 28, 28, 0.42);
  opacity: 0; pointer-events: none;
  transition: opacity 300ms var(--ease);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.overlay.open { opacity: 1; pointer-events: auto; }

.modal {
  position: relative; width: 100%; max-width: 560px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--card); border: 1.5px solid var(--ink);
  padding: 40px 40px 36px;
  transform: translateY(18px) scale(.985);
  transition: transform 380ms var(--ease);
}
.overlay.open .modal { transform: none; }

.modal .close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; cursor: pointer; padding: 8px;
  font-family: var(--mono); font-size: 17px; line-height: 1; color: var(--sub);
  transition: color 180ms var(--ease);
}
.modal .close:hover { color: var(--acc); }

body.locked-scroll { overflow: hidden; }

@media (max-width: 640px) { .modal { padding: 34px 22px 28px; } }

/* --- Respect du reglage systeme ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .cross { opacity: 1; }
  html { scroll-behavior: auto; }
}

/* --- Bandeau de consentement ---------------------------------------------
   Discret, dans la charte, en bas d'ecran. Il ne bloque pas la lecture :
   rien n'est charge tant que le visiteur n'a pas repondu, donc pas besoin
   de lui barrer la page.
   ------------------------------------------------------------------------ */

.cookiebar {
  position: fixed; z-index: 60; left: 24px; right: 24px; bottom: 24px;
  max-width: 620px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 28px; flex-wrap: wrap;
  background: var(--card); border: 1.5px solid var(--ink);
  padding: 18px 22px;
  box-shadow: 6px 6px 0 var(--hair);
  opacity: 0; transform: translateY(12px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.cookiebar.in { opacity: 1; transform: none; }
.cookiebar p { font-size: 14px; color: var(--sub); max-width: 34em; }
.cookiebar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookiebar .btn { padding: 10px 18px; font-size: 13px; }

@media (max-width: 620px) {
  .cookiebar { left: 14px; right: 14px; bottom: 14px; padding: 16px; }
}