/* site.css — mise en page propre à ibou.com. Tout le reste vient de design-system/ibou.css
   (tokens, typographie, base, composants), qui est généré et ne s'édite pas.

   Règle de partage : les composants `.ibou-*` ne sont JAMAIS repeints ici. Cette feuille ne
   contient que ce que le design system ne couvre pas — le rythme des sections d'une page de
   marque, les grilles, quelques réglages de page. Aucune couleur en dur : tout passe par les
   tokens, donc le thème sombre suit sans une ligne de plus.

   Couches : `reset` est déclarée en tête d'ibou.css, AVANT les couches du DS, pour que le reset
   universel ci-dessous perde contre les marges et les paddings des composants. Le reste de cette
   feuille est hors couche : il l'emporte sur tout, ce qui est le bon défaut pour du CSS de page. */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, blockquote, ol, ul { margin: 0; padding: 0; }
  ol[class], ul[class] { list-style: none; }
  img, svg { display: block; max-width: 100%; }
}

/* ---- Enveloppe de page ------------------------------------------------------------------- */

/* Réserve pour la barre basse des services, fixée en bas sous 768 px : sans elle, le pied de
   page passe dessous. La règle tombe avec la barre (au-dessus de 768 px, et sous 480 px de haut
   où nav.css détache les barres). */
@media (max-width: 767px) {
  body { padding-block-end: calc(var(--ibou-nav-height-mobile) + env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) and (max-height: 480px) {
  body { padding-block-end: 0; }
}

/* Colonne de contenu. `.ibou-page` (layout.css) donne la largeur et les marges ; le rythme
   vertical entre sections est propre à une page de marque, qui respire plus qu'une page de
   résultats. */
.page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ibou-spacing-section-lg); }
.page > section { display: grid; gap: var(--ibou-spacing-stack-xl); }

/* Bloc de texte d'une section : largeur de lecture, jamais toute la page (03 · mesure). */
.lede { max-width: var(--ibou-container-reading); color: var(--ibou-color-text-secondary); }
.section-head { display: grid; gap: var(--ibou-spacing-stack-md); max-width: var(--ibou-container-reading); }

/* ---- Héros ------------------------------------------------------------------------------- */

/* Le héros respire en haut (il touche la barre) mais pas en bas : l'écart entre sections vient
   déjà de `.page`, et l'ajouter deux fois creusait un trou sous l'accroche. */
.hero { justify-items: center; text-align: center; gap: var(--ibou-spacing-stack-md); padding-block-start: var(--ibou-spacing-section-sm); }
.hero h1 { max-width: min(24ch, 100%); }
.hero .lede { margin-inline: auto; }
/* 10 · Le héros a son propre rythme : large entre les blocs, serré entre les deux paragraphes,
   qui se lisent d'une traite. Sans le sélecteur `.page >`, la règle des sections l'emporterait. */
.page > .hero { gap: var(--ibou-space-10); }
.hero .lede + .lede { margin-block-start: calc(-1 * var(--ibou-space-4)); }
.hero .lede { font-size: var(--ibou-typography-body-lg-font-size); line-height: var(--ibou-typography-body-lg-line-height); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--ibou-spacing-inline-md); align-items: center; }

/* ---- Grilles ----------------------------------------------------------------------------- */

