/* ==========================================================================
   COM EDUC - thème enfant de Classic (PrestaShop 8.2)
   Étape 1 : variables, polices, base, header
   Source : fichier Figma "COM-EDUC"
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. POLICES (hébergées sur le serveur, conformité RGPD)
   Dépose les fichiers .woff2 dans themes/com-educ/assets/fonts/
   (voir LISEZMOI.txt). Tant qu'ils sont absents, le navigateur utilise
   une police de secours : rien ne casse.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/Baloo2-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/Baloo2-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/Quicksand-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/Quicksand-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/Quicksand-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. VARIABLES (design tokens du Figma)
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs */
  --ce-brun-fonce: #251605;   /* Dark Coffee : textes, fonds sombres */
  --ce-miel: #efa703;         /* Amber Honey : boutons, prix */
  --ce-creme: #fbfbf2;        /* Blanc floral : fond de page */
  --ce-bleu: #27ade2;         /* Blue : onglet actif, liens */
  --ce-brun-gris: #afa69c;    /* Brun gris : bordures, textes secondaires */
  --ce-jaune-pale: #ffecbf;   /* fond des images produit, bloc rendez-vous */
  --ce-bleu-pale: #a7dceb;    /* bloc Instagram */
  --ce-blanc-carte: #fffffd;  /* fond des cartes */
  --ce-gris-wireframe: #5f5f63;
  --ce-rouge: #eb5757;        /* pastille panier */

  /* Polices */
  --ce-font-titre: "Baloo 2", "Trebuchet MS", sans-serif;
  --ce-font-ui: "Quicksand", "Trebuchet MS", sans-serif;
  --ce-font-texte: "Inter", Arial, sans-serif;
  --ce-font-lien: "Lato", Arial, sans-serif;

  /* Mise en page */
  --ce-largeur-contenu: 1408px;
  --ce-marge-page: 96px;

  /* Rayons */
  --ce-rayon-bouton: 10px;
  --ce-rayon-pilule: 40px;
  --ce-rayon-carte: 15px;
  --ce-rayon-bloc: 20px;
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
body,
#wrapper {
  background-color: var(--ce-creme);
  color: var(--ce-brun-fonce);
  font-family: var(--ce-font-texte);
  font-weight: 300;
  font-size: 16px;
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-family: var(--ce-font-titre);
  color: var(--ce-brun-fonce);
}

h2, .h2 { font-weight: 700; font-size: 48px; }
h3, .h3 { font-weight: 500; font-size: 24px; }

a { color: var(--ce-bleu); }
a:hover { color: var(--ce-brun-fonce); }

/* Contenu centré (1408 px à 1920 px de large) */
.container {
  max-width: calc(var(--ce-largeur-contenu) + 2 * 15px);
}

/* Bouton principal (jaune) */
.btn-primary,
.ce-bouton {
  background-color: var(--ce-miel);
  border: 0;
  border-radius: var(--ce-rayon-bouton);
  color: var(--ce-brun-fonce);
  font-family: var(--ce-font-titre);
  font-weight: 500;
  font-size: 30px;
  line-height: normal;
  padding: 4px 88px;
  text-transform: none;
}
.btn-primary:hover,
.btn-primary:focus,
.ce-bouton:hover {
  background-color: var(--ce-miel);
  color: var(--ce-brun-fonce);
  filter: brightness(0.95);
}

/* --------------------------------------------------------------------------
   4. HEADER
   Barre du haut (40 px) + barre principale (88 px), pleine largeur
   -------------------------------------------------------------------------- */

/* Le header n'est plus limité par la largeur du conteneur Bootstrap */
#header .container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ----- Barre sombre : téléphone à gauche, liens à droite ----- */
#header .header-nav {
  background-color: var(--ce-brun-fonce);
  border: 0;
  height: 40px;
  max-height: none;
  margin: 0;
  padding: 0 var(--ce-marge-page);
  font-family: var(--ce-font-ui);
  font-weight: 500;
  font-size: 14px;
}
#header .header-nav,
#header .header-nav a,
#header .header-nav span,
#header .header-nav .user-info a,
#header .header-nav #contact-link {
  color: var(--ce-creme);
}
#header .header-nav .row {
  display: flex;
  align-items: center;
  height: 40px;
  margin: 0;
}
#header .header-nav .row > .hidden-sm-down {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#header .header-nav .row > .hidden-sm-down > div {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
}

