/* ==========================================================================
   imprimerie.ma — jetons de design (refonte « Apple design », octobre 2026)
   --------------------------------------------------------------------------
   Une seule source de vérité : couleurs, typographie (taille → tracking et
   interligne), espacements sur grille de 8, rayons, ombres, courbes et
   paramètres des ressorts. Tout le reste du CSS lit ces variables.
   Référence : references/maquette-accueil-web-1440.html (validée).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------- Couleurs */
  /* Deux accents, deux rôles (charte imprimerie.ma) :
     - le bleu marine porte l'identité : liens, boutons courants, titres ;
     - l'orange « se mérite » : promotions, appel à l'action principal,
       repères qui donnent du rythme. Jamais pour une action ordinaire.  */
  --accent:        #16294F;   /* liens, boutons, icônes, titres de marque   */
  --accent-strong: #0B1A38;   /* survol / pression de l'accent              */
  --accent-soft:   #E8ECF3;   /* fond teinté (pastilles, sélection douce)   */
  --accent-tint:   rgba(22, 41, 79, 0.08);

  --pop:        #EE9B1E;    /* orange de la charte — EN APLAT uniquement,
                               texte marine dessus (6,4:1)                 */
  --pop-strong: #DB870C;    /* pression / survol de l'aplat orange         */
  --pop-soft:   #FDF1DD;    /* fond teinté orange (cartes promo)            */
  --pop-display:#CC7400;    /* orange pour TITRES ≥ 24 px (3,2:1 — AA gros) */
  --pop-ink:    #A55400;    /* orange pour petit texte (5,4:1 sur blanc)    */

  --ink:   #1D1D1F;           /* texte principal                            */
  --ink-2: #424245;           /* texte secondaire                           */
  --ink-3: #6E6E73;           /* texte atténué (4,5:1 sur blanc et #F5F5F7) */
  --ink-4: #86868B;           /* repères, icônes inactives (décoratif)      */

  --bg:   #FFFFFF;            /* page                                       */
  --bg-2: #F5F5F7;            /* sections et cartes                         */
  --bg-3: #E9EAEE;            /* survol « ghost », séparateurs forts        */
  --bg-4: #D2D2D7;            /* bordures d'entrée actives                  */

  --line:   rgba(0, 0, 0, 0.06);
  --line-2: rgba(0, 0, 0, 0.08);
  --line-3: rgba(0, 0, 0, 0.12);

  /* États. Le rouge ne sert qu'à l'erreur, jamais à la promotion.       */
  --danger:      #B3261E;
  --danger-bg:   #FBEDEC;
  --success:     #1F7A3F;
  --success-bg:  #E8F4EC;
  --warning:     #8A5A00;
  --warning-bg:  #FFF4DE;

  /* Matériaux translucides (barre de navigation, feuilles)              */
  --glass-bg:     rgba(255, 255, 255, 0.72);
  --glass-bg-2:   rgba(255, 255, 255, 0.86);
  --glass-bg-sheet: rgba(255, 255, 255, 0.94);  /* grande surface = matériau plus épais */
  --glass-blur:   blur(20px) saturate(180%);
  --glass-edge:   rgba(255, 255, 255, 0.5);
  --scrim:        rgba(0, 0, 0, 0.32);

  /* ------------------------------------------------------- Typographie */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Échelle : taille / interligne / tracking, par taille — jamais une
     seule valeur de tracking pour tout. Les grands corps se resserrent,
     les petits s'aèrent. Valeurs relevées sur la maquette.               */
  --t-display-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem);  /* 44 → 72 */
  --t-display-lh:   1.04;
  --t-display-ls:   -0.03em;

  --t-h1-size: clamp(2.125rem, 1.4rem + 2.2vw, 3rem);          /* 34 → 48 */
  --t-h1-lh:   1.08;
  --t-h1-ls:   -0.025em;

  --t-h2-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);         /* 28 → 40 */
  --t-h2-lh:   1.1;
  --t-h2-ls:   -0.02em;

  --t-h3-size: 1.625rem;                                        /* 26 */
  --t-h3-lh:   1.15;
  --t-h3-ls:   -0.02em;

  --t-h4-size: 1.375rem;                                        /* 22 */
  --t-h4-lh:   1.2;
  --t-h4-ls:   -0.02em;

  --t-h5-size: 1.1875rem;                                       /* 19 */
  --t-h5-lh:   1.3;
  --t-h5-ls:   -0.01em;

  --t-lead-size: 1.3125rem;                                     /* 21 */
  --t-lead-lh:   1.4;
  --t-lead-ls:   -0.005em;

  --t-body-size: 1.0625rem;                                     /* 17 */
  --t-body-lh:   1.47;
  --t-body-ls:   -0.005em;

  --t-small-size: 0.9375rem;                                    /* 15 */
  --t-small-lh:   1.45;
  --t-small-ls:   0;

  --t-caption-size: 0.875rem;                                   /* 14 */
  --t-caption-lh:   1.43;
  --t-caption-ls:   0;

  --t-micro-size: 0.8125rem;                                    /* 13 */
  --t-micro-lh:   1.38;
  --t-micro-ls:   0.01em;

  --t-kicker-size: 0.875rem;        /* 14, capitales, tracking positif */
  --t-kicker-ls:   0.02em;
  --t-tag-size:    0.75rem;         /* 12, capitales, tracking positif */
  --t-tag-ls:      0.04em;

  --w-regular: 400;
  --w-medium:  500;
  --w-semibold: 600;
  --w-bold:    700;

  /* ------------------------------------------------- Espacements (×8) */
  --s-1: 0.25rem;   /*  4 */
  --s-2: 0.5rem;    /*  8 */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.25rem;   /* 20 */
  --s-6: 1.5rem;    /* 24 */
  --s-8: 2rem;      /* 32 */
  --s-10: 2.5rem;   /* 40 */
  --s-12: 3rem;     /* 48 */
  --s-16: 4rem;     /* 64 */
  --s-20: 5rem;     /* 80 */
  --s-24: 6rem;     /* 96 */

  --gutter: 1.5rem;                 /* 24, 16 sur téléphone */
  --container: 75rem;               /* 1200 */
  --container-narrow: 46rem;        /* 736 — colonne de lecture */
  --header-h: 3.5rem;               /* 56 */
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);     /* 56 → 96 */
  --section-y-tight: clamp(2.5rem, 2rem + 2vw, 3.5rem);

  /* ------------------------------------------------------------ Rayons */
  --r-xs: 0.5rem;     /*  8 — chips, badges                        */
  --r-sm: 0.75rem;    /* 12 — champs, petites cartes               */
  --r-md: 1.125rem;   /* 18 — cartes                               */
  --r-lg: 1.5rem;     /* 24 — cartes matérielles, panneaux         */
  --r-xl: 1.75rem;    /* 28 — feuilles mobiles, héros              */
  --r-pill: 999px;

  /* ------------------------------------------------------------ Ombres */
  --shadow-card-hover: 0 18px 40px rgba(22, 41, 79, 0.10);
  --shadow-material:   0 1px 0 rgba(0, 0, 0, 0.04), 0 24px 60px rgba(22, 41, 79, 0.12);
  --shadow-menu:       0 1px 0 rgba(0, 0, 0, 0.04), 0 16px 48px rgba(22, 41, 79, 0.14);
  --shadow-sheet:      0 -8px 40px rgba(0, 0, 0, 0.14);
  --shadow-edge:       0 1px 0 rgba(0, 0, 0, 0.06);

  /* --------------------------------------------- Mouvement et ressorts */
  /* Les transitions CSS ne servent qu'aux retours de pression et aux
     survols. Tout ce qui se saisit (feuille, menu, rail) passe par les
     ressorts de ui.js, qui lit ces mêmes valeurs.                       */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-hover:  ease;

  --dur-press: 120ms;      /* pression de bouton                     */
  --dur-hover: 160ms;      /* survols, couleurs                      */
  --dur-pop:   180ms;      /* popovers, menus, info-bulles           */
  --dur-panel: 240ms;      /* panneaux, modales (repli sans ressort) */

  /* Ressorts (Motion : { type: "spring", duration, bounce }) — mêmes
     couples que les valeurs Apple : amortissement 1,0 / réponse 0,4 pour
     ce qui se repositionne, 0,8 / 0,3 pour une feuille lancée au doigt. */
  --spring-ui-duration: 0.4;
  --spring-ui-bounce:   0;
  --spring-sheet-duration: 0.3;
  --spring-sheet-bounce:   0.2;
  --spring-menu-duration: 0.3;
  --spring-menu-bounce:   0;

  --press-scale: 0.97;

  /* ----------------------------------------------------- Plans (z) */
  --z-header: 100;
  --z-mega:   110;
  --z-float:  200;   /* bouton WhatsApp, toast                         */
  --z-sheet:  300;   /* feuilles et modales                            */
  --z-consent: 400;
}

