/* Morad Houmir, jetons CSS v1. Généré par 07_Code/source/mh-jetons.py : ne pas modifier à la main.
   Couleurs : 03_Couleurs (contrastes mesurés). Code repris du territoire e2 (nom.css, glisse.js).
   Polices : chemins relatifs vers 04_Typographie/polices/web/. En production, copier les woff2 et corriger les url(). */

@font-face { font-family: "Anybody"; src: url("../polices/anybody-italic-var.woff2") format("woff2"); font-style: italic; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../polices/schibsted-grotesk-var.woff2") format("woff2"); font-style: normal; font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../polices/schibsted-grotesk-italic-var.woff2") format("woff2"); font-style: italic; font-weight: 400 900; font-display: swap; }

:root {
  /* couleurs de base (seules valeurs autorisées) */
  --mh-base-blanc: #FFFFFF;
  --mh-base-beton: #EDEDEA;
  --mh-base-encre: #111111;
  --mh-base-orange: #F44611;
  --mh-base-graphite: #4D4D49;
  --mh-base-graphite-clair: #A3A39E;
  --mh-base-surface-sombre: #1F1F1D;

  /* rôles, mode clair (le site s'ouvre en clair) */
  --mh-fond: var(--mh-base-blanc);
  --mh-surface: var(--mh-base-beton);
  --mh-encre: var(--mh-base-encre);
  --mh-graphite: var(--mh-base-graphite);
  --mh-orange: var(--mh-base-orange);
  --mh-sur-aplat: var(--mh-base-encre);
  --mh-bloc: var(--mh-base-encre);
  --mh-sur-bloc: var(--mh-base-beton);
  --mh-sur-bloc-2: var(--mh-base-graphite-clair);

  /* polices */
  --mh-titrage: "Anybody", "Anybody MH Titre", sans-serif;
  --mh-texte: "Schibsted Grotesk", "Schibsted Grotesk MH", system-ui, sans-serif;

  /* échelle : taille fluide de 390 px (téléphone) à 1280 px (bureau), interligne, réglage des axes d'Anybody */
  --mh-taille-ouverture: clamp(58px, 27.33px + 7.865vw, 128px);
  --mh-interligne-ouverture: 1.0;
  --mh-reglage-ouverture: "wdth" 108, "wght" 800;
  --mh-taille-manifeste: clamp(46px, 25.84px + 5.169vw, 92px);
  --mh-interligne-manifeste: 1.04;
  --mh-reglage-manifeste: "wdth" 108, "wght" 800;
  --mh-taille-conviction: clamp(40px, 24.22px + 4.045vw, 76px);
  --mh-interligne-conviction: 1.16;
  --mh-reglage-conviction: "wdth" 108, "wght" 800;
  --mh-taille-numero: clamp(96px, 72.34px + 6.067vw, 150px);
  --mh-interligne-numero: 0.8;
  --mh-reglage-numero: "wdth" 122, "wght" 880;
  --mh-taille-titre: clamp(28px, 26.25px + 0.449vw, 32px);
  --mh-interligne-titre: 1.1;
  --mh-reglage-titre: "wdth" 108, "wght" 800;
  --mh-taille-appel: clamp(28px, 24.49px + 0.899vw, 36px);
  --mh-interligne-appel: 1.1;
  --mh-reglage-appel: "wdth" 108, "wght" 800;
  --mh-taille-nom: clamp(17px, 13.93px + 0.787vw, 24px);
  --mh-interligne-nom: 1.0;
  --mh-reglage-nom: "wdth" 122, "wght" 880;
  --mh-taille-bio: clamp(16px, 15.12px + 0.225vw, 18px);
  --mh-interligne-bio: 1.5;
  --mh-taille-courant: clamp(16px, 15.56px + 0.112vw, 17px);
  --mh-interligne-courant: 1.55;
  --mh-taille-note: clamp(14px, 13.12px + 0.225vw, 16px);
  --mh-interligne-note: 1.4;
  --mh-taille-etiquette: 15px;
  --mh-interligne-etiquette: 1.0;
  --mh-taille-bouton: 16px;
  --mh-interligne-bouton: 1.0;
  --mh-taille-legende: 13px;
  --mh-interligne-legende: 1.35;
  --mh-reglage-telephone: "wdth" 92, "wght" 800;

  /* espaces relevés dans le site e2 */
  --mh-espace-1: 6px;
  --mh-espace-2: 12px;
  --mh-espace-3: 18px;
  --mh-espace-4: 26px;
  --mh-espace-5: 34px;
  --mh-espace-6: 44px;
  --mh-espace-7: 64px;
  --mh-espace-8: 84px;
  --mh-espace-9: 110px;
  --mh-gouttiere: 48px;
  --mh-filet: 2px;
  --mh-rayon: 0;

  /* l'aplat */
  --mh-pente: -10deg;
  --mh-aplat-hauteur: 0.92; /* en fois le corps, essai R : seule valeur à régler (le bas reste à .28 sous la ligne de base, le haut suit) */
  --mh-avant-aplat: var(--mh-encre); /* couleur du mot tant que l'aplat ne l'a pas couvert (texte courant) */

  /* le seul mouvement */
  --mh-duree: 720ms;
  --mh-retard: 120ms;
  --mh-decalage: 140ms;
  --mh-courbe: cubic-bezier(.2, .85, .25, 1);
  color-scheme: light;
}

