/* ==========================================================================
   Kolytica · Charte graphique web (source de vérité)
   --------------------------------------------------------------------------
   Fichier unique qui centralise les tokens, la typographie et le système de
   boutons du site. Toute nouvelle page doit importer CE fichier plutôt que de
   recopier un bloc :root et un .btn en local.

       <link rel="stylesheet" href="/assets/css/kolytica-charte.css">

   Règles dures de marque (voir docs/CHARTE-WEB.md pour le détail) :
   - la marque s'écrit « Kolytica », jamais « Kolytics », jamais en capitales ;
   - action primaire = bouton teal (.btn.btn-teal) ;
   - un seul geste d'or par vue (accent, pas couleur d'action) ;
   - jamais de tiret cadratin dans les textes.

   Aucune dépendance. Extrait fidèlement du système de la page d'accueil, qui
   fait référence. Revue initiale 2026-07-17.
   ========================================================================== */

:root{
  /* ---- Couleurs de marque ------------------------------------------------ */
  --navy:#14224F;          /* titres, aplats sombres, pied de page */
  --navy-deep:#0e1836;     /* variante profonde (dégradés) */
  --teal:#0F9D8C;          /* couleur d'action, liens actifs, accents vivants */
  --teal-dark:#0B6F62;     /* liens au repos, hover d'action, eyebrow */
  --gold:#D99521;          /* geste d'accent unique par vue (nœud, filet) */
  --cyan:#1FB6D4;          /* accent secondaire du logo, à réserver au signe */

  /* ---- Neutres ----------------------------------------------------------- */
  --ivory:#FBF7EC;         /* fond de page */
  --white:#fff;            /* fond des cartes */
  --ink:#141413;           /* texte courant */
  --slate:#5B6473;         /* texte secondaire, légendes */
  --line:#E7E1D2;          /* filets, bordures de cartes */

  /* ---- Texte sur aplats (contraste garanti) ------------------------------ */
  --on-teal:#052a25;       /* vert quasi noir posé sur le teal (AA au repos) */
  --on-navy:#fff;

  /* ---- Structure --------------------------------------------------------- */
  --maxw:1120px;
  --font:"Segoe UI", system-ui, -apple-system, "Aptos", Roboto, Arial, sans-serif;

  /* ---- Rayons ------------------------------------------------------------ */
  --r-pill:999px;
  --r-btn:12px;
  --r-card:16px;
  --r-card-lg:24px;

  /* ---- Ombres (élévation cohérente) ------------------------------------- */
  --sh-1:0 8px 24px rgba(20,34,79,.04);   /* header, filets discrets */
  --sh-2:0 14px 30px rgba(15,157,140,.26);/* bouton teal au repos */
  --sh-3:0 18px 40px rgba(20,34,79,.12);  /* menus déroulants */
  --sh-4:0 28px 68px rgba(20,34,79,.13);  /* cartes de résultat premium */

  /* ---- Rythme vertical (clamps de section) ------------------------------ */
  --pad-section:clamp(46px,6vw,76px);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; display:block}
a{color:var(--teal-dark); text-decoration:none}
a:hover{text-decoration:underline}

/* ==========================================================================
   3. Typographie
   Échelle fluide reprise de l'accueil. Titres en navy, corps en ink.
   ========================================================================== */
h1,h2,h3{
  color:var(--navy);
  margin:0;
  line-height:1.12;
  letter-spacing:-.015em;
  text-wrap:balance;
}
p{margin:0}

.t-hero{font-size:clamp(2.3rem,5.4vw,3.7rem); font-weight:750; letter-spacing:-.035em; line-height:1.03}
.t-h2{font-size:clamp(1.9rem,4.2vw,3.18rem)}
.t-h2-sm{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.t-h3{font-size:clamp(1.25rem,2.3vw,1.62rem); font-weight:600}
.lead{color:var(--slate); font-size:1.06rem; max-width:62ch}

.eyebrow{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--teal-dark);
}

/* ==========================================================================
   4. Layout
   ========================================================================== */
.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,44px);
}
.section{padding-block:var(--pad-section)}

