/* ==========================================================================
   Calculateur de ration ménagère (/services/chien-en-bonne-sante/), code fourni par Justine.
   Seuls ajouts au code d'origine : les polices sont hébergées sur le site (pas d'appel à
   Google Fonts), un bloc « Intégration au site » neutralise les styles généraux qui débordaient
   sur le calculateur, et un bloc « Accès » met en forme l'état de l'accès, les formules et les
   recettes enregistrées. Cal Sans est déjà déclarée dans style.css.
   ========================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/lora-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 500; font-display: swap; src: url("../assets/fonts/lora-latin-500-italic.woff2") format("woff2"); }

/* Mise en page : en-tête sobre, formulaire à gauche, résultat collant à droite (empilés sur mobile). Charte La Cantine d'Owen. */
.lco-ration{
  --bg:#F5F0E6; --surface:#FFFDF8; --ink:#1A1A2E; --muted:#5A5A6E; --line:#E2D9C6;
  --accent:#FDA729; --accent-ink:#1A1A2E; --accent-soft:rgba(253,167,41,.16); --mark:#C97A00;
  --warn-bg:rgba(253,167,41,.14); --stop-bg:#FBEDE6; --stop-ink:#8A3A1C;
  --f-head:"Cal Sans","Poppins",system-ui,sans-serif; --f-sub:"Lora",Georgia,serif; --f-body:"Inter",system-ui,sans-serif;
}
.lco-ration{background:var(--bg);color:var(--ink);font:16px/1.6 var(--f-body);border-radius:14px;max-width:1080px;margin:0 auto;padding-block:clamp(24px,5vw,56px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.lco-ration *{box-sizing:border-box}
.lco-ration{font-synthesis:none}
.lco-ration [hidden]{display:none !important}
.lco-head{max-width:680px;margin-bottom:32px}
.lco-eyebrow{font:600 12px/1 var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.lco-head h1{font:700 clamp(28px,4.4vw,42px)/1.15 var(--f-head);margin:0 0 10px;text-wrap:balance}
.lco-head .sub{font:italic 400 clamp(17px,2vw,19px)/1.5 var(--f-sub);color:var(--muted);margin:0}
.lco-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:860px){.lco-grid{grid-template-columns:minmax(0,1fr)}}

.lco-form{display:flex;flex-direction:column;gap:22px}
.lco-sec{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,3vw,26px);display:flex;flex-direction:column;gap:20px}
.lco-sec h2{font:600 15px/1.2 var(--f-head);margin:0;display:flex;align-items:baseline;gap:10px}
.lco-sec h2 small{font:500 12px/1 var(--f-head);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.lco-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.lco-label{font:500 14px/1.3 var(--f-head)}
.lco-hint{font-size:13px;color:var(--muted);margin:0}
.lco-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}

.lco-pills{display:flex;flex-wrap:wrap;gap:8px}
.lco-pills label{position:relative;cursor:pointer}
.lco-pills input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.lco-pills span{display:block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font:500 14px/1.3 var(--f-body);background:var(--bg);transition:background .15s,border-color .15s}
.lco-pills input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lco-pills input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.lco-pills.stack{flex-direction:column}
.lco-pills.stack span{border-radius:10px;padding:10px 14px}
.lco-pills.stack span em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:2px}
.lco-pills.stack input:checked + span em{color:var(--accent-ink);opacity:.8}
.lco-pills.mini{gap:6px}
.lco-pills.mini span{padding:4px 11px;font-size:13px}

.lco-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--bg);overflow:hidden}
.lco-input:focus-within{border-color:var(--ink)}
.lco-input input,.lco-input select{flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--ink);font:500 16px/1.2 var(--f-body);padding:11px 12px;font-variant-numeric:tabular-nums}
.lco-input input:focus,.lco-input select:focus{outline:none}
.lco-input b{flex:0 0 auto;font:500 13px/1 var(--f-body);color:var(--muted);padding:0 12px}
.lco-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.lco-check input{margin-top:4px;accent-color:var(--accent);width:18px;height:18px;flex:0 0 18px}

