/* ================================================================
   joshuanutrition.fr — FEUILLE DE STYLE COMMUNE
   ----------------------------------------------------------------
   Source unique de l'identité visuelle. Avant ce fichier, chaque
   page portait sa propre copie du style : 95 pages, 748 Ko de CSS
   dupliqué, et des valeurs qui avaient divergé (--ink existait en
   4 versions, --muted en 5, --line en 5).

   Les valeurs retenues ici sont celles qui dominaient déjà le site,
   entre 72 et 85 pages sur 95. Rien n'est inventé, tout est unifié.

   PARTI PRIS : réduction. On retire ce qui faisait "gabarit" sans
   rien apporter — texture de fond, dégradés, flou d'arrière-plan,
   soulèvement au survol — et on ramène huit rayons d'angle à trois.
   Ce qui reste est la typographie, l'espace et un seul accent.

   Une page peut toujours ajouter ses propres règles après ce
   fichier. Elle ne doit jamais redéclarer un jeton de couleur.
   ================================================================ */

/* ---------------- JETONS ---------------- */
:root{
  /* Encres */
  --ink:      #1A2233;
  --ink-2:    #2C3548;
  --muted:    #565C6E;
  --muted-2:  #9A9DA8;

  /* Fonds */
  --warm:     #FFFAF5;
  --paper:    #FBF8F2;
  --bone:     #F3EEE5;

  /* Accent, l'unique */
  --clay:     #B85638;
  --clay-2:   #C97A5E;
  --clay-pale:rgba(184,86,56,.08);

  /* Sémantique, pour les états FODMAP */
  --vert:     #4F7355;
  --vert-bg:  #EDF3EE;
  --ambre:    #9A6B1E;
  --ambre-bg: #FBF3E4;

  /* Traits */
  --line:      rgba(26,34,51,.13);
  --line-soft: rgba(26,34,51,.07);

  /* Rayons : trois, plus huit */
  --r-s:    10px;
  --r-m:    16px;
  --r-pill: 999px;

  /* Rythme vertical */
  --sp-1: 8px;  --sp-2: 14px; --sp-3: 22px;
  --sp-4: 34px; --sp-5: 52px; --sp-6: 78px;

  --display: 'Piazzolla', Georgia, serif;
  --body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --ease:    cubic-bezier(.16,1,.3,1);

  color-scheme: only light;
}

/* ---------------- BASE ---------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  background: var(--warm);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-top: 88px;
}

body{
  font-family: var(--body);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Texture de fond : la signature visuelle du site, conservée.
   Voile crème par-dessus pour que le texte reste parfaitement lisible. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(rgba(255,250,245,.62), rgba(255,250,245,.62)),
    url("/website-texture.jpg") center / cover no-repeat;
}

::selection{ background: var(--clay); color: var(--paper) }
a{ color: var(--clay) }
img{ max-width:100%; height:auto }
:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; border-radius:3px }

.serif{ font-family: var(--display) }

/* ---------------- TYPOGRAPHIE ---------------- */
h1,h2,h3{ font-family: var(--display); font-weight:400; line-height:1.12; letter-spacing:-.015em; color:var(--ink) }
h1{ font-size: clamp(32px, 5vw, 50px) }
h2{ font-size: clamp(24px, 3.3vw, 34px); margin: var(--sp-5) 0 var(--sp-2) }
h3{ font-size: clamp(19px, 2.2vw, 23px); margin: var(--sp-4) 0 var(--sp-1) }
h1 em, h2 em{ font-style:italic; color:var(--clay) }

p{ margin: 0 0 var(--sp-3); color: var(--ink-2) }
strong{ color: var(--ink); font-weight:600 }

.lead{ font-size: clamp(17px,2vw,20px); color:var(--ink-2); line-height:1.6; font-weight:300 }

/* Étiquette de section. Discrète : plus de majuscules très espacées,
   qui étaient le marqueur le plus reconnaissable du gabarit. */
.eyebrow{
  display:inline-block; font-size:13px; font-weight:600;
  letter-spacing:.02em; color:var(--clay);
}

/* Listes d'articles : puce dessinée plutôt que caractère */
article ul{ list-style:none; margin:0 0 var(--sp-3) }
article li{ position:relative; padding-left:22px; margin-bottom:10px; color:var(--ink-2) }
article li::before{
  content:''; position:absolute; left:0; top:12px;
  width:9px; height:1.5px; background:var(--clay); border-radius:1px;
}

