/* platform.css — composition d'ibou Platform (api/, FR et EN, pages de confirmation comprises).
   Couleurs, typographie et composants viennent de design-system/ibou.css : cette feuille ne pose que
   la mise en page, avec les tokens. Aucune couleur en dur, les composants `.ibou-*` ne sont pas
   repeints. Le formulaire garde ses règles partagées de site.css (`.access-form__row`, `.form-msg`). */

/* ---- Rythme de page ------------------------------------------------------------------------ */

.platform-page { gap: var(--ibou-spacing-section-md); }
.platform-page > section { scroll-margin-block-start: calc(var(--ibou-sticky-top) + var(--ibou-space-6)); }

/* ---- Héros : l'accroche et la console ------------------------------------------------------- */

/* Le produit est une API : ce qu'on montre, c'est la requête et sa réponse. La console tient la
   place de la photo du podcast, la mascotte posée dessus (une seule illustration d'ouverture). */
.platform-page > .platform-hero { display: grid; gap: var(--ibou-spacing-stack-xl); padding-block-start: var(--ibou-spacing-section-sm); align-items: center; }
.platform-hero__text { display: grid; gap: var(--ibou-spacing-stack-lg); justify-items: start; }
.platform-hero__text h1 { max-inline-size: 100%; line-height: var(--ibou-font-line-height-tight); text-wrap: balance; }
.platform-hero__text h1 em { display: block; font-style: italic; }
.platform-hero__text .lede { font-size: var(--ibou-typography-body-lg-font-size); line-height: var(--ibou-typography-body-lg-line-height); }
.platform-hero__figure { position: relative; margin: 0; padding-block-start: var(--ibou-space-6); }

/* La console : un bloc en creux (surface.sunken, comme le code dans la prose) avec une barre qui
   nomme la route. */
.platform-console { display: grid; border: var(--ibou-border-width-hairline) solid var(--ibou-color-border-subtle); border-radius: var(--ibou-radius-2xl); background: var(--ibou-color-surface-sunken); overflow: hidden; }
/* La barre nomme la route et son état ; sa marge de droite réserve la place de la mascotte, qui
   se pose sur le coin de la console sans jamais recouvrir l'étiquette. */
.platform-console__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ibou-spacing-inline-md); padding: var(--ibou-spacing-inset-sm) var(--ibou-spacing-inset-md); border-block-end: var(--ibou-border-width-hairline) solid var(--ibou-color-border-subtle); }
.platform-hero__figure:has(> .platform-hero__mascot) .platform-console__bar { padding-inline-end: calc(var(--ibou-spacing-inset-md) + 7rem); }
.platform-console__route { margin: 0; font: var(--ibou-typography-code); color: var(--ibou-color-text-secondary); }
.platform-console__route strong { font-weight: var(--ibou-font-weight-semibold); color: var(--ibou-color-text-primary); }
/* Le code se replie à la ligne (l'indentation du JSON est conservée) : pas de défileur horizontal,
   donc rien à atteindre au clavier, et la ligne curl se lit en entier sur un téléphone. */
.platform-console pre { margin: 0; padding: var(--ibou-spacing-inset-md); white-space: pre-wrap; overflow-wrap: anywhere; font: var(--ibou-typography-code); font-size: var(--ibou-typography-body-sm-font-size); line-height: var(--ibou-font-line-height-relaxed); tab-size: 2; }
.platform-console code { font: inherit; background: none; padding: 0; }
.platform-console__comment { color: var(--ibou-color-text-secondary); }
.platform-console__note { margin: 0; padding: 0 var(--ibou-spacing-inset-md) var(--ibou-spacing-inset-sm); color: var(--ibou-color-text-secondary); }
/* Mascotte pose 02 (flottante) : elle se pose sur le coin de la console, jamais recolorée (D-26). */
.platform-hero__mascot { position: absolute; inline-size: 5.5rem; block-size: auto; inset-inline-end: var(--ibou-space-5); inset-block-start: calc(-1 * var(--ibou-space-4)); }

/* ---- Cas d'usage : quatre cards étiquetées -------------------------------------------------- */

.platform-usecase { gap: var(--ibou-spacing-stack-md); }
.platform-usecase .ibou-tag { align-self: start; }
.platform-usecase .ibou-card__title { text-wrap: balance; }

/* ---- Souveraineté : une grande card beige, le chapitre « chaîne » de l'accueil -------------- */

/* Beige 500 dans les deux thèmes (surface forte) : la même composition que la card Actualités
   de l'accueil, texte à gauche, repères numérotés à droite, filets en couleur courante. */
