/* Calculatrice.com – calculatrice graphique
   CSS neuf et isolé : complète calculatrice-refonte-v7.css sans modifier les deux pages existantes. */

body.cr-graph-page .cr-hero .cr-wrap.cr-hero-grid{
  width:min(94vw,1540px)!important;
  max-width:1540px!important;
  grid-template-columns:minmax(320px,.34fr) minmax(760px,.66fr)!important;
  gap:34px!important;
  align-items:center!important;
}

body.cr-graph-page .cr-hero-copy{max-width:610px!important;}
body.cr-graph-page .cr-graph-card{
  width:100%!important;
  max-width:none!important;
  justify-self:stretch!important;
}

.cr-graph-card .cr-calc-card-inner{
  padding:14px!important;
}

.cr-graph-head{
  align-items:flex-start!important;
  gap:12px!important;
  margin-bottom:12px!important;
}

.cr-graph-mode{
  cursor:pointer;
  border:0;
  min-width:54px;
}

.cr-graph-layout{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:14px;
  align-items:stretch;
}

.cr-graph-controls,
.cr-graph-plot-panel{
  min-width:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:#111b2e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.cr-graph-controls{
  padding:12px;
}

.cr-graph-field-list{
  display:grid;
  gap:9px;
  margin-bottom:12px;
}

.cr-graph-function{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  align-items:center;
  gap:8px;
  position:relative;
}

.cr-graph-function::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:6px;
  height:28px;
  border-radius:999px;
  background:#ffa300;
}
.cr-graph-function-two::before{background:#4aa3ff;}
.cr-graph-function-three::before{background:#45c46b;}

.cr-graph-function span,
.cr-graph-ranges span,
.cr-graph-evaluate span{
  color:#cfd7e8;
  font-weight:900;
  font-size:12px;
  letter-spacing:.03em;
}

.cr-graph-function span{padding-left:12px;}

.cr-graph-controls input{
  width:100%;
  min-height:38px;
  border:1px solid #34435e;
  border-radius:10px;
  background:#eaf0fb;
  color:#0e1728;
  padding:0 10px;
  font-weight:800;
  outline:none;
}

.cr-graph-controls input:focus{
  border-color:#ffa300;
  box-shadow:0 0 0 3px rgba(255,163,0,.22);
}

.cr-graph-ranges{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}

.cr-graph-ranges label,
.cr-graph-evaluate label{
  display:grid;
  gap:5px;
}

.cr-graph-ranges input{
  min-height:34px;
  font-size:13px;
}

.cr-graph-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}

.cr-graph-actions .cr-calc-key,
.cr-graph-evaluate .cr-calc-key{
  min-height:38px!important;
  border-radius:10px!important;
  font-size:12px!important;
}

.cr-graph-evaluate{
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px;
  gap:8px;
  align-items:end;
}

.cr-graph-plot-panel{
  padding:10px;
  display:grid;
  grid-template-rows:minmax(280px,1fr) auto auto;
  gap:8px;
}

.cr-graph-canvas{
  display:block;
  width:100%;
  height:430px;
  min-height:320px;
  border-radius:14px;
  background:#fff;
  border:1px solid #d7deea;
}

.cr-graph-status{
  min-height:24px;
  padding:6px 9px;
  border-radius:10px;
  background:#0c1424;
  color:#d7e0f2;
  font-size:12px;
  line-height:1.35;
}

.cr-graph-status.cr-error{
  color:#ffd6d6;
  background:#3a1216;
}

.cr-graph-results{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

.cr-graph-result-item{
  min-width:0;
  border:1px solid #263856;
  background:#17233a;
  color:#f3f7ff;
  border-radius:10px;
  padding:7px 8px;
  font-size:12px;
  line-height:1.25;
}

.cr-graph-result-item strong{
  display:block;
  font-size:11px;
  color:#aebbd3;
  margin-bottom:2px;
}

.cr-graph-examples{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  margin-top:12px!important;
}

.cr-graph-card code,
.cr-guide-box code{
  white-space:nowrap;
}

@media (max-width:1200px) and (min-width:981px){
  body.cr-graph-page .cr-hero .cr-wrap.cr-hero-grid{
    width:min(94vw,1180px)!important;
    max-width:1180px!important;
    grid-template-columns:minmax(260px,.32fr) minmax(640px,.68fr)!important;
    gap:24px!important;
  }
  .cr-graph-layout{
    grid-template-columns:280px minmax(0,1fr);
    gap:10px;
  }
  .cr-graph-canvas{height:380px;}
  .cr-graph-examples{grid-template-columns:1fr 1fr!important;}
}

@media (max-width:980px){
  body.cr-graph-page .cr-hero .cr-wrap.cr-hero-grid{
    width:100%!important;
    max-width:var(--cr-max)!important;
    grid-template-columns:1fr!important;
    gap:24px!important;
  }
  body.cr-graph-page .cr-graph-card{
    width:min(100%,760px)!important;
    max-width:760px!important;
    justify-self:start!important;
  }
  .cr-graph-layout{
    grid-template-columns:1fr;
  }
  .cr-graph-plot-panel{
    grid-template-rows:auto auto auto;
  }
  .cr-graph-canvas{height:360px;}
  .cr-graph-examples{grid-template-columns:1fr 1fr!important;}
}

@media (max-width:680px){
  body.cr-graph-page .cr-hero{padding:28px 0 32px!important;}
  .cr-graph-card .cr-calc-card-inner{padding:12px!important;}
  .cr-graph-head{
    flex-direction:column!important;
    align-items:flex-start!important;
  }
  .cr-graph-ranges,
  .cr-graph-actions{
    grid-template-columns:1fr 1fr;
  }
  .cr-graph-evaluate{
    grid-template-columns:1fr;
  }
  .cr-graph-canvas{
    height:300px;
    min-height:260px;
  }
  .cr-graph-results{
    grid-template-columns:1fr;
  }
  .cr-graph-examples{grid-template-columns:1fr!important;}
}