/* Variante américaine : compléments de la feuille du site.

   Les pages US chargent `styles.css` d'abord, puis cette feuille. La charte, le
   thème, les tokens et le chrome viennent du site : un lecteur qui bascule FR /
   EN reste sur le même site, et une page américaine hérite des corrections de
   contraste sans second passage.

   Les anciens tokens de la variante sont aliasés sur ceux du site plutôt que
   réécrits dans chaque règle : les pages marketing écrites avant l'unification
   restent lisibles telles quelles. */

:root {
  --encre: var(--ink);
  --encre-douce: var(--muted);
  --fond: var(--paper);
  --fond-doux: var(--card);
  --bordure: var(--border);
  --accent-clair: var(--ecru);
  --sur-accent: var(--on-accent);
  --vert: var(--success);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primaire { background: var(--accent); color: var(--sur-accent); }
.btn-secondaire { border-color: var(--bordure); color: var(--encre); background: transparent; }

/* Les liens de contenu portent l'accent du site. Sans cette règle, le
   navigateur applique son bleu et son soulignement par défaut, qui ne font
   pas partie de la charte. Le soulignement reste, atténué, parce qu'un lien
   dans un paragraphe doit se voir sans devenir un bouton. */
section.bloc a:not(.btn), .hero a:not(.btn) {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
}
section.bloc a:not(.btn):hover, .hero a:not(.btn):hover { text-decoration-color: currentColor; }

/* Un titre de carte reste en encre : c'est le titre qui structure la page.
   La couleur d'accent arrive au survol, pas au repos. Le sélecteur porte
   `.carte` pour passer devant la règle de lien, que `:not(.btn)` rend plus
   spécifique qu'elle n'en a l'air. */
section.bloc .carte h3 a, section.bloc .carte h2 a,
.carte h3 a, .carte h2 a {
  color: var(--encre);
  text-decoration: none;
}
section.bloc .carte h3 a:hover, section.bloc .carte h2 a:hover,
.carte h3 a:hover, .carte h2 a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Meme retrait que la landing a toutes les largeurs. La formule reprend le
   double retrait de la page francaise (24 px de section + 24 px de conteneur) :
   140 px a 1440, 60 a 1280, 48 a 1024, comme `#pricing` cote francais. */
main {
  width: min(100% - 96px, 1160px);
  margin: 0 auto;
  padding: 0;
}
/* Sous 720 px, le double retrait mange le tiers de l'ecran : on retombe sur les
   24 px de la page francaise sur mobile. */
@media (max-width: 720px) {
  main:not(.landing-marche) {
    width: calc(100% - 48px);
  }
}

/* Landing : meme largeur utile que la page francaise. La page francaise tient
   son retrait de `width: min(100% - 48px, 1160px)` sur `.container` ; on
   reprend la formule telle quelle, sinon les cartes tarifaires ne tombent pas au
   meme endroit d'un marche a l'autre. Les pages annexes gardent le `main` plus
   etroit, qui leur convient. */
main.landing-marche {
  max-width: none;
  width: 100%;
  padding: 0;
}
main.landing-marche .conteneur-marche {
  width: min(100% - 48px, 1160px);
  margin-inline: auto;
}

/* Le pied de page herite de `.container`, large de 900 px dans la feuille du
   site. Le contenu du marche tient dans une colonne plus large : sans cette
   regle, le pied de page demarre 150 px plus a droite que la section qu'il suit,
   et le bloc legal ne tombe pas sous le bord droit du contenu. */
footer .container {
  width: min(100% - 48px, 1160px);
  max-width: none;
  padding: 0;
  margin-inline: auto;
}

/* Le pied de page americain n'a que trois colonnes : Navigation, Resources,
   puis le bloc legal. La feuille du site prevoyait quatre pistes pour la version
   francaise ; la quatrieme restait vide et le bloc legal venait se coller aux
   deux autres au lieu d'occuper le bord droit. */
.footer-inner--us {
  grid-template-columns: max-content max-content 1fr;
}
/* Respiration resserree : la page francaise prend 110 px, la version
   americaine se contente de 32 px. La carte mise en avant (scale 1.04) deborde
   de 4 % de sa hauteur, d'ou ce minimum. */
main.landing-marche #pricing {
  padding: 32px 0;
}

.hero { padding: 72px 0 48px; }

/* Meme typographie que le titre francais : la feuille du site porte le `h1`
   (clamp, graisse 800, interligne 0.97, tracking serre). On ne surcharge que la
   largeur, pour que le titre tienne sur trois lignes comme en francais. */
.hero h1 {
  max-width: 860px;
  margin: 0 0 22px;
}