/* ---------------- MISE EN PAGE ---------------- */
.wrap{ max-width:1080px; margin:0 auto; padding:0 28px }
.wrap-narrow{ max-width:720px; margin:0 auto; padding:0 28px }

/* ---------------- NAVIGATION ---------------- */
nav{
  position:sticky; top:0; z-index:60;
  background: var(--warm);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{
  max-width:1080px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.nav-brand{ font-family:var(--display); font-size:20px; color:var(--ink); text-decoration:none }
.nav-brand i{ font-style:italic; color:var(--clay) }
.nav-cta{
  font-size:13.5px; font-weight:600; color:var(--paper); background:var(--clay);
  padding:10px 20px; border-radius:var(--r-pill); text-decoration:none;
  transition: background .18s var(--ease);
}
.nav-cta:hover{ background:var(--ink) }

/* ---------------- COMPOSANTS ---------------- */

/* Carte : bordure franche, pas d'ombre ni de soulèvement */
.card{
  display:block; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-m); padding:22px 24px; text-decoration:none; color:inherit;
  transition: border-color .18s var(--ease);
}
.card:hover{ border-color:var(--clay) }
.card-t{ font-family:var(--display); font-size:19px; color:var(--ink); line-height:1.3; margin-bottom:7px }
.card-d{ font-size:14.5px; color:var(--muted); line-height:1.55 }

/* Encadré. Le filet vertical coloré est remplacé par un cadre
   discret : moins connoté, et lisible à l'impression. */
.note{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-s); padding:18px 22px; margin:var(--sp-4) 0;
  font-size:15.5px; color:var(--muted); line-height:1.65;
}
.note strong{ color:var(--ink) }

.alert{
  background:var(--ambre-bg); border:1px solid rgba(154,107,30,.24);
  border-radius:var(--r-s); padding:18px 22px; margin:var(--sp-4) 0;
  font-size:15.5px; color:var(--ambre); line-height:1.65;
}
.alert strong{ color:#7A5416 }

/* Appel à l'action. Aplat d'encre au lieu du dégradé. */
.cta{
  background:var(--ink); border-radius:var(--r-m);
  padding:34px 32px; margin:var(--sp-5) 0 0; color:var(--paper);
}
.cta-k{ font-size:13px; font-weight:600; color:var(--clay-2); letter-spacing:.02em }
.cta h3{ font-family:var(--display); font-size:25px; color:var(--paper); margin:10px 0 12px }
.cta p{ color:rgba(243,238,229,.76); font-size:15.5px; margin-bottom:22px; font-weight:300; max-width:58ch }
.cta-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:14px; color:var(--paper); background:var(--clay);
  padding:13px 26px; border-radius:var(--r-pill); text-decoration:none;
  transition: background .18s var(--ease);
}
.cta-btn:hover{ background:var(--clay-2) }

/* Bloc auteur */
.author{ display:flex; gap:18px; align-items:center; border-top:1px solid var(--line); padding:26px 0 6px; margin-top:var(--sp-5) }
.author img{ width:62px; height:62px; border-radius:50%; object-fit:cover }
.author-t{ font-family:var(--display); font-size:18px }
.author-d{ font-size:13.5px; color:var(--muted); margin-top:3px; line-height:1.5 }

/* Icônes dessinées : trait constant, jamais de glyphe typographique */
.ico{ width:18px; height:18px; display:block; flex:none }

/* ---------------- PIED DE PAGE ---------------- */
footer{ background:var(--ink); color:var(--paper); padding:40px 0 34px; margin-top:var(--sp-6) }
.foot-in{
  max-width:1080px; margin:0 auto; padding:0 28px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.foot-in a{ color:rgba(243,238,229,.82); text-decoration:none; font-size:13.5px }
.foot-in a:hover{ color:var(--paper) }
.foot-rpps{ font-size:11.5px; color:rgba(243,238,229,.45) }

/* ---------------- ADAPTATIF ---------------- */
@media (max-width:600px){
  body{ font-size:16px }
  .wrap,.wrap-narrow,.nav-in,.foot-in{ padding-left:20px; padding-right:20px }
  .nav-cta{ display:none }
  .cta{ padding:28px 22px }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
}

/* ---------------- IMPRESSION ---------------- */
@media print{
  nav,footer,.cta,.nav-cta{ display:none }
  html,body{ background:#fff; font-size:11pt }
  .note,.alert{ border:1px solid #ccc }
}