/* Calculatrice.com – pages outils mathématiques v1
   Fichier neuf : ne remplace aucun CSS existant.
   Utilisé uniquement par angle.php, hypotenuse.php, perimetre.php et pourcentage.php. */

body.cr-tool-page .cr-tool-hero .cr-hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
  gap:30px;
}
body.cr-tool-page .cr-tool-calc-card{
  max-width:640px;
  justify-self:end;
}
body.cr-tool-page .cr-tool-calc-card .cr-calc-card-inner{
  padding:18px;
}
.cr-tool-screen{
  border-radius:20px;
  background:#eef3ff;
  color:#121827;
  padding:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
  margin:12px 0;
}
.cr-tool-screen .cr-calc-result{
  margin-top:8px;
  min-height:38px;
  font-size:clamp(24px,3vw,36px);
  text-align:right;
}
.cr-angle-output{
  font-size:clamp(18px,2.2vw,28px)!important;
  line-height:1.25!important;
  white-space:pre-line;
}
.cr-tool-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.cr-tool-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  color:#d8e2f5;
  font-size:12px;
  font-weight:850;
  letter-spacing:.02em;
}
.cr-tool-field-wide{grid-column:1/-1;}
.cr-tool-field input,
.cr-tool-field select{
  width:100%;
  min-height:44px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:#101827;
  color:#fff;
  padding:9px 11px;
  outline:none;
  font-weight:750;
}
.cr-tool-field input:focus,
.cr-tool-field select:focus{
  border-color:rgba(255,163,0,.75);
  box-shadow:0 0 0 3px rgba(255,163,0,.18);
}
.cr-tool-mode-fields{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.cr-tool-mode-fields[hidden],
.cr-tool-field[hidden]{display:none!important;}
.cr-tool-submit{
  grid-column:1/-1;
  min-height:46px;
  border:0;
  border-radius:16px;
  background:var(--cr-orange);
  color:#2b1900;
  font-weight:950;
  cursor:pointer;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);
}
.cr-tool-submit:hover{filter:brightness(1.04);}
.cr-tool-hero-diagram{
  margin:0 0 12px;
  padding:10px;
  border-radius:18px;
  background:#fff;
  text-align:center;
}
.cr-tool-hero-diagram img{
  max-height:156px;
  width:auto;
  object-fit:contain;
}
.cr-tool-topic-grid .cr-tool-card{
  min-height:172px;
}
.cr-tool-icon{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#fff3d8;
  color:#9b5900;
  font-weight:950;
  margin-bottom:10px;
}
.cr-tool-method-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  align-items:stretch;
}
.cr-method-figure,
.cr-formula-panel,
.cr-limit-panel{
  border:1px solid var(--cr-line);
  border-radius:18px;
  background:#fff;
  padding:16px;
  margin:0;
}
.cr-method-figure{
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}
.cr-method-figure img{
  display:block;
  max-height:230px;
  width:auto;
  object-fit:contain;
  margin:0 auto 10px;
}
.cr-method-figure figcaption{
  color:#667085;
  font-size:13px;
  line-height:1.45;
}
.cr-formula-panel h3,
.cr-limit-panel h3{
  margin-bottom:12px;
}
.cr-formula-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.cr-formula-table td{
  border-bottom:1px solid #edf1f6;
  padding:10px 6px;
  vertical-align:top;
}
.cr-formula-table tr:last-child td{border-bottom:0;}
.cr-formula-table td:first-child{
  color:#546177;
  font-weight:800;
  width:42%;
}
.cr-formula-table code{
  color:#8a4b00;
  font-weight:900;
  white-space:normal;
}
.cr-limit-panel ul{
  margin:0;
  padding-left:18px;
  color:#4d5a70;
}
.cr-limit-panel li + li{margin-top:8px;}
body.cr-angle-page .cr-tool-method-grid,
body.cr-hypotenuse-page .cr-tool-method-grid{
  grid-template-columns:minmax(220px,.75fr) minmax(0,1fr) minmax(0,1fr);
}
@media (max-width:1120px){
  body.cr-tool-page .cr-tool-hero .cr-hero-grid{grid-template-columns:1fr;}
  body.cr-tool-page .cr-tool-calc-card{justify-self:stretch;max-width:none;}
  body.cr-angle-page .cr-tool-method-grid,
  body.cr-hypotenuse-page .cr-tool-method-grid,
  .cr-tool-method-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .cr-tool-form,
  .cr-tool-mode-fields{grid-template-columns:1fr;}
  .cr-calc-examples{grid-template-columns:1fr;}
  .cr-tool-hero-diagram img{max-height:130px;}
}


/* ==========================================================
   v2 - corrections desktop outils géométrie/pourcentage
   - angle.php et hypotenuse.php exploitent la largeur desktop ;
   - perimetre.php et pourcentage.php disposent aussi de champs plus lisibles ;
   - disposition horizontale uniquement sur desktop, retour empilé en mobile.
   ========================================================== */
