/* =====================================================================
   Copay — feuille de style des pages secondaires.  12 septembre 2026.

   POURQUOI UNE FEUILLE À PART
   ---------------------------
   index.html porte ses styles en ligne, et c'est un choix qu'on ne
   défait pas : la page d'accueil est un document unique, lourd en
   animations, qu'on veut pouvoir ouvrir et lire d'un bloc.

   Les pages créées pour le référencement, elles, sont nombreuses et se
   ressemblent toutes. Dupliquer six cents lignes de CSS dans chacune
   garantirait qu'elles divergent au premier ajustement. Elles partagent
   donc ce fichier — qui ne touche PAS à la page d'accueil.

   Les jetons de couleur sont recopiés à l'identique depuis index.html
   (eux-mêmes relevés dans logo.svg). S'ils changent là-bas, les changer
   ici : il n'y a pas de source commune, et en créer une imposerait une
   étape de build que ce site n'a pas.
   ===================================================================== */

:root{
  --ink:#0A2E2C;
  --teal-900:#024c4d;
  --teal-800:#0A5A5C;
  --mint-500:#08ce9d;
  --mint-400:#3EDDB7;
  --mint-100:#E7F7F1;
  --mint-50:#F3FBF8;
  --paper:#FCFDFB;
  --line:rgba(6,71,73,0.14);
  --line-soft:rgba(6,71,73,0.08);
  --muted:#4E6C67;
  --shadow:0 20px 50px -25px rgba(6,71,73,0.35);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
ul,ol{list-style:none;}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
/* Une colonne de lecture étroite : sur un article, la largeur confortable
   est une affaire de caractères par ligne (65–75), pas de pixels. */
.lecture{max-width:760px; margin:0 auto; padding:0 32px;}

h1,h2,h3,h4{font-family:'Manrope',sans-serif; font-weight:800; letter-spacing:-0.03em; line-height:1.05;}
h1{font-size:clamp(32px,4.2vw,50px); line-height:1.0;}
h2{font-size:clamp(25px,2.8vw,34px); margin:56px 0 18px;}
h3{font-size:20px; letter-spacing:-0.02em; margin:34px 0 12px;}
.accent{color:var(--mint-500);}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; font-weight:500; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--teal-800);
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:18px; height:9px;
  border:2px solid var(--mint-500); border-right:none;
  border-radius:9px 0 0 9px; flex-shrink:0;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:100px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:15px;
  text-decoration:none; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary{background:var(--teal-900); color:#fff; box-shadow:0 10px 30px -12px rgba(6,71,73,.55);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--teal-900); border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--teal-900); transform:translateY(-2px);}
.btn-light{background:var(--mint-500); color:var(--teal-900);}
.btn-light:hover{background:var(--mint-400); transform:translateY(-2px);}
.btn-outline-light{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35);}
.btn-outline-light:hover{border-color:#fff; transform:translateY(-2px);}
.btn:focus-visible{outline:2px solid var(--mint-500); outline-offset:3px;}

/* ============================== en-tête ==============================
   16 septembre 2026 (nuit) : sélecteur `header` nu remplacé par
   `body > header`. Il visait AUSSI les <header class="article-entete">
   des pages article (FAQ, guides, pages légales) : sur téléphone, le bloc
   titre + introduction restait collé en haut au défilement et recouvrait
   le texte (constaté en ligne sur /faq : le h1 encore à 72 px du haut
   après 1 300 px de défilement). L'en-tête du site est enfant direct de
   <body> sur toutes les pages qui chargent cette feuille (vérifié le même
   jour) ; les en-têtes d'article, eux, sont dans <main>. */
body > header{
  position:sticky; top:0; z-index:60;
  background:rgba(252,253,251,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1180px; margin:0 auto; gap:20px;}
.logo{display:flex; align-items:center;}
.logo img{height:34px; width:auto;}
@media (max-width:560px){ .logo img{height:28px;} }
.navlinks{display:flex; align-items:center; gap:30px;}
.navlinks a{font-size:14.5px; font-weight:600; color:var(--muted); text-decoration:none; transition:color .15s ease;}
.navlinks a:hover, .navlinks a[aria-current="page"]{color:var(--teal-900);}
@media (max-width:900px){ .navlinks{display:none;} }

/* ============================ fil d'Ariane ===========================
   Doublé d'un balisage BreadcrumbList dans le JSON-LD de chaque page :
   Google affiche alors le chemin sous le titre du résultat, à la place
   de l'URL brute. */
.ariane{font-size:13px; color:var(--muted); padding:26px 0 0;}
.ariane a{text-decoration:none;}
.ariane a:hover{text-decoration:underline;}
.ariane span{opacity:.5; margin:0 8px;}

/* ============================== article ============================== */
.article{padding:14px 0 72px;}
.article-entete{padding:26px 0 34px; border-bottom:1px solid var(--line-soft); margin-bottom:34px;}
.article-entete .lead{font-size:19px; color:var(--muted); margin-top:20px;}
.maj{font-size:13px; color:var(--muted); margin-top:22px; font-family:'IBM Plex Mono',monospace;}

.article p{margin:0 0 18px; font-size:17px;}
.article strong{font-weight:650; color:var(--teal-900);}
.article a{color:var(--teal-800); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px;}
.article a:hover{color:var(--mint-500);}
.article ul.puces, .article ol.chiffres{margin:0 0 22px; padding-left:2px;}
.article ul.puces li{position:relative; padding-left:26px; margin-bottom:11px; font-size:17px;}
.article ul.puces li::before{
  content:""; position:absolute; left:2px; top:11px;
  width:8px; height:8px; border-radius:50%; background:var(--mint-500);
}
.article ol.chiffres{counter-reset:n;}
.article ol.chiffres li{counter-increment:n; position:relative; padding-left:38px; margin-bottom:14px; font-size:17px;}
.article ol.chiffres li::before{
  content:counter(n,decimal-leading-zero);
  position:absolute; left:0; top:1px;
  font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:500;
  color:var(--mint-500);
}

/* Encadré : ce qu'on veut que le lecteur retienne s'il ne lit que ça. */
.encadre{
  background:var(--mint-50); border:1px solid var(--line-soft);
  border-left:3px solid var(--mint-500);
  border-radius:0 14px 14px 0; padding:22px 24px; margin:28px 0;
}
.encadre p:last-child{margin-bottom:0;}
.encadre .titre{font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; margin-bottom:8px; color:var(--teal-900);}

/* Tableau : défile horizontalement au lieu de faire déborder la page. */
.tableau{overflow-x:auto; margin:26px 0; border:1px solid var(--line-soft); border-radius:14px;}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15.5px;}
th,td{text-align:left; padding:14px 18px; border-bottom:1px solid var(--line-soft); vertical-align:top;}
th{font-family:'Manrope',sans-serif; font-weight:700; font-size:13.5px; color:var(--teal-900); background:var(--mint-50);}
tr:last-child td{border-bottom:none;}

/* ================================ FAQ ================================ */
.faq{margin:30px 0;}
.faq details{border:1px solid var(--line-soft); border-radius:14px; padding:0; margin-bottom:12px; background:#fff;}
.faq summary{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:16.5px;
  padding:18px 22px; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--mint-500); font-size:22px; line-height:1; flex-shrink:0;}
.faq details[open] summary::after{content:"–";}
.faq summary:focus-visible{outline:2px solid var(--mint-500); outline-offset:-2px; border-radius:14px;}
.faq .reponse{padding:0 22px 20px; color:var(--muted); font-size:16px;}
.faq .reponse p{margin-bottom:14px; font-size:16px;}
.faq .reponse p:last-child{margin-bottom:0;}

/* ============================== cartes =============================== */
.cartes{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; margin:28px 0;}
.carte{
  display:block; text-decoration:none; background:#fff;
  border:1px solid var(--line-soft); border-radius:16px; padding:22px 24px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.carte:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line);}
