/* =====================================================================
   Makoss Transports Inc. — pages publiques
   © 2026 Makoss Transports Inc. Tous droits réservés.
   Propriété intellectuelle de Massine Juba Kadi et de Karim Kadi, par l'entremise de
   Makoss Transports Inc. Toute reproduction, même partielle, est
   interdite sans autorisation écrite.
   ===================================================================== */

/* Makoss Transports Inc. — pages publiques.
   Georgia pour les titres, polices systeme pour le texte : la politique de
   securite du site interdit les polices externes, et une police qui ne charge
   pas laisse une page en desordre. Rien ici ne depend d'Internet. */

:root {
  --marine:#1B2340;
  --marine-clair:#3A4258;
  --or:#BA8D33;
  --or-fonce:#8A6A19;
  --or-pale:#D9C48A;
  --creme:#F2ECDA;
  --fond:#FAF8F2;
  --blanc:#FFFFFF;
  --encre:#12161F;
  --encre-2:#3A4258;
  --encre-3:#6B6250;
  --filet:#E3DDCE;
  --filet-fonce:#CFC7B4;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--fond); color:var(--encre);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.6;
}
h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:700; margin:0; text-wrap:balance; }
p { margin:0; max-width:64ch; }
a { color:var(--or-fonce); text-decoration:none; border-bottom:1px solid var(--or-pale); }
a:hover, a:focus { color:var(--marine); border-bottom-color:var(--marine); }
img { max-width:100%; height:auto; }
:focus-visible { outline:3px solid var(--or); outline-offset:2px; }

.large { max-width:1180px; margin:0 auto; padding:0 32px; }
.sur-titre { font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--or); font-weight:700; }
.chapeau { font-size:19px; color:#D8D2C0; }

/* --- barre du haut --- */
.entete { background:var(--fond); border-bottom:1px solid var(--filet); }
.entete-inner { display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding:16px 32px; max-width:1180px; margin:0 auto; }
.marque { display:inline-flex; align-items:center; gap:12px;
  font-family:Georgia,serif; font-weight:700; font-size:19px; letter-spacing:.06em;
  color:var(--marine); border:0; }
/* Le sceau. Deux fichiers PNG a transparence reelle, fabriques a partir du
   logo d'origine : le blanc pour les fonds marine, le marine pour les fonds
   clairs. Un masque CSS aurait evite le second fichier, mais il ne s'affichait
   pas ici — mieux vaut deux images qui fonctionnent partout, y compris a
   l'impression et dans un courriel. */
.sceau { flex:0 0 auto; width:64px; height:64px; border-radius:50%;
  background:var(--marine); padding:5px; }
.sceau-grand { display:block; width:170px; height:170px; }
.colonne-devise { flex:0 0 280px; display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
.colonne-devise .devise { flex:none; }
.marque:hover { color:var(--or-fonce); }
.menu { display:flex; align-items:center; gap:22px; flex-wrap:wrap; font-size:16px; }
.menu a { color:var(--encre-2); border:0; }
.menu a:hover, .menu a[aria-current="page"] { color:var(--marine); border-bottom:2px solid var(--or); }
.tel { display:inline-flex; align-items:center; gap:8px; color:var(--marine); font-weight:600; border:0; }
.bouton-operateur { padding:8px 16px; border:1.5px solid var(--or); border-radius:2px;
  color:var(--marine); font-weight:600; font-size:15px; }
/* Selecteur plus specifique que « .menu a:hover », qui sinon l'emporte et
   remet le texte en marine — sur un fond marine, le bouton devenait un
   rectangle noir sans texte. */
.menu a.bouton-operateur:hover, .menu a.bouton-operateur:focus {
  background:var(--marine); color:var(--creme); border-color:var(--marine); }

/* Deux entrees plutot qu'une (Karim, 20 sept. 2026) : l'administration a
   desormais sa propre porte, et l'Espace Operateur garde la sienne, a la
   meme place et de la meme couleur pour les conducteurs. Meme page de
   connexion derriere les deux : c'est le compte qui decide de la suite. */
.bouton-admin { border-color:var(--filet); color:var(--encre-2); }

/* --- banniere --- */
.banniere { background:var(--marine); color:var(--creme); padding:64px 0 58px; }
.banniere h1 { font-size:clamp(34px,5vw,56px); line-height:1.09; color:var(--creme); max-width:18ch; margin-top:18px; }
.banniere p { margin-top:20px; color:#D8D2C0; }
.filet-or { height:3px; background:var(--or); }
.banniere-deux { display:flex; gap:56px; align-items:flex-start; flex-wrap:wrap; }
.devise { flex:0 0 280px; border-left:3px solid var(--or); padding-left:24px;
  font-family:Georgia,serif; font-style:italic; font-size:20px; line-height:1.5; color:var(--creme); }

/* --- appels a l'action --- */
.action { display:inline-block; background:var(--or); color:var(--encre); font-weight:700;
  font-size:16px; padding:15px 30px; border-radius:2px; border:0; cursor:pointer;
  font-family:inherit; }
.action:hover { background:var(--marine); color:var(--creme); }
.action-2 { display:inline-block; background:var(--marine); color:var(--creme); font-weight:600;
  padding:14px 26px; border-radius:2px; border:0; font-size:16px; cursor:pointer; font-family:inherit; }
.action-2:hover { background:var(--or); color:var(--encre); }
.ligne-action { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:32px; }

/* --- sections --- */
.bloc { padding:56px 0; }
.bloc-creme { background:var(--creme); }
.titre-section { font-size:15px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--encre-3); font-weight:700; }
.grille-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; margin-top:22px; }
.porte { background:var(--blanc); border:1px solid var(--filet); padding:30px 26px;
  display:flex; flex-direction:column; gap:11px; border-top:4px solid var(--marine); }
.porte h3 { font-size:23px; color:var(--marine); }
.porte p { font-size:16px; color:var(--encre-2); }
.engagement { border-top:3px solid var(--or); }
.engagement .liste-nue { gap:11px; }
.engagement .liste-nue li { font-size:15.5px; color:var(--encre-2); line-height:1.45; }
.engagement .liste-nue li::before { content:none; }
.porte .suite { margin-top:auto; padding-top:8px; font-weight:600; font-size:15.5px; align-self:flex-start; }

.deux-colonnes { display:flex; gap:52px; align-items:flex-start; flex-wrap:wrap; }
.colonne-large { flex:1 1 460px; }
.colonne-etroite { flex:0 0 320px; }
.encadre { background:var(--blanc); border:1px solid var(--filet-fonce); padding:24px 26px; }
.encadre h3 { font-size:20px; color:var(--marine); }
.rangee { display:flex; justify-content:space-between; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--filet); font-size:16px; }
.rangee:last-child { border-bottom:0; }
.rangee b { font-weight:700; white-space:nowrap; }

