/* ============================================================================
   GENESYS-SCALE · REFONTE · feuille de style autonome
   ----------------------------------------------------------------------------
   Cette feuille ne remplace PAS styles.css : elle vit à côté, le temps de la
   refonte. Aucune page existante ne la charge, aucune règle d'ici ne peut donc
   casser les 130 pages actuelles.

   Direction retenue : structure « produit montré » (on montre l'intérieur),
   exécution sobre (beaucoup de vide, chiffres nus, or au compte-gouttes),
   registre Dovetail : schémas et cartes composées, aucune vidéo.

   RÈGLE DU SYSTÈME : toute valeur de taille, d'espace, d'arrondi, d'ombre et de
   durée vient d'un jeton ci-dessous. Si une valeur manque, on ajoute un jeton,
   on n'écrit jamais un nombre au hasard dans une règle. C'est ce qui évite de
   retomber sur les 42 tailles de texte et 40 espacements de l'ancienne page.

   Les polices sont déclarées ICI, pour que la page de refonte ne dépende pas
   de styles.css. Mêmes fichiers auto-hébergés que le site actuel, sous-jeu
   latin : il couvre le français, accents et œ compris. On ne se sert que des
   graisses réellement disponibles :
     Inter 400 / 500 / 600      Space Grotesk 500 / 700      Instrument Serif italique
   Jamais d'autre graisse : le navigateur la fabriquerait, et ça se voit.
   ============================================================================ */

/* Trois polices variables déjà présentes dans /assets/fonts, jamais utilisées jusqu'ici :
   Geist pour les titres (le registre de Resend et Linear), Instrument Sans pour le texte courant,
   Geist Mono pour les libellés et les chiffres. C'est le mono en petites capitales qui donne
   immédiatement le ton « outil sérieux », et c'est ce qui manquait le plus. */
