/* ============================================================================
   Markell Coffee Co.
   Système graphique : ossature de cabinet, matière de négoce.
   Noir et blanc strict. Deux familles, pas une de plus.
   ========================================================================= */

:root {
  --ink:      #000000;
  --paper:    #FFFFFF;
  --muted:    #6B6B6B;   /* texte secondaire, légendes */
  --rule:     #D8D8D8;   /* filets fins */
  --rule-soft:#EDEDED;   /* réglures de tableau */

  --serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Corps agrandi d'un cran (retour Arthur : textes trop petits). */
  --t-label:   0.6875rem;   /* 11px — capitales interlettrées */
  --t-caption: 0.875rem;    /* 14px — légendes */
  --t-small:   1rem;        /* 16px */
  --t-body:    1.125rem;    /* 18px — corps courant */
  --t-lead:    1.375rem;    /* 22px */

  --measure: 1200px;       /* largeur de contenu */
  --gutter:  clamp(1.25rem, 5vw, 4.5rem);
  --rail:    88px;         /* colonne d'indice des rubriques */

  /* En-tête, pied et légendes : conteneur centré = contenu + ses gouttières,
     pour que leur zone intérieure tombe pile sur la colonne de contenu de .page
     (sinon ils sont rentrés d'une gouttière et ne s'alignent pas). */
  --measure-outer: calc(var(--measure) + 2 * var(--gutter));

  /* Échelle d'espacement resserrée : les valeurs précédentes (jusqu'à 6 et
     9 rem) empilaient des vides énormes entre sections. */
  --space-s:  clamp(0.65rem, 1.2vw, 0.9rem);
  --space-m:  clamp(1.1rem, 2vw, 1.5rem);
  --space-l:  clamp(1.75rem, 3vw, 2.4rem);
  --space-xl: clamp(2.2rem, 4vw, 3.1rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* --------------------------------------------------------------- ossature */
/* Grille à pistes nommées : `full` traverse toute la fenêtre sans recourir à
   100vw, qui inclut la barre de défilement et provoque un débordement
   horizontal sur desktop. */

.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] minmax(0, var(--measure)) [content-end]
    minmax(var(--gutter), 1fr) [full-end];
}

.page > * { grid-column: content; }
.page > .full { grid-column: full; }

/* ---------------------------------------------------------------- en-tête */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

/* En-tête sobre : réduit ~50 % après essai d'une grande bannière (retour
   Arthur). Le logo est halvé ; marque, menu et langue sont ramenés avec un
   plancher de lisibilité (un menu en capitales sous ~11 px devient illisible). */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  max-width: var(--measure-outer);
  margin: 0 auto;
  padding: .95rem var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  white-space: nowrap;
}

.brand svg { width: 19px; height: 19px; flex: none; }

.brand-name {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.1rem);
}

.nav a {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.lang {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--muted);
}

.lang button {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; letter-spacing: inherit; color: var(--muted); cursor: pointer;
}

.lang button:hover { color: var(--ink); }
.lang button.is-active { color: var(--ink); font-weight: 600; }

/* Sous 900 px la navigation passe sous la marque, sur une ligne défilable. */
@media (max-width: 900px) {
  .topbar-inner { flex-wrap: wrap; row-gap: .85rem; }
  .nav {
    order: 3; width: 100%;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
}


/* -------------------------------------------------------- énoncé d'ouverture */
/* Seul en page : ni image, ni bouton, ni fioriture. C'est la signature du
   registre « cabinet ». */

.statement {
  padding: var(--space-xl) 0 var(--space-l);
  border-bottom: 1px solid var(--rule);
}

.statement .eyebrow { margin: 0 0 .35rem; }   /* accroche resserrée sur le titre (retour Arthur) */

.statement h1 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;   /* Newsreader affine ses titres aux grandes tailles */
  font-size: clamp(2rem, 3.9vw, 3.35rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}

/* Pages intérieures : l'énoncé garde le même rôle mais pas la même échelle.
   Au corps de l'accueil, il occupait cinq lignes et écrasait la page. */
.statement--page {
  padding-top: var(--space-l);
  padding-bottom: var(--space-m);   /* moins d'air sous l'intro, au-dessus du filet (retour Arthur) */
}

/* Première rubrique après l'intro d'une page intérieure : rapprochée du filet
   (sinon un grand vide encadre la ligne — cas du formulaire de contact). */
.statement--page + .section { padding-top: var(--space-m); }

.statement--page h1 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  max-width: 40ch;   /* colonne élargie : le titre « Notre métier » respirait mal à 24ch (retour Arthur) */
  font-weight: 400;
  font-optical-sizing: auto;
}

/* Sous-énoncé rapproché du titre (demande Arthur) : espace resserré encore d'un cran. */
.statement .sub {
  margin: .4rem 0 0;
  max-width: 56ch;
  font-size: var(--t-lead);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}