/* --- etapes numerotees --- */
.etape { display:flex; gap:34px; align-items:flex-start; flex-wrap:wrap; }
.numero { flex:0 0 76px; font-family:Georgia,serif; font-size:50px; font-weight:700;
  color:var(--or); line-height:1; }
.etape-corps { flex:1 1 420px; display:flex; flex-direction:column; gap:13px; }
.etape-corps h2 { font-size:29px; color:var(--marine); }
.etape-corps p { font-size:17px; color:var(--encre-2); }
.separateur { height:1px; background:var(--filet); margin:38px 0; }
.jetons { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-top:6px; }
.jeton { background:var(--blanc); border:1px solid var(--filet); padding:11px 14px; font-size:15px; }
.jeton-pale { background:var(--creme); border-color:var(--filet-fonce); color:var(--encre-3); }
.regles { display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
.regle { background:var(--blanc); border:1px solid var(--filet); border-top:3px solid var(--marine);
  padding:15px 19px; min-width:210px; flex:1 1 210px; }
.regle b { display:block; color:var(--marine); font-size:16px; }
.regle span { font-size:15px; color:var(--encre-2); }

/* --- formulaires --- */
.formulaire { display:flex; flex-direction:column; gap:24px; max-width:660px; }
.groupe { display:flex; flex-direction:column; gap:15px; }
.paire { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.trio { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.champ { display:flex; flex-direction:column; gap:6px; }
.champ label { font-size:14.5px; font-weight:600; color:var(--encre-2); }
.champ input, .champ textarea, .champ select {
  font:inherit; font-size:16px; padding:12px 13px; border:1.5px solid var(--filet-fonce);
  background:var(--blanc); color:var(--encre); border-radius:2px; width:100%;
}
.champ textarea { min-height:96px; resize:vertical; }
.champ input:focus, .champ textarea:focus { border-color:var(--marine); }
.cases { display:flex; gap:12px; flex-wrap:wrap; }
.case { display:inline-flex; align-items:center; gap:9px; border:1.5px solid var(--filet-fonce);
  background:var(--blanc); padding:11px 17px; font-size:15.5px; cursor:pointer; border-radius:2px; }
.case:hover { border-color:var(--marine); }
.case input { width:18px; height:18px; accent-color:var(--marine); margin:0; }
.aide { font-size:14.5px; color:var(--encre-3); }
.reponse { margin-top:14px; padding:13px 16px; font-size:16px; border-radius:2px; display:none; }
.reponse.ok { display:block; background:#E3F0E8; border:1px solid #2A845C; color:#1B4D35; }
.reponse.err { display:block; background:#F7E7E4; border:1px solid #843D2A; color:#6B2E20; }

/* --- postes --- */
.grille-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:24px; }
.poste { background:var(--blanc); border:1px solid var(--filet); padding:32px 30px;
  display:flex; flex-direction:column; gap:15px; }
.poste h2 { font-size:26px; color:var(--marine); }
.poste-entete { display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.jeton-ouvert { font-size:13.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--or-fonce); font-weight:700; }
.detail { display:flex; gap:12px; font-size:16px; color:var(--encre-2); }
.detail span:first-child { flex:0 0 92px; color:var(--encre-3); }
.liste-nue { list-style:none; margin:12px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:9px 26px; font-size:16px; color:var(--encre-2); }
.liste-nue li { display:flex; gap:10px; }
.liste-nue li::before { content:"—"; color:var(--or); font-weight:700; }

/* --- bas de page --- */
.pied { background:var(--marine); color:#D8D2C0; padding:40px 0 36px; }
.pied-inner { display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap; }
.pied a { color:#D8D2C0; border-bottom-color:#5A6178; }
.pied a:hover { color:var(--creme); border-bottom-color:var(--or); }
.pied .nom { font-family:Georgia,serif; font-weight:700; font-size:17px;
  letter-spacing:.06em; color:var(--creme); }
.pied .mention { margin-top:28px; padding-top:18px; border-top:1px solid #3A4258;
  font-size:13.5px; line-height:1.6; color:#B6AF9C; max-width:none; }
.pied .mention strong { color:#D8D2C0; font-weight:600; }
.pied-liens { display:flex; gap:28px; flex-wrap:wrap; font-size:15px; }
/* Les deux entrees privees, discretes : pour Karim et les Operateurs seulement. */
.pied .acces-prive { font-size:13px; color:#A9AEBD; }
.pied .acces-prive a { color:#A9AEBD; }

/* =====================================================================
   Telephones et tablettes (refait le 11 oct. 2026)
   Trois regles tenues partout : aucune ligne ne depasse l'ecran, tout ce
   qui se touche fait au moins 44 px de haut, et le haut de page ne mange
   pas plus d'un sixieme de l'ecran.
   ===================================================================== */

/* Le bouton « Menu » et l'appel direct n'existent que sur petit ecran ;
   sur ordinateur, le menu complet reste affiche comme avant. */
.outils-entete { display:none; align-items:center; gap:10px; }
.bouton-menu { display:none; }

@media (max-width:860px) {
  /* Le haut de page suit le defilement : le retour a l'accueil et le
     numero restent a portee de pouce, sans remonter toute la page. */
  .entete { position:sticky; top:0; z-index:40; }
  /* La barre garde une seule rangee (nom, appel, bouton) et le menu
     deplie passe dessous : d'ou flex-wrap, avec un nom qui se laisse
     retrecir plutot que de pousser les boutons hors de l'ecran. */
  .entete-inner { padding:10px 18px; gap:10px; flex-wrap:wrap; align-items:center; }
  .marque { flex:1 1 auto; min-width:0; font-size:16px; gap:9px; }
  .marque span { letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .outils-entete { flex:0 0 auto; }
  .sceau { width:44px; height:44px; padding:4px; }

  .outils-entete { display:flex; }
  .appel-mobile { display:inline-flex; align-items:center; justify-content:center; gap:7px;
    min-height:44px; padding:0 14px; border:1.5px solid var(--or); border-radius:2px;
    color:var(--marine); font-weight:700; font-size:15px; white-space:nowrap; }
  .appel-mobile svg { flex:0 0 auto; }
  .bouton-menu { display:inline-flex; align-items:center; gap:8px; min-height:44px;
    padding:0 13px; background:var(--marine); color:var(--creme); border:0; border-radius:2px;
    font:inherit; font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    cursor:pointer; }
  .bouton-menu .barres { position:relative; width:17px; height:2px; background:currentColor;
    box-shadow:0 -6px 0 currentColor, 0 6px 0 currentColor; }
  .bouton-menu[aria-expanded="true"] .barres { box-shadow:none; transform:rotate(45deg); }
  .bouton-menu[aria-expanded="true"] .barres::after { content:""; position:absolute; inset:0;
    background:currentColor; transform:rotate(90deg); }

  /* Les liens, repliés par défaut, deviennent une vraie liste : une ligne
     par entree, assez haute pour le pouce. */
  .menu { display:none; width:100%; flex-direction:column; align-items:stretch; gap:0;
    margin-top:8px; border-top:1px solid var(--filet); }
  .menu.ouvert { display:flex; }
  .menu a { display:flex; align-items:center; min-height:48px; padding:0 2px; font-size:17px;
    border-bottom:1px solid var(--filet); }
  .menu a:hover, .menu a[aria-current="page"] { border-bottom:1px solid var(--filet);
    color:var(--marine); font-weight:700; }
  .menu a[aria-current="page"]::after { content:"•"; color:var(--or); margin-left:8px; }
  .menu .tel { min-height:48px; }
  .menu .bouton-operateur { justify-content:center; border:1.5px solid var(--or); margin:12px 0; }
}

@media (max-width:640px) {
  body { font-size:16.5px; }
  .large { padding:0 18px; }

  /* La banniere : un titre plus court a lire, et le sceau ramene a une
     taille qui laisse voir le texte sans faire defiler. */
  .banniere { padding:34px 0 30px; }
  .banniere h1 { font-size:clamp(28px,8vw,36px); line-height:1.14; margin-top:12px; max-width:none; }
  .banniere p { margin-top:14px; }
  .banniere-deux, .deux-colonnes { gap:26px; }
  .chapeau { font-size:17px; }
  .sur-titre { font-size:12px; letter-spacing:.16em; }
  .colonne-devise { flex:1 1 100%; flex-direction:row; align-items:center; gap:16px; }
  .sceau-grand { width:92px; height:92px; }
  /* flex-basis 0 + min-width 0 : sans ca, la citation garde sa largeur
     naturelle et pousse la page hors de l'ecran. */
  /* Selecteur a deux niveaux : « .colonne-devise .devise { flex:none } »
     plus haut l'emporterait sinon, et la citation garderait sa largeur
     naturelle en poussant la page hors de l'ecran. */
  .colonne-devise .devise { flex:1 1 0; min-width:0; max-width:none;
    font-size:16.5px; padding-left:14px; }
  .colonne-etroite { flex:1 1 100%; }

  /* Les boutons d'action prennent toute la largeur : une cible nette. */
  .ligne-action { margin-top:22px; gap:12px; }
  .action, .action-2 { width:100%; text-align:center; min-height:52px; padding:15px 20px;
    display:inline-flex; align-items:center; justify-content:center; }

  .bloc { padding:36px 0; }
  .grille-3, .grille-2 { grid-template-columns:1fr; gap:16px; }
  .porte, .poste { padding:22px 20px; }
  .porte h3 { font-size:21px; }
  .poste h2 { font-size:23px; }
  .encadre { padding:20px 18px; }

  /* Les etapes : le gros numero passe au-dessus du titre plutot que de
     voler la moitie de la largeur. */
  .etape { gap:10px; }
  .numero { flex:1 1 100%; font-size:34px; }
  .etape-corps { flex:1 1 100%; }
  .etape-corps h2 { font-size:25px; }
  .separateur { margin:28px 0; }

  .jetons { grid-template-columns:1fr; }
  .regle { min-width:0; flex:1 1 100%; }
  .rangee { flex-wrap:wrap; }
  .rangee b { white-space:normal; }
  .detail { flex-wrap:wrap; gap:4px 12px; }
  .detail span:first-child { flex:0 0 100%; font-size:14px; }
  .liste-nue { grid-template-columns:1fr; }

  /* Formulaires : un champ par ligne, et des cases assez grandes. */
  .paire, .trio { grid-template-columns:1fr; gap:12px; }
  .formulaire { gap:20px; }
  .case { width:100%; min-height:48px; }

  .pied { padding:32px 0 28px; }
  .pied-inner { gap:24px; }
  .pied-liens { gap:14px 20px; }
}

/* Tres petits appareils (iPhone SE et apparentes) : le nom de l'entreprise
   passerait sous le bouton « Menu ». */
@media (max-width:380px) {
  .marque span { font-size:14px; }
  .sceau { width:38px; height:38px; }
  .appel-mobile .texte-tel, .bouton-menu .mot { display:none; }
  .appel-mobile { padding:0 12px; }
  .bouton-menu { padding:0 14px; }
}

@media print {
  .entete, .pied-liens, .action, .action-2, .bouton-operateur { display:none; }
  body { background:#fff; font-size:12pt; }
  .banniere, .pied { background:#fff; color:#000; }
  .banniere h1, .devise, .pied .nom { color:#000; }
  .banniere p, .pied { color:#000; }
}