/* ===========================================================================
   Socle commun a toutes les pages du site Cartridge World Benin.
   Jetons de la charte, remise a zero, boutons, reassurance, en-tete, pied.
   Le CSS propre a chaque page reste dans la page, nomme par contexte :
   une regle ecrite pour une page ne doit jamais en atteindre une autre.
   =========================================================================== */

/* ==========================================================================
   Jetons de la charte — identité historique jaune / noir
   ========================================================================== */
:root{
  --jaune:#FEF200;
  --noir:#111111;
  --gris:#6B6B68;
  --fond-alt:#F7F7F3;
  --bordure:#E4E4DE;
  --blanc:#FFFFFF;
  --titre:"Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --texte:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --gouttiere:16px;
  --barre-h:0px;              /* hauteur de la barre de sélection, injectée par JS */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{
  margin:0;background:var(--blanc);color:var(--noir);
  font-family:var(--texte);font-weight:500;font-size:15px;line-height:1.45;
  padding-bottom:var(--barre-h);
}
body.no-scroll{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;border-radius:0}
input,select,textarea{font:inherit;color:inherit;border-radius:0}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
h1,h2,h3,h4{font-family:var(--titre);text-transform:uppercase;margin:0;letter-spacing:-0.01em}
/* Masque visuellement sans retirer de l'arbre d'accessibilite.
   Les !important sont deliberes : une regle de page comme
   `.formulaire input { width:100% }` est plus specifique et redonnerait
   une taille a l'element. Le piege a robots des formulaires en depend. */
.sr-only{
  position:absolute !important;width:1px !important;height:1px !important;
  padding:0 !important;border:0 !important;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap
}
.conteneur{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--gouttiere)}
:focus-visible{outline:3px solid var(--jaune);outline-offset:2px}
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--titre);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  font-size:13px;line-height:1;padding:0 20px;height:52px;border:3px solid var(--noir);
  background:var(--noir);color:var(--blanc);text-decoration:none;white-space:nowrap
}
.bouton:hover{background:var(--jaune);color:var(--noir);border-color:var(--jaune)}
.bouton--jaune{background:var(--jaune);color:var(--noir);border-color:var(--jaune)}
.bouton--jaune:hover{background:var(--noir);color:var(--jaune);border-color:var(--noir)}
.bouton[disabled]{opacity:.55;pointer-events:none}
.bouton--contour{background:transparent;color:var(--noir)}
.bouton--contour:hover{background:var(--noir);color:var(--blanc);border-color:var(--noir)}
.bouton--blanc{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.bouton--blanc:hover{background:var(--jaune);border-color:var(--jaune)}
.bouton svg{width:18px;height:18px;flex:none}

/* Ligne de réassurance — accompagne chaque appel à l'action */
.reassure{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;
  font-family:var(--titre);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris)
}
.reassure li{display:flex;align-items:center;gap:8px}
.reassure li::before{content:"";width:8px;height:8px;background:var(--jaune);flex:none}
.reassure--sombre{color:#CFCFC9}

/* ==========================================================================
   En-tête
   ========================================================================== */
.entete{background:var(--noir);color:var(--blanc)}
.entete__ligne{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.entete__logo img{height:34px;width:auto}
.entete__nav{display:none}
.entete__nav a{
  font-family:var(--titre);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;padding:8px 0;border-bottom:3px solid transparent
}
.entete__nav a:hover{border-bottom-color:var(--blanc)}
.entete__nav a[aria-current="page"]{border-bottom-color:var(--jaune);color:var(--jaune)}
.entete__actions{display:flex;align-items:center;gap:8px}
.entete__wa{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;
  background:var(--jaune);color:var(--noir);text-decoration:none;
  font-family:var(--titre);font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase
}
.entete__wa svg{width:20px;height:20px}
.entete__wa span{display:none}
.entete__menu{width:40px;height:40px;border:2px solid var(--blanc);display:grid;place-items:center}
.entete__menu svg{width:20px;height:20px}
.entete__mobile{display:none;border-top:1px solid #333;padding:8px 0 16px}
.entete__mobile.ouvert{display:block}
.entete__mobile a{
  display:block;padding:14px 0;border-bottom:1px solid #333;text-decoration:none;
  font-family:var(--titre);font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase
}
.entete__mobile a[aria-current="page"]{color:var(--jaune)}
@media (min-width:1024px){
  .entete__ligne{height:80px}
  .entete__logo img{height:44px}
  .entete__nav{display:flex;gap:28px}
  .entete__menu{display:none}
  .entete__wa span{display:inline}
  .entete__mobile{display:none !important}
}

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied{background:var(--noir);color:var(--blanc);padding:40px 0 32px;margin-top:24px}
.pied__grille{display:grid;gap:28px;grid-template-columns:1fr}
.pied img{height:50px;width:auto}
.pied p{margin:10px 0 0;color:#CFCFC9;font-size:14px;max-width:44ch}
.pied__adresse{font-style:normal;margin:14px 0 0;color:#CFCFC9;font-size:14px;line-height:1.55}
.pied h4{font-size:11px;letter-spacing:.14em;color:var(--jaune);margin-bottom:12px}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.pied a{text-decoration:none}
.pied a:hover{text-decoration:underline;text-decoration-color:var(--jaune);text-decoration-thickness:2px}
.pied__bas{margin-top:32px;padding-top:16px;border-top:1px solid #333;font-size:12px;color:#8F8F8B;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
@media (min-width:720px){.pied__grille{grid-template-columns:2fr 1fr 1fr}}