/* home.css — composition de l'accueil (index.html). Couleurs, typographie et composants viennent de
   design-system/ibou.css : cette feuille ne pose que la mise en page, avec les tokens, sur le modèle
   de api/platform.css. Aucune couleur en dur, les composants `.ibou-*` ne sont pas repeints.

   Dosage (panel du 14 octobre) : le rose ne joue qu'une fois dans le contenu, au héros (le pied est
   rose aussi) ; les deux applications sont les cards fortes du système (vert 900 et beige 500,
   card.css) ; la technologie est sur le canvas avec une composition beige ; l'appel final est beige.
   Le registre affiche (capitales) n'existe qu'au titre du héros. Rose et vert ne se touchent jamais.
   Rose 500 et beige 500 sont des surfaces FIXES dans les deux thèmes : à l'intérieur, seuls les tokens
   `text-on-*`, `text-secondary-on-*` et `text-link-on-*` sont admis, jamais `.lede`, ni `text-primary`,
   ni `border-subtle`, qui basculent en sombre. `data-surface="brand|strong"` sur le panneau règle
   l'anneau de focus et donne aux boutons sans variante les couleurs action.on-strong (pilule blanche
   à trait anthracite). Chaque section s'écrit `.home-page > …` : la règle `.page > section` de
   site.css l'emporterait sinon. */

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

/* section.md au mobile, section.lg au bureau (08 · page d'accueil) ; les ancres s'appuient sur le
   `scroll-padding-top` d'ibou.css, sans marge de défilement en plus. */
.home-page { gap: var(--ibou-spacing-section-md); }

/* ---- Panneaux colorés (héros rose, appel final beige) ---------------------------------------- */

/* Les liens nus d'un panneau lisent `--ibou-action-link*` (base.css), posées ici sur les tokens de la
   surface, comme card.css le fait pour la card chaude. `--home-muted` est la couleur secondaire de la
   surface, pour les chapôs, surlignes et notes. */
.home-panel { border-radius: var(--ibou-radius-2xl); padding: var(--ibou-spacing-inset-lg); }
.home-panel[data-tone="brand"] {
  background: var(--ibou-color-surface-brand); color: var(--ibou-color-text-on-brand);
  --home-muted: var(--ibou-color-text-secondary-on-brand);
  --ibou-action-link: var(--ibou-color-text-link-on-brand); --ibou-action-link-hover: var(--ibou-color-text-link-on-brand-hover);
  --ibou-action-link-visited: var(--ibou-color-text-link-on-brand-visited); --ibou-action-link-external: var(--ibou-color-text-link-on-brand);
}
.home-panel[data-tone="warm"] {
  background: var(--ibou-color-surface-warm); color: var(--ibou-color-text-on-warm);
  --home-muted: var(--ibou-color-text-secondary-on-warm);
  --ibou-action-link: var(--ibou-color-text-link-on-warm); --ibou-action-link-hover: var(--ibou-color-text-link-on-warm);
  --ibou-action-link-visited: var(--ibou-color-text-link-on-warm-visited); --ibou-action-link-external: var(--ibou-color-text-link-on-warm);
}
.home-muted { color: var(--home-muted); }

/* ---- Héros : la promesse, les deux applications ----------------------------------------------- */

/* Deux colonnes dès 768 px : la promesse à gauche, les écrans à droite. Le panneau n'a pas de
   marge basse : les téléphones et la mascotte sortent par le bord bas, coupés par `overflow`. */
.home-page > .home-hero { display: grid; gap: var(--ibou-spacing-stack-xl); padding-block-end: 0; overflow: hidden; }
.home-hero__text { container-type: inline-size; display: grid; gap: var(--ibou-spacing-stack-lg); justify-items: start; min-inline-size: 0; }
/* Registre affiche (03 · typographie, D-19) : capitales New Spirit Light italique, interligne
   serré, le seul endroit de la page. La taille suit la largeur de la colonne, entre display.lg et
   display.xl. Le texte ne déborde pas et reste réel : pas d'`aria-label`. */
.home-hero__title {
  font-family: var(--ibou-typography-display-poster-font-family); font-weight: var(--ibou-typography-display-poster-font-weight);
  font-style: italic; text-transform: uppercase; line-height: var(--ibou-typography-display-poster-line-height);
  letter-spacing: var(--ibou-typography-display-poster-letter-spacing);
  font-size: clamp(var(--ibou-typography-display-lg-font-size), 12cqi, var(--ibou-typography-display-xl-font-size));
  max-inline-size: 100%; overflow-wrap: normal;
}
/* Coupures voulues : « Mieux chercher, » / « y voir plus clair. » ; la seconde se replie en deux sur
   une colonne étroite (quatre lignes au plus, 03 · registre affiche). Escalier d'une demi-capitale
   sur la seconde ligne dès 768 px (brandbook p.30). */
