/* ==========================================================================
   Alimentation Plaisir · Système de styles des maquettes (7 pages)
   Charte : Guide de positionnement Nathalie Anciaux-Matthews
   Fond blanc dominant · verts en accents · jaune en détails · Montserrat
   Rumble (patchée accents) réservée aux titres identitaires
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/montserrat-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+20AC; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/montserrat-400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA; }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/montserrat-400i-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+2013-2014,U+2018-2019,U+201C-201D,U+2022; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/montserrat-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+2013-2014,U+2018-2019,U+201C-201D,U+2022; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/montserrat-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+2013-2014,U+2018-2019,U+201C-201D,U+2022; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/montserrat-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+2013-2014,U+2018-2019,U+201C-201D,U+2022; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/montserrat-800-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+2013-2014,U+2018-2019,U+201C-201D,U+2022; }
@font-face { font-family:'Rumble'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/rumble-patched.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root{
  --blanc:#FFFFFF;
  --creme:#FBFCF4;          /* blanc cassé, note verte à peine perceptible */
  --v900:#132A13;           /* titres, footer */
  --v700:#31572C;           /* boutons, éléments graphiques */
  --v500:#4F772D;           /* couleur identitaire */
  --v300:#90A955;           /* cartes, pictogrammes */
  --v100:#ECF39E;           /* fonds colorés légers */
  --or:#E1B803;             /* accent : liens, détails */
  --or-doux:#F6E9B4;
  --encre:#000000;          /* noir plein (demande Lucie 05/08 : contraste de lecture) */
  --encre-2:#444444;        /* texte secondaire : gris neutre foncé, plus de teinte verte */
  --ligne:#E4EAD4;
  --rayon:20px;
  --ombre:0 10px 30px rgba(19,42,19,.07);
  --largeur:1180px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--blanc); color:var(--encre);
  font-family:'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--v700); }
.contenu{ max-width:var(--largeur); margin:0 auto; padding:0 28px; }

h1,h2,h3{ line-height:1.18; color:var(--v900); text-wrap:balance; margin:0; }
h1{ font-size:clamp(2rem, 4.2vw, 3.15rem); font-weight:800; letter-spacing:-.015em; }
h2{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); font-weight:800; letter-spacing:-.01em; }
h3{ font-size:1.12rem; font-weight:700; }
p{ margin:.4em 0 1em; }

.rumble{ font-family:'Rumble','Montserrat',sans-serif; font-weight:400; letter-spacing:.01em; }

.surtitre{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--v500); margin-bottom:16px;
}
.surtitre::before{ content:""; width:26px; height:2px; background:var(--or); border-radius:2px; }

/* Mise en valeur d'expressions clés (retour Nathalie 11/08) : vert identité semi-gras,
   v700 retenu pour le contraste (8,3:1 sur blanc ; le v500 tombait sous 4,5:1 sur --v100) */
.mev{ font-weight:600; color:var(--v700); }

