/* Calculatrice.com — unification visuelle des outils pourcentage et surfaces.
   Même famille que calculatrice en ligne / calculatrice graphique : orange, noir,
   cartes blanches et calculateur sombre. Aucun changement de logique métier. */

body.cr-math-unified-page .cr-hero{
  padding-top:44px;
  padding-bottom:46px;
}
body.cr-math-unified-page .cr-hero-grid{align-items:center}
body.cr-math-unified-page .cr-hero-copy{max-width:720px}
body.cr-math-unified-page .cr-content-grid{margin-top:0}
body.cr-math-unified-page .cr-primary>.cr-section.cr-surface{
  margin-bottom:18px;
}
body.cr-math-unified-page .cr-primary>.cr-ad{margin:0 0 18px}

/* Calculateur de pourcentage : la carte claire devient une vraie calculatrice sombre. */
body.cr-pourcentage-page .cr-percent-card{
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:28px!important;
  background:#131823!important;
  box-shadow:0 24px 55px rgba(51,30,0,.35)!important;
  padding:16px!important;
  color:#fff;
}
body.cr-pourcentage-page .cr-percent-card .cr-calc-card-inner{
  border-radius:24px;
  background:linear-gradient(180deg,#202838,#121827);
  padding:16px;
}
body.cr-pourcentage-page .cr-percent-card .cr-calc-head{margin-bottom:12px}
body.cr-pourcentage-page .cr-percent-card .cr-calc-head h2{
  margin:0;
  color:#fff;
  font-size:18px;
}
body.cr-pourcentage-page .cr-percent-card .cr-calc-head p{
  margin:4px 0 0;
  color:#b7c0d4;
  font-size:13px;
}
body.cr-pourcentage-page .cr-percent-tabs{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:12px 0;
}
body.cr-pourcentage-page .cr-percent-tab{
  min-height:48px;
  border-color:rgba(255,255,255,.16);
  background:#2b3448;
  color:#edf2ff;
  border-radius:14px;
  font-size:12px;
  line-height:1.25;
}
body.cr-pourcentage-page .cr-percent-tab:hover{filter:brightness(1.08)}
body.cr-pourcentage-page .cr-percent-tab[aria-selected="true"]{
  border-color:#ffa300;
  background:#ffa300;
  color:#2b1900;
}
body.cr-pourcentage-page .cr-field-grid label{
  color:#fff;
  font-size:12px;
  font-weight:850;
}
body.cr-pourcentage-page .cr-field-grid input,
body.cr-pourcentage-page .cr-field-grid select{
  width:100%;
  min-height:46px;
  border:1px solid rgba(255,255,255,.68);
  background:#edf3ff;
  color:#121827;
  font-weight:800;
  outline:none;
}
body.cr-pourcentage-page .cr-field-grid input:focus,
body.cr-pourcentage-page .cr-field-grid select:focus{
  border-color:#ffa300;
  background:#fff;
  box-shadow:0 0 0 3px rgba(255,163,0,.28);
}
body.cr-pourcentage-page .cr-percent-actions button{
  min-height:44px;
  border-color:rgba(255,255,255,.18);
  background:#3e4a63;
  color:#fff;
  border-radius:14px;
  font-weight:850;
}
body.cr-pourcentage-page .cr-percent-actions button:first-child{
  background:#ffa300;
  border-color:#ffa300;
  color:#2b1900;
}
body.cr-pourcentage-page .cr-percent-result{
  min-height:112px;
  border:0;
  border-radius:20px;
  background:#eef3ff;
  color:#121827;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
}
body.cr-pourcentage-page .cr-percent-card>.cr-calc-card-inner>.cr-muted-small{
  color:#aab4c8;
  font-size:12px;
}

/* Pages de surfaces : carte sombre, champs clairs et résultat dans un écran. */
body.cr-surface-tool-page .cr-surface-calc-card{
  width:100%;
  max-width:590px;
  justify-self:end;
}
body.cr-surface-tool-page .cr-surface-calc-card .cr-calc-card-inner{padding:16px}
body.cr-surface-tool-page .cr-surface-control-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-items:end;
}
body.cr-surface-tool-page .cr-surface-mode-fields{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
body.cr-surface-tool-page .cr-surface-mode-fields[hidden]{display:none!important}
body.cr-surface-tool-page .cr-tool-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  margin:0;
  color:#fff;
  font-size:12px;
  font-weight:850;
}
body.cr-surface-tool-page .cr-tool-field>span{
  display:block;
  margin:0;
  color:#fff;
}
body.cr-surface-tool-page .cr-tool-field input,
body.cr-surface-tool-page .cr-tool-field select{
  width:100%;
  min-height:46px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:14px;
  background:#edf3ff;
  color:#121827;
  padding:9px 11px;
  font:inherit;
  font-weight:800;
  outline:none;
}
body.cr-surface-tool-page .cr-tool-field input:focus,
body.cr-surface-tool-page .cr-tool-field select:focus{
  border-color:#ffa300;
  background:#fff;
  box-shadow:0 0 0 3px rgba(255,163,0,.28);
}
body.cr-surface-tool-page .cr-example-buttons{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
body.cr-surface-tool-page .cr-example-buttons button{
  min-height:44px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:15px;
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:10px 11px;
  text-align:left;
  font-weight:800;
}
body.cr-surface-tool-page .cr-example-buttons button:hover{background:rgba(255,255,255,.13)}
body.cr-surface-tool-page .cr-result-box{
  min-height:122px;
  margin-top:12px;
  border:0;
  border-radius:20px;
  background:#eef3ff;
  color:#121827;
  padding:13px 14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
}
body.cr-surface-tool-page .cr-result-box strong{
  color:#667085;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
body.cr-surface-tool-page .cr-result-box output{
  margin:6px 0;
  color:#101828;
  font-size:clamp(28px,4vw,40px);
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.04em;
}
body.cr-surface-tool-page .cr-result-box span,
body.cr-surface-tool-page .cr-result-box p{
  display:block;
  margin:4px 0 0;
  color:#526076;
  font-size:12px;
  line-height:1.4;
}
body.cr-surface-tool-page .cr-direct-answer{
  margin:16px 0 0;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.22);
  border-left:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  background:rgba(18,24,39,.18);
  color:#fff;
  line-height:1.68;
}
body.cr-surface-tool-page .cr-proof{
  border-left:4px solid #ffa300;
  background:#fff7e8;
  color:#563400;
}
body.cr-surface-tool-page .cr-formula-table,
body.cr-surface-tool-page .cr-example-table{font-size:14px}
body.cr-surface-tool-page .cr-formula-table code{
  color:#8a4b00;
  font-weight:900;
}
body.cr-surface-tool-page .cr-related-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
body.cr-surface-tool-page .cr-related-card{
  min-height:150px;
  padding:16px;
  border:1px solid #e6ebf3;
  border-radius:18px;
  background:#fff;
}
body.cr-surface-tool-page .cr-related-card p{color:#5e6a7e;font-size:14px}
body.cr-surface-tool-page .cr-related-card a{font-weight:850}

@media (min-width:1180px){
  body.cr-pourcentage-page .cr-hero-grid{
    grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);
    gap:34px;
  }
  body.cr-surface-tool-page .cr-hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(500px,.9fr);
    gap:34px;
  }
}
@media (max-width:900px){
  body.cr-math-unified-page .cr-hero{padding:32px 0 34px}
  body.cr-pourcentage-page .cr-percent-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.cr-surface-tool-page .cr-surface-calc-card{max-width:none;justify-self:stretch}
  body.cr-surface-tool-page .cr-related-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  body.cr-pourcentage-page .cr-percent-tabs,
  body.cr-pourcentage-page .cr-field-grid,
  body.cr-surface-tool-page .cr-surface-control-grid,
  body.cr-surface-tool-page .cr-surface-mode-fields,
  body.cr-surface-tool-page .cr-example-buttons{grid-template-columns:1fr}
  body.cr-surface-tool-page .cr-surface-mode-fields{grid-column:auto}
  body.cr-math-unified-page .cr-surface{padding:17px}
  body.cr-surface-tool-page .cr-formula-table,
  body.cr-surface-tool-page .cr-example-table{display:block;overflow-x:auto;white-space:nowrap}
}