/* Chapô des pages intérieures (intro du contact) : justifié (retour Arthur). */
.statement--page .sub { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

.eyebrow {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------- rubriques */

.section {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--space-m);
  padding: var(--space-l) 0;
  border-bottom: 1px solid var(--rule);
}

.section:last-of-type { border-bottom: 0; }

/* Pages intérieures : rubrique annoncée par son rail-titre (numéro + libellé) —
   filets gris inter-rubriques retirés ; écarts resserrés ; colonne du rail
   élargie pour accueillir le titre à la taille du corps (retours Arthur). */
.section:not(.section--flush) {
  border-bottom: 0;
  padding: var(--space-m) 0;   /* écart entre rubriques resserré (2× space-m) */
  --rail: 120px;               /* colonne du rail-titre élargie pour le 18 px */
}

/* Le rail est une vraie colonne de la grille, pas un absolu posé à côté :
   c'est la condition pour que le `sticky` fonctionne. */
.rail {
  position: sticky;
  top: 6rem;   /* dégage l'en-tête, y compris sa version sur deux lignes entre 821–900 px */
  align-self: start;
  margin: 0;   /* sur « Notre métier » le rail est un <h2> : on neutralise sa marge d'en-tête */
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

.rail .idx { display: block; color: var(--ink); }

/* « Notre métier » : le rail EST le titre de la rubrique. Réglé à 14 px,
   interlettrage réduit pour tenir dans la colonne élargie ; le corps s'aligne
   sur son bord haut (retours Arthur). */
.section:not(.section--flush) .rail { position: static; font-size: 14px; letter-spacing: .04em; }
.section:not(.section--flush) .section-body > :first-child { margin-top: 0; }

/* Rubrique « flush » : ni intertitre ni numéro, le corps s'aligne au ras du
   libellé de rail (demande Arthur pour l'accueil et le contact). */
.section--flush .rail { color: var(--ink); }
.section--flush .section-body > :first-child { margin-top: 0; }

/* Chapô flush « Dites-nous… » : remonté de 2.73px (mesuré) pour aligner sa
   hauteur de capitale sur le libellé de rail « Contact ». Le bouton suit le chapô. */
.section--flush .section-body > .lead { margin-top: -2.73px; }
.section--flush .btn { margin-top: 0; }

/* Accueil : la rubrique « Contact » suit la rubrique « Offre » ; on rapproche
   son chapô du filet qui les sépare (retour Arthur). */
.section--flush + .section--flush { padding-top: var(--space-m); }

.section-body > .lead {
  margin: 0 0 var(--space-s);
  max-width: 62ch;
  font-family: var(--serif);
  font-size: var(--t-body);   /* même taille que le corps des volets : tailles harmonisées sous la photo (retour Arthur) */
  line-height: 1.5;
}

.section-body p {
  max-width: 68ch;
  margin: 0 0 1.05rem;
  /* Corps justifié = registre premium (règle Arthur). La césure évite les
     rivières de blanc dans les colonnes étroites ; l'attribut lang du <html>
     bascule fr/en pour couper au bon endroit. */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.section-body p:last-child { margin-bottom: 0; }

/* Les chapôs en serif restent au fer à gauche : justifiés, ils s'espaceraient
   mal aux grandes tailles. */
.section-body > .lead { text-align: left; hyphens: manual; -webkit-hyphens: manual; }

@media (max-width: 820px) {
  .section { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; margin-bottom: var(--space-s); }
  .rail .idx { display: inline; margin-right: .6rem; }
  /* Colonnes empilées : le rail passe au-dessus du chapô, l'alignement de
     capitale n'a plus lieu d'être — on annule le nudge desktop. */
  .section--flush .section-body > .lead { margin-top: 0; }
}

/* ------------------------------------------------------------ liste */
/* Entrées titrées, filetées, sans numéro (retour Arthur : la numérotation des
   items doublonnait avec le numéro de rubrique porté par le rail). */

.steps { margin: var(--space-s) 0 0; padding: 0; list-style: none; }

.steps > li {
  padding: .85rem 0;
  border-top: 1px solid var(--rule-soft);
}

/* Première puce sans filet haut ni padding haut : son titre s'aligne sur le
   rail-titre, comme le corps des rubriques en paragraphe (retour Arthur). Les
   puces suivantes gardent leur filet et leur respiration. */
.steps > li:first-child { border-top: 0; padding-top: 0; }

.steps h3 {
  margin: 0;   /* l'écart titre→description est réglé sur .steps p (retour Arthur) */
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: 0;
}

.steps p {
  margin: 1.6px 0 0; color: var(--muted); font-size: var(--t-small); max-width: 62ch;
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}

/* --------------------------------------------------------------- planches */
/* Photographie pleine largeur, légendée comme une planche d'ouvrage. */

.plate { margin: 0; }

.plate img {
  width: 100%;
  height: clamp(240px, 38vw, 500px);
  object-fit: cover;
  filter: grayscale(1);
}

/* Légende rapprochée de la photo, sans filet au-dessus ; « Fig. 0X » et le
   texte partagent la même ligne de base. */
.plate figcaption {
  max-width: var(--measure-outer);
  margin: .3rem auto 0;   /* légende rapprochée de la photo, sans la coller (retour Arthur) */
  padding: 0 var(--gutter);
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  font-size: var(--t-caption);
  line-height: 1.3;       /* moins d'interligne = « Fig. 0X » et texte plus proches de l'image */
  color: var(--muted);
}

.plate figcaption .no {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink);
  flex: none;
}

/* La planche ne porte plus de marge basse : c'est le padding de la section
   suivante qui gère l'écart. Avant, les deux se cumulaient et créaient un grand
   vide sous la légende. */
.full.plate { margin-bottom: 0; }
.full.plate + .section { border-top: 0; }

/* --------------------------------------------------------------- tableaux */

.table-wrap { overflow-x: auto; margin-top: var(--space-s); }

table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--t-caption);
  font-variant-numeric: tabular-nums;
}