.lede{ font-size:1.06rem; color:var(--encre-2); max-width:62ch; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-weight:600; font-size:.95rem; line-height:1;
  padding:16px 28px; border-radius:999px; border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn svg{ flex:0 0 auto; }
.btn-plein{ background:var(--v700); color:#fff; }
.btn-plein:hover{ background:var(--v900); transform:translateY(-1px); box-shadow:0 8px 20px rgba(19,42,19,.18); }
.btn-contour{ border-color:var(--v700); color:var(--v700); background:transparent; }
.btn-contour:hover{ border-color:var(--or); color:var(--v900); background:var(--or-doux); }
.btn-or{ background:var(--or); color:var(--v900); }
.btn-or:hover{ background:#F0CA1E; transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.22); }
.btn-blanc{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn-blanc:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.lien-fleche{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem;
  color:var(--v700); text-decoration:none; border-bottom:2px solid var(--or); padding-bottom:2px;
}
.lien-fleche:hover{ color:var(--v900); gap:12px; }
.lien-fleche{ transition:gap .15s ease, color .15s ease; }

/* ---------- En-tête : bandeau logo + barre de navigation sticky ---------- */
.entete-marque{
  background:var(--blanc); padding:20px 28px 14px;
  display:flex; justify-content:center;
}
.entete-marque .marque{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.entete-marque img.icone{ height:52px; width:auto; }
.entete-marque img.texte{ height:34px; width:auto; }
.entete{
  position:relative; z-index:100; background:var(--blanc);
  border-bottom:1px solid var(--ligne);
}
.entete-inner{
  max-width:var(--largeur); margin:0 auto; padding:8px 28px;
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.marque-mini{ display:none; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.marque-mini img.icone{ height:38px; width:auto; }
.marque-mini img.texte{ height:24px; width:auto; }
.nav-principale{ display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:nowrap; }
.nav-principale a{
  text-decoration:none; color:var(--encre); font-weight:500; font-size:.94rem;
  padding:9px 13px; border-radius:999px; transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}
.nav-principale a:hover{ background:var(--creme); color:var(--v700); }
.nav-principale a.actif{ color:var(--v700); font-weight:700; background:var(--v100); }
.nav-principale .btn{ padding:12px 22px; font-size:.86rem; margin-left:10px; }
.nav-principale a.btn-plein{ color:#fff; }
.nav-principale a.btn-plein:hover{ background:var(--v900); color:#fff; }
.burger{ display:none; }
.burger-label{ display:none; }

/* ---------- Sections ---------- */
.section{ padding:96px 0; }
.section-creme{ background:var(--creme); }
.tete-section{ max-width:720px; margin-bottom:44px; }
.tete-section.centre{ margin-left:auto; margin-right:auto; text-align:center; }
.tete-section.centre .surtitre{ justify-content:center; }
.tete-section.centre .surtitre::before{ display:none; }
.tete-section p{ color:var(--encre-2); }

/* ---------- Cartes génériques ---------- */
.carte{
  background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--rayon);
  box-shadow:var(--ombre);
}
.centre-actions{ text-align:center; }

/* ---------- Pictos cercles (système brochure) ---------- */
.rond{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.rond svg{ width:30px; height:30px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rond-v900{ background:var(--v700); }
.rond-v300{ background:var(--v300); }
.rond-or{ background:var(--or); }
/* pictos importés : image du triptyque, tracés pleins (Healthicons), contours (Tabler) */
.rond-image{ background:none; }
.rond-image img{ width:100%; height:100%; border-radius:50%; }
.rond svg.hicon{ width:34px; height:34px; stroke:none; }
.rond svg.ticon{ width:34px; height:34px; }

/* ---------- Marquage des ajouts SEO à valider ---------- */
.ajout{ position:relative; border-bottom:2px dotted var(--or); }
body.masquer-ajouts .ajout{ border-bottom-color:transparent; }
body.masquer-ajouts .etiquette-ajout{ display:none; }
.etiquette-ajout{
  display:inline-block; vertical-align:2px; margin-left:8px;
  font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#8A6D00; background:var(--or-doux); border:1px solid var(--or);
  border-radius:5px; padding:1px 7px; white-space:nowrap;
}
.barre-revision{
  position:fixed; right:18px; bottom:18px; z-index:200;
  background:var(--v900); color:#fff; border:none; border-radius:999px;
  font:inherit; font-size:.8rem; font-weight:600; padding:12px 20px; cursor:pointer;
  box-shadow:0 10px 24px rgba(19,42,19,.35); display:flex; align-items:center; gap:8px;
}
.barre-revision:hover{ background:var(--v700); }
.barre-revision .pastille{ width:10px; height:10px; border-radius:50%; background:var(--or); }

/* ---------- Révélations au défilement ----------
   Ne s'active que si le JS tourne (html.js) : sans script, tout est visible. */
html.js .reveler{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
html.js .reveler.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js .reveler{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Pied de page ---------- */
.pied{ background:var(--v900); color:#DCE5D0; padding:72px 0 0; font-size:.92rem; }
.pied a{ color:#fff; text-decoration:none; }
.pied a:hover{ text-decoration:underline; text-decoration-color:var(--or); }
.pied-grille{
  max-width:var(--largeur); margin:0 auto; padding:0 28px 48px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:44px;
}
.pied h4{ color:#fff; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px; }
.pied ul{ list-style:none; margin:0; padding:0; }
.pied li{ margin:0 0 10px; }
.pied .logo-pied{ height:148px; width:auto; margin-bottom:10px; }

/* Numéro masqué anti-scraping : révélé au clic (le numéro n'est jamais dans le HTML) */
button.tel-masque{
  background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;
  text-decoration:underline dotted; text-underline-offset:3px; text-align:left;
}
button.tel-masque.carte{ text-decoration:none; }
button.tel-masque:hover{ text-decoration-color:var(--or); }
.pied-legal{
  border-top:1px solid rgba(255,255,255,.14);
  padding:20px 28px; max-width:var(--largeur); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center;
  font-size:.78rem; color:#AABB9A;
}
.pied-legal a{ color:#AABB9A; }
.pied-legal .prava{ margin-left:auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .nav-principale a:not(.btn){ font-size:.86rem; padding:8px 9px; }
}
@media (max-width: 940px){
  .section{ padding:64px 0; }
  .entete-marque{ display:none; }
  .marque-mini{ display:flex; }
  .entete-inner{ justify-content:flex-start; padding:10px 20px; }
  .burger{ position:absolute; opacity:0; pointer-events:none; }
  .burger-label{
    display:flex; flex-direction:column; gap:5px; margin-left:auto;
    padding:12px; cursor:pointer; border-radius:10px;
  }
  .burger-label span{ width:24px; height:2.5px; background:var(--v900); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
  .nav-principale{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--blanc); border-bottom:1px solid var(--ligne);
    flex-direction:column; align-items:stretch; padding:16px 24px 24px; gap:2px;
    box-shadow:0 20px 30px rgba(19,42,19,.08);
  }
  .nav-principale a{ font-size:1rem; padding:12px 14px; border-radius:12px; }
  .nav-principale .btn{ margin:10px 0 0; justify-content:center; }
  .burger:checked ~ .nav-principale{ display:flex; }
  .burger:checked ~ .burger-label span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .burger:checked ~ .burger-label span:nth-child(2){ opacity:0; }
  .burger:checked ~ .burger-label span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
  .pied-grille{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .pied-grille{ grid-template-columns:1fr; }
  .btn{ width:100%; justify-content:center; }
}