.grid { display: grid; gap: var(--ibou-spacing-gutter-mobile); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid[data-cols="2"], .grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .grid { gap: var(--ibou-spacing-gutter-tablet); }
  .grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid { gap: var(--ibou-spacing-gutter-desktop); }
  .grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* La card du service mis en avant occupe les deux colonnes : une seule surface colorée forte par
   page (02 · matrice), c'est elle. */
@media (min-width: 640px) { .grid > .span-2 { grid-column: 1 / -1; } }

/* Corps d'une card écrite en HTML statique : card.css pose le cadre, l'empilement vient d'ici. */
.card-stack { display: flex; flex-direction: column; align-items: start; gap: var(--ibou-spacing-stack-sm); }
.card-stack > .ibou-card__actions { margin-block-start: var(--ibou-spacing-stack-sm); }

/* ---- Groupes d'engagements ----------------------------------------------------------------- */

/* Chaque groupe du chapitre « Nos engagements » : un titre, puis sa grille de cards. Le rythme
   interne est plus serré que l'écart entre groupes, qui vient de `.page > section`. */
.group { display: grid; gap: var(--ibou-spacing-stack-md); }
.group > h3 { max-width: var(--ibou-container-reading); }

/* ---- Liens de boutique ---------------------------------------------------------------------- */

/* Posés hors de la card vert 900 : sur cette surface, un lien ordinaire n'a pas de couleur
   garantie (07 · Surfaces et couleurs d'action). */
.store-links { display: flex; flex-wrap: wrap; gap: var(--ibou-spacing-inline-md); align-items: center; }
/* Sous 480 px, le libellé prend sa ligne et les deux boutiques restent ensemble sur la suivante. */
@media (max-width: 479px) { .store-links { display: grid; justify-items: start; gap: var(--ibou-spacing-stack-xs); } }
.store-note { color: var(--ibou-color-text-secondary); font-size: var(--ibou-typography-caption-font-size); }

/* ---- Pied de page : mention sans lien ---------------------------------------------------------- */

/* « Recherche (bientôt) » n'est pas un lien : elle se distingue de ses voisines sans les imiter. */
.footer-soon { opacity: 0.7; }

/* ---- Sections centrées ----------------------------------------------------------------------- */

/* La maquette centre les titres de section et leur chapô ; le texte long des cards reste aligné à
   gauche, où il se lit. */
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.centre { text-align: center; margin-block-start: var(--ibou-spacing-section-sm); }
.hero-actions--center { justify-content: center; column-gap: var(--ibou-space-8); }

/* ---- Card Découverte ------------------------------------------------------------------------- */

/* Actualités ouvre la section. Découverte reste identifiable par le vert du système,
   avec une mascotte secondaire. Les composants gardent leurs couleurs natives. */
.home-page > .hero { gap: var(--ibou-spacing-stack-lg); }
.home-page .hero .lede + .lede { margin-block-start: 0; }
.home-page .news-card { display: grid; gap: var(--ibou-spacing-stack-xl); padding: var(--ibou-spacing-inset-lg); }
.home-page .news-card > .card-stack { display: flex; block-size: auto; }
.news-card__text { max-inline-size: 52ch; }
.news-card__claim { text-wrap: balance; }
.news-card__steps { display: grid; gap: var(--ibou-spacing-stack-lg); padding: 0; margin: 0; list-style: none; }
.news-card__steps > 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; }
.news-card__steps h4 { margin-block-end: var(--ibou-spacing-stack-xs); }
.news-card__steps p { font-size: var(--ibou-typography-body-sm-font-size); }
.news-card__number { font: var(--ibou-typography-heading-3); }
.discover-card { position: relative; display: grid; gap: var(--ibou-spacing-stack-lg); overflow: hidden; }
.discover-card__text { max-inline-size: 60ch; position: relative; }
.discover-card__art { display: none; }
@media (min-width: 768px) {
  .home-page .news-card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding: var(--ibou-spacing-inset-xl); align-items: center; }
  .discover-card { grid-template-columns: minmax(0, 1fr) 12rem; padding-inline: var(--ibou-spacing-inset-xl); }
  .discover-card__art { display: block; align-self: end; block-size: 10rem; margin-block-end: calc(-1 * var(--ibou-spacing-inset-md)); }
  .discover-card__mascot { inline-size: 100%; block-size: auto; }
}

/* ---- Engagements ------------------------------------------------------------------------------ */

