/* =====================================================================
   LES 4 PÉPINS — jetons de design + surcharge Bootstrap 5.3
   Chargé APRÈS bootstrap.min.css : tout ce qui est ici gagne.
   ===================================================================== */
:root{
  /* --- Couleurs — chacune dérivée d'une source réelle du projet --- */
  --couleur-ecorce:   #4A2B1C; /* le brun du badge gravé sur bois (couleur existante) */
  --couleur-labour:   #26190F; /* terre limoneuse retournée, humide */
  --couleur-craie:    #ECE4D2; /* craie au soleil — chaude, plus grise du tout */
  --couleur-limon:    #9C8E7A; /* limon sec en surface — bordures et fil uniquement */
  --couleur-limon-ombre: #6C5F4E; /* limon assombri pour les petits textes (contraste AA) */
  --couleur-feuille:  #3E7031; /* feuille de pommier en juin — le vivant : liens, actions */
  --couleur-rambour:  #B5382E; /* rouge de pomme mûre — le fruit : variétés, récolte */
  --couleur-novembre: #C68A1D; /* jaune de pomme d'août — les dates, rien d'autre */

  /* Teintes pâles — les fonds de cagette */
  --couleur-feuille-pale:  #DCE7D0;
  --couleur-rambour-pale:  #F2DCD4;
  --couleur-novembre-pale: #F4E6C3;

  /* --- Typographie --- */
  --police-display: "Grandstander", "Arial Rounded MT Bold", sans-serif;
  --police-body:    "Public Sans", system-ui, sans-serif;

  /* Échelle — base 17px, ratio 1,25, un saut assumé pour le titre 1 */
  --texte-petit:  0.8125rem;
  --texte-base:   1.0625rem;
  --texte-grand:  1.3125rem;
  --titre-3:      1.625rem;
  --titre-2:      2.25rem;
  --titre-1:      clamp(2.5rem, 6vw, 4.25rem);

  /* --- Espacement — base 8px, suite non linéaire, les grands vides comptent --- */
  --espace-1: 8px;
  --espace-2: 16px;
  --espace-3: 24px;
  --espace-4: 40px;
  --espace-5: 64px;
  --espace-6: 104px;

  /* --- Divers --- */
  --rayon: 8px;
  --rayon-pilule: 999px;
  --mesure-lecture: 68ch;
  --largeur-page: 1080px;

  /* --- Raccordement à Bootstrap : on réécrit ses propres variables --- */
  --bs-body-bg: var(--couleur-craie);
  --bs-body-color: var(--couleur-labour);
  --bs-body-font-family: var(--police-body);
  --bs-body-font-size: var(--texte-base);
  --bs-body-line-height: 1.6;
  --bs-link-color: var(--couleur-feuille);
  --bs-link-hover-color: var(--couleur-labour);
  --bs-link-color-rgb: 62, 112, 49;
  --bs-link-hover-color-rgb: 38, 25, 15;
  --bs-border-color: var(--couleur-limon);
  --bs-border-radius: var(--rayon);
  --bs-emphasis-color: var(--couleur-ecorce);
  --bs-secondary-color: var(--couleur-limon-ombre);
  --bs-gutter-x: var(--espace-3);
  --bs-focus-ring-color: rgba(62, 112, 49, .35);
}

/* La maquette est calée sur 1080 px : on impose cette largeur au conteneur
   Bootstrap tout en gardant ses paliers de padding responsives. */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
  max-width: var(--largeur-page);
  padding-inline: var(--espace-3);
}

/* =====================================================================
   Socle
   ===================================================================== */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}