/* Mode sombre : suit le système, sauf si data-theme="clair" ; ou forcé par data-theme="sombre". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --mh-fond: var(--mh-base-encre);
    --mh-surface: var(--mh-base-surface-sombre);
    --mh-encre: var(--mh-base-beton);
    --mh-graphite: var(--mh-base-graphite-clair);
    --mh-orange: var(--mh-base-orange);
    --mh-sur-aplat: var(--mh-base-encre);
    --mh-bloc: var(--mh-base-beton);
    --mh-sur-bloc: var(--mh-base-encre);
    --mh-sur-bloc-2: var(--mh-base-graphite);
    color-scheme: dark;
  }
}
:root[data-theme="sombre"] {
  --mh-fond: var(--mh-base-encre);
  --mh-surface: var(--mh-base-surface-sombre);
  --mh-encre: var(--mh-base-beton);
  --mh-graphite: var(--mh-base-graphite-clair);
  --mh-orange: var(--mh-base-orange);
  --mh-sur-aplat: var(--mh-base-encre);
  --mh-bloc: var(--mh-base-beton);
  --mh-sur-bloc: var(--mh-base-encre);
  --mh-sur-bloc-2: var(--mh-base-graphite);
  color-scheme: dark;
}

@media (max-width: 600px) {
  :root { --mh-gouttiere: 18px; }
}

/* ------------------------------------------------------------------ titrage : le propos en grand, le nom en petit */
.mh-phrase {
  font-family: var(--mh-titrage); font-style: italic; font-weight: 800; font-stretch: 108%;
  font-variation-settings: "wdth" 108, "wght" 800;
  line-height: 1.02; letter-spacing: -.01em;
}
.mh-phrase--ouverture { font-size: var(--mh-taille-ouverture); line-height: var(--mh-interligne-ouverture); }
.mh-phrase--manifeste { font-size: var(--mh-taille-manifeste); line-height: var(--mh-interligne-manifeste); }
.mh-phrase--conviction { font-size: var(--mh-taille-conviction); line-height: var(--mh-interligne-conviction); }
.mh-titre { font-family: var(--mh-titrage); font-style: italic; font-weight: 800; font-stretch: 108%; font-variation-settings: var(--mh-reglage-titre); font-size: var(--mh-taille-titre); line-height: var(--mh-interligne-titre); }
.mh-numero { font-family: var(--mh-titrage); font-style: italic; font-weight: 880; font-stretch: 122%; font-variation-settings: var(--mh-reglage-numero); font-size: var(--mh-taille-numero); line-height: var(--mh-interligne-numero); }
.mh-nom {
  font-family: var(--mh-titrage); font-style: italic; font-weight: 880; font-stretch: 122%;
  font-variation-settings: "wdth" 122, "wght" 880;
  font-size: var(--mh-taille-nom); line-height: 1; letter-spacing: .01em; text-transform: uppercase;
}
/* une ligne voulue par l'auteur : ne se coupe pas sur bureau */
.mh-ligne { display: block; white-space: nowrap; padding-right: .25em; }