.home-hero__title > span { display: block; text-wrap: balance; }
.home-hero__lede { max-inline-size: 40ch; font-size: var(--ibou-typography-body-lg-font-size); line-height: var(--ibou-typography-body-lg-line-height); }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ibou-spacing-inline-md); }
/* La scène (panel de graphistes du 14 octobre) : Découverte devant, Actualités derrière, plus bas et
   chevauché ; le groupe est coupé par le bord bas du panneau (c'est le panneau qui rogne, pas ce
   bloc : la mascotte doit pouvoir en sortir) et garde une vraie marge à droite, deux fois l'inset,
   au lieu de frôler le bord. La mascotte pose 03 est devant, posée sur le coin bas-gauche du
   premier téléphone, pattes coupées par le bord bas (brandbook p.29 ; 12 · imagerie : H ≥ 88 px au
   mobile, ≥ 176 px sur un héros au bureau). Au mobile seule la moitié haute des écrans se voit : le premier
   badge arrive un écran plus tôt. */
.home-hero__phones { position: relative; display: flex; align-items: flex-start; max-block-size: 17rem; padding-inline: var(--ibou-space-6) var(--ibou-space-4); }
.home-hero__phones > .phone { flex: 0 0 55%; position: relative; z-index: 2; }
.home-hero__phones > .phone + .phone { z-index: 1; margin-inline-start: -15%; margin-block-start: var(--ibou-space-6); }
.home-hero__mascot { position: absolute; z-index: 3; inline-size: 7rem; block-size: auto; inset-block-end: calc(-1 * var(--ibou-space-6)); inset-inline-start: calc(-1 * var(--ibou-space-4)); }

/* ---- Cadre de téléphone ----------------------------------------------------------------------- */

/* CSS pur : trait medium (3 px, « encadrés de photos », 05 · traits) en couleur courante — anthracite
   sur le rose, dans les deux thèmes — avec le rayon des cadres de mockup (05 · rayons). Ni encoche
   ni ombre (D-33) : la capture porte déjà sa barre d'état. */
.phone { margin: 0; border: var(--ibou-border-width-medium) solid currentColor; border-radius: var(--ibou-radius-xl); overflow: hidden; }
.phone > img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 640 / 1386; object-fit: cover; border-radius: calc(var(--ibou-radius-xl) - var(--ibou-border-width-medium)); }

/* ---- Liens des boutiques (appel final) ------------------------------------------------------- */

/* Un groupe par application : son nom, puis « App Store » et « Google Play » en boutons texte, comme
   dans les cards (pas de badges officiels, demande de la direction). Sur beige 500, `data-surface`
   du panneau donne aux boutons texte les couleurs action.on-strong. */
.stores { display: grid; gap: var(--ibou-spacing-stack-xs); justify-items: start; }
.stores__label { font: var(--ibou-typography-heading-5); letter-spacing: var(--ibou-typography-heading-5-letter-spacing); }
.stores__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ibou-spacing-inline-md); margin: 0; padding: 0; list-style: none; }

/* ---- Les deux applications : cards jumelles du système ---------------------------------------- */

/* Deux cards côte à côte dès 768 px, empilées en dessous. Vert 900 (card forte de Découverte,
   card.css : titre italique vert 300, pilule verte D-78) et beige 500 (card chaude) : vert et beige
   peuvent se toucher. Hauteurs égales : `.page .ibou-card__actions` pousse les actions en bas, et la
   rangée (pilule web, App Store, Google Play) s'aligne d'une card à l'autre. */
.duo { display: grid; gap: var(--ibou-spacing-gutter-mobile); grid-template-columns: minmax(0, 1fr); }
.home-product { position: relative; padding: var(--ibou-spacing-inset-lg); overflow: hidden; }
.home-product__claim { font: var(--ibou-typography-heading-5); letter-spacing: var(--ibou-typography-heading-5-letter-spacing); text-wrap: balance; }
.home-product .ibou-card__body { max-inline-size: 48ch; }
/* Le vert 900 est sombre dans les deux thèmes : la card règle la couleur des boutons texte qu'elle
   porte (App Store, Google Play) et l'anneau de focus, comme une surface du système le fait
   (base.css, data-surface). La pilule « Ouvrir sur le web » garde sa variante verte. */
.home-product[data-tone="discover"] {
  --ibou-action-tertiary-text: var(--ibou-color-text-on-discover-strong);
  --ibou-action-tertiary-text-hover: var(--ibou-color-text-on-discover-strong);
  --ibou-action-tertiary-underline: var(--ibou-color-text-on-discover-strong);
  --ibou-action-tertiary-bg-hover: transparent;
  --ibou-focus-ring: var(--ibou-color-text-on-discover-strong);
  --ibou-focus-halo: var(--ibou-color-surface-discover-strong);
}
/* Mascotte pose 03 en haut à droite de la card Découverte, à partir de 1024 px (en dessous, la card
   est trop étroite pour elle) : le titre et l'accroche lui laissent la place, le texte et la rangée
   d'actions reprennent toute la largeur. Jamais recolorée (D-26). */