body{
  background:var(--couleur-craie);
  color:var(--couleur-labour);
  font-family:var(--police-body);
  font-size:var(--texte-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:var(--couleur-feuille); text-underline-offset:3px; }
a:hover{ color:var(--couleur-labour); }
:focus-visible{
  outline:2px solid var(--couleur-feuille);
  outline-offset:3px;
  border-radius:var(--rayon);
}
h1,h2,h3{ margin:0; font-family:var(--police-display); font-weight:800; line-height:1.08; letter-spacing:-0.01em; }
p{ margin:0 0 var(--espace-2); }

.colonne-lecture{ max-width:var(--mesure-lecture); }

/* Accès rapide clavier */
.evitement{
  position:absolute; left:-9999px; top:0;
  background:var(--couleur-labour); color:var(--couleur-craie);
  padding:var(--espace-1) var(--espace-2); z-index:1080;
}
.evitement:focus{ left:var(--espace-2); }

/* =====================================================================
   En-tête — navbar Bootstrap habillée aux couleurs du verger
   Le menu burger apparaît sous 992 px : c'est ce que la maquette n'avait pas.
   ===================================================================== */
.entete{ padding-block:var(--espace-2); background:var(--couleur-novembre-pale); }
/* Le bandeau contient entièrement le badge : pas de débordement, et les
   liens se calent sur son axe vertical. */
.entete .navbar{ padding:0; align-items:center; }
.entete__marque{
  display:flex; align-items:center; gap:var(--espace-2);
  text-decoration:none; color:var(--couleur-ecorce);
  font-family:var(--police-display); font-weight:900;
  font-size:var(--texte-grand); letter-spacing:0.02em;
  margin:0; padding:0;
}
.entete__marque img{ width:120px; height:120px; object-fit:contain; }
.entete__marque:hover{ color:var(--couleur-feuille); }

.entete__bascule{
  border:2px solid var(--couleur-ecorce);
  border-radius:var(--rayon);
  padding:6px 10px;
  color:var(--couleur-ecorce);
}
.entete__bascule:focus{ box-shadow:none; outline:2px solid var(--couleur-feuille); outline-offset:2px; }
.entete__bascule .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%234A2B1C' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width:1.4em; height:1.4em;
}

.entete__nav{ gap:var(--espace-3); align-items:center; }
.entete__nav .nav-link,
.entete__nav a{
  font-family:var(--police-display); font-weight:700; font-size:var(--texte-base);
  color:var(--couleur-labour); text-decoration:none;
  padding:0;
}
.entete__nav .nav-link:hover{ color:var(--couleur-feuille); text-decoration:underline; }
/* page courante : WordPress pose .current-menu-item / .current_page_parent */
.entete__nav .current-menu-item > .nav-link,
.entete__nav .current_page_item > .nav-link,
.entete__nav .current-menu-ancestor > .nav-link,
.entete__nav .current_page_parent > .nav-link,
.entete__nav .nav-link[aria-current="page"]{
  color:var(--couleur-feuille);
  border-bottom:3px solid var(--couleur-feuille);
  padding-bottom:2px;
}
/* replié en burger : on aère la liste et on décolle du badge */
@media (max-width: 991.98px){
  .entete__nav{ gap:var(--espace-2); padding-block:var(--espace-3) var(--espace-2); }
  .entete .navbar-collapse{ flex-basis:100%; }
  .entete__nav .nav-link{ display:inline-block; }
  .entete__marque img{ width:96px; height:96px; }
}
@media (max-width: 480px){
  .entete__marque img{ width:88px; height:88px; }
}

/* =====================================================================
   Photos — soit la vraie image, soit l'aplat honnête de la maquette
   avec la légende de la photo attendue tant qu'elle n'est pas fournie.
   ===================================================================== */
.photo{
  margin:0;
  border-radius:var(--rayon);
  overflow:hidden;
}
.photo--vide{
  background:color-mix(in srgb, var(--couleur-craie), var(--couleur-limon) 28%);
  border:1.5px solid var(--couleur-limon);
  display:grid; place-items:center;
  padding:var(--espace-3);
  text-align:center;
}
.photo--vide figcaption, .photo--vide span{
  font-family:var(--police-body);
  font-size:var(--texte-petit);
  color:var(--couleur-labour);
  max-width:36ch;
}
.photo--pleine-image img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:var(--rayon);
}
.photo--pleine-image figcaption{
  font-size:var(--texte-petit);
  color:var(--couleur-limon-ombre);
  padding-top:var(--espace-1);
}
/* Le héros ne doit jamais manger tout l'écran : sur un portable, un ratio
   fixe poussait le titre sous la ligne de flottaison et la page semblait
   vide. On plafonne donc sa hauteur d'après celle de la fenêtre. */