@font-face{font-family:'Sora';src:url(/assets/fonts/sora-var-latin.woff2) format('woff2');font-weight:100 800;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist';src:url(/assets/fonts/geist-var-latin.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist Mono';src:url(/assets/fonts/geist-mono-var-latin.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Instrument Sans';src:url(/assets/fonts/instrument-sans-var-latin.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-normal-latin.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-normal-latin.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600-normal-latin.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/space-grotesk-500-normal-latin.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-grotesk-700-normal-latin.woff2) format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-400-italic-latin.woff2) format('woff2');}

:root{
  /* --- Couleurs : relevées sur resend.com et trawelt.com, les deux références retenues.
     Noir VRAI, pas bleu-nuit : le fond bleuté est la signature du tableau de bord générique.
     Gris NEUTRES, pas bleu-gris. Filets blanc froid, comme chez Resend (19 % sur noir). --- */
  --c-bg:        #000000;   /* fond de page */
  --c-surface:   #0A0A0A;   /* carte posée sur le fond */
  --c-surface-2: #141414;   /* carte survolée ou mise en avant */
  --c-line:      rgba(232,240,252,.11);
  --c-line-fort: rgba(232,240,252,.19);

  --c-text:   #F0F0F0;   /* titres et texte principal */
  --c-text-2: #D2D4D5;   /* texte courant long */
  --c-muted:  #A1A4A5;   /* libellés, légendes, mentions */
  --c-faint:  #7E8183;   /* mentions de bas de page. Éclairci pour rester lisible : 5,1 de contraste. */

  --c-gold:   #C9A961;   /* accent unique */
  --c-gold-2: #E7CC8E;   /* survol de l'accent */
  --c-blue:   #7E9DFF;   /* liens et éléments actifs */
  --c-vert:   #74E6AC;   /* uniquement un résultat positif chiffré */

  /* --- Typographie : 7 tailles + 1 titre d'ouverture. Aucune autre. --- */
  --t-xs:      .75rem;   /* 12px · sur-titres, mentions */
  --t-sm:      .875rem;  /* 14px · légendes, étiquettes */
  --t-base:    1rem;     /* 16px · texte courant */
  --t-md:      1.125rem; /* 18px · chapô */
  --t-lg:      1.5rem;   /* 24px · titre de carte */
  --t-xl:      2rem;     /* 32px · titre de section */
  --t-2xl:     3rem;     /* 48px · titre de section majeure */
  --t-display: clamp(3rem, 7vw, 6rem);  /* 96px sur grand écran, comme Resend */

  /* Trio repris de TON bloc le plus récent (le schéma des outils) : Sora pour les titres,
     Geist pour le texte, Geist Mono pour les libellés. C'est ton identité, pas la mienne. */
  --f-titre: 'Sora', system-ui, sans-serif;
  --f-texte: 'Geist', system-ui, sans-serif;
  --f-mono:  'Geist Mono', ui-monospace, monospace;
  --f-serif: 'Instrument Serif', Georgia, serif;

  /* --- Espaces : 8 valeurs, toutes multiples de 4. --- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;
  --e-section: 96px;        /* respiration entre deux sections */
  --e-section-l: 128px;     /* respiration avant un changement de sujet */

  /* --- Arrondis : petits. Au-delà de 16 px, une carte prend un air de widget. --- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-full: 999px;

  /* --- Ombres : 2, plus un halo doré réservé à l'accent. --- */
  --o-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -18px rgba(0,0,0,.9);
  --o-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 26px 60px -28px rgba(0,0,0,.95);
  --o-or: 0 0 0 1px rgba(201,169,97,.35), 0 18px 44px -22px rgba(201,169,97,.55);

  /* --- Mouvement : 3 durées, 1 courbe. --- */
  --d-1: 150ms;  /* survol, changement de couleur */
  --d-2: 250ms;  /* déplacement, ouverture */
  --d-3: 420ms;  /* entrée à l'écran */
  --courbe: cubic-bezier(.22,.61,.36,1);

  --largeur: 1200px;
  --largeur-texte: 68ch;   /* au-delà, une ligne devient pénible à lire */
}

/* ============================ Base ======================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
/* Le texte courant est en 18 px, pas 16 : c'est ce que font les deux références, et ça change
   tout sur la sensation de qualité. L'interligne descend à 1.5, plus tenu. */
body.rf{
  margin:0; background:var(--c-bg); color:var(--c-text-2);
  font-family:var(--f-texte); font-size:var(--t-md); font-weight:400; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.rf img,.rf svg{ max-width:100%; display:block; }
.rf a{ color:var(--c-blue); text-decoration:none; }
.rf a:hover{ color:var(--c-text); }
.rf :focus-visible{ outline:2px solid var(--c-gold); outline-offset:3px; border-radius:var(--r-sm); }

/* Les titres sont GRANDS et LÉGERS, jamais gras. Chez Resend le titre de 96 px est en graisse 400 ;
   c'est la taille qui porte, pas l'épaisseur. Plus le texte est grand, plus l'approche se resserre. */
/* Sora est une police plus dessinée que Geist : elle tient à des graisses plus fortes sans
   paraître lourde, et c'est elle qui porte le caractère de la page. */
.rf h1,.rf h2,.rf h3,.rf h4{
  font-family:var(--f-titre); font-weight:700; color:var(--c-text);
  letter-spacing:-.03em; line-height:1.08; margin:0; text-wrap:balance;
}
.rf h1{ font-size:var(--t-display); letter-spacing:-.045em; }
.rf h2{ font-size:var(--t-2xl); letter-spacing:-.04em; }
.rf h3{ font-size:var(--t-xl); letter-spacing:-.035em; line-height:1.1; }
.rf h4{ font-size:var(--t-lg); letter-spacing:-.025em; line-height:1.2; }
.rf p{ margin:0; max-width:var(--largeur-texte); }
.rf .serif{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--c-gold); }

/* Sur-titre : la seule majuscule espacée du système, en mono. */
.rf .eyebrow{
  display:inline-flex; align-items:center; gap:var(--e-3);
  font-family:var(--f-mono); font-size:var(--t-xs); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-gold); margin:0 0 var(--e-4);
}
/* Pas de filet devant le sur-titre : ce petit trait horizontal est l'un des marqueurs
   du rendu générique. Le mono en capitales suffit à poser le niveau. */
.rf .lead{ font-size:var(--t-md); color:var(--c-text-2); }
.rf .mention{ font-size:var(--t-sm); color:var(--c-faint); }

/* ============================ Mise en page ================================ */
.rf .wrap{ width:100%; max-width:var(--largeur); margin-inline:auto; padding-inline:var(--e-5); }
/* Aucun filet entre les sections : c'est le vide qui sépare, pas un trait. */
.rf .section{ padding-block:var(--e-section); }
.rf .pile-2{ display:flex; flex-direction:column; gap:var(--e-2); }
.rf .pile-4{ display:flex; flex-direction:column; gap:var(--e-4); }
.rf .pile-6{ display:flex; flex-direction:column; gap:var(--e-6); }
.rf .duo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e-8); align-items:center; }
.rf .grille-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e-5); }
.rf .grille-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--e-5); }