.home-product__art { display: none; }

/* ---- Ce que vous y gagnez --------------------------------------------------------------------- */

/* Repères 01-03, comme ailleurs sur le site : la charte n'a pas de pictos illustratifs hors mascotte. */
.home-points { margin: 0; padding: 0; list-style: none; }
.home-point { display: grid; gap: var(--ibou-spacing-stack-sm); align-content: start; justify-items: start; padding-block-start: var(--ibou-spacing-stack-lg); border-block-start: var(--ibou-border-width-hairline) solid var(--ibou-color-border-subtle); }
.home-point__number { font: var(--ibou-typography-heading-3); letter-spacing: var(--ibou-typography-heading-3-letter-spacing); color: var(--ibou-color-text-secondary); }
.home-point > h3 { font: var(--ibou-typography-heading-4); letter-spacing: var(--ibou-typography-heading-4-letter-spacing); text-wrap: balance; }
.home-point > p { color: var(--ibou-color-text-secondary); }
.home-point > .ibou-btn { margin-block-start: var(--ibou-spacing-stack-xs); }

/* ---- Une technologie indépendante : texte sur le canvas, composition beige en regard ----------- */

/* `minmax(0, 1fr)` : sans lui, la composition à lignes insécables élargit la colonne implicite et
   toute la section déborde de l'écran à 320 px. */
.home-page > .home-tech { grid-template-columns: minmax(0, 1fr); gap: var(--ibou-spacing-stack-xl); }
.home-tech__text { display: grid; gap: var(--ibou-spacing-stack-md); justify-items: start; max-inline-size: var(--ibou-container-reading); }
.home-tech__text > h2 { text-wrap: balance; }
.home-tech__point { display: grid; gap: var(--ibou-spacing-stack-xs); padding-block-start: var(--ibou-spacing-stack-md); border-block-start: var(--ibou-border-width-hairline) solid var(--ibou-color-border-subtle); }
.home-tech__point > h3 { text-wrap: balance; }
.home-tech__point > p { color: var(--ibou-color-text-secondary); }
.home-tech__note { font-size: var(--ibou-typography-caption-font-size); line-height: var(--ibou-typography-caption-line-height); color: var(--ibou-color-text-secondary); }
/* Composition typographique du brandbook sur beige 500 (surface fixe, texte on-warm) : capitales
   italiques, l'œuf et le lettrage posés DANS la phrase. Décorative : le sens est dans le texte à
   côté, la figure est masquée aux lecteurs d'écran. Le corps suit la largeur de la card (conteneur),
   borné par deux tailles du système : le seul endroit où le corps n'est pas un style du système. */
.home-tech__art {
  container-type: inline-size; margin: 0; padding: var(--ibou-spacing-inset-lg);
  border-radius: var(--ibou-radius-xl); background: var(--ibou-color-surface-warm);
  color: var(--ibou-color-text-on-warm); display: grid; align-content: center; aspect-ratio: 4 / 3; overflow: hidden;
}
/* Brandbook p.39 : fer à gauche, une ligne par membre de phrase, escalier d'une demi-capitale par
   ligne, et « l'[œuf]ibou » entier sur sa ligne. Light italique, comme le titre du héros. */
.home-tech__phrase {
  margin: 0; font: var(--ibou-typography-heading-1); font-weight: var(--ibou-typography-display-poster-font-weight);
  font-style: italic; text-transform: uppercase; letter-spacing: var(--ibou-typography-heading-1-letter-spacing);
  /* La ligne la plus longue, « PETIT À PETIT » (13 capitales à ≈ 0,57 em de chasse en Light
     italique), prend ≈ 92 % de la largeur utile de la card, au format 4:3 pour que les quatre lignes
     la remplissent. */
  font-size: clamp(var(--ibou-typography-heading-2-font-size), 12.5cqi, var(--ibou-typography-display-poster-font-size));
  line-height: 1.02;
}
.home-tech__phrase > span { display: block; white-space: nowrap; }
.home-tech__phrase > span:nth-child(2) { padding-inline-start: 0.5em; }
.home-tech__phrase > span:nth-child(3) { padding-inline-start: 1em; }
.home-tech__phrase > span:nth-child(4) { padding-inline-start: 1.5em; }
/* L'œuf et le lettrage ont le poids des capitales qui les entourent : l'œuf dépasse la ligne
   (1,6 em), le lettrage monte à la hauteur de capitale (0,7 em). */
.home-tech__lockup { display: inline-flex; align-items: center; gap: var(--ibou-space-1); vertical-align: middle; }
.home-tech__lockup img { block-size: 1.6em; inline-size: auto; }
.home-tech__lockup .home-tech__word { block-size: 0.7em; }