.carte .titre{font-family:'Manrope',sans-serif; font-weight:800; font-size:17px; margin-bottom:7px; color:var(--teal-900);}
.carte p{font-size:14.5px; color:var(--muted); margin:0;}

/* ============================ appel final ============================ */
.final{background:var(--teal-900); color:#fff; padding:64px 0; margin-top:64px;}
.final h2{color:#fff; margin:0 0 16px;}
.final p{color:rgba(255,255,255,.74); font-size:17px; max-width:52ch; margin-bottom:26px;}
.final .cta-row{display:flex; gap:14px; flex-wrap:wrap;}

/* ============================ pied de page =========================== */
footer{background:var(--teal-900); color:rgba(255,255,255,.6); padding:34px 0; border-top:1px solid rgba(255,255,255,.12);}
.final + footer{border-top:1px solid rgba(255,255,255,.12);}
.foot{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.foot-logo{display:flex; align-items:center;}
.foot-logo img{height:28px; width:auto;}
.foot a{font-size:13.5px; text-decoration:none; transition:color .15s ease;}
.foot a:hover{color:#fff;}
.foot-links{display:flex; gap:22px; flex-wrap:wrap;}
.foot-bas{
  max-width:1180px; margin:22px auto 0; padding:18px 32px 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; gap:22px; flex-wrap:wrap; font-size:13px;
}
.foot-bas a{text-decoration:none;}
.foot-bas a:hover{color:#fff;}

/* =====================================================================
   Espace intégration (/integration) — 16 septembre 2026.

   POURQUOI CES STYLES SONT ICI ET PAS DANS LA PAGE
   ------------------------------------------------
   Depuis le 16 septembre l'inscription est libre : cette page devient le
   point d'entrée de tout marchand qui démarre seul. Le jour où un guide
   détaillé par parcours sera écrit, il réutilisera les étapes numérotées,
   le bloc de téléchargement et le bloc de code. D'où leur place dans la
   feuille commune, sous des noms qui ne percutent rien des pages
   existantes (int-, parcours, etape, telechargement…).

   Choix de contraste : le vert menthe (#08ce9d) ne sert JAMAIS de couleur
   de texte sur fond clair — 1,9:1, illisible. Il reste décoratif (puces,
   pastilles, filets). Le texte d'accent sur fond clair est en teal-800.
   ===================================================================== */

.int-hero{position:relative; padding:44px 0 72px; overflow:hidden; isolation:isolate;}
.int-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(760px 380px at 82% 22%, var(--mint-100), transparent 70%),
    radial-gradient(520px 300px at 8% 90%, var(--mint-50), transparent 70%);
}
.int-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.int-hero-grid > *{min-width:0;}
.int-hero h1{font-size:clamp(34px,5vw,60px); line-height:.98; margin-bottom:22px;}
.int-hero .lead{font-size:18.5px; color:var(--muted); max-width:48ch;}
.int-hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin:30px 0 26px;}
.int-notes{display:flex; flex-wrap:wrap; gap:10px 22px;}
.int-notes li{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--muted);
  display:flex; align-items:center; gap:9px;
}
.int-notes li::before{
  content:""; width:14px; height:14px; border-radius:50%; flex-shrink:0;
  background:var(--mint-100); box-shadow:inset 0 0 0 1.5px var(--mint-500);
}

/* La maquette « votre espace » : trois lignes qui se cochent l'une après
   l'autre, puis une cagnotte de test qui se remplit. Elle raconte le
   parcours en autonomie mieux qu'un paragraphe, sans prétendre être une
   capture d'écran de l'application (les libellés restent génériques). */
.console{
  background:#fff; border:1px solid var(--line-soft); border-radius:22px;
  box-shadow:0 34px 80px -40px rgba(6,71,73,.5); overflow:hidden;
}
.console-barre{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line-soft);}
.console-barre i{width:9px; height:9px; border-radius:50%; background:var(--mint-100);}
.console-barre span{
  flex:1; min-width:0; margin-left:8px; text-align:center;
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted);
  background:var(--mint-50); border-radius:100px; padding:5px 12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.console-corps{padding:22px 22px 24px;}
.console-titre{font-family:'Manrope',sans-serif; font-weight:800; font-size:16px; color:var(--teal-900); margin-bottom:14px;}
.console-ligne{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line-soft); border-radius:12px; padding:12px 14px; margin-bottom:8px;
  font-size:14px; font-weight:500;
  opacity:0; transform:translateY(8px);
  animation:int-entre .5s cubic-bezier(.22,1,.36,1) forwards;
}
.console-ligne:nth-of-type(1){animation-delay:.3s;}
.console-ligne:nth-of-type(2){animation-delay:.9s;}
.console-ligne:nth-of-type(3){animation-delay:1.5s;}
.console-ligne .coche{
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; background:var(--mint-500); color:var(--teal-900);
  transform:scale(0); animation:int-pop .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
.console-ligne:nth-of-type(1) .coche{animation-delay:.6s;}
.console-ligne:nth-of-type(2) .coche{animation-delay:1.2s;}
.console-ligne:nth-of-type(3) .coche{animation-delay:1.8s;}
.console-ligne .coche svg{width:12px; height:12px;}
.console-ligne .lib{flex:1; min-width:0;}
.console-ligne code{
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--teal-800);
  background:var(--mint-50); border-radius:5px; padding:3px 6px; white-space:nowrap;
}
.console-cagnotte{
  margin-top:14px; background:var(--mint-50); border:1px solid var(--line-soft);
  border-radius:14px; padding:16px;
  opacity:0; animation:int-entre .5s ease 2.2s forwards;
}
.console-cagnotte .haut{display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap;}
.console-cagnotte .etiq{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.pastille-test{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em;
  background:#FFF4D6; color:#6B4E00; border-radius:100px; padding:4px 10px; white-space:nowrap;
}
.console-cagnotte .montant{font-family:'Manrope',sans-serif; font-weight:800; font-size:34px; letter-spacing:-.03em; color:var(--teal-900); line-height:1; margin-top:10px;}
.console-cagnotte .jauge{height:8px; border-radius:100px; background:var(--mint-100); margin:14px 0 10px; overflow:hidden;}
.console-cagnotte .jauge i{
  display:block; height:100%; width:0; border-radius:100px;
  background:linear-gradient(90deg,var(--teal-800),var(--mint-500));
  animation:int-remplit 2.2s cubic-bezier(.22,1,.36,1) 2.6s forwards;
}
.console-cagnotte .bas{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted);}
@keyframes int-entre{to{opacity:1; transform:none;}}
@keyframes int-pop{to{transform:scale(1);}}
@keyframes int-remplit{to{width:100%;}}