/* Révélation au défilement (sobre, désactivée si mouvement réduit) */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* ==========================================================================
   5. Boutons  (LE système d'action : action primaire = teal)
   --------------------------------------------------------------------------
   Base commune + variantes. Hauteur, rayon, poids et transitions identiques
   partout, pour que tous les boutons du site se ressemblent.
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  min-height:50px;
  font:inherit;
  font-weight:700;
  font-size:1rem;
  padding:.86em 1.55em;
  border-radius:var(--r-btn);
  cursor:pointer;
  border:1.5px solid transparent;
  background-color:transparent;
  text-align:center;
  transition:transform .18s ease, background-color .18s ease, color .18s ease,
             border-color .18s ease, box-shadow .18s ease;
}
.btn:focus-visible{outline:2px solid var(--teal); outline-offset:3px}

/* Primaire : teal. Texte vert quasi noir au repos (AA), bascule blanc au survol. */
.btn-teal{
  background-color:var(--teal);
  color:var(--on-teal);
  box-shadow:var(--sh-2);
}
.btn-teal:hover{
  background-color:var(--teal-dark);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 18px 36px rgba(11,111,98,.30);
  text-decoration:none;
}

/* Secondaire : navy plein */
.btn-navy{
  background-color:var(--navy);
  color:#fff;
  box-shadow:0 14px 30px rgba(20,34,79,.16);
}
.btn-navy:hover{background-color:#1d3168; transform:translateY(-1px); text-decoration:none}

/* Tertiaire : contour discret sur fond clair */
.btn-ghost{border-color:var(--line); color:var(--navy)}
.btn-ghost:hover{border-color:var(--navy)}

/* Sur aplat sombre (hero, bandeau navy) : contour clair */
.btn-line{border-color:rgba(255,255,255,.55); color:#fff}
.btn-line:hover{background:rgba(255,255,255,.1)}

/* Accent rare : or. Réservé à UN appel exceptionnel, jamais l'action standard. */
.btn-gold{background-color:var(--gold); color:#1d1608; box-shadow:0 14px 30px rgba(217,149,33,.22)}
.btn-gold:hover{transform:translateY(-1px); filter:brightness(1.03)}

/* Signature Kolytica : micro-réseau animé dans le fond des boutons pleins.
   Discret, arrêté si l'utilisateur réduit les animations. */
.btn-teal,.btn-navy{
  background-image:
    radial-gradient(circle 1.4px at 22% 32%, rgba(255,255,255,.36) 99%, transparent),
    radial-gradient(circle 1px   at 72% 22%, rgba(255,255,255,.26) 99%, transparent),
    radial-gradient(circle 1.6px at 46% 76%, rgba(127,216,203,.4) 99%, transparent),
    radial-gradient(circle 1px   at 86% 62%, rgba(255,255,255,.22) 99%, transparent);
  background-size:170% 170%,230% 230%,200% 200%,260% 260%;
  animation:btnnet 14s ease-in-out infinite alternate;
}
@keyframes btnnet{
  0%{background-position:0% 0%,100% 0%,0% 100%,50% 50%}
  100%{background-position:100% 100%,0% 100%,100% 0%,50% 0%}
}
@media (prefers-reduced-motion:reduce){
  .btn-teal,.btn-navy{animation:none}
}

/* ==========================================================================
   6. Composants récurrents
   ========================================================================== */

/* Puce de preuve (proofline) */
.pill{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:.35rem .72rem;
  background:#fff;
  color:var(--navy);
  font-size:.86rem;
  font-weight:700;
  box-shadow:var(--sh-1);
}

/* Carte blanche premium (le motif visuel central du site) */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:clamp(18px,2.6vw,24px);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card-lg{border-radius:var(--r-card-lg); padding:clamp(22px,3vw,36px); box-shadow:var(--sh-4)}
.card:hover{transform:translateY(-2px); box-shadow:var(--sh-4)}

/* Filet d'accent teal vers or (barre de titre, séparateurs) */
.accent-rule{height:3px; background:linear-gradient(90deg,var(--teal),var(--gold)); border:0; border-radius:2px}

/* Pied de page */
.ft{background:var(--navy); color:#aab6d2; padding-block:44px}
.ft a{color:#cfe0ff}
.ft small{color:#8593b5}