/* ============================================================
   Divinemenciel — Base globale du design system
   Réutilisée sur toutes les pages (header, footer, contenus).
   S'appuie sur les tokens (assets/css/tokens.css), chargés avant ce fichier.
   ============================================================ */

   :root {
    /* Graisses "texte courant" / "titres & labels" de DM Sans variable,
       utilisées un peu partout dans la maquette d'origine. */
    --w-thin: 270;
    --w-strong: 330;
  
    /* Gouttières de mise en page (reprises de la maquette Figma/WMA) */
    --gutter: 24px;
    --gap: 21px;
  }
  
  *, *::before, *::after { box-sizing: border-box; }
  
  html { scroll-behavior: smooth; }
  
  body {
    margin: 0;
    background: var(--blanc-amande);
    color: var(--vert-olive);
    font-family: var(--font-text);
    font-weight: var(--w-thin);
  }
  
  a { color: inherit; text-decoration: none; }
  ul { list-style: none; margin: 0; padding: 0; }
  img, svg { max-width: 100%; display: block; -webkit-user-drag: none; user-select: none; }
  button { font: inherit; }
  
  /* ——— Conteneur pleine largeur, gouttières responsives ——— */
  .container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    box-sizing: border-box;
  }
  
  /* ============================================================
     Composant bouton — équivalent CSS du composant React <Button>/<HoverButton>
     du design system. Combiner une classe de couleur + éventuellement
     une classe de survol : ex. class="btn btn--sm btn--vert-olive btn--hover-vert-pesto"
     ============================================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    border-radius: var(--radius-pill);
    border: 1.5px solid transparent;
    cursor: pointer;
    background: var(--btn-bg, var(--vert-olive));
    color: var(--btn-text, var(--jaune-mousse));
    transition: background 180ms ease, color 180ms ease, transform 120ms ease;
  }
  .btn:hover {
    background: var(--btn-hover-bg, var(--btn-bg, var(--vert-olive)));
    color: var(--btn-hover-text, var(--btn-text, var(--jaune-mousse)));
  }
  .btn--sm { padding: 8px 18px; font-size: 14px; }
  .btn--lg { padding: 16px 34px; font-size: 18px; }
  
  /* Couleurs de base (fond au repos) */
  .btn--vert-olive   { --btn-bg: var(--vert-olive);   --btn-text: var(--jaune-mousse); }
  .btn--vert-pesto   { --btn-bg: var(--vert-pesto);   --btn-text: var(--blanc-casse); }
  .btn--orange       { --btn-bg: var(--orange-patate);--btn-text: var(--blanc-casse); }
  .btn--rose-sorbet  { --btn-bg: var(--rose-sorbet);  --btn-text: var(--blanc); }
  .btn--jaune-mousse { --btn-bg: var(--jaune-mousse); --btn-text: var(--vert-olive); }
  
  /* Couleurs de survol (à combiner avec une classe .btn--hover-*) */
  .btn--hover-vert-olive:hover   { --btn-hover-bg: var(--vert-olive);   --btn-hover-text: var(--jaune-mousse); }
  .btn--hover-vert-pesto:hover   { --btn-hover-bg: var(--vert-pesto);   --btn-hover-text: var(--blanc-casse); }
  .btn--hover-orange:hover       { --btn-hover-bg: var(--orange-patate); --btn-hover-text: var(--blanc-casse); }
  .btn--hover-rose-sorbet:hover  { --btn-hover-bg: var(--rose-sorbet);  --btn-hover-text: var(--blanc); }
  .btn--hover-jaune-mousse:hover { --btn-hover-bg: var(--jaune-mousse); --btn-hover-text: var(--vert-olive); }
  
  /* ============================================================
     Toggle de langue FR/EN (bouton pilule, présent dans le header)
     ============================================================ */
  .lang-toggle {
    display: inline-block;
    text-decoration: none;
    appearance: none;
    background: transparent;
    border: 1.4px solid currentColor;
    border-radius: var(--radius-pill);
    padding: 9px 13px;
    font-family: var(--font-text);
    font-weight: var(--w-strong);
    font-size: 13px;
    letter-spacing: 0.07em;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  }
  .lang-toggle:hover {
    background: var(--vert-olive);
    border-color: var(--vert-olive);
    color: var(--jaune-mousse);
  }
  
  /* Pastille métier : seul tag du site, cliquable vers la page du pôle */
  .metier-pastille { display: inline-flex; letter-spacing: 0; transition: transform 160ms ease, opacity 160ms ease; }
  .metier-pastille:hover { transform: translateY(-1px); opacity: 0.9; }
  
  /* ============================================================
     Pop-up d'inscription newsletter (Food'letter / Press'letter)
     ============================================================ */
  .nl-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(26, 58, 43, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .nl-modal-overlay[hidden] { display: none; }
  .nl-modal {
    position: relative;
    background: var(--blanc-amande);
    border-radius: 24px;
    width: min(560px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: clamp(28px, 4vw, 48px);
    box-sizing: border-box;
  }
  .nl-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: color-mix(in srgb, var(--vert-olive) 10%, transparent);
    color: var(--vert-olive);
    cursor: pointer;
    transition: background 150ms ease;
  }
  .nl-modal-close:hover { background: color-mix(in srgb, var(--vert-olive) 18%, transparent); }
  .nl-modal-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 32px);
    color: var(--vert-olive);
    margin: 0;
    padding-right: 40px;
  }
  .nl-modal-body { font-family: var(--font-text); color: var(--vert-olive); }
  .nl-modal-body iframe { width: 100% !important; height: var(--nl-iframe-h, 720px) !important; max-width: 100%; border: 0; display: block; }
  .nl-modal-body img, .nl-modal-body video, .nl-modal-body table, .nl-modal-body form { max-width: 100%; }
  .nl-modal-body * { box-sizing: border-box; }
  @media (max-width: 640px) {
    .nl-modal-body iframe { height: 78vh !important; }
  }
  .nl-modal-placeholder { font-size: 15px; line-height: 1.5; opacity: 0.8; }
  
  /* Étiquette + puce colorée au-dessus d'un titre de section */
  .label-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-text);
    font-size: var(--text-small);
    font-weight: var(--w-strong);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin-bottom: 26px;
  }
  .label-row.dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dot-c, var(--vert-pesto));
  }
  
  /* Accent italic au fil du texte (mot-clé coloré, ex. dans "Contactez-nous.") */
  .t-acc {
    font-family: var(--font-display);
    font-style: italic;
  }
  
  /* ============================================================
     Apparition douce au scroll — poser class="rv" sur un bloc,
     reveal.js ajoute "rv-in" quand il entre dans le viewport.
     ============================================================ */
  @media (prefers-reduced-motion: no-preference) {
    .rv {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .rv.rv-in {
      opacity: 1;
      transform: translateY(0);
    }
  }