/* ------------------------ sélecteur de parcours ------------------------ */
.choix{padding:8px 0 84px;}
.choix-tete{text-align:center; max-width:720px; margin:0 auto 34px;}
.choix-tete h2, .int-hero h1, .int-cote h2, .tester-boite h2{text-wrap:balance;}
.choix-tete .eyebrow{justify-content:center;}
.choix-tete h2{margin:0 0 12px;}
.choix-tete p{color:var(--muted); font-size:17px;}
.parcours-grille{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.parcours-grille > *{min-width:0;}
.parcours{
  position:relative; display:flex; flex-direction:column; gap:12px;
  text-decoration:none; background:#fff;
  border:1.5px solid var(--line-soft); border-radius:20px; padding:26px 24px 22px;
  box-shadow:0 20px 50px -34px rgba(6,71,73,.45);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.parcours:hover{transform:translateY(-4px); border-color:var(--mint-500); box-shadow:0 30px 60px -30px rgba(6,71,73,.45);}
.parcours:focus-visible{outline:3px solid var(--teal-800); outline-offset:3px;}
.parcours-icone{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:var(--mint-100); color:var(--teal-900);
  transition:background .2s ease, color .2s ease;
}
.parcours:hover .parcours-icone{background:var(--teal-900); color:var(--mint-400);}
.parcours-icone svg{width:26px; height:26px;}
.parcours-tag{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--teal-800);
}
.parcours-titre{font-family:'Manrope',sans-serif; font-weight:800; font-size:21px; letter-spacing:-.02em; line-height:1.15; color:var(--teal-900);}
.parcours p{font-size:15px; color:var(--muted);}
.parcours-pied{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted);
}
.parcours-pied b{
  font-family:'Manrope',sans-serif; font-size:14px; font-weight:700; color:var(--teal-900);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.parcours-pied b span{transition:transform .2s ease;}
.parcours:hover .parcours-pied b span{transform:translateY(3px);}
.parcours-ruban{
  position:absolute; top:18px; right:18px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em;
  background:var(--teal-900); color:#fff; border-radius:100px; padding:5px 10px;
}

/* ------------------------- sections de parcours ------------------------ */
.int-section{padding:88px 0; border-top:1px solid var(--line-soft); scroll-margin-top:70px;}
.int-section.teinte{background:var(--mint-50);}
.int-grille{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start;}
.int-grille > *{min-width:0;}
.int-cote{position:sticky; top:96px;}
.int-cote h2{margin:0 0 14px;}
.int-cote .lead{font-size:17px; color:var(--muted); margin-bottom:6px;}
.int-cote .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}

