/* KTRIUM CO — pages légales.
   Sobre, lisible, professionnel. Ce n'est pas une vitrine : c'est le document
   que le client ouvre depuis Stripe avant de payer. Il doit inspirer le
   sérieux et se lire sur un téléphone, rien d'autre. */
:root{
  --papier:#FBFBFA; --papier-2:#F1F1EF;
  --encre:#1E212A;
  --encre-2:color-mix(in srgb, #1E212A 68%, transparent);
  --filet:color-mix(in srgb, #1E212A 13%, transparent);
  --accent:#672DB5;
  --texte:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --e:cubic-bezier(.23,1,.32,1);
  --g:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;color-scheme:light;overflow-x:hidden}
body{margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--texte);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
a,button{touch-action:manipulation}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.evite{position:absolute;left:-9999px;top:0;background:var(--accent);
  color:#fff;padding:.8rem 1.1rem;z-index:100}
.evite:focus{left:0}

.w{max-width:760px;margin:0 auto;padding:0 var(--g)}

.top{border-bottom:1px solid var(--filet);background:var(--papier)}
.top .w{display:flex;align-items:center;gap:1rem;min-height:66px}
.marque{font-weight:700;letter-spacing:-.02em;font-size:1.1rem;
  color:var(--encre);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;margin-right:auto}
.top nav{display:flex;gap:.4rem}
.top nav a{display:inline-flex;align-items:center;min-height:44px;
  padding:0 .7rem;font-size:.93rem;color:var(--encre-2);text-decoration:none;
  border-radius:8px;transition:background .18s var(--e),color .18s var(--e)}

main{padding:52px 0 80px}
h1{font-size:clamp(1.9rem,6vw,2.6rem);line-height:1.12;letter-spacing:-.03em;
  margin:0 0 .6rem;text-wrap:balance}
h2{font-size:1.18rem;line-height:1.3;letter-spacing:-.015em;
  margin:2.4rem 0 .7rem;text-wrap:balance}
h3{font-size:1rem;margin:1.6rem 0 .5rem}
p,li{text-wrap:pretty}
p{margin:0 0 1rem}
ul{margin:0 0 1rem;padding-left:1.2rem}
li{margin:0 0 .4rem}
.maj{color:var(--encre-2);font-size:.92rem;margin:0 0 2.2rem}
.enc{background:var(--papier-2);border:1px solid var(--filet);
  border-radius:12px;padding:1.1rem 1.2rem;margin:0 0 1.4rem}
.enc p:last-child{margin:0}
.enc--fort{border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, transparent)}
table{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.97rem}
th,td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--filet);
  vertical-align:top}
th{font-weight:600}
code{background:var(--papier-2);padding:.1em .4em;border-radius:5px;
  font-size:.92em}

.pied{border-top:1px solid var(--filet);padding:34px 0 46px;
  color:var(--encre-2);font-size:.92rem}
.pied a{display:inline-flex;align-items:center;min-height:44px}
.pied__l{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:.4rem}

@media (hover:hover) and (pointer:fine){
  .top nav a:hover{background:var(--papier-2);color:var(--encre)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}

/* Tout lien en ligne dans un paragraphe : zone tactile de 46 px.
   Mesure sur le rendu, `min-height:44px` ressortait parfois a 43 (arrondi). */
main p a,.pied a{display:inline-flex;align-items:center;min-height:46px}

/* ══ BOUTONS ══ */
.contact{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 1.6rem}
.btn{--b-fond:var(--accent); --b-filet:var(--accent); --b-texte:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 1.3rem;border-radius:999px;
  font-size:.95rem;font-weight:600;text-decoration:none;white-space:nowrap;
  background:var(--b-fond);color:var(--b-texte);
  border:1.5px solid var(--b-filet);
  transition:background .2s var(--e),color .2s var(--e),
             border-color .2s var(--e),transform .16s var(--e)}
.btn--c{--b-fond:transparent; --b-filet:var(--filet); --b-texte:var(--encre)}
.btn:active{transform:scale(.975)}

@media (hover:hover) and (pointer:fine){
  .btn:hover{--b-fond:var(--encre); --b-filet:var(--encre); --b-texte:#fff}
}
/* ══ SURVOL SUR ÉCRAN TACTILE ══
   Un appui déclenche un faux survol qui reste collé. On neutralise ce qui
   se déclenche au survol, et seulement ça : `:active` doit continuer à
   répondre au doigt. */
@media (hover:none),(pointer:coarse){
  .top nav a{background:transparent;color:var(--encre-2)}
}

/* ══ LA CONFIRMATION DE COPIE ══
   Posee par script.js quand on clique un numero depuis un ordinateur.
   Sans elle, le bouton d'appel ne fait rien de visible. */
.copie{position:fixed;z-index:400;left:50%;bottom:26px;
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  background:#141414;color:#fff;font-size:.95rem;font-weight:600;
  padding:.8rem 1.3rem;border-radius:999px;white-space:nowrap;
  box-shadow:0 16px 40px rgba(0,0,0,.34);
  transition:opacity .28s ease,transform .28s cubic-bezier(.32,.72,0,1)}
.copie.vu{opacity:1;transform:translate(-50%,0)}