@media (min-width:1180px){
  body.cr-angle-page .cr-tool-hero .cr-wrap.cr-hero-grid,
  body.cr-hypotenuse-page .cr-tool-hero .cr-wrap.cr-hero-grid,
  body.cr-perimetre-page .cr-tool-hero .cr-wrap.cr-hero-grid,
  body.cr-pourcentage-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-angle-page .cr-hero-copy,
  body.cr-hypotenuse-page .cr-hero-copy,
  body.cr-perimetre-page .cr-hero-copy,
  body.cr-pourcentage-page .cr-hero-copy{
    max-width:600px!important;
  }

  body.cr-angle-page .cr-tool-calc-card,
  body.cr-hypotenuse-page .cr-tool-calc-card,
  body.cr-perimetre-page .cr-tool-calc-card,
  body.cr-pourcentage-page .cr-tool-calc-card{
    width:100%!important;
    max-width:none!important;
    justify-self:stretch!important;
  }

  body.cr-angle-page .cr-tool-calc-card .cr-calc-card-inner,
  body.cr-hypotenuse-page .cr-tool-calc-card .cr-calc-card-inner{
    display:grid!important;
    grid-template-columns:minmax(230px,.82fr) minmax(340px,1.18fr)!important;
    grid-template-areas:
      "head head"
      "diagram screen"
      "form form"
      "examples examples"!important;
    gap:12px 16px!important;
    padding:16px!important;
  }

  body.cr-angle-page .cr-calc-head,
  body.cr-hypotenuse-page .cr-calc-head{grid-area:head!important;margin-bottom:0!important;}
  body.cr-angle-page .cr-tool-hero-diagram,
  body.cr-hypotenuse-page .cr-tool-hero-diagram{grid-area:diagram!important;margin:0!important;height:100%!important;min-height:188px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
  body.cr-angle-page .cr-tool-screen,
  body.cr-hypotenuse-page .cr-tool-screen{grid-area:screen!important;margin:0!important;min-height:188px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;}
  body.cr-angle-page .cr-tool-form,
  body.cr-hypotenuse-page .cr-tool-form{grid-area:form!important;margin-top:0!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:end!important;}
  body.cr-angle-page .cr-calc-examples,
  body.cr-hypotenuse-page .cr-calc-examples{grid-area:examples!important;margin-top:0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  body.cr-angle-page .cr-tool-form .cr-tool-submit{
    grid-column:auto!important;
    min-height:48px!important;
  }
  body.cr-angle-page .cr-tool-form .cr-tool-field{
    grid-column:auto!important;
  }

  body.cr-hypotenuse-page .cr-tool-form .cr-tool-field-wide{
    grid-column:span 2!important;
  }
  body.cr-hypotenuse-page .cr-tool-form .cr-tool-mode-fields{
    grid-column:span 2!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.cr-hypotenuse-page .cr-tool-form .cr-tool-submit{
    grid-column:span 4!important;
  }

  body.cr-perimetre-page .cr-tool-calc-card .cr-calc-card-inner,
  body.cr-pourcentage-page .cr-tool-calc-card .cr-calc-card-inner{
    display:grid!important;
    grid-template-columns:minmax(320px,.92fr) minmax(340px,1.08fr)!important;
    grid-template-areas:
      "head head"
      "screen form"
      "examples examples"!important;
    gap:12px 16px!important;
    padding:16px!important;
  }
  body.cr-perimetre-page .cr-calc-head,
  body.cr-pourcentage-page .cr-calc-head{grid-area:head!important;margin-bottom:0!important;}
  body.cr-perimetre-page .cr-tool-screen,
  body.cr-pourcentage-page .cr-tool-screen{grid-area:screen!important;margin:0!important;min-height:186px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;}
  body.cr-perimetre-page .cr-tool-form,
  body.cr-pourcentage-page .cr-tool-form{grid-area:form!important;margin-top:0!important;align-content:start!important;}
  body.cr-perimetre-page .cr-calc-examples,
  body.cr-pourcentage-page .cr-calc-examples{grid-area:examples!important;margin-top:0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

@media (min-width:1180px) and (max-width:1320px){
  body.cr-angle-page .cr-tool-hero .cr-wrap.cr-hero-grid,
  body.cr-hypotenuse-page .cr-tool-hero .cr-wrap.cr-hero-grid,
  body.cr-perimetre-page .cr-tool-hero .cr-wrap.cr-hero-grid,
  body.cr-pourcentage-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-angle-page .cr-tool-calc-card .cr-calc-card-inner,
  body.cr-hypotenuse-page .cr-tool-calc-card .cr-calc-card-inner{
    grid-template-columns:minmax(200px,.86fr) minmax(300px,1.14fr)!important;
  }
}

/* Champs plus visibles sur les cartes sombres : saisie claire, focus orange. */
body.cr-tool-page .cr-tool-field{
  color:#ffffff!important;
  font-size:12px!important;
  font-weight:900!important;
}
body.cr-tool-page .cr-tool-field input,
body.cr-tool-page .cr-tool-field select{
  min-height:46px!important;
  border:1px solid rgba(255,255,255,.74)!important;
  background:#edf3ff!important;
  color:#121827!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 0 rgba(0,0,0,.10)!important;
  font-weight:850!important;
}
body.cr-tool-page .cr-tool-field input:hover,
body.cr-tool-page .cr-tool-field select:hover{
  border-color:#ffffff!important;
  background:#f6f9ff!important;
}
body.cr-tool-page .cr-tool-field input:focus,
body.cr-tool-page .cr-tool-field select:focus{
  border-color:var(--cr-orange)!important;
  background:#ffffff!important;
  box-shadow:0 0 0 3px rgba(255,163,0,.28),inset 0 1px 0 rgba(255,255,255,1)!important;
}
body.cr-tool-page .cr-tool-field input::placeholder{color:#6b7280!important;}
body.cr-tool-page .cr-tool-field select option{color:#121827;background:#ffffff;}

@media (max-width:1179px){
  body.cr-angle-page .cr-tool-calc-card .cr-calc-card-inner,
  body.cr-hypotenuse-page .cr-tool-calc-card .cr-calc-card-inner,
  body.cr-perimetre-page .cr-tool-calc-card .cr-calc-card-inner,
  body.cr-pourcentage-page .cr-tool-calc-card .cr-calc-card-inner{
    display:block!important;
  }
}