.lco-example{align-self:flex-start;font:500 14px/1 var(--f-head);color:var(--ink);background:none;border:1px solid var(--ink);border-radius:999px;padding:10px 16px;cursor:pointer}
.lco-example:hover{background:var(--ink);color:var(--bg)}
.lco-example:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Choix des ingrédients */
.lco-search{position:relative}
.lco-results{list-style:none;margin:0;padding:4px;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:10px;max-height:260px;overflow:auto;box-shadow:0 10px 24px rgba(26,26,46,.10)}
.lco-results li{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1.35}
.lco-results li:hover{background:var(--accent-soft)}
.lco-results li small{color:var(--muted)}
.lco-picked{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.lco-picked .nm{font:500 15px/1.35 var(--f-head)}
.lco-picked .meta{font-size:13px;color:var(--muted)}
.lco-link{align-self:flex-start;background:none;border:0;padding:0;font:500 13px/1.3 var(--f-body);color:var(--mark);text-decoration:underline;cursor:pointer}
.lco-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lco-reco{display:inline-flex;align-items:center;gap:4px;font:500 11px/1 var(--f-body);padding:3px 8px 3px 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);margin-left:6px;vertical-align:2px}
.lco-reco svg{width:12px;height:12px;flex:0 0 12px}
.lco-flag{display:inline-block;font:500 11px/1 var(--f-body);padding:3px 7px;border-radius:999px;background:var(--accent-soft);color:var(--mark);margin-left:6px;vertical-align:2px}
.lco-ration input[type=range]{accent-color:var(--accent);width:100%;margin:0}
.lco-sub{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:14px}
.lco-sub h3{font:600 14px/1.3 var(--f-head);margin:0}

/* Résultat */
.lco-out{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:18px}
.lco-out .tag{font:600 12px/1 var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lco-main{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lco-main strong{font:700 clamp(40px,6vw,54px)/1 var(--f-head);font-variant-numeric:tabular-nums}
.lco-main span{font:500 16px/1.2 var(--f-head);color:var(--muted)}
.lco-meal{font:italic 17px/1.4 var(--f-sub)}
.lco-list{margin:0;display:flex;flex-direction:column}
.lco-list div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line)}
.lco-list dt{font-size:14px;line-height:1.35}
.lco-list dt i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px;vertical-align:0}
.lco-list dd{margin:0;font:600 20px/1.2 var(--f-head);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.lco-list dd small{display:block;font:400 12px/1.4 var(--f-body);color:var(--muted)}
.lco-split{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--accent-soft)}
.lco-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted);margin:6px 0 0}
.lco-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px}
.lco-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.lco-facts dd small{display:block;font:400 13px/1.4 var(--f-body);color:var(--muted)}
.lco-facts div{border-top:1px solid var(--line);padding-top:10px}
.lco-facts dt{font-size:12px;color:var(--muted)}
.lco-facts dd{margin:2px 0 0;font:600 17px/1.3 var(--f-head);font-variant-numeric:tabular-nums}
.lco-msg{border-radius:10px;padding:14px 16px;font-size:15px;margin:0}
.lco-msg.note{background:var(--accent-soft)}
.lco-msg.warn{background:var(--warn-bg);border-left:3px solid var(--accent)}
.lco-msg.stop{background:var(--stop-bg);color:var(--stop-ink)}
.lco-msg.stop b{display:block;font:600 15px/1.3 var(--f-head);margin-bottom:4px}
.lco-note{font-size:14px;color:var(--muted);border-left:3px solid var(--accent);padding-left:12px;margin:0}
.lco-note a,.lco-msg a{color:var(--ink)}
.lco-empty{color:var(--muted);font-size:15px;margin:0}