.prerequis{background:#fff; border:1px solid var(--line-soft); border-radius:16px; padding:20px 22px; margin-top:20px;}
.prerequis .titre{font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; color:var(--teal-900); margin-bottom:10px;}
.prerequis li{position:relative; padding-left:24px; font-size:15px; margin-bottom:7px;}
.prerequis li::before{
  content:""; position:absolute; left:2px; top:7px; width:11px; height:6px;
  border-left:2px solid var(--mint-500); border-bottom:2px solid var(--mint-500);
  transform:rotate(-45deg);
}
.prerequis .note{font-size:13.5px; color:var(--muted); margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft);}

/* Le bloc de téléchargement : sombre, pour qu'on le trouve sans lire. */
.telechargement{
  background:var(--teal-900); color:#fff; border-radius:20px; padding:24px; margin-top:20px;
  box-shadow:0 24px 60px -30px rgba(2,76,77,.8);
  display:flex; flex-direction:column; gap:16px;
}
.telechargement .fichier{display:flex; align-items:center; gap:14px;}
.telechargement .fichier svg{width:44px; height:44px; flex-shrink:0;}
/* Le nom de fichier se coupe aux tirets (<wbr> dans la page), jamais au
   milieu d'un mot : « z / ip » sur deux lignes, vu à 375 px le 16/09. */
