/* ==========================================================================
   Outils gratuits : calculateur de ration de croquettes et courbe de croissance
   (code fourni par Justine, commun aux deux outils).
   Seuls ajouts au code d'origine : les polices sont hébergées sur le site
   (pas d'appel à Google Fonts) et un bloc « Intégration au site » en fin de
   fichier neutralise les styles généraux qui débordaient sur le calculateur
   et estompe le résultat pendant le calcul, fait sur le serveur.
   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}
/* Cal Sans n'existe qu'en une graisse : on interdit le faux gras du navigateur. */
.lco-ration{font-synthesis:none}
/* Les champs conditionnels sont masqués avec l'attribut hidden : cette règle doit primer sur les display:flex/grid ci-dessous et sur ceux du thème. */
.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-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{flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--ink);font:500 16px/1 var(--f-body);padding:11px 12px;font-variant-numeric:tabular-nums}
.lco-input input: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}

.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(44px,7vw,60px)/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-range{display:flex;flex-direction:column;gap:8px}
.lco-bar{position:relative;height:10px;border-radius:999px;background:var(--accent-soft)}
.lco-bar i{display:block;position:absolute;top:-4px;width:4px;height:18px;border-radius:2px;background:var(--ink);transform:translateX(-50%)}
.lco-range p{display:flex;justify-content:space-between;margin:0;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.lco-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.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.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{color:var(--ink)}
.lco-empty{color:var(--muted);font-size:15px;margin:0}

.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:420px}
.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.now td{background:var(--accent-soft);font-weight:600}
.lco-proj td strong{font:600 15px/1 var(--f-head)}
.lco-pesees{display:flex;flex-direction:column;gap:8px}
.lco-pesee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;gap:8px;align-items:center}
.lco-pesee button,.lco-add{font:400 14px/1 var(--f-head);color:var(--ink);background:none;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.lco-pesee button{height:42px}
.lco-add{align-self:flex-start;padding:10px 14px;border-style:dashed}
.lco-pesee button:hover,.lco-add:hover{border-color:var(--ink)}
.lco-pesee button:focus-visible,.lco-add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lco-chart{position:relative;touch-action:pan-y}
.lco-chart svg{display:block;width:100%;height:auto;overflow:visible}
.lco-chart text{font:12px var(--f-body);fill:var(--muted)}
.lco-chart .lbl{font:13px var(--f-head);fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}
.lco-tip{position:absolute;top:0;pointer-events:none;background:var(--ink);color:var(--bg);border-radius:8px;padding:8px 10px;font-size:13px;line-height:1.4;white-space:nowrap;transform:translateX(-50%);font-variant-numeric:tabular-nums}
.lco-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted);margin:0}
.lco-legend span{display:inline-flex;align-items:center;gap:6px}
.lco-legend i{display:inline-block;width:18px;height:0;border-top:2px dashed var(--ink)}
.lco-legend i.pt{width:10px;height:10px;border:2px solid var(--surface);border-radius:50%;background:var(--mark);box-shadow:0 0 0 1px var(--mark)}
.lco-legend i.band{height:10px;border:0;background:var(--accent-soft);border-radius:2px}
.lco-grid-c{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr)}
@media (max-width:860px){.lco-grid-c{grid-template-columns:minmax(0,1fr)}}
.lco-col{min-width:0}
.lco-pesee-head span{font:400 12px/1 var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lco-actions{display:flex;flex-wrap:wrap;gap:8px}
.lco-clear{border-style:solid;color:var(--muted)}
.lco-clear.armed{background:var(--stop-bg);color:var(--stop-ink);border-color:var(--stop-ink)}
.lco-chip{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.lco-chip.ok{background:var(--accent-soft);border-color:transparent;color:var(--ink)}
.lco-chip.hi{background:var(--stop-bg);border-color:transparent;color:var(--stop-ink)}
.lco-croissance .lco-proj table{min-width:520px}
.lco-status{display:flex;flex-direction:column;gap:6px;border-radius:10px;padding:14px 16px;background:var(--bg);border:1px solid var(--line)}
.lco-status b{font:400 16px/1.3 var(--f-head)}
.lco-status.ok{border-left:4px solid #3E7D5A}
.lco-status.watch{border-left:4px solid var(--accent)}
.lco-status.alert{border-left:4px solid var(--stop-ink);background:var(--stop-bg)}
.lco-status p{margin:0;font-size:14px}
.lco-prov{font-size:13px;color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;margin:0}
.lco-legend i.thin{border-top:1px solid var(--muted)}
.lco-legend i.med{border-top:2px solid var(--ink)}
.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)}
@media (prefers-reduced-motion:reduce){.lco-pills span{transition:none}}

/* ---- Intégration au site ------------------------------------------------- */
.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 un cadre de 48 px. */
:where(.lco-ration) label { font-weight: inherit; font-size: inherit; }
.lco-ration .lco-input input { min-height: 0; border-radius: 0; width: auto; transition: none; }
.lco-ration .lco-input input: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; }

/* ---- Courbe de croissance : chiots enregistrés et compte ------------------ */
.lco-courbes button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font: 500 14px/1.3 var(--f-body); background: var(--bg); color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s; }
.lco-courbes button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lco-courbes button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lco-courbes button.lco-nouvelle { border-style: dashed; }
.lco-courbes button.lco-nouvelle[aria-pressed="true"] { border-style: solid; }
.lco-compte p { margin: 0; font-size: 15px; }
.lco-compte .lco-hint { font-size: 13px; }
.lco-btn { display: inline-flex; align-items: center; justify-content: center; font: 500 14px/1 var(--f-head); padding: 11px 16px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); cursor: pointer; text-decoration: none; }
.lco-btn:hover { background: var(--bg); color: var(--ink); }
.lco-btn-ghost { background: none; color: var(--ink); }
.lco-btn-ghost:hover { background: var(--ink); color: var(--bg); }
.lco-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lco-btn:disabled { opacity: .5; cursor: default; }
.lco-statut-erreur { color: var(--stop-ink) !important; }
.lco-compte a:not(.lco-btn) { text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .lco-courbes button { transition: none; } }