/* Calculatrice.com – pages surfaces v1
   Fichier neuf : ne remplace aucun CSS existant.
   Utilisé uniquement par les pages math/surface-*.php. */

body.cr-surface-tool-page .cr-surface-calc-card .cr-calc-card-inner{
  padding:18px;
}
body.cr-surface-tool-page .cr-surface-hero-diagram img{
  max-height:180px;
}
body.cr-surface-tool-page .cr-surface-result-note{
  margin-top:6px;
  color:#526076;
  font-size:12px;
  line-height:1.35;
}
body.cr-surface-tool-page .cr-surface-form{
  align-items:end;
}
body.cr-surface-tool-page .cr-surface-form .cr-tool-submit{
  min-height:48px;
}
body.cr-surface-tool-page .cr-surface-topic-grid .cr-tool-card{
  min-height:168px;
}
body.cr-surface-tool-page .cr-method-figure img{
  max-height:250px;
}
body.cr-surface-tool-page .cr-formula-table code{
  display:inline-block;
  max-width:100%;
}

@media (min-width:1180px){
  body.cr-surface-tool-page .cr-tool-hero .cr-wrap.cr-hero-grid{
    width:min(88vw,1500px)!important;
    max-width:1500px!important;
    grid-template-columns:minmax(300px,.68fr) minmax(680px,1.32fr)!important;
    gap:38px!important;
    align-items:center!important;
  }
  body.cr-surface-tool-page .cr-hero-copy{max-width:600px!important;}
  body.cr-surface-tool-page .cr-surface-calc-card{
    width:100%!important;
    max-width:none!important;
    justify-self:stretch!important;
  }
  body.cr-surface-tool-page .cr-surface-calc-card .cr-calc-card-inner{
    display:grid!important;
    grid-template-columns:minmax(220px,.82fr) minmax(360px,1.18fr)!important;
    grid-template-areas:
      "head head"
      "diagram screen"
      "form form"
      "examples examples"!important;
    gap:12px 16px!important;
    padding:16px!important;
  }
  body.cr-surface-tool-page .cr-calc-head{grid-area:head!important;margin-bottom:0!important;}
  body.cr-surface-tool-page .cr-surface-hero-diagram{
    grid-area:diagram!important;
    margin:0!important;
    height:100%!important;
    min-height:196px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body.cr-surface-tool-page .cr-tool-screen{
    grid-area:screen!important;
    margin:0!important;
    min-height:196px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  body.cr-surface-tool-page .cr-surface-form{
    grid-area:form!important;
    margin-top:0!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  body.cr-surface-tool-page .cr-surface-form .cr-tool-field{grid-column:auto!important;}
  body.cr-surface-tool-page .cr-surface-form .cr-tool-submit{grid-column:auto!important;}
  body.cr-surface-tool-page .cr-surface-form.cr-surface-form-1 .cr-tool-submit{grid-column:span 3!important;}
  body.cr-surface-tool-page .cr-surface-form.cr-surface-form-2 .cr-tool-submit{grid-column:span 2!important;}
  body.cr-surface-tool-page .cr-surface-form.cr-surface-form-3 .cr-tool-submit{grid-column:auto!important;}
  body.cr-surface-tool-page .cr-calc-examples{
    grid-area:examples!important;
    margin-top:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.cr-surface-tool-page .cr-tool-method-grid{
    grid-template-columns:minmax(220px,.75fr) minmax(0,1fr) minmax(0,1fr)!important;
  }
}

@media (min-width:1180px) and (max-width:1320px){
  body.cr-surface-tool-page .cr-tool-hero .cr-wrap.cr-hero-grid{
    grid-template-columns:minmax(280px,.78fr) minmax(610px,1.22fr)!important;
    gap:28px!important;
  }
  body.cr-surface-tool-page .cr-surface-calc-card .cr-calc-card-inner{
    grid-template-columns:minmax(200px,.86fr) minmax(300px,1.14fr)!important;
  }
}

@media (max-width:1179px){
  body.cr-surface-tool-page .cr-surface-calc-card .cr-calc-card-inner{display:block!important;}
  body.cr-surface-tool-page .cr-surface-form{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.cr-surface-tool-page .cr-surface-form .cr-tool-submit{grid-column:1/-1;}
}
@media (max-width:640px){
  body.cr-surface-tool-page .cr-surface-form{grid-template-columns:1fr;}
  body.cr-surface-tool-page .cr-surface-hero-diagram img{max-height:140px;}
}