/* ============================================================
   EXELIO — site vitrine
   Direction : le monde du négoce alimentaire. Encre et vert bouteille, papier kraft des sacs,
   or de l'huile pour un seul accent. Newsreader pour les titres (chaleur editoriale),
   IBM Plex Sans pour lire, IBM Plex Mono pour tout ce qui ressemble à une fiche ou un contrat.
   ============================================================ */
:root{
  /* Newsreader plutot que Fraunces : le f de Fraunces a le crochet tronque (« of », « famille ») */
  --encre:#0F1F19; --encre-2:#16302A; --encre-3:#1E4638;
  --vert:#1C4A36; --vert-vif:#2F8F53; --vert-tint:#E6F0E9;
  --huile:#D9A441; --huile-fonce:#9E7020; --huile-tint:#FBF1DA;
  --kraft:#E9DEC9; --kraft-fonce:#D6C6A8; --kraft-encre:#5B4A2E;
  --craie:#F8F7F3; --blanc:#FFFFFF;
  --txt:#14231E; --txt-2:#4F5F58; --txt-3:#7F8E87;
  --filet:#DDE2DC; --filet-fort:#C3CCC4;
  --alerte:#B5372A; --alerte-tint:#FBE9E6;
  --ambre:#B77514; --ambre-tint:#FBF0DC;
  /* anciens noms, conserves pour les pages qui les utilisent */
  --ink:var(--encre); --ink-2:var(--encre-2); --ink-3:var(--encre-3);
  --leaf:var(--vert-vif); --leaf-deep:var(--vert); --leaf-tint:var(--vert-tint);
  --paper:var(--craie); --border:var(--filet); --border-fort:var(--filet-fort);
  --f-display:'Newsreader',Georgia,'Times New Roman',serif;
  --f:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --max:1180px; --r:6px;
  --ombre:0 1px 2px rgba(15,31,25,.06),0 10px 30px rgba(15,31,25,.08);
  --ombre-forte:0 2px 4px rgba(15,31,25,.12),0 24px 60px rgba(15,31,25,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--craie);color:var(--txt);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--vert);text-decoration:none}
a:hover{text-decoration:underline}
*:focus-visible{outline:2px solid var(--huile-fonce);outline-offset:3px;border-radius:3px}
::selection{background:var(--huile-tint);color:var(--encre)}
.conteneur{max-width:var(--max);margin:0 auto;padding:0 28px}
.saut-contenu{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:10px 16px;z-index:200}
.saut-contenu:focus{left:8px;top:8px}
.mono{font-family:var(--f-mono)}

/* ── Titres ── */
h1,h2,h3{font-family:var(--f-display);color:var(--encre);font-weight:600;letter-spacing:-.014em}
h1{font-size:clamp(40px,5.6vw,68px);line-height:1.02;font-variation-settings:"opsz" 72}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1;font-variation-settings:"opsz" 72}
h3{font-size:22px;line-height:1.25;font-variation-settings:"opsz" 48}
.chapo{font-size:clamp(17px,1.9vw,20px);color:var(--txt-2);line-height:1.55;max-width:56ch}
.mesure{max-width:66ch}
.eyebrow{font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--huile-fonce);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--huile);flex:0 0 auto}

/* ── En-tête ── */
.entete{position:sticky;top:0;z-index:100;background:rgba(248,247,243,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--filet)}
.entete-in{display:flex;align-items:center;gap:28px;height:74px}
.marque{display:flex;align-items:center;flex:0 0 auto}
.marque:hover{text-decoration:none;opacity:.85}
.marque img{height:44px;width:auto;display:block}
.marque-pied img{height:44px;margin-bottom:18px}   /* logo detoure et eclairci : aucun cache blanc */
@media (max-width:900px){.marque img{height:36px}}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{color:var(--txt-2);font-size:14.5px;font-weight:500;position:relative}
.nav a:hover,.nav a[aria-current=page]{color:var(--encre);text-decoration:none}
.nav a[aria-current=page]:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--huile)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--filet-fort);border-radius:6px;padding:8px 10px;cursor:pointer;font-size:18px;line-height:1;color:var(--encre)}

/* ── Boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:var(--r);font-size:15px;font-weight:600;font-family:var(--f);border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-primaire{background:var(--vert);color:#fff}
.btn-primaire:hover{background:var(--encre-3);text-decoration:none}
.btn-fantome{background:transparent;color:var(--encre);border-color:var(--filet-fort)}
.btn-fantome:hover{border-color:var(--encre);text-decoration:none}
.btn-clair{background:#fff;color:var(--encre-3)}
.btn-clair:hover{background:var(--vert-tint);text-decoration:none}
.btn-or{background:var(--huile);color:var(--encre)}
.btn-or:hover{background:#E4B558;text-decoration:none}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn .fleche{transition:transform .2s}
.btn:hover .fleche{transform:translateX(3px)}

/* ── Sections ── */
.section{padding:96px 0}
.section-paper{background:var(--blanc);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.section-kraft{background:var(--kraft);color:var(--kraft-encre)}
.section-kraft h2,.section-kraft h3{color:var(--encre)}
.section-kraft .chapo,.section-kraft p{color:#5E5442}
.section-kraft .eyebrow{color:var(--huile-fonce)}
.section-ink{background:var(--encre);color:#fff}
.section-ink h2,.section-ink h3{color:#fff}
.section-ink p{color:#C9D8CE}
.section-ink .eyebrow{color:var(--huile)}
.section-ink .eyebrow::before{background:var(--huile)}
.tete-section{max-width:64ch}
.tete-section .chapo{margin-top:18px}

/* ── Héro d'accueil : photo + fiche de lot ── */
.hero{position:relative;padding:104px 0 96px;background:var(--encre);color:#fff;overflow:hidden;isolation:isolate}
.hero-photo{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(15,31,25,.96) 0%,rgba(15,31,25,.86) 42%,rgba(15,31,25,.35) 78%,rgba(15,31,25,.25) 100%),
  radial-gradient(120% 90% at 100% 0%,rgba(217,164,65,.18),transparent 55%),
  url("hero-produits.jpg") center/cover no-repeat,var(--encre-2)}
.hero h1{color:#fff;max-width:14ch}
.hero .chapo{color:#C9D8CE;margin-top:24px}
.hero .eyebrow{color:var(--huile)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.hero-preuves{display:flex;gap:40px;flex-wrap:wrap;margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.preuve strong{display:block;font-family:var(--f-display);font-weight:600;font-size:30px;color:#fff;letter-spacing:-.01em;font-variation-settings:"opsz" 72}
.preuve span{font-size:13.5px;color:#9FB5A9}
.hero-duo{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-visuel{border-radius:10px;overflow:hidden;box-shadow:var(--ombre)}
.hero-visuel img{width:100%;display:block}

/* La fiche de lot : l'artefact le plus caractéristique du métier, en HTML. */
.fiche{--rot:-1.2deg;position:relative;background:var(--craie);color:var(--txt);border-radius:4px;padding:26px 28px 24px;box-shadow:var(--ombre-forte);transform:rotate(var(--rot));font-family:var(--f-mono);font-size:13.5px;max-width:460px;justify-self:end;
  background-image:linear-gradient(180deg,rgba(255,255,255,.6),transparent 40%),repeating-linear-gradient(0deg,transparent 0 31px,rgba(15,31,25,.035) 31px 32px)}
.fiche::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--huile),var(--huile-fonce));border-radius:4px 4px 0 0}
.fiche-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--filet-fort);margin-bottom:6px}
.fiche-tete strong{font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:12px;color:var(--encre)}
.fiche-tete span{font-size:11.5px;color:var(--txt-3)}
.fiche-ligne{display:grid;grid-template-columns:132px 1fr;gap:14px;padding:9px 0;border-bottom:1px dashed var(--filet)}
.fiche-ligne:last-of-type{border-bottom:0}
.fiche-ligne dt{color:var(--txt-3);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding-top:1px}
.fiche-ligne dd{color:var(--encre);font-weight:500}
.fiche-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--filet-fort);font-size:11.5px;color:var(--txt-3);line-height:1.5}
.tampon{position:absolute;right:22px;bottom:58px;transform:rotate(-12deg);border:3px solid var(--huile-fonce);color:var(--huile-fonce);border-radius:6px;padding:8px 14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:13px;line-height:1.2;text-align:center;opacity:.92;mix-blend-mode:multiply;
  box-shadow:inset 0 0 0 2px var(--craie),inset 0 0 0 3.5px var(--huile-fonce)}
.tampon small{display:block;font-size:9.5px;letter-spacing:.14em;margin-top:3px;opacity:.85}
@media (prefers-reduced-motion:no-preference){
  .hero-texte>*{opacity:0;transform:translateY(14px);animation:monter .7s cubic-bezier(.2,.7,.2,1) forwards}
  .hero-texte>*:nth-child(2){animation-delay:.08s}.hero-texte>*:nth-child(3){animation-delay:.16s}
  .hero-texte>*:nth-child(4){animation-delay:.24s}.hero-texte>*:nth-child(5){animation-delay:.32s}
  .fiche{opacity:0;animation:poser .8s cubic-bezier(.2,.7,.2,1) .25s forwards}
  .tampon{opacity:0;transform:rotate(-12deg) scale(1.6);animation:tamponner .45s cubic-bezier(.3,1.4,.5,1) 1s forwards}
  @keyframes monter{to{opacity:1;transform:none}}
  @keyframes poser{from{opacity:0;transform:rotate(var(--rot)) translateY(22px)}to{opacity:1;transform:rotate(var(--rot))}}
  @keyframes tamponner{to{opacity:.92;transform:rotate(-12deg) scale(1)}}
}

/* ── Ruban des familles de produits ── */
.ruban{background:var(--encre-2);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.ruban ul{display:flex;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:none;gap:0;list-style:none;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#9FB5A9}
.ruban ul::-webkit-scrollbar{display:none}
.ruban li{padding:15px 18px 15px 0;margin-right:18px;position:relative;flex:0 0 auto}
.ruban li+li::before{content:"·";position:absolute;left:-16px;color:var(--huile)}
.ruban li strong{color:#fff;font-weight:500}
.ruban li strong::after{content:" — spécialité";color:var(--huile);font-weight:400;letter-spacing:.04em;text-transform:none}

/* ── Pages internes : en-tête de page ── */
.hero-page{padding:72px 0 56px;background:var(--blanc);border-bottom:1px solid var(--filet)}
.hero-page h1{max-width:18ch}

/* ── Grilles et cartes ── */
.grille{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.carte{background:#fff;border:1px solid var(--filet);border-radius:var(--r);padding:28px}
.carte-ombre{box-shadow:var(--ombre)}
.section-ink .carte{background:var(--encre-2);border-color:#2A4A3D}
.section-kraft .carte{background:rgba(255,255,255,.55);border-color:var(--kraft-fonce)}
.carte h3{margin-bottom:10px}
.carte p{color:var(--txt-2);font-size:15px}
.section-ink .carte p{color:#A8BFB3}
.pastille{width:38px;height:38px;border-radius:6px;background:var(--vert-tint);color:var(--vert);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-weight:500;font-size:14px;margin-bottom:16px}
.section-ink .pastille{background:#2A4A3D;color:#7FC79A}

/* Problèmes : trois colonnes éditoriales, filet en tête, pas de numéros (ce n'est pas une séquence) */
.problemes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px}
.probleme{border-top:2px solid var(--encre);padding-top:20px}
.probleme h3{margin-bottom:10px}
.probleme p{color:var(--txt-2);font-size:15.5px}

/* Split : grande affirmation à gauche, liste réglée à droite */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;margin-top:8px}
.split h2{position:sticky;top:100px}
.regles{list-style:none}
.regles li{padding:22px 0;border-top:1px solid var(--kraft-fonce);display:grid;grid-template-columns:1fr;gap:6px}
.regles li:last-child{border-bottom:1px solid var(--kraft-fonce)}
.regles strong{font-family:var(--f-display);font-weight:600;font-size:21px;color:var(--encre);font-variation-settings:"opsz" 48}
.regles p{font-size:15.5px}

/* Produits : photo pleine largeur de carte, légende en mono comme un catalogue */
.vignette{border-radius:var(--r) var(--r) 0 0;overflow:hidden;margin:-28px -28px 18px;aspect-ratio:4/3;background:var(--vert-tint)}
.vignette img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.carte-produit{padding:0 0 26px;overflow:hidden}
.carte-produit .vignette{margin:0 0 18px;border-radius:0}
.carte-produit:hover .vignette img{transform:scale(1.04)}
.carte-produit .dedans{padding:0 26px}
.tag{display:inline-block;font-family:var(--f-mono);background:var(--huile-tint);color:var(--huile-fonce);font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:3px;letter-spacing:.08em;text-transform:uppercase}
.section-ink .tag{background:#2A4A3D;color:#7FC79A}

/* Ledger : qui fait quoi, en table réglée. La structure dit le partage des rôles. */
.ledger{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--filet-fort);border-radius:var(--r);overflow:hidden;margin-top:44px;background:#fff}
.ledger>div{padding:30px 32px}
.ledger>div+div{border-left:1px solid var(--filet-fort)}
.ledger h3{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--txt-3);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--filet)}
.ledger .nous h3{color:var(--vert)}
.ledger .vous h3{color:var(--huile-fonce)}
.ledger ul{list-style:none}
.ledger li{padding:10px 0;border-bottom:1px dashed var(--filet);font-size:15.5px;color:var(--txt)}
.ledger li:last-child{border-bottom:0}
.ledger .nous li::before{content:"→ ";color:var(--vert);font-family:var(--f-mono)}
.ledger .vous li::before{content:"● ";color:var(--huile);font-family:var(--f-mono);font-size:11px;vertical-align:2px}

/* ── Étapes (pages services) ── */
.etapes{counter-reset:e;display:grid;gap:0;margin-top:36px}
.etape{counter-increment:e;display:grid;grid-template-columns:64px 1fr;gap:22px;padding:28px 0;border-top:1px solid var(--filet)}
.etape:last-child{border-bottom:1px solid var(--filet)}
.etape::before{content:counter(e,decimal-leading-zero);font-family:var(--f-mono);font-size:14px;font-weight:500;color:var(--huile-fonce);font-variant-numeric:tabular-nums;padding-top:4px}
.etape h3{margin-bottom:8px}
.etape p{color:var(--txt-2);font-size:15.5px;max-width:62ch}

/* ── Formulaire ── */
.form-wrap{max-width:760px;margin:0 auto}
.bloc{background:#fff;border:1px solid var(--filet);border-radius:var(--r);padding:28px;margin-bottom:20px}
.bloc-titre{font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--filet)}
.champs{display:grid;gap:18px}
.c2{grid-template-columns:1fr 1fr}
.c3{grid-template-columns:1fr 1fr 1fr}
.champ label{display:block;font-size:13.5px;font-weight:600;color:var(--txt);margin-bottom:6px}
.champ .aide{font-size:12.5px;color:var(--txt-3);margin-top:5px;line-height:1.45}
.champ input,.champ select,.champ textarea{width:100%;padding:12px 13px;border:1.5px solid var(--filet-fort);border-radius:var(--r);font-family:inherit;font-size:15px;color:var(--txt);background:#fff}
.champ textarea{resize:vertical;min-height:120px;line-height:1.55}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--vert);outline:none;box-shadow:0 0 0 3px rgba(47,143,83,.14)}
.champ input[aria-invalid=true],.champ select[aria-invalid=true],.champ textarea[aria-invalid=true]{border-color:var(--alerte);background:var(--alerte-tint)}
.erreur{display:none;font-size:13px;color:var(--alerte);font-weight:600;margin-top:6px}
.erreur.on{display:block}
.oblig{color:var(--alerte)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.choix{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choix label{display:flex;gap:11px;align-items:flex-start;border:1.5px solid var(--filet-fort);border-radius:var(--r);padding:15px;cursor:pointer;margin:0;font-weight:500}
.choix label:has(input:checked){border-color:var(--vert);background:var(--vert-tint)}
.choix input{width:auto;margin-top:3px}
.choix strong{display:block;font-size:15px;color:var(--encre)}
.choix span{font-size:13px;color:var(--txt-2)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--txt-2);line-height:1.5}
.consent input{width:auto;margin-top:4px;flex:0 0 auto}
.verif{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12.5px;font-weight:500;margin-top:8px;min-height:20px}
.verif.ok{color:var(--vert)}
.verif.ko{color:var(--alerte)}
.verif.attente{color:var(--txt-3)}
.encart{background:var(--vert-tint);border-left:3px solid var(--vert);padding:16px 20px;border-radius:0 var(--r) var(--r) 0;font-size:14.5px;color:var(--encre-3);line-height:1.55}
.encart-alerte{background:var(--alerte-tint);border-left-color:var(--alerte);color:#7A2A20}
.encart-ambre{background:var(--ambre-tint);border-left-color:var(--ambre);color:#7A5210}

/* ── Pied ── */
.pied{background:var(--encre);color:#A8BFB3;padding:64px 0 30px;font-size:14.5px}
.pied-grille{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid #2A4A3D}
.pied h4{font-family:var(--f-mono);color:var(--huile);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.pied a{color:#A8BFB3;display:block;margin-bottom:9px}
.pied a:hover{color:#fff}
.pied-bas{padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--f-mono);font-size:12px;color:#7A9187}
.pied-bas a{display:inline}   /* sinon .pied a{display:block} casse la ligne sur le separateur */
.a-completer{background:var(--ambre-tint);color:#7A5210;padding:1px 7px;border-radius:4px;font-size:.86em;font-weight:600;white-space:nowrap}

/* Pages redactionnelles : un titre qui suit du contenu doit respirer. Cible les conteneurs
   « document » uniquement, pour ne pas decoller les h2 des sections qui suivent un .eyebrow. */
.doc h2,.mesure h2{margin:52px 0 14px}
.doc h3,.mesure h3{margin:30px 0 8px}
.doc>h2:first-child,.mesure>h2:first-child{margin-top:0}
.mesure h2+p,.doc h2+p{margin-top:0}
.doc p,.doc li{color:var(--txt-2);margin-bottom:12px;max-width:72ch}
.doc ul{padding-left:22px}

@media (max-width:900px){
  .g3,.g2,.c2,.c3,.pied-grille,.choix,.problemes,.split,.ledger{grid-template-columns:1fr}
  .split{gap:28px}.split h2{position:static}
  .ledger>div+div{border-left:0;border-top:1px solid var(--filet-fort)}
  .nav{display:none}
  .nav.ouvert{display:flex;position:absolute;top:74px;left:0;right:0;background:var(--craie);flex-direction:column;gap:0;padding:8px 28px 18px;border-bottom:1px solid var(--filet);box-shadow:var(--ombre)}
  .nav.ouvert a{padding:12px 0;border-bottom:1px solid var(--filet);width:100%}
  .nav a[aria-current=page]:not(.btn)::after{display:none}
  .burger{display:block}
  .section{padding:64px 0}
  .hero{padding:72px 0 64px}
  .hero-duo{grid-template-columns:1fr;gap:40px}
  .fiche{justify-self:stretch;max-width:none;--rot:0deg}
  .hero-photo{background:linear-gradient(180deg,rgba(15,31,25,.94) 0%,rgba(15,31,25,.86) 100%),url("hero-produits.jpg") center/cover no-repeat,var(--encre-2)}
  .etape{grid-template-columns:40px 1fr;gap:14px}
  .ruban li{padding:12px 14px 12px 0;margin-right:14px}
  .fiche-ligne{grid-template-columns:104px 1fr;gap:10px}
}
@media print{.entete,.pied,.hero-actions,.hero-photo{display:none}}

/* ── Formulaire : zone de l entreprise + resultats de recherche ── */
.choix-3{grid-template-columns:1fr 1fr 1fr}
.ent-resultats{list-style:none;margin-top:6px;border:1.5px solid var(--filet-fort);border-radius:var(--r);background:#fff;max-height:280px;overflow-y:auto;box-shadow:var(--ombre)}
.ent-resultats li+li{border-top:1px solid var(--filet)}
.ent-resultats button{display:block;width:100%;text-align:left;background:none;border:0;padding:11px 13px;font:inherit;font-size:14.5px;color:var(--txt);cursor:pointer}
.ent-resultats button:hover,.ent-resultats button:focus-visible{background:var(--vert-tint);outline:none}
@media (max-width:900px){.choix-3{grid-template-columns:1fr}}