/* ==========================================================================
   imprimerie.ma — socle : réinitialisation, typographie système, focus,
   préférences d'accessibilité, comportement natif sur téléphone.
   Lit tokens.css. Aucune règle de composant ici.
   ========================================================================== */

/* ----------------------------------------------------------- Réinitialisation */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font);
  font-size: 100%;                       /* respecte le réglage de taille du visiteur */
  line-height: var(--t-body-lh);
  -webkit-text-size-adjust: 100%;        /* pas d'inflation en paysage */
  -webkit-tap-highlight-color: transparent;  /* pas d'éclair gris au toucher */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  scroll-behavior: smooth;
  background: var(--bg);
  color: var(--ink);
  /* Pas de rebond de page ni de tirer-pour-rafraîchir qui détournerait un
     geste sur une feuille ou un rail. */
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  min-height: 100svh;
  font-size: var(--t-body-size);
  letter-spacing: var(--t-body-ls);
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; }
ul[class], ol[class] { list-style: none; }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }
hr { border: 0; border-top: 1px solid var(--line-2); margin: var(--s-8) 0; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }
small { font-size: var(--t-caption-size); }
strong, b { font-weight: var(--w-semibold); }
::selection { background: var(--accent-soft); color: var(--ink); }

/* -------------------------------------------------------------- Téléphone */
/* Les contrôles réagissent au doigt sans délai et ne se sélectionnent pas
   à l'appui long ; le texte courant, lui, reste sélectionnable.          */
button, a, [role="button"], .tab, .chip, .option, summary {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* iOS zoome sur tout champ sous 16 px : on ne descend jamais en dessous. */
input, select, textarea { font-size: max(1rem, var(--t-body-size)); }
input::placeholder, textarea::placeholder { color: var(--ink-4); opacity: 1; }

/* Les survols n'existent que là où un pointeur précis sait survoler. */
@media (hover: none) {
  a:hover { color: var(--accent); }
}

/* ------------------------------------------------------------------ Focus */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.btn:focus-visible, .ibtn:focus-visible, .chip:focus-visible { outline-offset: 3px; border-radius: var(--r-pill); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100%;
  z-index: calc(var(--z-consent) + 1);
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-pill);
  font-weight: var(--w-semibold);
}
.skip-link:focus { top: var(--s-4); color: #fff; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }
[inert] { pointer-events: none; }

/* ------------------------------------------------------------ Typographie */
/* Les titres portent leur tracking et leur interligne par taille.         */
h1, .t-h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-ls); font-weight: var(--w-bold); text-wrap: balance; }
h2, .t-h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); font-weight: var(--w-bold); text-wrap: balance; }
h3, .t-h3 { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); font-weight: var(--w-semibold); text-wrap: balance; }
h4, .t-h4 { font-size: var(--t-h4-size); line-height: var(--t-h4-lh); letter-spacing: var(--t-h4-ls); font-weight: var(--w-semibold); }
h5, .t-h5 { font-size: var(--t-h5-size); line-height: var(--t-h5-lh); letter-spacing: var(--t-h5-ls); font-weight: var(--w-semibold); }
.t-display { font-size: var(--t-display-size); line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); font-weight: var(--w-bold); text-wrap: balance; }
.t-lead { font-size: var(--t-lead-size); line-height: var(--t-lead-lh); letter-spacing: var(--t-lead-ls); color: var(--ink-2); text-wrap: pretty; }
.t-body { font-size: var(--t-body-size); line-height: var(--t-body-lh); letter-spacing: var(--t-body-ls); }
.t-small { font-size: var(--t-small-size); line-height: var(--t-small-lh); letter-spacing: var(--t-small-ls); }
.t-caption { font-size: var(--t-caption-size); line-height: var(--t-caption-lh); letter-spacing: var(--t-caption-ls); }
.t-micro { font-size: var(--t-micro-size); line-height: var(--t-micro-lh); letter-spacing: var(--t-micro-ls); }
.t-kicker {
  font-size: var(--t-kicker-size); letter-spacing: var(--t-kicker-ls);
  text-transform: uppercase; font-weight: var(--w-semibold); color: var(--ink-3);
}
.t-tag { font-size: var(--t-tag-size); letter-spacing: var(--t-tag-ls); text-transform: uppercase; font-weight: var(--w-semibold); }
.muted { color: var(--ink-3); }
.muted-2 { color: var(--ink-2); }
.accent { color: var(--accent); }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* Colonne de lecture : paragraphes aérés, listes et tableaux lisibles. */
.prose > * + * { margin-top: var(--s-4); }
.prose > h2 { margin-top: var(--s-12); }
.prose > h3 { margin-top: var(--s-8); }
.prose > h4 { margin-top: var(--s-6); }
.prose p, .prose li { text-wrap: pretty; color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--s-2); }
.prose a { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-color: var(--line-3); }
.prose a:hover { text-decoration-color: currentColor; }
.prose table { font-size: var(--t-small-size); }
.prose th, .prose td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-2); vertical-align: top; }
.prose th { font-weight: var(--w-semibold); color: var(--ink); background: var(--bg-2); }
.prose blockquote { padding-left: var(--s-5); border-left: 3px solid var(--accent-soft); color: var(--ink-2); }
.prose figure figcaption { margin-top: var(--s-2); font-size: var(--t-caption-size); color: var(--ink-3); }

/* ----------------------------------------------------------- Mise en page */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.container--wide { max-width: none; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--alt { background: var(--bg-2); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.stack > * + * { margin-top: var(--s-4); }
.stack--sm > * + * { margin-top: var(--s-2); }
.stack--lg > * + * { margin-top: var(--s-8); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 63.9375rem) {   /* < 1024 */
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 35.9375rem) {   /* < 576 */
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { gap: var(--s-3); }
}

.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--center { justify-content: center; }
.row--top { align-items: flex-start; }

/* Rail horizontal avec accrochage : le navigateur fait la physique.      */
.rail {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter));
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Zone sûre des téléphones à encoche : éléments fixes en bas et en haut.  */
.safe-bottom { padding-bottom: max(var(--s-4), env(safe-area-inset-bottom, 0px)); }
.safe-top { padding-top: env(safe-area-inset-top, 0px); }

/* --------------------------------------------------------- Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------- Impression */
@media print {
  .header, .footer, .wa-float, .consent, .sheet, .scrim, .strip, .skip-link { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: inherit; }
}