/* Analyse */
.lco-proj{margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,3vw,26px);display:flex;flex-direction:column;gap:14px}
.lco-proj h2{font:600 18px/1.3 var(--f-head);margin:0}
.lco-proj .intro{margin:0;max-width:68ch;font-size:15px}
.lco-tablewrap{overflow-x:auto}
.lco-proj table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px;min-width:460px}
.lco-proj th{font:500 12px/1.3 var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right;padding:8px 10px;border-bottom:1px solid var(--line)}
.lco-proj th:first-child,.lco-proj td:first-child{text-align:left}
.lco-proj td{text-align:right;padding:8px 10px;border-bottom:1px solid var(--line)}
.lco-proj tr.grp td{text-align:left;font:500 12px/1.3 var(--f-head);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg);padding-top:10px}
.lco-cov{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.lco-cov .bar{position:relative;width:90px;height:8px;border-radius:999px;background:var(--accent-soft);overflow:hidden;flex:0 0 90px}
.lco-cov .bar span{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.lco-cov .bar u{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--muted);opacity:.5}
.lco-cov em{font-style:normal;min-width:62px;text-align:right;font-size:14px}
.lco-cov em.ok{color:var(--ink)}
.lco-cov em.lo{color:var(--mark);font-weight:600}
.lco-cov em.bad{color:var(--stop-ink);font-weight:600}
.lco-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.lco-card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.lco-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.lco-card h3{font:600 15px/1.3 var(--f-head);margin:0}
.lco-card p{margin:0}
.lco-card .foot{font:500 14px/1.3 var(--f-body);font-variant-numeric:tabular-nums}
.lco-card .expl{font-size:13px;color:var(--muted);line-height:1.5}
.lco-st{flex:0 0 auto;font:500 12px/1 var(--f-body);padding:5px 9px;border-radius:999px;white-space:nowrap}
.lco-st.ok{background:#3E7C4F;color:#fff}
.lco-st.lo{background:var(--accent);color:var(--accent-ink)}
.lco-st.bad{background:var(--stop-bg);color:var(--stop-ink)}
.lco-st.neutre{background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.lco-gauge{position:relative;height:10px;border-radius:999px;background:var(--accent-soft);margin:4px 0}
.lco-gauge .fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.lco-gauge .fill.ok{background:var(--ink)} .lco-gauge .fill.lo{background:var(--accent)} .lco-gauge .fill.bad{background:var(--stop-ink)}
.lco-gauge .zone{position:absolute;top:0;bottom:0;background:rgba(26,26,46,.18);border-radius:999px}
.lco-gauge .tick{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);transform:translateX(-50%)}
.lco-gauge .pin{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;border:2px solid var(--surface);transform:translate(-50%,-50%);background:var(--ink)}
.lco-gauge .pin.bad{background:var(--stop-ink)} .lco-gauge .pin.neutre{background:var(--muted)}
.lco-detail summary{cursor:pointer;font:500 14px/1.3 var(--f-head);padding:4px 0}
.lco-detail table{margin-top:10px}
.lco-miss{color:var(--mark);font-weight:600;cursor:help}

.lco-how{margin-top:32px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px clamp(18px,3vw,26px)}
.lco-how summary{cursor:pointer;font:600 15px/1.3 var(--f-head);padding:16px 0}
.lco-how summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lco-how .body{max-width:68ch;padding-bottom:18px;font-size:15px}
.lco-how .body p{margin:0 0 12px}
.lco-how code{font:13px/1.5 ui-monospace,Menlo,monospace;background:var(--bg);padding:2px 6px;border-radius:4px;overflow-wrap:anywhere}
.lco-foot{margin-top:24px;font-size:13px;color:var(--muted)}
.lco-print{align-self:flex-start;font:500 14px/1 var(--f-head);color:var(--ink);background:none;border:1px solid var(--ink);border-radius:999px;padding:10px 16px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.lco-pills span{transition:none}}
@media print{
  .lco-ration{background:#fff;padding:0}
  .lco-form,.lco-example,.lco-how,.lco-print{display:none !important}
  .lco-grid{display:block}
  .lco-out{position:static;border:0;padding:0}
  .lco-proj{border:0;padding:0;break-before:auto}
}

/* ---- Intégration au site ------------------------------------------------- */
/* Le beige du calculateur couvre toute la page (sauf l'en-tête du site), pas seulement son cadre. */
body { background: #F5F0E6; }
.container.outil-page { padding-top: 1.5rem; padding-bottom: 5rem; }
@media (max-width: 600px) { .container.outil-page { padding-left: 10px; padding-right: 10px; } }
/* L'en-tête du site reste collé en haut : le résultat se cale juste en dessous. */
.outil-page .lco-out { top: 96px; }
/* style.css met les étiquettes en gras et donne aux champs texte et menus un cadre de 48 px. */
:where(.lco-ration) label { font-weight: inherit; font-size: inherit; }
.lco-ration .lco-input input, .lco-ration .lco-input select { min-height: 0; border-radius: 0; width: auto; transition: none; }
.lco-ration .lco-input input:focus, .lco-ration .lco-input select:focus { background: transparent; border-color: transparent; }
.lco-ration .lco-note a { text-decoration: underline; text-underline-offset: 2px; }
/* Le calcul est fait sur le serveur : si la réponse tarde, l'ancien résultat s'estompe. */
.lco-ration [data-result] { transition: opacity .15s; }
.lco-ration [data-result][aria-busy="true"] { opacity: .45; transition-delay: .3s; }
/* Le formulaire est entouré d'un fieldset (désactivé quand une recette n'est plus modifiable). */
.lcr-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.lcr-fieldset:disabled .lco-sec, .lcr-fieldset:disabled .lco-example { opacity: .7; }

/* ---- Accès, formules et recettes enregistrées ---------------------------- */
.lcr-acces, .lcr-bandeau { border-radius: 14px; padding: 16px clamp(18px,3vw,26px); margin-bottom: 22px; display: flex; flex-direction: column; gap: 8px; }
.lcr-acces { background: var(--surface); border: 1px solid var(--line); }
.lcr-bandeau { background: var(--accent-soft); }
.lcr-acces p, .lcr-bandeau p { margin: 0; font-size: 15px; }
.lcr-bandeau h2, .lcr-formules h2, .lcr-recettes h2 { font: 600 18px/1.3 var(--f-head); margin: 0; }
.lcr-acces-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.lcr-acces-actions:empty { display: none; }
.lcr-acces-actions a { font: 500 14px/1.3 var(--f-body); color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.lcr-acces-actions .lcr-message { flex-basis: 100%; font-weight: 500; }
.lcr-formules, .lcr-recettes { margin-bottom: 28px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 110px; }
.lcr-formules-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.lcr-formule { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(18px,3vw,22px); display: flex; flex-direction: column; gap: 8px; }
.lcr-formule h3 { font: 600 17px/1.3 var(--f-head); margin: 0; color: var(--mark); }
.lcr-prix { font: 700 32px/1 var(--f-head); margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.lcr-formule-texte { flex: 1; font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.lcr-renonciation, .lcr-test { font-size: 14px; max-width: 80ch; }
.lcr-renonciation a { color: var(--ink); }
.lcr-btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; font: 500 14px/1 var(--f-head); padding: 11px 18px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); cursor: pointer; text-decoration: none; }
.lcr-btn:hover { background: var(--bg); color: var(--ink); }
.lcr-btn:disabled { opacity: .5; cursor: default; }
.lcr-btn-ghost { background: none; color: var(--ink); }
.lcr-btn-ghost:hover { background: var(--ink); color: var(--bg); }
.lcr-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lcr-retour { margin: 0; font-size: 14px; }
.lcr-retour:empty { display: none; }
.lcr-retour-erreur { color: var(--stop-ink); }
.lcr-recettes-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lcr-recette { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.lcr-recette:hover, .lcr-recette:focus-visible { border-color: var(--ink); }
.lcr-recette strong { font: 600 15px/1.3 var(--f-head); }
.lcr-recette span { font-size: 13px; color: var(--muted); }
.lcr-actions { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.lcr-actions-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.lco-ration .lcr-nom { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font: 500 15px/1.2 var(--f-body); color: var(--ink); }
.lco-ration .lcr-nom:focus { border-color: var(--ink); background: var(--bg); }
@media print {
  body { background: #fff; }
  .annonce, .site-header, .breadcrumb, .site-footer, .lcr-acces, .lcr-formules, .lcr-recettes, .lcr-actions, .lcr-bandeau .lcr-actions-boutons { display: none !important; }
  .lcr-bandeau { background: none; padding: 0; }
}