.photo--hero{ aspect-ratio:16/8; max-height:clamp(200px, 46vh, 520px); }
.photo--paysage{ aspect-ratio:4/3; }
.photo--portrait{ aspect-ratio:4/5; }
.photo--pleine{ aspect-ratio:16/7; }
/* quand une légende accompagne une vraie image, le ratio ne doit porter que sur l'image */
.photo--pleine-image.photo--hero,
.photo--pleine-image.photo--paysage,
.photo--pleine-image.photo--portrait,
.photo--pleine-image.photo--pleine{ aspect-ratio:auto; }
.photo--pleine-image.photo--hero img{
  aspect-ratio:16/8;
  max-height:clamp(200px, 46vh, 520px);
  object-fit:cover;
}
.photo--pleine-image.photo--paysage img{ aspect-ratio:4/3; }
.photo--pleine-image.photo--portrait img{ aspect-ratio:4/5; }
.photo--pleine-image.photo--pleine img{ aspect-ratio:16/7; }

/* =====================================================================
   LE FIL DE CONDUITE — élément signature
   Un seul fil traverse le site. Chaque chose qui s'y attache est une
   date vraie. Pas de date, pas de lien.
   ===================================================================== */
.fil{
  position:relative;
  padding-block:var(--espace-4) var(--espace-2);
  margin-block:var(--espace-5);
}
/* Une vraie branche, pas un trait : le motif se répète horizontalement,
   donc il reste net du téléphone au grand écran. Le bois se trouve à
   mi-hauteur du motif, à 27 px du haut. */
.fil__ligne{
  position:relative;
  height:56px;
}

/* =====================================================================
   LA BRANCHE — un seul tracé sur toute la largeur, jamais un motif répété.
   ===================================================================== */
.branche{ position:absolute; inset:0; }
/* Le bois s'étire en largeur mais sa hauteur reste à l'échelle 1 :
   l'épaisseur du bois ne se déforme donc jamais. */
.branche__bois{ display:block; width:100%; height:56px; }
.branche__bois path{ fill:var(--couleur-ecorce); }

/* Chaque brindille est posée au pourcentage : elle suit la branche quand la
   fenêtre change de largeur, au lieu de glisser le long. Sa taille, elle,
   reste en pixels — une feuille ne s'aplatit pas. */
.branche__brindille{
  position:absolute;
  top:30px;                 /* l'axe du bois */
  width:46px; height:40px;
  margin-left:-4px;         /* la base du rameau est en (4, 36) du dessin */
  margin-top:-36px;
  transform-origin:4px 36px;
  transform:rotate(var(--rot)) scale(calc(var(--ech) * var(--densite, 1))) scaleX(var(--miroir));
}
.branche__brindille--bas{
  transform:rotate(var(--rot)) scale(calc(var(--ech) * var(--densite, 1))) scaleX(var(--miroir)) scaleY(-1);
}

/* Densité des brindilles selon la place disponible : sur un téléphone,
   treize rameaux dans 340 px se chevauchent et la branche devient un
   buisson. On n'en garde que quatre, un peu plus petits. */
.branche__brindille--n2,
.branche__brindille--n3{ display:none; }
@media (max-width: 575.98px){
  .branche{ --densite:.78; }
}
@media (min-width: 576px){
  .branche__brindille--n2{ display:block; }
}
@media (min-width: 992px){
  .branche__brindille--n3{ display:block; }
}
.brindille{ width:46px; height:40px; overflow:visible; }
.brindille__rameau{
  fill:none; stroke:var(--couleur-ecorce);
  stroke-width:2.1; stroke-linecap:round;
}
.brindille__rameau--fine{ stroke-width:1.4; }
.brindille__limbe{ fill:var(--couleur-feuille); }
.brindille__nervure{
  fill:none; stroke:#2C5222;
  stroke-width:.85; stroke-linecap:round; opacity:.75;
}
/* Sur un rameau retourné, la feuille se retrouverait à l'envers : on la
   remet d'aplomb. */
.branche__brindille--bas .brindille__limbe,
.branche__brindille--bas .brindille__nervure{ transform-box:fill-box; }
/* Les autres étapes : un bourgeon pas encore ouvert, avec sa jeune feuille.
   Bourgeon et feuille sont posés au pourcentage de l'étape — ils suivent la
   branche quelle que soit la largeur de la fenêtre. */
