/* =========================================================================
   KRUPS Coffee Crush — styles de base
   Les styles de mise en page restent en inline dans les gabarits : ils
   proviennent du design d'origine et ne sont pas modifiés ici.
   Ce fichier ne contient que ce qui ne peut pas vivre en inline :
   réinitialisations, animations, styles d'état et d'accessibilité,
   plus les gouttières d'en-tête et de pied de page (voir § dédié : elles
   sont absentes des gabarits et doivent valoir pour les deux langues).
   ========================================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FBF3EA;
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  color: #232120;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: #EE7A2B; color: #fff; }
 
/* --- Gouttières de l'en-tête et du pied de page ---
   Ni <header id="cc-header"> ni <footer> ne déclaraient de padding : leur
   contenu touchait les bords de la fenêtre. Les règles vivent ici plutôt
   qu'en inline pour ne pas avoir à les répéter dans les quatre gabarits
   (header-fr, header-nl, footer-fr, footer-nl).
 
   Pour l'en-tête, la valeur horizontale est un max() entre la gouttière
   standard des sections — clamp(20px, 5vw, 56px) — et la marge de centrage
   d'un contenu de 1180px. Sans cela, le logo resterait collé à 56px du bord
   sur grand écran alors que le contenu des sections commence bien plus à
   droite : l'en-tête ne déclare aucun conteneur interne de 1180px, à la
   différence du pied de page qui, lui, en possède déjà un.
 
   En dessous de 620px, mobile.css impose ses propres valeurs, plus
   resserrées. */
#cc-header {
  padding: 12px max(clamp(20px, 5vw, 56px), calc((100% - 1180px) / 2));
}
footer {
  padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 56px);
}
 
/* --- Animations utilisées par les onglets et le carrousel --- */
@keyframes ccfade {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: none; }
}
@keyframes cc-tap {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
 
/* --- Navigation --- */
.cc-nav { position: relative; transition: color .25s ease; }
.cc-nav::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -4px;
  height: 2px; background: #EE7A2B;
  transition: right .3s ease;
}
.cc-nav:hover::after { right: 0; }
 
/* --- Points chauds produit ---
   L'ouverture des bulles est pilotée par initHotspots() dans main.js, qui
   écrit dans le style inline : les règles :hover ci-dessous ne pouvaient
   pas fonctionner seules, le style inline opacity:0 des bulles l'emportant
   sur cette feuille. Elles sont conservées comme repli au survol pour les
   navigateurs où le JavaScript ne s'exécute pas. */
.cc-hs { cursor: pointer; }
.cc-tip { transition: opacity .25s ease, transform .25s ease; }
.cc-hs:hover .cc-tip,
.cc-hs:focus-within .cc-tip { opacity: 1; pointer-events: auto; }
 
/* --- Accessibilité : le focus doit rester visible au clavier --- */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #EE7A2B;
  outline-offset: 3px;
  border-radius: 3px;
}
 
/* --- Respect de prefers-reduced-motion ---
   Sans cette règle, les animations d'apparition et de parallaxe peuvent
   provoquer une gêne physique chez les personnes sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}
 
/* --- Impression --- */
@media print {
  #cc-header, #cc-floatcta, #cc-floatcta-m, video { display: none !important; }
}