/* ---- Un web qui reste vivant, puis l'appel final ---------------------------------------------- */

.home-page > .home-living { gap: var(--ibou-spacing-stack-md); max-inline-size: var(--ibou-container-reading); justify-items: start; }
.home-final { display: grid; gap: var(--ibou-spacing-stack-xl); }
@media (max-width: 767px) { .home-page > .home-final { padding: var(--ibou-spacing-inset-md); } }
.home-final__text { display: grid; gap: var(--ibou-spacing-stack-md); align-content: center; }
.home-final__text > h2 { text-wrap: balance; }
.home-final__text > p { max-inline-size: 44ch; }
.home-final__claim { font: var(--ibou-typography-subtitle-lg); letter-spacing: var(--ibou-typography-subtitle-lg-letter-spacing); }
.home-final__stores { display: grid; gap: var(--ibou-spacing-stack-lg); align-content: center; }

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

@media (min-width: 768px) {
  .home-page { gap: var(--ibou-spacing-section-lg); }
  .home-panel { padding: var(--ibou-spacing-inset-xl); }
  /* section.xl sous le héros (08 · page d'accueil) : l'écart de page est section.lg, on complète. */
  /* Les deux colonnes partagent la même ligne de tête (le haut du titre et le haut du premier
     téléphone) et la même ligne de pied (le bord bas du panneau). La hauteur du panneau vient du
     texte seul : `contain: size` sur la scène, qui s'étire à la hauteur de la rangée et laisse ses
     téléphones déborder par le bas, où le panneau les rogne. */
  .home-page > .home-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--ibou-spacing-gutter-desktop); align-items: stretch; padding-block-end: 0; margin-block-end: calc(var(--ibou-spacing-section-xl) - var(--ibou-spacing-section-lg)); }
  .home-hero__text { padding-block: 0 var(--ibou-spacing-inset-xl); }
  .home-hero__title > span:last-child { padding-inline-start: 0.5em; }
  /* 768-1023 : la colonne est trop étroite pour des écrans qui iraient du titre au bord bas ; la
     scène s'aligne sur le bas et rogne ses écrans à 22rem. */
  .home-hero__phones { align-self: end; max-block-size: 22rem; padding-inline: var(--ibou-space-2); }
  .home-hero__phones > .phone { flex-basis: 11rem; }
  .home-hero__phones > .phone + .phone { margin-inline-start: calc(-1 * var(--ibou-space-24)); margin-block-start: var(--ibou-space-10); }
  /* Devant le premier téléphone, 40 px d'aile sur le cadre ; ancrée au bas. */
  .home-hero__mascot { inline-size: 9rem; inset-block-end: calc(-1 * var(--ibou-space-6)); inset-inline-start: calc(-1 * (var(--ibou-space-20) + var(--ibou-space-2))); }
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ibou-spacing-gutter-tablet); }
  .home-page > .home-tech { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--ibou-spacing-gutter-desktop); align-items: center; }
  .home-final { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ibou-spacing-gutter-desktop); }
}
@media (min-width: 1024px) {
  .home-page > .home-hero { padding: var(--ibou-spacing-inset-2xl); padding-block-end: 0; }
  .home-product__art { display: block; position: absolute; inset-block-start: var(--ibou-spacing-inset-md); inset-inline-end: var(--ibou-spacing-inset-lg); inline-size: 6.5rem; }
  .home-product__art > img { inline-size: 100%; block-size: auto; }
  .home-product[data-tone="discover"] .card-stack > :is(.ibou-card__title, .home-product__claim) { padding-inline-end: 7.5rem; }
  /* Colonnes égales : la scène (deux écrans de 16rem chevauchés de 96 px) garde ≈ 120 px d'air à
     droite, et la mascotte reste à distance des pilules. */
  .home-page > .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Du haut du titre au bord bas : la scène s'étire à la hauteur de la rangée (`contain: size`,
     ses écrans débordent par le bas, le panneau les rogne). */
  .home-hero__phones { contain: size; align-self: stretch; max-block-size: none; padding-inline: var(--ibou-space-6); }
  .home-hero__phones > .phone { flex-basis: 16rem; }
  .home-hero__phones > .phone + .phone { margin-inline-start: calc(-1 * var(--ibou-space-24)); margin-block-start: var(--ibou-space-12); }
  /* 12rem = 176 px de haut ; 48 px d'aile sur le cadre du premier téléphone. */
  .home-hero__mascot { inline-size: 12rem; inset-inline-start: calc(-1 * (var(--ibou-space-24) + var(--ibou-space-6))); }
  .duo { gap: var(--ibou-spacing-gutter-desktop); }
  .home-product { padding: var(--ibou-spacing-inset-xl); }
}