.telechargement .nom{font-family:'IBM Plex Mono',monospace; font-size:13px; overflow-wrap:anywhere; color:#fff;}
.telechargement .meta{font-size:13px; color:rgba(255,255,255,.75); margin-top:3px;}
.telechargement .btn{justify-content:center; font-size:16px; padding:17px 26px; white-space:normal; text-align:center;}
.telechargement .btn svg{width:18px; height:18px; flex-shrink:0;}
.empreinte{font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(255,255,255,.7); word-break:break-all;}

.etapes{counter-reset:etape; position:relative;}
.etape{
  counter-increment:etape; position:relative;
  display:grid; grid-template-columns:48px 1fr; gap:18px;
  padding-bottom:30px;
}
.etape:last-child{padding-bottom:0;}
/* Le filet qui relie les pastilles : il s'arrête à la dernière étape. */
.etape:not(:last-child)::after{
  content:""; position:absolute; left:23px; top:52px; bottom:4px; width:2px;
  background:linear-gradient(180deg,var(--mint-500),var(--line));
  border-radius:2px;
}
.etape::before{
  content:counter(etape,decimal-leading-zero);
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:500;
  background:#fff; color:var(--teal-900);
  border:2px solid var(--mint-500);
  box-shadow:0 8px 20px -12px rgba(6,71,73,.5);
}
/* L'étape qui fait tout le travail à la place du marchand est pleine. */
.etape.cle::before{background:var(--mint-500);}
.etape-corps{padding-top:9px; min-width:0;}
.etape-corps h3{font-size:19px; margin:0 0 6px; line-height:1.25;}
.etape-corps p{font-size:15.5px; color:var(--muted); margin:0;}
.etape-corps p + p{margin-top:8px;}
.etape-corps a:not(.btn){color:var(--teal-800); text-underline-offset:3px; text-decoration-thickness:1.5px;}
.etape-corps .btn{margin-top:12px;}
.etape-corps code{font-family:'IBM Plex Mono',monospace; font-size:.88em; color:var(--teal-900); background:var(--mint-100); border-radius:5px; padding:2px 6px;}
.chemin{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px;}
.chemin span{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--teal-900);
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:5px 9px;
}
.chemin i{font-style:normal; color:var(--muted); font-size:13px;}
/* Traduction d'un chemin de menu, sous le chemin — 16 septembre 2026
   (nuit). Utilisée par /en/integration : l'espace marchand Copay est en
   français, les libellés restent donc tels qu'à l'écran et leur sens est
   donné en dessous, plus discret. */
.etape-corps .chemin-trad{font-size:13.5px; margin-top:6px;}
.bouton-maquette{
  display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:13.5px;
  background:#2271b1; color:#fff; border-radius:4px; padding:7px 13px;
}