.mh-courant { font: 400 var(--mh-taille-courant)/var(--mh-interligne-courant) var(--mh-texte); }
.mh-bio { font: 400 var(--mh-taille-bio)/var(--mh-interligne-bio) var(--mh-texte); }
.mh-note { font: 400 var(--mh-taille-note)/var(--mh-interligne-note) var(--mh-texte); color: var(--mh-graphite); }
.mh-etiquette { font: 600 var(--mh-taille-etiquette)/1 var(--mh-texte); color: var(--mh-graphite); }

/* ------------------------------------------------------------------ LA signature : l'aplat qui porte la solution
   Parallélogramme orange incliné de 10 degrés SOUS le texte. Le texte reste encre et ne bouge jamais.
   Toujours sous la solution ou le geste, jamais sous « sans » ni « pas ». Trois aplats au plus par écran.
   Ne se coupe jamais au hasard : coupure prévue par l'auteur avec <wbr> + .mh-aplat--suite. */
@property --mh-avance { syntax: "<number>"; inherits: true; initial-value: 1; } /* 0 : aplat absent, 1 : aplat posé */
.mh-aplat {
  --mh-aplat-recul: calc((.5325 - var(--mh-aplat-hauteur) * .5) * .1763em); /* calculé, ne pas régler */
  position: relative; display: inline-block; isolation: isolate; white-space: nowrap;
  color: var(--mh-sur-aplat);
  line-height: 1.02; /* fixé : la boîte du texte ne dépend pas de l'interligne du bloc */
  padding: .02em .2em .07em .17em; margin-left: -.17em; margin-right: -.08em;
}
.mh-aplat::before {
  /* Essai R : hauteur --mh-aplat-hauteur x corps, de .28 sous la ligne de base à .64 au-dessus.
     La boîte .mh-aplat va de .8075 au-dessus à .3025 sous la ligne de base : haut du fond (1.0875 - hauteur), bas .0225.
     Le milieu du fond est plus bas que celui de la boîte : il recule de la pente de l'italique (--mh-aplat-recul, .0128 corps)
     pour garder le même air autour des lettres. Débords .17 et .20 corps à mi-hauteur du fond. */
  content: ""; position: absolute; z-index: -1;
  inset: calc((1.0875 - var(--mh-aplat-hauteur)) * 1em) var(--mh-aplat-recul) .0225em calc(-1 * var(--mh-aplat-recul));
  background: var(--mh-orange);
  transform: skewX(var(--mh-pente));
  clip-path: inset(0 calc((1 - var(--mh-avance, 1)) * 100%) 0 0);
}
.mh-aplat--suite { margin-left: -.17em; }
.mh-bloc { --mh-avant-aplat: var(--mh-sur-bloc); }

/* La couleur du mot : .mh-aplat-texte (à écrire dans le HTML ; js/mh-glisse.js le pose aussi s'il manque).
   Le mot est peint par deux fonds découpés sur le texte : une bande de la hauteur exacte de l'aplat, encre
   (--mh-sur-aplat) jusqu'au bord --mh-bord ; dessous, la couleur du texte courant (--mh-avant-aplat).
   L'aplat R laisse sortir le haut des capitales, des accents et des ascendantes : sur fond sombre ou dans .mh-bloc,
   ces hauts restent ainsi de la couleur du texte courant, au lieu d'être encre sur encre (invisibles).
   La bande se place dans la boîte de .mh-aplat-texte (inline-block, interligne 1.02 : .7875 au-dessus de la ligne de
   base, .2325 en dessous) : haut de la bande (1.0675 - hauteur) corps sous le haut de la boîte.
   --mh-bord : en retrait du point le plus à gauche du bord incliné (son pied) : début du fond (.17 + recul),
   moins la demi-hauteur x tan 10 degrés (hauteur x .0882). Aplat posé (--mh-avance 1) : tout ce qu'il couvre est encre. */