.fil__tique{
  position:absolute; top:25px; left:var(--t);
  width:11px; height:11px; margin-left:-5.5px;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:color-mix(in srgb, var(--couleur-craie), var(--couleur-limon) 50%);
  border:1.5px solid var(--couleur-ecorce);
}
/* la branche s'achève en pointe — la récolte est devant nous */
.fil--fleche .fil__ligne::after{
  content:""; position:absolute; right:-1px; top:24px;
  border-left:12px solid var(--couleur-ecorce);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}
/* =====================================================================
   LA POMME — le repère qui marque une date sur le fil.
   Pâle pour ce qui est derrière ou devant, rouge pour maintenant.
   ===================================================================== */
.pomme{
  width:40px; height:40px; overflow:visible;
  --pomme-chair:  color-mix(in srgb, var(--couleur-craie), var(--couleur-limon) 55%);
  --pomme-trait:  var(--couleur-limon-ombre);
  --pomme-feuille:var(--couleur-limon-ombre);
}
.pomme__corps{
  fill:var(--pomme-chair);
  stroke:var(--pomme-trait);
  stroke-width:1.6;
  stroke-linejoin:round;
}
.pomme__tige{
  stroke:var(--pomme-trait); stroke-width:2; stroke-linecap:round; fill:none;
}
.pomme__feuille{ fill:var(--pomme-feuille); }

/* La pomme mûre : c'est maintenant. */
.pomme--mure{
  --pomme-chair:  var(--couleur-rambour);
  --pomme-trait:  color-mix(in srgb, var(--couleur-rambour), var(--couleur-labour) 35%);
  --pomme-feuille:var(--couleur-feuille);
}

/* La pomme est centrée sur la branche : le bois passe au milieu du fruit.
   +5 px = 30 (axe du bois) − 24,7 (centre du fruit dans son SVG). */
.fil__attache{
  position:absolute; top:5px; left:var(--pos);
  transform:translateX(-50%);
  z-index:2;
}
.fil__attache--courante .pomme{
  --pomme-chair:  var(--couleur-rambour);
  --pomme-trait:  color-mix(in srgb, var(--couleur-rambour), var(--couleur-labour) 35%);
  --pomme-feuille:var(--couleur-feuille);
}
.fil__legende{
  margin:var(--espace-2) 0 0;
  margin-left:max(0px, min(calc(var(--pos) - 6ch), calc(100% - 26ch)));
  font-family:var(--police-body);
  font-size:var(--texte-petit);
}
.fil__legende time, .journal time{
  display:inline-block;
  background:var(--couleur-novembre-pale);
  border:1.5px solid var(--couleur-novembre);
  border-radius:var(--rayon-pilule);
  padding:1px 12px;
  font-weight:600; color:var(--couleur-labour);
}
.fil__legende .etape{ color:var(--couleur-limon-ombre); }
.fil__legende .courante{
  color:var(--couleur-labour);
  border-bottom:3px solid var(--couleur-rambour);
  padding-bottom:1px;
  font-style:normal;
}
/* la pomme apparaît quand le fil entre à l'écran — coupé si mouvement
   réduit ou sans JS */
html.js .fil__attache .pomme{
  opacity:0; transform:scale(.55);
  transform-origin:50% 70%;
  transition:opacity .4s ease .1s, transform .5s cubic-bezier(.34,1.56,.64,1) .1s;
}
html.js .fil--vu .fil__attache .pomme{ opacity:1; transform:scale(1); }
@media (prefers-reduced-motion: reduce){
  html.js .fil__attache .pomme{ opacity:1; transform:none; }
}

/* Variante cycle annuel : le même fil, autre information */
.cycle{
  list-style:none; margin:var(--espace-4) 0 0; padding:0;
  position:relative;
  display:flex; justify-content:space-between;
  min-width:560px;
}
/* La même branche, remontée de 5 px pour passer au centre des pommes.
   Ici le fruit reste dans le flux : ce sont ses libellés qui se calent
   dessous, on ne peut donc pas le déplacer sans les emmener avec lui. */