/* ----- Barre principale : logo, menu centré ----- */
#header .header-top {
  background-color: var(--ce-creme);
  height: auto;
  min-height: 88px;
  padding: 0 var(--ce-marge-page);
}
#header .header-top > .container > .row:first-child {
  display: flex;
  align-items: center;
  min-height: 88px;
  margin: 0;
}
#header .header-top > .container > .row:first-child > div {
  padding: 0;
  max-width: none;
}
#header .header-top #_desktop_logo {
  flex: 0 0 auto;
  width: auto;
}
#header .header-top .header-top-right {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
#header .logo {
  max-height: 59px;
  width: auto;
}

/* La maquette n'a pas de barre de recherche dans le header */
#header #search_widget {
  display: none !important;
}

/* ----- Menu principal : liens séparés par des points ----- */
#header #_desktop_top_menu {
  margin: 0;
  padding: 0;
}
#header #_desktop_top_menu .top-menu[data-depth="0"] {
  display: flex;
  align-items: center;
  gap: 44px;
  margin: 0;
  padding: 0;
}
#header #_desktop_top_menu .top-menu[data-depth="0"] > li {
  display: flex;
  align-items: center;
  float: none;
  gap: 44px;
  margin: 0;
}
#header #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
  color: var(--ce-brun-fonce);
  font-family: var(--ce-font-ui);
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
  padding: 0;
  text-transform: none;
}
#header #_desktop_top_menu .top-menu[data-depth="0"] > li > a:hover {
  color: var(--ce-bleu);
}
#header #_desktop_top_menu .top-menu[data-depth="0"] > li:not(:last-child)::after {
  background-color: var(--ce-brun-gris);
  border-radius: 68px;
  content: "";
  display: block;
  height: 8px;
  width: 8px;
}

/* ----- Panier (pour l'instant dans la barre sombre) ----- */
#header .blockcart {
  background: transparent;
}
#header .blockcart .cart-products-count {
  background-color: var(--ce-rouge);
  border-radius: 32px;
  color: var(--ce-creme);
  font-family: var(--ce-font-texte);
  font-size: 9px;
  line-height: 1;
  padding: 1.5px 3px;
}

/* --------------------------------------------------------------------------
   5. CORRECTIONS HEADER (étape 2)
   -------------------------------------------------------------------------- */

/* Barre sombre : tout aligné verticalement sur la même ligne */
#header .header-nav .row > .hidden-sm-down > div {
  display: flex !important;
  align-items: center;
  gap: 20px;
  height: 40px;
}

/* Panier dans la barre sombre : fond transparent, texte clair lisible */
#header .blockcart,
#header .blockcart.inactive,
#header .blockcart .header {
  background: transparent !important;
}
#header .blockcart a,
#header .blockcart .shopping-cart,
#header .blockcart .hidden-sm-down,
#header .blockcart span:not(.cart-products-count) {
  color: var(--ce-creme) !important;
}

/* --------------------------------------------------------------------------
   6. PANIER DANS LA BARRE PRINCIPALE (étape 3)
   S'applique seulement quand le module ps_shoppingcart est greffé sur
   le hook displayTop (Design > Positions). Sans effet avant.
   -------------------------------------------------------------------------- */
#header .header-top {
  position: relative;
}
#header .header-top #_desktop_cart {
  position: absolute;
  right: var(--ce-marge-page);
  top: 50%;
  transform: translateY(-50%);
}
/* On masque le mot « Panier » : seule l'icône reste, comme sur la maquette */
#header .header-top #_desktop_cart .hidden-sm-down {
  display: none !important;
}
#header .header-top #_desktop_cart .blockcart,
#header .header-top #_desktop_cart .blockcart a,
#header .header-top #_desktop_cart .blockcart .shopping-cart {
  color: var(--ce-brun-fonce) !important;
}
#header .header-top #_desktop_cart .shopping-cart {
  font-size: 32px;
}
/* Pastille rouge en haut à droite de l'icône */
#header .header-top #_desktop_cart .header {
  position: relative;
}
#header .header-top #_desktop_cart .cart-products-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background-color: var(--ce-rouge);
  border-radius: 32px;
  color: var(--ce-creme) !important;
  font-family: var(--ce-font-texte);
  font-size: 9px;
  line-height: 1;
  padding: 1.5px 3px;
}

/* --------------------------------------------------------------------------
   7. BARRE SOMBRE : « Mon compte » + « Nous contacter » (étape 4)
   -------------------------------------------------------------------------- */
#header .header-nav .user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}
#header .header-nav .user-info a,
#header .header-nav .user-info .ce-contact-link {
  color: var(--ce-creme);
  font-family: var(--ce-font-ui);
  font-weight: 500;
  font-size: 14px;
}
#header .header-nav .user-info a:hover {
  color: var(--ce-miel);
}