.mh-aplat-texte {
  display: inline-block;
  --mh-bord: calc(var(--mh-avance) * (100% + .37em) - .17em - var(--mh-aplat-recul) - var(--mh-aplat-hauteur) * .0882em);
  background:
    linear-gradient(to right, var(--mh-sur-aplat) var(--mh-bord), transparent var(--mh-bord)) 0 calc((1.0675 - var(--mh-aplat-hauteur)) * 1em) / 100% calc(var(--mh-aplat-hauteur) * 1em) no-repeat,
    linear-gradient(var(--mh-avant-aplat), var(--mh-avant-aplat));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Le seul mouvement : le fond se pose de gauche à droite (clip-path), une fois, à l'entrée dans l'écran.
   Actif seulement si js/mh-glisse.js a posé .mh-js sur <html> ET si l'utilisateur n'a pas réduit les animations.
   Sans JavaScript ou en mouvement réduit : l'aplat est simplement là.
   Lisible à chaque instant : une seule variable, --mh-avance, pilote le fond ET la couleur du mot (règle ci-dessus) ;
   ils restent synchronisés à l'image près, et le mot ne passe jamais à l'encre avant que l'orange soit dessous. */
@media (prefers-reduced-motion: no-preference) {
  .mh-js [data-mh-glisse] .mh-aplat { --mh-avance: 0; }
  .mh-js [data-mh-glisse]:not(.mh-vu) .mh-aplat { color: var(--mh-avant-aplat); } /* avant que le script ait posé .mh-aplat-texte */
  .mh-js [data-mh-glisse].mh-vu .mh-aplat {
    --mh-avance: 1;
    transition: --mh-avance var(--mh-duree) var(--mh-courbe);
    transition-delay: calc(var(--mh-retard) + var(--mh-rang, 0) * var(--mh-decalage));
  }
}
/* Contraste forcé (Windows) et impression : texte plein, sans découpage. */
@media (forced-colors: active), print {
  .mh-aplat-texte { -webkit-text-fill-color: currentColor; background: none; }
}

/* ------------------------------------------------------------------ actions et blocs */
.mh-bouton {
  display: inline-block; white-space: nowrap; background: var(--mh-encre); color: var(--mh-fond);
  font: 600 var(--mh-taille-bouton)/1 var(--mh-texte); padding: 15px 22px; text-decoration: none; border-radius: var(--mh-rayon);
}
.mh-lien {
  color: var(--mh-encre); font: 600 var(--mh-taille-bouton)/1 var(--mh-texte);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: var(--mh-filet);
}
.mh-bouton:focus-visible, .mh-lien:focus-visible { outline: 3px solid var(--mh-encre); outline-offset: 3px; }
.mh-bloc { background: var(--mh-bloc); color: var(--mh-sur-bloc); }
.mh-bloc .mh-note { color: var(--mh-sur-bloc-2); }
.mh-bloc .mh-bouton { background: var(--mh-sur-bloc); color: var(--mh-bloc); }
.mh-bloc .mh-bouton:focus-visible { outline-color: var(--mh-sur-bloc); }
.mh-filet { border-top: var(--mh-filet) solid var(--mh-encre); }

/* Emplacement photo de terrain : réservé, jamais simulé. Sans photo, on le retire et la page tient. */
.mh-emplacement {
  position: relative; background: var(--mh-surface); display: flex; align-items: flex-end;
  padding: 12px 14px; font: 400 var(--mh-taille-legende)/var(--mh-interligne-legende) var(--mh-texte); color: var(--mh-graphite);
}
.mh-emplacement::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  background:
    linear-gradient(currentColor, currentColor) left top / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) left top / 1.5px 14px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) right top / 1.5px 14px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) left bottom / 1.5px 14px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) right bottom / 1.5px 14px no-repeat;
}
.mh-emplacement span { position: relative; padding: 0 6px 4px; }

/* ------------------------------------------------------------------ téléphone */
@media (max-width: 600px) {
  .mh-phrase { font-stretch: 92%; font-variation-settings: var(--mh-reglage-telephone); }
  .mh-ligne { white-space: normal; }
  .mh-ligne--entiere { white-space: nowrap; }
  .mh-phrase--conviction { line-height: 1.2; }
}