.hero p.lede {
  font-size: 1.15rem;
  color: var(--encre-douce);
  margin: 0 0 28px;
  max-width: 720px;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Connexion du marche americain (/us/login) : formulaire nu, sans modal, pour
   rester sur le marche choisi. */
main.landing-marche .auth-titre,
.auth-marche h1 {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  max-width: none;
}
.auth-marche { padding: 96px 0 120px; }
.auth-marche form {
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* L'outline de focus depasse de 3 px : sans cette marge il est rogne au bord
     du conteneur, et le champ parait coupe quand on clique dedans. */
  margin-left: 12px;
  padding-right: 6px;
}
.auth-marche label { font-size: 0.85rem; font-weight: 600; margin-top: 10px; }
.auth-marche input {
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: var(--fond-doux);
  color: var(--encre);
  font: inherit;
}
.auth-marche input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
#us-login-status { min-height: 1.3em; margin-top: 16px; }
#us-login-status:not(:empty) { color: var(--accent); font-weight: 600; }

.note { font-size: 0.85rem; color: var(--encre-douce); margin-top: 14px; }

section.bloc { padding: 40px 0; border-top: 1px solid var(--bordure); }

section.bloc h2 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

section.bloc > p { color: var(--encre-douce); margin: 0 0 24px; max-width: 720px; }
section.bloc > ul, section.bloc > ol { max-width: 720px; color: var(--encre-douce); }

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }

.carte {
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 20px;
  background: var(--fond-doux);
}

.carte h3 { margin: 0 0 6px; font-size: 1.02rem; }
.carte p { margin: 0; color: var(--encre-douce); font-size: 0.94rem; }

/* Parcours en trois etapes.

   Le numero porte le rythme, le filet separateur fait le reste : pas de carte
   autour de chaque etape, elles se lisent comme une suite, pas comme trois
   offres. La carte des Etats-Unis est remontee dans le hero ; `.photo-marche`
   reprend le cadre de `.photo-card` du site, sans l'animation flottante, qui
   n'a pas de sens sur un visuel de fond de section. */
/* Hero a deux colonnes : le texte porte le CTA, la carte des Etats-Unis occupe
   la droite, comme la photo de la page francaise. Le titre descend d'un cran :
   a la taille du site il ne tiendrait pas dans une colonne de 640 px. */
.hero-inner-marche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
  gap: 56px;
  align-items: center;
}
.hero-inner-marche h1 {
  max-width: none;
  font-size: clamp(2.5rem, 4.6vw, 4.2rem);
}
.hero-inner-marche .lede { max-width: 560px; }

.intro-marche {
  color: var(--encre-douce);
  max-width: 620px;
  margin: 8px 0 34px;
}

.liste-etapes { list-style: none; margin: 0; padding: 0; max-width: 780px; }

.etape-marche {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid var(--bordure);
}

.etape-marche:first-child { border-top: 0; padding-top: 0; }
.etape-marche:last-child { padding-bottom: 0; }
.etape-num {
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--accent);
  line-height: 1.5;
}
.etape-marche h3 { margin: 0 0 6px; font-size: 1.05rem; }
.etape-marche p { margin: 0; color: var(--encre-douce); font-size: 0.94rem; }

.photo-marche {
  background: var(--fond-doux);
  border: 1px solid var(--bordure);
  border-radius: 24px;
  padding: 8px;
  box-shadow: 0 28px 64px rgba(13, 14, 18, 0.1);
}
.photo-marche img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

@media (max-width: 860px) {
  .hero-inner-marche { grid-template-columns: 1fr; gap: 32px; }
  .hero-inner-marche h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .photo-marche { max-width: 460px; }
}

/* La grille tarifaire des pages americaines reprend celle du site
   (`.pricing-grid`, `.price-card`, `.billing-toggle` de styles.css) : les prix,
   les limites et la bascule mensuel / annuel se lisent donc comme en francais. */

/* Documentation de l'API (page /us/api-docs). Les styles sont portes par `.api-doc`
   pour ne pas toucher les blocs de code des articles, qui ont leur propre feuille. */
.api-doc code { background: var(--accent-clair); padding: 1px 5px; border-radius: 4px; font-size: 0.88em; }

.api-doc pre {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--bordure);
  padding: 14px 16px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 12px 0;
}

.api-doc pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

.api-endpoint {
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 14px 0;
  background: var(--fond-doux);
}

.api-ligne { font-size: 0.95rem; }
.api-ligne code { font-weight: 600; }

.api-methode {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--sur-accent);
  margin-right: 6px;
  vertical-align: 1px;
}

.api-get { background: var(--vert); color: #fff; }
.api-post { background: var(--accent); color: var(--sur-accent); }
.api-delete { background: #b42318; color: #fff; }

.api-table { width: 100%; border-collapse: collapse; margin: 10px 0 2px; }
.api-table th, .api-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--bordure);
  font-size: 0.88rem;
  vertical-align: top;
}
.api-table th { font-weight: 700; }
.api-table td { color: var(--encre-douce); }

.api-liste { padding-left: 20px; }
.api-liste li { margin-bottom: 7px; color: var(--encre-douce); }

/* Tableau large : le defilement reste horizontal plutot que de casser la grille. */
.doc-table-wrap { overflow-x: auto; margin: 8px 0 22px; }