.pledges { display: grid; gap: var(--ibou-spacing-section-sm) var(--ibou-spacing-gutter-desktop); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.pledge { display: grid; gap: var(--ibou-spacing-stack-md); align-content: start; border-block-start: var(--ibou-border-width-hairline) solid var(--ibou-color-border-subtle); padding-block-start: var(--ibou-spacing-stack-lg); }
.pledge__eyebrow { display: flex; gap: var(--ibou-spacing-inline-md); align-items: center; }
.pledge__number { font: var(--ibou-typography-heading-3); color: var(--ibou-color-text-secondary); }
.pledge > h3 { text-wrap: balance; }
@media (min-width: 640px) { .pledges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Comment nous nous y prenons --------------------------------------------------------------- */

.hows { display: grid; gap: var(--ibou-spacing-gutter-mobile); grid-template-columns: minmax(0, 1fr); }
.how { display: grid; gap: var(--ibou-spacing-stack-md); align-content: start; }
@media (min-width: 768px) {
  /* Les deux colonnes partagent les mêmes rangées : le texte commence à la même hauteur même
     quand un titre tient sur deux lignes et l'autre sur une. Sans subgrid, chaque colonne reprend
     son propre rythme — la mise en page reste juste, seul l'alignement fin est perdu. */
  .hows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ibou-spacing-stack-xl); row-gap: var(--ibou-spacing-stack-md); grid-template-rows: auto auto auto; }
  .how { grid-template-rows: subgrid; grid-row: span 3; }
}
.how__art {
  container-type: inline-size;
  margin: 0; padding: var(--ibou-spacing-inset-md);
  border-radius: var(--ibou-radius-lg); background: var(--ibou-color-surface-warm);
  color: var(--ibou-color-text-on-warm); display: grid; place-items: center; aspect-ratio: 1 / 1;
}
/* Composition typographique de la maquette : capitales italiques, la mascotte et le lettrage
   posés dans la phrase. Décoratif : le sens est dans le titre qui suit, et la figure est masquée
   aux lecteurs d'écran. */
/* 5, 6 · Un seul flux de texte : la mascotte est posée DANS la phrase, comme en maquette, au lieu
   d'être un troisième bloc centré qui retombe seul en bas de la card. */
.how__phrase {
  margin: 0; font: var(--ibou-typography-heading-1); font-style: italic; text-transform: uppercase;
  letter-spacing: var(--ibou-typography-heading-1-letter-spacing); text-align: center;
  text-wrap: balance; max-inline-size: 9ch;
  /* La composition doit REMPLIR son carré, comme en maquette : la taille suit donc la largeur de
     la card, bornée par deux tailles du système. C'est le seul endroit de la page où le corps
     n'est pas un style du système — une composition décorative, pas du texte courant. */
  font-size: clamp(var(--ibou-typography-heading-2-font-size), 15cqi, var(--ibou-typography-display-xl-font-size));
  line-height: var(--ibou-font-line-height-tight);
}
/* La mascotte et le lettrage suivent la même échelle que les mots qui les entourent. */
.how__lockup img { block-size: 1.35em; }
.how__lockup .how__word { block-size: 0.52em; }
.how__lockup { display: inline-flex; align-items: center; gap: var(--ibou-space-1); vertical-align: middle; }
/* 19 · La mascotte domine le lettrage, comme en maquette : c'est elle qu'on lit en premier. */
.how__lockup img { inline-size: auto; }

/* ---- Logo de la barre ------------------------------------------------------------------------ */

/* Le logo est une image : elle ne prend pas la couleur du texte. Les deux dessins sont dans la
   page, et l'enveloppe montre celui qui convient au thème. La règle porte sur l'enveloppe, jamais
   sur les classes du composant : `.ibou-nav__logo-full` et `-mark` gardent leur propre bascule,
   celle de la largeur d'écran (01 · marque : le lettrage s'inverse, jamais la mascotte). */
.logo-theme { display: inline-flex; align-items: center; }
.logo-theme--sombre { display: none; }
:root[data-theme="dark"] .logo-theme--clair { display: none; }
:root[data-theme="dark"] .logo-theme--sombre { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-theme--clair { display: none; }
  :root:not([data-theme="light"]) .logo-theme--sombre { display: inline-flex; }
}

/* ---- Bascule jour / nuit --------------------------------------------------------------------- */

/* L'interrupteur du design system, logé dans la troisième cellule de la barre. `.ibou-switch` est
   en `inline-flex` : sans cette règle, l'attribut `hidden` ne masquerait rien tant que theme.js
   n'a pas tourné. */
.theme-switch[hidden] { display: none; }
.theme-switch { gap: var(--ibou-spacing-inline-sm); }

/* Sous 480 px, la barre n'a plus la place du libellé : il reste lu, jamais vu. Le nom accessible
   de l'interrupteur vient de ce texte (`aria-labelledby`), il ne peut donc pas disparaître. */