/* Sélecteur volontairement plus spécifique que « .cycle li », qui suit et
   réimposerait sinon position:relative et flex:1 à la branche. */
.cycle li.cycle__branche{
  position:absolute; left:0; right:0; top:-5px;
  height:56px; flex:none; list-style:none;
  text-align:left;
}
.defileur{ overflow-x:auto; padding-bottom:var(--espace-1); }
.cycle li{
  position:relative; text-align:center;
  font-family:var(--police-body); font-size:var(--texte-petit);
  flex:1;
}
.cycle li .pomme{ margin:0 auto 6px; }
.cycle .quoi{ display:block; color:var(--couleur-labour); font-weight:500; }
.cycle .quand{ display:block; color:var(--couleur-limon-ombre); }
/* maintenant, et la récolte : pomme mûre */
.cycle li.courante .pomme,
.cycle li.recolte .pomme{
  --pomme-chair:  var(--couleur-rambour);
  --pomme-trait:  color-mix(in srgb, var(--couleur-rambour), var(--couleur-labour) 35%);
  --pomme-feuille:var(--couleur-feuille);
}
.cycle li.courante .quoi{ display:inline-block; border-bottom:3px solid var(--couleur-rambour); }
/* les pommes de la frise mûrissent de gauche à droite */
html.js .cycle .pomme{
  opacity:0; transform:scale(.55);
  transform-origin:50% 70%;
  transition:opacity .4s ease calc(.1s + var(--i, 0) * .09s),
             transform .5s cubic-bezier(.34,1.56,.64,1) calc(.1s + var(--i, 0) * .09s);
}
html.js .cycle.fil--vu .pomme{ opacity:1; transform:scale(1); }
@media (prefers-reduced-motion: reduce){
  html.js .cycle .pomme{ opacity:1; transform:none; }
}

/* =====================================================================
   Sections
   ===================================================================== */
.section{ padding-block:var(--espace-2); }
.section__titre{
  font-size:var(--titre-2);
  color:var(--couleur-ecorce);
  margin-bottom:var(--espace-3);
}
.section__sur-titre{
  font-family:var(--police-display); font-weight:700; font-size:var(--texte-base);
  color:var(--couleur-feuille);
  margin:0 0 var(--espace-1);
}

/* — Héros — */
.heros{ padding-block:var(--espace-3) var(--espace-5); background:var(--couleur-novembre-pale); }
.heros h1{
  font-size:var(--titre-1);
  font-weight:900;
  color:var(--couleur-ecorce);
  max-width:16ch;
  margin:var(--espace-4) 0 var(--espace-3);
}
.heros .chapo{
  font-size:var(--texte-grand);
  max-width:var(--mesure-lecture);
}

.bouton{
  display:inline-block;
  background:var(--couleur-feuille); color:var(--couleur-craie);
  font-family:var(--police-display); font-weight:700; font-size:var(--texte-base);
  padding:12px 26px; border-radius:var(--rayon-pilule);
  text-decoration:none;
  border:0;
}
.bouton:hover{ background:var(--couleur-labour); color:var(--couleur-craie); }

/* — Les quatre — */
.quatre figure{ margin:0; }
.quatre figcaption{ margin-top:var(--espace-1); }
.quatre .nom{
  display:block; font-family:var(--police-display); font-weight:800;
  font-size:var(--texte-grand); color:var(--couleur-ecorce);
}

/* — Ce qui poussera : étiquettes de pépiniériste — */
.etiquette{
  position:relative;
  height:100%;
  border:2px solid var(--couleur-limon);
  border-radius:var(--rayon);
  padding:var(--espace-3);
  padding-top:var(--espace-4);
  background:var(--couleur-craie);
}
/* la couleur dit le caractère du fruit : soleil d'été, garde de Noël, longue garde */
.etiquette--soleil{ background:var(--couleur-novembre-pale); border-color:var(--couleur-novembre); }
.etiquette--noel{   background:var(--couleur-rambour-pale);  border-color:var(--couleur-rambour); }
.etiquette--garde{  background:var(--couleur-feuille-pale);  border-color:var(--couleur-feuille); }
/* le trou de l'étiquette — celle qu'on accroche à la branche */
.etiquette::before{
  content:""; position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%;
  border:2px solid var(--couleur-limon); background:inherit;
}
.etiquette h3{
  font-size:var(--titre-3); font-weight:900; color:var(--couleur-rambour);
  margin-bottom:var(--espace-1);
}
.etiquette .mesures{
  font-family:var(--police-body); font-size:var(--texte-petit);
  color:var(--couleur-limon-ombre);
  margin-bottom:var(--espace-2);
}
.etiquette .mesures time{ color:var(--couleur-labour); font-weight:500; }
.etiquette p{ margin-bottom:var(--espace-2); font-size:var(--texte-base); }
.etiquette a{ font-family:var(--police-body); font-size:var(--texte-petit); }