/* ============================ Boutons ===================================== */
.rf .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e-2);
  font-family:var(--f-titre); font-weight:500; font-size:var(--t-base); line-height:1;
  padding:var(--e-4) var(--e-5); border-radius:var(--r-full); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background var(--d-1) var(--courbe), border-color var(--d-1) var(--courbe),
             color var(--d-1) var(--courbe), transform var(--d-1) var(--courbe);
}
/* Flèches : jamais le caractère texte, toujours un tracé épais et visible. */
.rf .btn svg.fl{ width:1.3em; height:1.3em; flex:none; fill:none; stroke:currentColor;
  stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--d-1) var(--courbe); }
.rf .btn:hover svg.fl{ transform:translateX(4px); }
.rf .btn-or{ background:var(--c-gold); color:#0A1022; font-weight:700; }
.rf .btn-or:hover{ background:var(--c-gold-2); color:#0A1022; box-shadow:var(--o-or); }
.rf .btn-ligne{ background:transparent; border-color:var(--c-line-fort); color:var(--c-text); }
.rf .btn-ligne:hover{ border-color:var(--c-gold); color:var(--c-text); background:rgba(201,169,97,.08); }
.rf .btn-nu{ background:transparent; color:var(--c-muted); padding-inline:var(--e-3); }
.rf .btn-nu:hover{ color:var(--c-text); }
.rf .btn-sm{ font-size:var(--t-sm); padding:var(--e-3) var(--e-4); }
.rf .btn:disabled,.rf .btn[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; pointer-events:none; }

/* ============================ Pastilles =================================== */
.rf .pastille{
  display:inline-flex; align-items:center; gap:var(--e-2);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.02em;
  padding:var(--e-1) var(--e-3); border-radius:var(--r-full);
  border:1px solid var(--c-line-fort); color:var(--c-muted); background:rgba(126,153,255,.06);
}
.rf .pastille-or{ color:var(--c-gold); border-color:rgba(201,169,97,.45); background:rgba(201,169,97,.10); }
.rf .pastille-vert{ color:var(--c-vert); border-color:rgba(116,230,172,.40); background:rgba(116,230,172,.08); }
.rf .point{ width:8px; height:8px; border-radius:var(--r-full); background:currentColor; }

/* ============================ Cartes ====================================== */
/* Carte : un dégradé très court du gris au noir, comme chez Resend, plutôt qu'un aplat plat. */
.rf .carte{
  background:linear-gradient(180deg,#1B1B1B,#030303); border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:var(--e-5); box-shadow:var(--o-1);
  transition:border-color var(--d-1) var(--courbe), background var(--d-1) var(--courbe), transform var(--d-2) var(--courbe);
}
.rf a.carte:hover,.rf .carte-clic:hover{ border-color:var(--c-line-fort); background:linear-gradient(180deg,#242424,#0A0A0A); transform:translateY(-2px); }
.rf .carte-or{ border-color:rgba(201,169,97,.40); box-shadow:var(--o-2); }

/* --- Chiffres nus, à la Resend : le nombre porte, le reste s'efface. --- */
.rf .chiffres{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e-7); }
.rf .chiffre{ padding-left:var(--e-5); border-left:1px solid var(--c-line); }
.rf .chiffre:first-child{ padding-left:0; border-left:0; }
.rf .chiffre .k{ font-size:var(--t-sm); color:var(--c-muted); margin-bottom:var(--e-3); }
/* Les chiffres en mono : ils s'alignent, et c'est la marque des interfaces sérieuses. */
.rf .chiffre .v{ font-family:var(--f-mono); font-weight:400; font-size:var(--t-2xl); color:var(--c-text); line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }

/* --- Grille de fonctionnalités, à la Linear : libellé numéroté, titre court. --- */
.rf .fgrille{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--e-6) var(--e-5); }
.rf .fitem .n{ font-family:var(--f-mono); font-size:var(--t-xs); color:var(--c-faint); letter-spacing:.08em; }
.rf .fitem h4{ font-size:var(--t-md); margin:var(--e-4) 0 var(--e-2); }
.rf .fitem p{ font-size:var(--t-sm); color:var(--c-muted); }

/* --- Bloc Dovetail : titre + liste cliquable à gauche, schéma à droite. --- */
.rf .dove{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--e-8); align-items:center; }
.rf .dove-liste{ list-style:none; margin:var(--e-6) 0 0; padding:0; }
.rf .dove-liste li + li{ margin-top:var(--e-1); }
.rf .dove-item{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:0; border-left:2px solid transparent;
  padding:var(--e-3) var(--e-4); font:inherit; color:var(--c-muted);
  transition:color var(--d-1) var(--courbe), border-color var(--d-1) var(--courbe), background var(--d-1) var(--courbe);
}
.rf .dove-item b{ display:block; font-family:var(--f-titre); font-weight:500; font-size:var(--t-md); color:var(--c-muted); transition:color var(--d-1) var(--courbe); }
.rf .dove-item span{ display:block; font-size:var(--t-sm); max-height:0; opacity:0; overflow:hidden; transition:max-height var(--d-2) var(--courbe), opacity var(--d-2) var(--courbe); }
.rf .dove-item:hover b{ color:var(--c-text-2); }
.rf .dove-item[aria-current="true"]{ border-left-color:var(--c-gold); background:rgba(201,169,97,.05); }
.rf .dove-item[aria-current="true"] b{ color:var(--c-text); }
.rf .dove-item[aria-current="true"] span{ max-height:120px; opacity:1; margin-top:var(--e-2); }

/* --- Le langage des schémas : traits fins, nœuds dorés, aucun aplat criard. --- */
.rf .schema{ background:linear-gradient(180deg,#161616,#050505); border:1px solid var(--c-line); border-radius:var(--r-lg); padding:var(--e-6); box-shadow:var(--o-2); }
.rf .schema svg{ width:100%; height:auto; }
.rf .schema .sq-fond{ fill:rgba(126,153,255,.05); stroke:var(--c-line-fort); }
.rf .schema .sq-trait{ stroke:var(--c-line-fort); stroke-width:1.2; fill:none; }
.rf .schema .sq-or{ stroke:var(--c-gold); stroke-width:1.6; fill:none; }
.rf .schema .sq-noeud{ fill:var(--c-gold); }
/* Le texte d'un schéma suit la même échelle que le reste : 14 pour un libellé, 12 pour une étiquette. */
.rf .schema .sq-t{ font-family:var(--f-titre); font-size:14px; font-weight:500; fill:var(--c-text); }
.rf .schema .sq-l{ font-family:var(--f-mono); font-size:12px; fill:var(--c-muted); letter-spacing:.06em; text-transform:uppercase; }
.rf .schema .sq-fort{ font-family:var(--f-titre); font-size:24px; font-weight:500; fill:var(--c-text); letter-spacing:-.02em; }

/* --- Témoignage --- */
.rf .avis p{ font-size:var(--t-base); color:var(--c-text-2); }
.rf .avis .qui{ display:flex; align-items:center; gap:var(--e-3); margin-top:var(--e-5); }
.rf .avis .rond{ width:40px; height:40px; border-radius:var(--r-full); background:linear-gradient(135deg,var(--c-surface-2),var(--c-bg)); border:1px solid var(--c-line-fort); flex:none; }
.rf .avis .nom{ font-family:var(--f-titre); font-weight:500; font-size:var(--t-sm); color:var(--c-text); }
.rf .avis .role{ font-size:var(--t-xs); color:var(--c-muted); }

/* --- Carte tarif --- */
.rf .tarif .nom{ font-family:var(--f-titre); font-weight:500; font-size:var(--t-md); color:var(--c-text); }
.rf .tarif .prix{ font-family:var(--f-titre); font-weight:700; font-size:var(--t-2xl); color:var(--c-text); line-height:1; letter-spacing:-.03em; margin:var(--e-4) 0 var(--e-1); }
.rf .tarif .par{ font-size:var(--t-sm); color:var(--c-muted); }
.rf .tarif ul{ list-style:none; margin:var(--e-5) 0 var(--e-6); padding:0; display:flex; flex-direction:column; gap:var(--e-3); }
.rf .tarif li{ display:grid; grid-template-columns:16px 1fr; gap:var(--e-3); font-size:var(--t-sm); color:var(--c-text-2); }
.rf .tarif li svg{ width:16px; height:16px; stroke:var(--c-gold); fill:none; stroke-width:2.4; margin-top:var(--e-1); }

/* --- Accordéon --- */
.rf .acc{ border-top:1px solid var(--c-line); }
.rf .acc-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--e-4);
  background:transparent; border:0; padding:var(--e-5) 0; cursor:pointer; text-align:left;
  font-family:var(--f-titre); font-weight:500; font-size:var(--t-md); color:var(--c-text); }
.rf .acc-q .plus{ flex:none; width:18px; height:18px; position:relative; }
.rf .acc-q .plus::before,.rf .acc-q .plus::after{ content:""; position:absolute; inset:50% 0 auto; height:1.5px; background:var(--c-gold); transition:transform var(--d-2) var(--courbe); }
.rf .acc-q .plus::after{ transform:rotate(90deg); }
.rf .acc-q[aria-expanded="true"] .plus::after{ transform:rotate(0); }
.rf .acc-r{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-2) var(--courbe); }
.rf .acc-r > div{ overflow:hidden; }
.rf .acc-q[aria-expanded="true"] + .acc-r{ grid-template-rows:1fr; }
.rf .acc-r p{ padding-bottom:var(--e-5); color:var(--c-muted); font-size:var(--t-base); }

/* --- Tableau comparatif --- */
.rf .tab{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.rf .tab th,.rf .tab td{ text-align:left; padding:var(--e-4) var(--e-3); border-bottom:1px solid var(--c-line); }
.rf .tab thead th{ font-family:var(--f-titre); font-weight:500; color:var(--c-muted); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; }
.rf .tab td:first-child{ color:var(--c-text); }
.rf .tab .oui{ color:var(--c-gold); }
.rf .tab .non{ color:var(--c-faint); }

/* --- Champ --- */
.rf .champ{ display:flex; gap:var(--e-2); max-width:420px; }
.rf .champ input{ flex:1 1 auto; min-width:0; background:var(--c-surface); border:1px solid var(--c-line-fort);
  border-radius:var(--r-full); padding:var(--e-3) var(--e-5); color:var(--c-text); font:inherit; font-size:var(--t-sm);
  transition:border-color var(--d-1) var(--courbe); }
.rf .champ input::placeholder{ color:var(--c-faint); }
.rf .champ input:focus{ outline:0; border-color:var(--c-gold); }

/* ============================ Entrée à l'écran ============================= */
/* Une seule animation dans tout le site : le contenu monte de 12 px en apparaissant. */
.rf .rev{ opacity:0; transform:translateY(12px); transition:opacity var(--d-3) var(--courbe), transform var(--d-3) var(--courbe); }
.rf .rev.vu{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rf *,.rf *::before,.rf *::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .rf .rev{ opacity:1; transform:none; }
}

/* ============================ Téléphone =================================== */
@media (max-width:900px){
  :root{ --t-2xl:2.25rem; --t-xl:1.625rem; --e-section:64px; --e-section-l:80px; }
  .rf .duo,.rf .dove{ grid-template-columns:1fr; gap:var(--e-6); }
  .rf .grille-3,.rf .grille-4,.rf .fgrille{ grid-template-columns:1fr 1fr; }
  .rf .chiffres{ grid-template-columns:1fr; gap:var(--e-5); }
  .rf .chiffre{ padding-left:0; border-left:0; padding-top:var(--e-5); border-top:1px solid var(--c-line); }
  .rf .chiffre:first-child{ padding-top:0; border-top:0; }
}
@media (max-width:560px){
  .rf .grille-3,.rf .grille-4,.rf .fgrille{ grid-template-columns:1fr; }
  .rf .wrap{ padding-inline:var(--e-4); }
  .rf .btn{ width:100%; }
  .rf .btn-nu{ width:auto; }
}