thead th {
  text-align: left;
  padding: 0 1rem .6rem 0;
  border-bottom: 1px solid var(--ink);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody td {
  padding: .72rem 1rem .72rem 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: baseline;
}

tbody tr td:first-child { font-weight: 600; }
tbody td.num { text-align: right; padding-right: 0; white-space: nowrap; }

/* ---------------------------------------------------- formulaire de contact */

.contact-form { max-width: 640px; margin-top: var(--space-s); }

.form-row { display: grid; gap: var(--space-m); }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; margin-bottom: var(--space-m); }

.field label {
  margin-bottom: .5rem;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field textarea {
  font-family: var(--sans);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: .55rem 0;
  border-radius: 0;
  transition: border-color .15s ease;
}

.field textarea { resize: vertical; line-height: 1.55; }

.field input:focus,
.field textarea:focus { outline: 0; border-bottom-width: 2px; margin-bottom: -1px; }

/* Le focus clavier récupère l'anneau (le :focus ci-dessus le supprimait aussi
   au clavier) ; au pointeur, on garde le simple soulignement épaissi. */
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.field input::placeholder,
.field textarea::placeholder { color: #A7A7A5; }

/* Piège anti-robot : masqué aux humains, laissé accessible aux robots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-status {
  margin: var(--space-s) 0 0;
  font-size: var(--t-small);
}
.form-status.is-ok  { color: var(--ink); }
.form-status.is-err { color: var(--ink); font-weight: 600; }

.contact-alt {
  margin: var(--space-m) 0 0;
  font-size: var(--t-small);
  color: var(--muted);
}
.contact-alt a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}
.contact-alt a:hover { border-bottom-color: var(--ink); }

/* ---------------------------------------------------------------- bouton */

.btn {
  display: inline-block;
  margin-top: var(--space-s);
  padding: .9rem 2rem;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .17s ease, color .17s ease;
}

.btn:hover { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------------ pied */

.site-footer { border-top: 1px solid var(--ink); margin-top: 0; }

/* Bandeau d'horloges : trois fuseaux où le négoce se joue. Les heures sont
   calculées côté client, donc toujours justes ; elles n'affirment rien sur
   la société. */
/* Le bandeau d'horloges n'est plus séparé de l'identité par un filet : le seul
   filet noir en haut du pied suffit à le clore, l'espace fait le reste (retour
   Arthur — allègement des filets du pied). */
.footer-clocks {
  max-width: var(--measure-outer);
  margin: 0 auto;
  padding: var(--space-s) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
}

.fc { display: flex; align-items: baseline; gap: .7rem; }

.fc-city {
  font-size: .7425rem;   /* nom de ville −10 % depuis 13,2px, l'heure reste inchangée (retour Arthur) */
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.fc .clock {
  font-size: var(--t-caption);   /* rapproché de la taille du nom de ville : horloges plus cohérentes (retour Arthur) */
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.footer-inner {
  max-width: var(--measure-outer);
  margin: 0 auto;
  padding: var(--space-s) var(--gutter) var(--space-l);
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 800px) {
  .footer-inner { grid-template-columns: 1fr auto; align-items: start; }
}

.footer-brand { display: flex; align-items: center; }
/* Marque du pied alignée sur la taille du menu (retour Arthur), à peine plus grande. */
.footer-brand .brand-name { font-size: .72rem; }

.footer-links { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }

.footer-links a {
  font-size: var(--t-label);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover { color: var(--ink); }

/* --------------------------------------------------------------- divers */

.grid-3 {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-s);
}

@media (min-width: 760px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-l); }
}

.grid-3 h3 { margin: 0 0 .6rem; }
.grid-3 p { margin: 0; color: var(--muted); font-size: var(--t-body); line-height: 1.55; }