#verger{ background:var(--couleur-feuille-pale); padding-block:var(--espace-5); }
#verger .etiquette--garde{ background:var(--couleur-craie); border-color:var(--couleur-feuille); }

/* la boutique vide se date, elle ne s'excuse pas */
.rien-a-vendre{
  margin-top:var(--espace-4);
  max-width:var(--mesure-lecture);
}
.rien-a-vendre p:first-child{
  font-family:var(--police-display); font-weight:800;
  font-size:var(--texte-grand); color:var(--couleur-ecorce);
  margin-bottom:var(--espace-1);
}

/* — Journal — */
.journal{ list-style:none; margin:0; padding:0; max-width:var(--mesure-lecture); }
.journal li{ margin-bottom:var(--espace-4); }
.journal time{ font-size:var(--texte-petit); }
.journal .titre-article{
  display:block; font-weight:600; font-size:var(--texte-grand);
  color:var(--couleur-feuille); text-decoration:underline; text-underline-offset:4px;
  margin:2px 0 4px;
  font-family:var(--police-body);
}
.journal .titre-article:hover{ color:var(--couleur-labour); }
.journal p{ margin:0; color:var(--couleur-labour); }

/* — Pied de page / contact — */
.pied{
  background:var(--couleur-ecorce);
  color:var(--couleur-craie);
  margin-top:var(--espace-6);
  padding-block:var(--espace-5);
}
.pied__badge{
  background:var(--couleur-craie);
  border-radius:50%;
  padding:16px;
  width:152px; height:152px;
}
.pied__badge img{ width:100%; height:100%; object-fit:contain; }
.pied a{ color:var(--couleur-craie); }
.pied a:hover{ color:#fff; }
.pied h2{ font-size:var(--titre-2); color:var(--couleur-craie); margin-bottom:var(--espace-2); }
.pied ul{ list-style:none; margin:0; padding:0; }
.pied li{ margin-bottom:var(--espace-1); }
.pied .mention{
  font-family:var(--police-body); font-size:var(--texte-petit);
  color:color-mix(in srgb, var(--couleur-craie), var(--couleur-ecorce) 20%);
  margin-top:var(--espace-3);
}

/* =====================================================================
   Gabarits secondaires
   ===================================================================== */
.page-en-tete{ padding-block:var(--espace-4) var(--espace-2); }
.page-en-tete h1{ font-size:var(--titre-1); font-weight:900; color:var(--couleur-ecorce); }
.page-en-tete .chapo{ font-size:var(--texte-grand); max-width:var(--mesure-lecture); margin-top:var(--espace-2); }

.porte{
  height:100%;
  border:2px solid var(--couleur-limon); border-radius:var(--rayon);
  padding:var(--espace-3); background:var(--couleur-craie);
}
.porte h3{ font-family:var(--police-display); font-weight:800; font-size:var(--titre-3); color:var(--couleur-ecorce); margin:0 0 var(--espace-1); }
.lien-fleche{
  font-family:var(--police-display); font-weight:700;
  color:var(--couleur-feuille); text-decoration:none;
}
.lien-fleche:hover{ text-decoration:underline; }

/* — Fiche variété — */
.produit{ padding-block:var(--espace-5); }
.retour{
  font-family:var(--police-body); font-size:var(--texte-petit);
  text-decoration:none;
}
.retour:hover{ text-decoration:underline; }
.produit__plaque{ margin-top:var(--espace-4); }
.produit h1{
  font-size:var(--titre-1); font-weight:900;
  color:var(--couleur-rambour);
}
.produit .sous-nom{
  font-family:var(--police-display); font-weight:800;
  font-size:var(--texte-grand); color:var(--couleur-limon-ombre);
  margin:var(--espace-1) 0 var(--espace-3);
}
.produit .mesures{
  font-family:var(--police-body); font-size:var(--texte-petit);
  color:var(--couleur-limon-ombre);
  margin-bottom:var(--espace-3);
  display:flex; flex-wrap:wrap; gap:var(--espace-1) var(--espace-3);
}
.produit .mesures time, .produit .mesures b{ color:var(--couleur-labour); font-weight:500; }

/* — Article du journal — */
.article{ padding-block:var(--espace-5); }
.article h1{
  font-size:var(--titre-2);
  color:var(--couleur-ecorce);
  max-width:24ch;
  margin-bottom:var(--espace-4);
}
.article .colonne-lecture p{ margin-bottom:var(--espace-3); }
.article .photo{ margin-block:var(--espace-4); }
.article .colonne-lecture h2{ font-size:var(--titre-3); color:var(--couleur-ecorce); margin:var(--espace-4) 0 var(--espace-2); }
.article .colonne-lecture h3{ font-size:var(--texte-grand); color:var(--couleur-ecorce); margin:var(--espace-3) 0 var(--espace-1); }
.article .colonne-lecture ul,
.article .colonne-lecture ol{ margin:0 0 var(--espace-3); padding-left:var(--espace-3); }
.article .colonne-lecture blockquote{
  margin:var(--espace-3) 0;
  padding-left:var(--espace-3);
  border-left:3px solid var(--couleur-novembre);
  color:var(--couleur-limon-ombre);
}
.article .colonne-lecture img{ border-radius:var(--rayon); margin-block:var(--espace-3); }

.pagination-4p{
  display:flex; justify-content:space-between; gap:var(--espace-3);
  margin-top:var(--espace-5); flex-wrap:wrap;
}
.pagination-4p a{
  font-family:var(--police-body); font-size:var(--texte-petit);
  text-decoration:none;
}
.pagination-4p a:hover{ text-decoration:underline; }
.pagination-4p .sens{ display:block; color:var(--couleur-limon-ombre); }

/* Pagination d'archive (Bootstrap habillé) */
.pagination-liste{ display:flex; gap:var(--espace-1); list-style:none; padding:0; margin:var(--espace-5) 0 0; flex-wrap:wrap; }
.pagination-liste a,
.pagination-liste span{
  display:inline-block;
  font-family:var(--police-display); font-weight:700; font-size:var(--texte-petit);
  padding:6px 14px; border-radius:var(--rayon-pilule);
  border:1.5px solid var(--couleur-limon);
  text-decoration:none; color:var(--couleur-labour);
}
.pagination-liste .courante{
  background:var(--couleur-novembre-pale);
  border-color:var(--couleur-novembre);
}

/* — Contenu libre d'une page classique (éditeur WordPress) — */
.contenu-libre h2{ font-size:var(--titre-2); color:var(--couleur-ecorce); margin:var(--espace-4) 0 var(--espace-2); }
.contenu-libre h3{ font-size:var(--titre-3); color:var(--couleur-ecorce); margin:var(--espace-3) 0 var(--espace-1); }
.contenu-libre img{ border-radius:var(--rayon); }
.contenu-libre ul, .contenu-libre ol{ padding-left:var(--espace-3); margin-bottom:var(--espace-3); }

/* — Message quand un contenu manque (visible seulement pour les admins) — */
.note-admin{
  border:2px dashed var(--couleur-rambour);
  background:var(--couleur-rambour-pale);
  border-radius:var(--rayon);
  padding:var(--espace-2) var(--espace-3);
  font-size:var(--texte-petit);
  margin-block:var(--espace-3);
}
.note-admin strong{ color:var(--couleur-rambour); }

/* =====================================================================
   Ajustements responsives complémentaires à Bootstrap
   ===================================================================== */
@media (max-width: 480px){
  :root{
    --titre-2: 1.75rem;
    --espace-5: 48px;
    --espace-6: 72px;
  }
  .fil{ margin-block:var(--espace-4); }
  .pied__badge{ width:120px; height:120px; padding:12px; }
}