@media (max-width: 479px) {
  .theme-switch__label {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---- Clôture -------------------------------------------------------------------------------- */

.closing-claim {
  max-width: var(--ibou-container-reading); margin-inline: auto; font: var(--ibou-typography-subtitle-lg);
  letter-spacing: var(--ibou-typography-subtitle-lg-letter-spacing);
}

/* ---- Prose (manifeste, mentions légales, pages techniques) -------------------------------- */

.prose { max-width: var(--ibou-container-reading); display: grid; gap: var(--ibou-spacing-stack-md); }
.prose h2 { margin-block-start: var(--ibou-spacing-section-sm); }
.prose h3 { margin-block-start: var(--ibou-spacing-stack-lg); }
.prose ul, .prose ol { display: grid; gap: var(--ibou-spacing-stack-xs); padding-inline-start: var(--ibou-space-5); }
.prose li { list-style: revert; }
.prose code { font: var(--ibou-typography-code); background: var(--ibou-color-surface-sunken); padding: var(--ibou-space-0-5) var(--ibou-space-1); border-radius: var(--ibou-radius-xs); }
.prose pre { overflow-x: auto; background: var(--ibou-color-surface-sunken); border: var(--ibou-border-width-hairline) solid var(--ibou-color-border-subtle); border-radius: var(--ibou-radius-md); padding: var(--ibou-space-4); }
.prose pre code { background: none; padding: 0; }

/* ---- Pied de page ------------------------------------------------------------------------ */

/* Élément de la grille du pied de page court : sans `justify-self`, le lien du lettrage s'étire
   sur toute la largeur et sa zone cliquable avec lui. */
.footer-brand { justify-self: start; line-height: 0; }
.footer-brand .ibou-footer__logo { display: block; }

/* ---- Barre de navigation ------------------------------------------------------------------ */

/* Troisième cellule de la barre de navigation (`auto 1fr auto`) : vide sur la plupart des pages,
   elle garde les onglets centrés sur la page. */
.nav-end { justify-self: end; display: flex; align-items: center; gap: var(--ibou-spacing-inline-sm); }

/* Sous 768 px, les services sont dans la barre basse : les répéter en haut donnerait deux fois
   les mêmes liens, et les onglets débordaient de la barre. */
@media (max-width: 767px) {
  .ibou-nav__center { display: none; }
}

/* ---- Réglages de page sur des composants du système ------------------------------------------- */

/* Ces règles composent les cards de contenu sans modifier leurs couleurs.

   2 · Les actions d'une card tombent en bas, pour que deux cards jumelles alignent leurs boutons
   quelle que soit la longueur du texte, et que le vide ne se loge pas sous le bouton. */
.page .ibou-card > .card-stack { block-size: 100%; }
.page .ibou-card__actions {
  margin-block-start: auto; display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ibou-spacing-inline-md); min-block-size: var(--ibou-size-target-min);
}

/* ---- Lecture du manifeste --------------------------------------------------------------- */

.manifesto-prose { inline-size: 100%; margin-inline: auto; }
.manifesto-format { color: var(--ibou-color-text-secondary); font-size: var(--ibou-typography-body-sm-font-size); }
.manifesto-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ibou-spacing-inline-lg); }
.manifesto-toc { display: grid; gap: var(--ibou-spacing-stack-sm); padding: var(--ibou-spacing-inset-md); border-block: var(--ibou-border-width-hairline) solid var(--ibou-color-border-subtle); }
.manifesto-toc ol { margin: 0; }
.manifesto-print-brand { display: none; }
.preparing .ibou-tag { justify-self: start; }
.preparing { padding-block: var(--ibou-spacing-section-sm); border-block: var(--ibou-border-width-hairline) solid var(--ibou-color-border-subtle); }

.manifesto-masthead { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: var(--ibou-spacing-stack-lg); align-items: center; }
.manifesto-heading { display: grid; gap: var(--ibou-spacing-stack-md); }
.manifesto-art { align-self: stretch; overflow: hidden; border-radius: var(--ibou-radius-lg); background: var(--ibou-color-surface-brand); display: flex; align-items: end; justify-content: center; min-block-size: 12rem; }
.manifesto-art img { inline-size: 100%; block-size: auto; transform: translateY(var(--ibou-space-4)); }
.manifesto-part { display: grid; gap: var(--ibou-spacing-stack-md); }
.manifesto-section-number { display: block; font: var(--ibou-typography-heading-5); font-style: italic; margin-block-end: var(--ibou-spacing-stack-xs); }
.manifesto-prose h2 { border-block-start: var(--ibou-border-width-medium) solid var(--ibou-color-border-strong); padding-block-start: var(--ibou-spacing-stack-md); }
.manifesto-closing { background: var(--ibou-color-surface-warm); color: var(--ibou-color-text-on-warm); border-radius: var(--ibou-radius-lg); padding: var(--ibou-spacing-inset-md); }
@media screen and (max-width: 639px) {
  .manifesto-masthead { grid-template-columns: minmax(0, 1fr) 5rem; gap: var(--ibou-spacing-stack-md); }
  .manifesto-heading { display: contents; }
  .manifesto-heading h1 { grid-column: 1; }
  .manifesto-heading p { grid-column: 1 / -1; }
  .manifesto-art { grid-column: 2; grid-row: 1; inline-size: 5rem; min-block-size: 5rem; block-size: 5rem; align-self: center; }
  .manifesto-art img { inline-size: 4.5rem; }
}

