/* tradetrans.eu (TradeMag) : la lettre de voiture, version magazine (refaite le 23 octobre 2026) */
:root {
  --papier: #f5f4f0;
  --blanc: #ffffff;
  --encre: #1a1d21;
  --gris: #5b6068;
  --filet: #e0ded7;
  --transport: #c2410c; --logistique: #0f766e; --colis: #a16207;
  --paiements: #1d4ed8; --finances: #15803d; --entreprise: #6d28d9;
  --titre: 'IBM Plex Serif', Georgia, serif;
  --texte: 'Inter', system-ui, sans-serif;
  --num: 'JetBrains Mono', ui-monospace, monospace;
  --large: 1220px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 17px/1.7 var(--texte); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--paiements); text-underline-offset: 3px; }
.evitement { position: absolute; left: -999px; }
.evitement:focus { left: 12px; top: 12px; z-index: 9; background: var(--encre); color: #fff; padding: 8px 12px; }
.num { font: 500 .78em/1 var(--num); letter-spacing: .04em; }
.picto { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* les couleurs de conteneur, par rubrique */
.ligne-r--transport, .envoi--transport, .envoi__r--transport, .quai--transport, .lettre--transport, .entete-r--transport { --c: var(--transport); }
.ligne-r--logistique, .envoi--logistique, .envoi__r--logistique, .quai--logistique, .lettre--logistique, .entete-r--logistique { --c: var(--logistique); }
.ligne-r--colis, .envoi--colis, .envoi__r--colis, .quai--colis, .lettre--colis, .entete-r--colis { --c: var(--colis); }
.ligne-r--paiements, .envoi--paiements, .envoi__r--paiements, .quai--paiements, .lettre--paiements, .entete-r--paiements { --c: var(--paiements); }
.ligne-r--finances, .envoi--finances, .envoi__r--finances, .quai--finances, .lettre--finances, .entete-r--finances { --c: var(--finances); }
.ligne-r--entreprise, .envoi--entreprise, .envoi__r--entreprise, .quai--entreprise, .lettre--entreprise, .entete-r--entreprise { --c: var(--entreprise); }

/* ---- l'en-tête : le titre du magazine, puis la barre des rubriques ---- */
.cabine { background: var(--blanc); border-bottom: 1px solid var(--filet); }
.cabine__in { max-width: var(--large); margin: 0 auto; padding: 22px 24px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px 30px; flex-wrap: wrap; }
.logo { font: 700 44px/1 var(--titre); letter-spacing: -.02em; color: var(--encre); text-decoration: none; }
.cabine__devise { margin: 0; font: 500 13px/1.3 var(--num); letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
.lignes { border-top: 3px solid var(--encre); }
.lignes__in { max-width: var(--large); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ligne-r { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px 13px; font: 600 15px/1 var(--texte); color: var(--encre); text-decoration: none; border-bottom: 4px solid transparent; border-left: 1px solid var(--filet); }
.ligne-r:last-child { border-right: 1px solid var(--filet); }
.ligne-r .picto { width: 20px; height: 20px; color: var(--c); }
.ligne-r:hover, .ligne-r[aria-current] { border-bottom-color: var(--c); background: color-mix(in srgb, var(--c) 6%, white); }

/* ---- accueil ---- */
.ouverture { max-width: var(--large); margin: 0 auto; padding: 30px 24px 0; }
.ouverture h1 { margin: 0; max-width: 46ch; font: 600 22px/1.4 var(--titre); color: var(--gris); }
.quai { max-width: var(--large); margin: 0 auto; padding: 40px 24px 4px; }
.quai__tete { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--encre); }
.quai__badge { display: grid; place-items: center; width: 44px; height: 44px; background: var(--c); color: #fff; }
.quai__badge .picto { width: 24px; height: 24px; }
.quai__tete > div { flex: 1 1 360px; min-width: 0; }
.quai__tete p { margin: 2px 0 0; color: var(--gris); font-size: 15px; line-height: 1.45; }
.quai__tous { font-weight: 600; font-size: 15px; color: var(--c); white-space: nowrap; }
.quai__t { margin: 0; font: 700 28px/1.1 var(--titre); }
.quai__t a { color: var(--encre); text-decoration: none; }
.quai__t--simple { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--encre); }

/* la une : un grand article et trois à côté, à la même hauteur */
.une { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.une__lien { display: grid; grid-template-rows: auto 1fr; background: var(--blanc); border: 1px solid var(--filet); color: var(--encre); text-decoration: none; }
.une__img { aspect-ratio: 16 / 8.5; overflow: hidden; background: var(--filet); }
.une__img img { width: 100%; height: 100%; object-fit: cover; }
.une__c { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.une__t { font: 700 30px/1.15 var(--titre); }
.une__d { color: var(--gris); font-size: 16px; line-height: 1.55; }
.une__lien:hover .une__t { text-decoration: underline; text-decoration-thickness: 2px; }

/* les envois (cartes d'article) */
.envois { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.envois > * { min-width: 0; }
.envois--suite { margin-top: 24px; }
.envoi { display: flex; flex-direction: column; height: 100%; background: var(--blanc); border: 1px solid var(--filet); color: var(--encre); text-decoration: none; }
.envoi:hover .envoi__t { text-decoration: underline; }
.envoi__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--filet); border-bottom: 4px solid var(--c); }
.envoi__img img { width: 100%; height: 100%; object-fit: cover; }
.envoi__c { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.envoi__r { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--texte); text-transform: uppercase; letter-spacing: .06em; color: var(--c); }
.envoi__t { font: 600 19px/1.3 var(--titre); overflow-wrap: anywhere; }
.envoi__m { margin-top: auto; font: 400 12.5px/1.3 var(--num); color: var(--gris); }

/* la colonne d'à côté (liste illustrée) */
.envois--cote { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--blanc); border: 1px solid var(--filet); }
.envois--cote > li + li { border-top: 1px solid var(--filet); }
.envois--liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.manifeste { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; height: 100%; padding: 14px 16px; color: var(--encre); text-decoration: none; }
.envois--liste .manifeste { background: var(--blanc); border: 1px solid var(--filet); }
.manifeste__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--filet); }
.manifeste__img img { width: 100%; height: 100%; object-fit: cover; }
.manifeste__t { display: block; font: 600 16px/1.35 var(--titre); overflow-wrap: anywhere; }
.manifeste__m { display: block; margin-top: 6px; font: 400 12.5px/1.3 var(--num); color: var(--gris); }
.manifeste:hover .manifeste__t { text-decoration: underline; }

/* ---- la lettre de voiture (article) ---- */
.lettre { max-width: 820px; margin: 0 auto; padding: 34px 24px 0; }
.fil { font: 400 13px/1.4 var(--num); color: var(--gris); }
.fil a { color: var(--gris); }
.lettre__tete h1 { margin: 14px 0 22px; font: 700 clamp(30px, 4.2vw, 44px)/1.15 var(--titre); letter-spacing: -.01em; overflow-wrap: anywhere; }
.bordereau { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 26px; background: var(--blanc); border: 1px solid var(--encre); }
.bordereau div { min-width: 0; padding: 9px 12px 10px; border-left: 1px solid var(--filet); }
.bordereau div:first-child { border-left: 0; background: color-mix(in srgb, var(--c) 8%, white); }
.bordereau dt { font: 500 11px/1.3 var(--num); text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.bordereau dd { margin: 4px 0 0; font-weight: 600; font-size: 15px; }
.bordereau dd a { display: inline-flex; align-items: center; gap: 6px; color: var(--c); text-decoration: none; }
.lettre__img { margin: 0 0 30px; border-bottom: 4px solid var(--c); }
.lettre--page { padding-bottom: 20px; }
.lettre--page .lettre__tete h1 { margin-top: 6px; }

/* ---- le texte ---- */
.texte { min-width: 0; overflow-wrap: break-word; }
.texte h2 { margin: 40px 0 12px; font: 700 27px/1.25 var(--titre); }
.texte h3 { margin: 28px 0 8px; font: 600 21px/1.3 var(--titre); }
.texte h4 { margin: 22px 0 6px; font: 600 18px/1.3 var(--texte); }
.texte p, .texte ul, .texte ol { margin: 0 0 18px; }
.texte li { margin: 4px 0; }
.texte img { margin: 20px auto; }
.texte figure { margin: 24px 0; }
.texte figcaption { font-size: 14px; color: var(--gris); }
.texte blockquote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--c, var(--encre)); color: var(--gris); }
.texte table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; background: var(--blanc); display: block; overflow-x: auto; }
.texte th, .texte td { padding: 9px 12px; border: 1px solid var(--filet); text-align: left; vertical-align: top; }
.texte th { background: #eceae3; font-weight: 600; }
.texte iframe { max-width: 100%; }

/* le formulaire de contact */
.formulaire { margin-top: 26px; padding: 22px; background: var(--blanc); border: 1px solid var(--encre); }
.formulaire label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.formulaire input, .formulaire textarea { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid #b9b7ae; background: #fff; }
.formulaire button { padding: 12px 22px; font: 700 16px/1 var(--texte); color: #fff; background: var(--encre); border: 0; cursor: pointer; }
.formulaire__ok { padding: 10px 14px; background: #e6f4ea; border-left: 4px solid var(--finances); }
.formulaire__piege { position: absolute; left: -9999px; }

/* ---- en-tête de rubrique ---- */
.entete-r { max-width: var(--large); margin: 0 auto; padding: 40px 24px 4px; display: flex; gap: 22px; align-items: center; }
.picto--rubrique { width: 84px; height: 84px; padding: 16px; color: #fff; background: var(--c, var(--encre)); stroke-width: 1.5; }
.entete-r__n { margin: 0 0 4px; font: 500 13px/1 var(--num); text-transform: uppercase; letter-spacing: .06em; color: var(--c, var(--gris)); }
.entete-r h1 { margin: 0 0 8px; font: 700 clamp(34px, 5vw, 50px)/1.05 var(--titre); }
.entete-r p { margin: 0; max-width: 64ch; color: var(--gris); }

/* ---- le registre (pied de page) ---- */
.registre { margin-top: 70px; background: var(--blanc); border-top: 3px solid var(--encre); }
.registre__in { max-width: var(--large); margin: 0 auto; padding: 36px 24px 28px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 34px; }
.registre__logo { margin: 0 0 8px; font: 700 30px/1 var(--titre); }
.registre__tete p:last-child { margin: 0; color: var(--gris); font-size: 15px; }
.registre__lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.registre__lignes a { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--encre); text-decoration: none; border-bottom: 1px dashed var(--filet); font-weight: 500; }
.registre__lignes a:hover { color: var(--paiements); }
.registre__lignes .num { color: var(--gris); }
.registre__pages { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.registre__pages a { color: var(--encre); }
.registre__avis { grid-column: 1 / -1; margin: 0; padding-top: 16px; border-top: 1px solid var(--filet); font: 400 12.5px/1.5 var(--num); color: var(--gris); }

/* ---- écrans moyens et petits ---- */
@media (max-width: 1020px) {
  .lignes__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ligne-r:nth-child(n+4) { border-top: 1px solid var(--filet); }
  .ligne-r:nth-child(3) { border-right: 1px solid var(--filet); }
  .une { grid-template-columns: minmax(0, 1fr); }
  .envois--cote { grid-template-rows: none; }
  .envois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .envois--cote { grid-template-columns: minmax(0, 1fr); }
  .registre__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .registre__tete { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .cabine__in { padding: 16px 16px 12px; }
  .logo { font-size: 34px; }
  .lignes__in { padding: 0; }
  .ligne-r { flex-direction: column; gap: 4px; padding: 10px 4px 9px; font-size: 13.5px; }
  .ouverture { padding: 22px 16px 0; }
  .ouverture h1 { font-size: 19px; }
  .quai { padding: 32px 16px 4px; }
  .quai__t { font-size: 24px; }
  .envois, .envois--liste { grid-template-columns: minmax(0, 1fr); }
  .une__t { font-size: 24px; }
  .une__c { padding: 16px; }
  .manifeste { grid-template-columns: 92px minmax(0, 1fr); padding: 12px; }
  .lettre { padding: 22px 16px 0; }
  .bordereau { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bordereau div:nth-child(3) { border-left: 0; }
  .bordereau div:nth-child(n+3) { border-top: 1px solid var(--filet); }
  .entete-r { padding: 28px 16px 4px; gap: 16px; align-items: flex-start; }
  .picto--rubrique { width: 60px; height: 60px; padding: 11px; }
  .registre__in { grid-template-columns: minmax(0, 1fr); padding: 30px 16px 24px; }
}

/* logo refait le 23/10/2026 : deux conteneurs (marchandises, argent) posés sur le quai, et le nom seul */
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo__marque { width: 52px; height: auto; flex: none; }
.logo__nom { font: 700 1em/1 var(--titre); letter-spacing: -.02em; color: var(--encre); }
.logo__mag { color: var(--transport); }
.registre__logo .logo__marque { width: 36px; }
@media (max-width: 700px) { .logo__marque { width: 40px; } }