.platform-chain { display: grid; gap: var(--ibou-spacing-stack-xl); padding: var(--ibou-spacing-inset-lg); }
.platform-page .platform-chain > .card-stack { display: grid; block-size: auto; align-content: center; gap: var(--ibou-spacing-stack-md); }
.platform-chain__text { max-inline-size: 52ch; }
.platform-chain__title { text-wrap: balance; }
.platform-chain__claim { margin-block-start: var(--ibou-spacing-stack-sm); font: var(--ibou-typography-subtitle-md); letter-spacing: var(--ibou-typography-subtitle-md-letter-spacing); }
.platform-chain__list { display: grid; gap: var(--ibou-spacing-stack-lg); margin: 0; padding: 0; list-style: none; }
.platform-chain__list > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ibou-spacing-inline-lg); padding-block-start: var(--ibou-spacing-stack-md); border-block-start: var(--ibou-border-width-hairline) solid currentColor; }
.platform-chain__list h3 { margin-block-end: var(--ibou-spacing-stack-xs); }
.platform-chain__list p { margin: 0; font-size: var(--ibou-typography-body-sm-font-size); line-height: var(--ibou-typography-body-sm-line-height); color: var(--ibou-color-text-secondary-on-warm); }
.platform-chain__number { font: var(--ibou-typography-heading-3); letter-spacing: var(--ibou-typography-heading-3-letter-spacing); }

/* ---- Accès anticipé : panneau rose, formulaire sur card blanche ----------------------------- */

/* Rose 500 ne s'inverse pas (D-26), texte anthracite. Le formulaire reste sur une card blanche :
   libellé, aide, erreur et champ gardent les contrastes que le design system garantit sur fond
   clair, et le bouton primaire reste le primaire. */
.platform-access__panel { display: grid; gap: var(--ibou-spacing-stack-xl); padding: var(--ibou-spacing-inset-lg); border-radius: var(--ibou-radius-2xl); background: var(--ibou-color-surface-brand); color: var(--ibou-color-text-on-brand); }
.platform-access__intro { display: grid; gap: var(--ibou-spacing-stack-md); align-content: center; min-inline-size: 0; }
.platform-access__intro h2 { max-inline-size: 18ch; text-wrap: balance; }
.platform-access__intro p { max-inline-size: 44ch; color: var(--ibou-color-text-secondary-on-brand); }
/* « Essayez-la » ne se coupe pas après son trait d'union sur un écran étroit. */
.platform-nowrap { white-space: nowrap; }
.platform-access__card { gap: var(--ibou-spacing-stack-md); min-inline-size: 0; }
.platform-access__card .form-fallback { margin: 0; font-size: var(--ibou-typography-body-sm-font-size); }

/* ---- Confirmation : le panneau rose ouvre la page, mascotte pose 03 ------------------------- */

.platform-confirmation > .platform-confirmation__hero { display: grid; gap: var(--ibou-spacing-gutter-desktop); padding: var(--ibou-spacing-inset-lg); border-radius: var(--ibou-radius-2xl); background: var(--ibou-color-surface-brand); color: var(--ibou-color-text-on-brand); align-items: center; }
.platform-confirmation__text { display: grid; gap: var(--ibou-spacing-stack-lg); }
.platform-confirmation__text > p { max-inline-size: 56ch; }
.platform-confirmation__mascot { inline-size: 8rem; block-size: auto; justify-self: end; }
/* Sur la confirmation, la console n'a plus la mascotte : une seule par page. */
.platform-confirmation .platform-hero__figure { padding-block-start: 0; }

/* ---- Points de rupture ---------------------------------------------------------------------- */

@media (min-width: 768px) {
  .platform-page > .platform-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ibou-spacing-gutter-desktop); }
  .platform-hero__mascot { inline-size: 7rem; inset-inline-end: var(--ibou-space-8); }
  .platform-chain { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: var(--ibou-spacing-inset-xl); align-items: center; }
  .platform-access__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); padding: var(--ibou-spacing-inset-xl); align-items: center; }
  .platform-confirmation > .platform-confirmation__hero { grid-template-columns: minmax(0, 1fr) 12rem; padding: var(--ibou-spacing-section-sm); }
  .platform-confirmation__mascot { inline-size: 100%; }
  /* La console de la confirmation s'étend sur la largeur de lecture : plus de colonne à côté. */
  .platform-confirmation .platform-hero__figure { max-inline-size: var(--ibou-container-content); }
}