/* The downloadable PDF is rendered from these same pages, in the light brand theme.
   One opening page, then one page per part: the validated text remains the single source. */
@page { size: A4; margin: 18mm 20mm 20mm; background: var(--ibou-color-beige-50); }
@media print {
  :root {
    color-scheme: light;
    --ibou-color-bg-canvas: var(--ibou-color-beige-50);
    --ibou-color-text-primary: var(--ibou-color-neutral-500);
    --ibou-color-text-secondary: var(--ibou-color-neutral-400);
    --ibou-color-border-subtle: var(--ibou-color-beige-300);
  }
  body { padding: 0; font-size: 11pt; line-height: 1.65; }
  .ibou-nav, .ibou-tabbar, .ibou-skip, .ibou-footer, .manifesto-tools, .manifesto-toc { display: none; }
  .manifesto-page { max-width: none; margin: 0; padding: 0; display: block; }
  .manifesto-prose { max-width: 145mm; display: block; }
  .manifesto-part { display: block; break-before: page; }
  .manifesto-prose > p, .manifesto-part > p { margin-block: 0 4mm; }
  .manifesto-print-brand { display: block; margin-block: 3mm 16mm; }
  .manifesto-print-brand img { width: 38mm; height: auto; }
  .manifesto-masthead { grid-template-columns: minmax(0, 1fr) 34mm; gap: 8mm; margin-block-end: 9mm; }
  .manifesto-heading { gap: 5mm; }
  .manifesto-art { grid-row: auto; inline-size: auto; min-block-size: 48mm; block-size: auto; border-radius: 5mm; }
  .manifesto-art img { inline-size: 32mm; transform: translateY(4mm); }
  .manifesto-masthead p { margin: 0; }
  .manifesto-section-number { font-size: 11pt; margin-block-end: 2mm; }
  .manifesto-prose .manifesto-closing { padding: 4mm; font-size: 14pt; line-height: 1.35; }
  .manifesto-prose h1 { font-size: 32pt; line-height: 1.1; margin-block-end: 0; }
  .manifesto-prose .ibou-text-subtitle-lg { font-size: 15pt; line-height: 1.4; margin-block-end: 0; }
  .manifesto-prose .ibou-text-lede { font-size: 13pt; line-height: 1.5; }
  .manifesto-prose h2 { break-before: auto; margin-block: 0; padding-block-end: 4mm; padding-block-start: 3mm; font-size: 26pt; line-height: 1.15; }
  .manifesto-prose h3 { margin-block: 5mm 3mm; font-size: 16pt; line-height: 1.3; }
  .manifesto-prose h1, .manifesto-prose h2, .manifesto-prose h3 { break-after: avoid; }
  .manifesto-prose p { orphans: 3; widows: 3; }
  .manifesto-prose .ibou-divider { margin-block: 7mm; }
}

/* ---- Pages de documentation et formulaire Platform --------------------------------------- */
.page > .prose { inline-size: 100%; margin-inline: auto; }
.press-page .ibou-card__meta { margin-block-start: auto; }
.access-form__row { display: flex; flex-wrap: wrap; gap: var(--ibou-spacing-inline-sm); align-items: center; }
.access-form__row > .ibou-input { flex: 1 1 15rem; min-inline-size: 0; }
.form-msg { min-height: var(--ibou-space-6); font-size: var(--ibou-typography-body-sm-font-size); }
.form-msg.ok { color: var(--ibou-color-status-success-text); }
.form-msg.err { color: var(--ibou-color-status-error-text); }