.rassurance{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff; border:1px solid var(--line-soft); border-left:3px solid var(--mint-500);
  border-radius:0 14px 14px 0; padding:18px 20px; margin-top:30px;
}
.rassurance svg{width:22px; height:22px; flex-shrink:0; color:var(--teal-800); margin-top:2px;}
.rassurance p{font-size:15px; margin:0;}
.rassurance strong{color:var(--teal-900);}

/* ------------------------------ code ------------------------------ */
.code{
  background:#062B2C; border-radius:16px; margin-top:14px; overflow:hidden;
  border:1px solid rgba(8,206,157,.18);
}
.code-barre{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:9px 12px 9px 16px; border-bottom:1px solid rgba(255,255,255,.08);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:rgba(255,255,255,.7);
}
.copier{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:7px; padding:5px 10px; cursor:pointer;
  transition:background .15s ease;
}
.copier:hover{background:rgba(255,255,255,.16);}
.copier:focus-visible{outline:2px solid var(--mint-500); outline-offset:2px;}
.code pre{
  margin:0; padding:16px 18px; overflow-x:auto;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; line-height:1.7;
  color:#DDEFEA; tab-size:2;
}
.code pre:focus-visible{outline:2px solid var(--mint-500); outline-offset:-2px;}
.code .c{color:#8FB5AF;}
.code .k{color:#3EDDB7;}
.code .s{color:#FFD58A;}
.code .n{color:#A9D1FF;}
.variante{margin-top:18px; background:#fff; border:1px solid var(--line-soft); border-radius:14px;}
.variante summary{
  cursor:pointer; list-style:none; padding:14px 18px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:15px; color:var(--teal-900);
  display:flex; justify-content:space-between; gap:12px;
}
.variante summary::-webkit-details-marker{display:none;}
.variante summary::after{content:"+"; color:var(--teal-800); font-size:20px; line-height:1;}
.variante[open] summary::after{content:"–";}
.variante summary:focus-visible{outline:2px solid var(--teal-800); outline-offset:-2px; border-radius:14px;}
.variante .dedans{padding:0 18px 18px; font-size:14.5px; color:var(--muted);}

/* --------------------------- tester sans risque --------------------------- */
.tester{padding:84px 0;}
.tester-boite{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
  background:linear-gradient(135deg,var(--teal-900),#036062);
  color:#fff; border-radius:28px; padding:48px;
  box-shadow:0 40px 90px -50px rgba(2,76,77,.9);
}
.tester-boite > *{min-width:0;}
.tester-boite .eyebrow{color:var(--mint-400);}
.tester-boite h2{color:#fff; margin:0 0 14px;}
.tester-boite p{color:rgba(255,255,255,.82); font-size:16.5px;}
.tester-boite ul{margin-top:18px;}
.tester-boite li{position:relative; padding-left:22px; margin-bottom:8px; color:rgba(255,255,255,.88); font-size:15px;}
.tester-boite li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--mint-500);}
.tester-boite code{font-family:'IBM Plex Mono',monospace; font-size:.92em; color:#fff; background:rgba(255,255,255,.1); border-radius:5px; padding:2px 6px; white-space:nowrap;}
.carte-test{
  aspect-ratio:1.586; max-width:360px; width:100%; margin:0 auto;
  border-radius:20px; padding:24px;
  background:
    radial-gradient(280px 180px at 100% 0%, rgba(62,221,183,.55), transparent 70%),
    linear-gradient(140deg,#0A5A5C,#062B2C);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  display:flex; flex-direction:column; justify-content:space-between;
  transform:rotate(-4deg);
  transition:transform .3s ease;
}
.carte-test:hover{transform:rotate(0);}
.carte-test .haut{display:flex; justify-content:space-between; align-items:center;}
.carte-test .puce{width:42px; height:32px; border-radius:7px; background:linear-gradient(135deg,#E9D8A6,#B89B52);}
.carte-test .numero{font-family:'IBM Plex Mono',monospace; font-size:clamp(16px,2.2vw,22px); letter-spacing:.06em; color:#fff; white-space:nowrap;}
.carte-test .bas{display:flex; justify-content:space-between; gap:10px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(255,255,255,.8); text-transform:uppercase; letter-spacing:.08em;}

/* ------------------------------- FAQ ------------------------------- */
.int-faq{padding:0 0 20px;}
.int-faq h2{margin-top:0;}

@media (max-width:960px){
  .int-hero-grid, .int-grille, .tester-boite{grid-template-columns:1fr;}
  .int-hero-grid{gap:40px;}
  .int-cote{position:static;}
  .int-grille{gap:40px;}
  .parcours-grille{grid-template-columns:1fr; max-width:560px; margin:0 auto;}
  .tester-boite{padding:36px 28px; gap:36px;}
}
/* Téléphones étroits (320–380 px) : sur toutes les pages secondaires, le
   bouton du menu écrasait le logo jusqu'à le rendre illisible (mesuré à
   320 px le 16 septembre 2026). Le logo ne rétrécit plus, le bouton se
   resserre. */
.logo{flex-shrink:0;}
@media (max-width:400px){
  .nav{padding:14px 16px; gap:12px;}
  .nav .btn{padding:11px 16px; font-size:13.5px;}
}
@media (max-width:340px){
  .logo img{height:24px;}
  .nav .btn{padding:10px 13px; font-size:13px;}
}
@media (max-width:560px){
  .int-page .wrap, .int-page .lecture{padding:0 18px;}
  .carte-test{padding:18px;}
  .int-hero{padding:28px 0 52px;}
  .int-section{padding:60px 0;}
  .choix{padding-bottom:60px;}
  .tester{padding:60px 0;}
  .int-hero .cta-row .btn, .int-cote .cta-row .btn{flex:1 1 100%; justify-content:center;}
  .etape{grid-template-columns:40px 1fr; gap:14px;}
  .etape::before{width:40px; height:40px; font-size:12.5px;}
  .etape:not(:last-child)::after{left:19px; top:44px;}
  .etape-corps{padding-top:6px;}
  .console-corps{padding:18px 16px 20px;}
  .console-ligne code{display:none;}
  .tester-boite{padding:28px 20px; border-radius:22px;}
  .code pre{font-size:11.5px; padding:14px;}
  .telechargement{padding:20px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .console-ligne, .console-cagnotte{animation:none; opacity:1; transform:none;}
  .console-ligne .coche{animation:none; transform:none;}
  .console-cagnotte .jauge i{animation:none; width:100%;}
  .parcours, .carte-test{transition:none;}
}

/* ======================= en-tête : essai + burger =======================
   16 septembre 2026, demande de l'utilisateur : même en-tête que
   l'accueil. « Try for free » à la place du rendez-vous, et un menu burger,
   visible à toutes les largeurs, qui reprend les liens et porte « Contact ».
   Sous 900 px c'est désormais le seul accès aux autres pages. Styles
   calqués sur ceux de l'accueil (index.html), jetons dupliqués comme
   ailleurs. */
.nav{position:relative;}
.nav-droite{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
  width:42px; height:42px; padding:0 11px; border-radius:12px;
  background:#fff; border:1.5px solid var(--teal-900); cursor:pointer; flex:none;
  -webkit-appearance:none; appearance:none; color:var(--teal-900);
}
/* 16 septembre 2026 (soir) : « on ne voit pas le menu ». Bordure à peine
   teintée et traits de 2 px sans largeur explicite : blanc sur blanc sur
   téléphone. Bordure pleine, traits épais et larges, apparence native
   neutralisée (Safari iOS dessine ses propres boutons). */
.burger span{width:18px; height:2.5px !important; align-self:center;}
.burger span{display:block; height:2px; border-radius:2px; background:var(--teal-900); transition:transform .2s ease, opacity .2s ease;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.burger:focus-visible{outline:2px solid var(--mint-500); outline-offset:2px;}
.menu-burger{
  position:absolute; top:calc(100% - 4px); right:32px; z-index:70;
  display:flex; flex-direction:column; gap:2px; min-width:240px; padding:10px;
  background:#fff; border:1px solid var(--line-soft); border-radius:16px;
  box-shadow:0 18px 40px rgba(2,76,77,.12);
}
.menu-burger[hidden]{display:none;}
.menu-burger a{padding:11px 12px; border-radius:10px; font-size:15px; font-weight:600; color:var(--teal-900); text-decoration:none;}
.menu-burger a:hover, .menu-burger a:focus-visible, .menu-burger a[aria-current="page"]{background:var(--mint-50);}
.menu-burger .btn{margin-top:8px; justify-content:center; color:#fff;}
.menu-burger .btn:hover{background:var(--teal-800);}
@media (max-width:560px){
  .burger{width:38px; height:38px; padding:0 10px;}
  .menu-burger{right:16px; left:16px; min-width:0;}
}
@media (max-width:360px){
  .nav-droite{gap:6px;}
  .burger{width:34px; height:34px; padding:0 8px;}
}

/* ========================= sélecteur de langue =========================
   16 septembre 2026 (nuit) : /integration existe désormais en anglais
   (/en/integration). Styles recopiés de ceux de l'accueil (en ligne dans
   index.html, section « sélecteur de langue »), jetons dupliqués comme
   ailleurs : s'ils changent là-bas, les changer ici. Seules les pages
   intégration portent un sélecteur ; les autres pages secondaires n'existent
   qu'en français et ces règles ne les touchent pas. */
.langues{
  display:flex; align-items:center; padding:3px; flex-shrink:0;
  border:1.5px solid var(--line); border-radius:100px;
}
.langues a{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500;
  letter-spacing:.06em; color:var(--muted); line-height:1; text-decoration:none;
  padding:8px 10px; border-radius:100px;
  transition:background .15s ease, color .15s ease;
}
.langues a:hover{color:var(--teal-900);}
.langues a[aria-current="true"]{background:var(--teal-900); color:#fff;}
.langues a:focus-visible{outline:2px solid var(--mint-500); outline-offset:2px;}
/* Règles responsive de l'accueil, reprises pour .langues, et resserrement
   de l'en-tête qui va avec. Mesuré le 16 septembre 2026 (nuit), barre de
   défilement masquée comme sur un téléphone, avant ces paliers : avec le
   sélecteur en plus, le burger sortait de la barre de 43 px à 401 px (la
   marge de 32 px et le bouton plein ne se resserraient qu'à 400 px), de
   14 px à 361 px et de 13 px à 320 px en français (« Essai gratuit » est
   plus long que « Try for free »). Les paliers suivent ceux de l'accueil :
   560 px pour la marge et le bouton, puis un cran de plus sous 390 px —
   pas 360 comme sur l'accueil : entre 361 et 390 px le français ne tenait
   pas. Ces règles valent aussi pour les pages sans sélecteur, qui y
   gagnent seulement un peu d'air. */
@media (max-width:560px){
  .nav{padding:14px 16px; gap:12px;}
  .nav-droite{gap:8px;}
  .nav .btn{padding:10px 14px; font-size:13px;}
  .langues a{padding:8px 8px; font-size:11px;}
}
@media (max-width:390px){
  .nav-droite{gap:6px;}
  .nav .btn{padding:10px 9px; font-size:12.5px;}
  .langues a{padding:7px 6px;}
  .burger{width:34px; height:34px; padding:0 8px;}
}
@media (max-width:340px){
  .nav{padding:12px 12px;}
}
/* Le lien « Intégration » du menu vise #choix (« Trois façons de
   démarrer »), 16 septembre 2026 : même marge que les sections de
   parcours, sinon le titre passe sous l'en-tête collant. */
.choix{scroll-margin-top:70px;}
/* /integration démarre au choix du parcours (16 septembre 2026, soir) :
   la section prend la marge haute de l'en-tête retiré, et son titre, devenu
   le h1 de la page, garde la taille d'un h1. */
.choix-premier{padding-top:64px;}
.choix-tete h1{margin:0 0 14px; text-wrap:balance;}
.choix-tete .choix-prix{margin-top:6px; color:var(--teal-900);}
@media (max-width:560px){ .choix-premier{padding-top:40px;} }

/* Boutons d'inscription, 17 septembre 2026 : tous en btn-primary, même
   couleur partout (demande de l'utilisateur). Sur les sections à fond teal,
   un liseré clair le rend visible sans changer sa couleur. */
.final .btn-primary{border:1.5px solid rgba(255,255,255,.6);}

/* Bouton d'en-tête à deux libellés, 17 septembre 2026 : « Démarrer
   maintenant » ne tient pas à côté du sélecteur et du burger sur les
   petits téléphones ; « Démarrer » prend le relais sous 420 px, comme sur
   l'accueil. */
.nav .btn{white-space:nowrap;}
.cta-court{display:none;}
@media (max-width:420px){
  .nav .cta-long{display:none;}
  .nav .cta-court{display:inline;}
}