@media (max-width: 47.9375rem) {        /* < 768 */
  :root {
    --gutter: 1rem;
    --header-h: 3.25rem;                 /* 52 */
    --t-body-size: 1.0625rem;            /* 17, taille HIG                 */
    --t-h1-size: 2.125rem;               /* 34, « Large Title »            */
    --t-h1-ls: -0.02em;
    --t-h2-size: 1.375rem;               /* 22, « Title 2 »                */
    --t-h2-ls: -0.015em;
    --t-h3-size: 1.25rem;                /* 20 */
    --t-h4-size: 1.0625rem;              /* 17 semi-gras, « Headline »     */
    --t-h4-ls: -0.01em;
    --t-lead-size: 1.1875rem;
  }
}

/* Contraste renforcé : fonds opaques, bordures franches. */
@media (prefers-contrast: more) {
  :root {
    --ink-3: #515154;
    --ink-4: #6E6E73;
    --line: rgba(0, 0, 0, 0.3);
    --line-2: rgba(0, 0, 0, 0.4);
    --line-3: rgba(0, 0, 0, 0.55);
    --glass-bg: #FFFFFF;
    --glass-bg-2: #FFFFFF;
    --glass-bg-sheet: #FFFFFF;
    --glass-blur: none;
    --scrim: rgba(0, 0, 0, 0.6);
  }
}

/* Transparence réduite : les matériaux deviennent givrés puis opaques. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: #FFFFFF;
    --glass-bg-2: #FFFFFF;
    --glass-bg-sheet: #FFFFFF;
    --glass-blur: none;
  }
}

/* Mouvement réduit : plus de ressorts ni de glissements, seulement des
   fondus courts. ui.js lit aussi cette préférence.                      */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms;
    --dur-hover: 0ms;
    --dur-pop: 120ms;
    --dur-panel: 160ms;
    --press-scale: 1;
  }
}