/* ================= CONVERTISSEUR — KADENCE (mobile-first) ================== */

/* 1) Scope : cible UNIQUEMENT la page au template convertisseur
   -> adapte la classe de body si ton fichier s'appelle autrement.
   Kadence ajoute la classe body: page-template-convertisseur-longueur */
body.page-template-convertisseur-longueur {
  /* optionnel : bord-à-bord */
}
body.page-template-convertisseur-longueur .site,
body.page-template-convertisseur-longueur .content-wrap,
body.page-template-convertisseur-longueur .site-main,
body.page-template-convertisseur-longueur .content-area,
body.page-template-convertisseur-longueur .entry-content {
  background: transparent !important;
}
body.page-template-convertisseur-longueur .wrap,
body.page-template-convertisseur-longueur .content-wrap {
  padding-left: 0;
  padding-right: 0;
}

/* 2) Reset ciblé composant */
.convertisseur-tool, .convertisseur-tool *, .convertisseur-tool *::before, .convertisseur-tool *::after { box-sizing: border-box }
.convertisseur-tool {
  font-family: var(--font-primary, system-ui, sans-serif);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* largeur “lecture” par défaut Kadence */
  max-width: min(1100px, 92vw);
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 24px);
}

/* 3) Conteneur interne (si tu gardes .container dans ton HTML) */
.convertisseur-tool .container { max-width: none; margin: 0; padding-inline: 0 }

/* ---------------- HERO ---------------- */
/* Si ton HTML utilise .hero-convertisseur (d’après ton template) */
.convertisseur-tool .hero-convertisseur { padding: 16px 0 8px; position: relative; overflow: hidden }
.convertisseur-tool .hero-convertisseur::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(16,185,129,.05), rgba(52,211,153,.02));
  z-index: -1;
}
.convertisseur-tool .hero-content { max-width: 100%; padding-inline: 8px; text-align: center; display: flex; align-items: center; flex-direction: column; margin: 0 auto }
.convertisseur-tool .hero-badge {
  display: inline-flex; gap: .375rem; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.15);
  padding: .25rem .6rem; border-radius: 8px; font-size: .75rem; font-weight: 600; color: var(--ow-accent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.convertisseur-tool .hero-title {
  font-size: clamp(1.45rem, 6.2vw, 2.1rem); font-weight: 800; line-height: 1.15; margin: .35rem 0 .4rem;
  background: linear-gradient(135deg, var(--ow-text), var(--ow-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.convertisseur-tool .hero-description { font-size: .95rem; color: var(--ow-muted); max-width: 38ch; line-height: 1.45; margin: 0 auto .75rem }
.convertisseur-tool .hero-features { display: flex; flex-direction: column; gap: .4rem; width: 100%; max-width: 520px }
.convertisseur-tool .feature {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  background: rgba(17,24,39,.4); border: 1px solid var(--ow-border); padding: .5rem .6rem; border-radius: 6px; font-size: .8rem; font-weight: 500;
}

/* ---------------- CONVERTER ---------------- */
.convertisseur-tool .converter-section { padding: 8px 0 20px }
.convertisseur-tool .converter-card {
  background: linear-gradient(145deg, rgba(16,185,129,.06), rgba(52,211,153,.03));
  border: 1px solid var(--ow-border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin: 0;
}
.convertisseur-tool .controls-section {
  padding: .9rem .6rem; border-bottom: 1px solid var(--ow-border);
  background: rgba(17,24,39,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.convertisseur-tool .control-group { display: grid; grid-template-columns: 1fr; gap: .8rem }
.convertisseur-tool .rule-control,
.convertisseur-tool .examples-control {
  display: flex; flex-direction: column; gap: .5rem;
  background: rgba(16,185,129,.03); border: 1px solid rgba(16,185,129,.08); border-radius: 10px; padding: .75rem;
}
.convertisseur-tool .examples-control { background: rgba(52,211,153,.03); border-color: rgba(52,211,153,.08) }
.convertisseur-tool label { font-size: .78rem; font-weight: 600; color: var(--ow-text) }

.convertisseur-tool .range-wrapper {
  display: flex; align-items: center; gap: .6rem; background: var(--ow-bg-secondary);
  border: 1px solid var(--ow-border); border-radius: 8px; padding: .5rem;
}
.convertisseur-tool input[type="range"] {
  flex: 1; appearance: none; -webkit-appearance: none; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--ow-primary) 0%, rgba(16,185,129,.3) 100%);
}
.convertisseur-tool input[type="range"]::-webkit-slider-runnable-track{ height: 6px; border-radius: 3px; background: transparent }
.convertisseur-tool input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ow-primary); border: 2px solid var(--ow-bg); box-shadow: 0 2px 8px rgba(16,185,129,.25)
}
.convertisseur-tool input[type="range"]::-moz-range-track{ height: 6px; border-radius: 3px; background: transparent }
.convertisseur-tool input[type="range"]::-moz-range-thumb{
  width: 20px; height: 20px; border-radius: 50%; background: var(--ow-primary);
  border: 2px solid var(--ow-bg); box-shadow: 0 2px 8px rgba(16,185,129,.25)
}
.convertisseur-tool .range-wrapper output{
  font: 700 .78rem var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  color: var(--ow-primary); background: rgba(16,185,129,.1); padding: .2rem .45rem; border-radius: 4px; min-width: 60px; text-align: center;
}

/* Chips */
.convertisseur-tool .chips{ display: grid; grid-template-columns: 1fr; gap: .5rem }
.convertisseur-tool .chip{
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.15); color: var(--ow-text);
  padding: .6rem .7rem; border-radius: 8px; font-size: .8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .25rem; min-height: 48px; font-weight: 600;
  -webkit-tap-highlight-color: rgba(16,185,129,.1);
}

/* Table → cartes (mobile) */
.convertisseur-tool .table-wrapper{ position: relative; overflow-x: visible }
.convertisseur-tool .conversion-table{ border-collapse: separate; border-spacing: 0 }
.convertisseur-tool .conversion-table thead{ display: none }
.convertisseur-tool .conversion-table tr{
  display: block; background: var(--ow-card); border: 1px solid var(--ow-border); border-radius: 10px; margin-bottom: .6rem; overflow: hidden;
}
.convertisseur-tool .unit-cell, .convertisseur-tool .value-cell, .convertisseur-tool .action-cell { display: block; padding: .75rem; border: none }
.convertisseur-tool .unit-cell{ background: rgba(16,185,129,.05); border-bottom: 1px solid var(--ow-border) }
.convertisseur-tool .unit-info{ display: flex; align-items: center; gap: .5rem }
.convertisseur-tool .unit-symbol{
  font: 700 1.05rem var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  color: var(--ow-bg); background: var(--ow-primary); padding: .2rem .4rem; border-radius: 6px; min-width: 2.4rem; text-align: center;
}
.convertisseur-tool .unit-name{ font-weight: 700; color: var(--ow-text); font-size: .92rem }
.convertisseur-tool .unit-hint{ font-size: .72rem; color: var(--ow-muted) }

.convertisseur-tool .input-group{ display: flex; flex-direction: column; gap: .5rem }
.convertisseur-tool .value-input{
  flex: 1; background: var(--ow-bg-secondary); border: 1px solid var(--ow-border); border-radius: 8px; padding: .7rem .8rem; color: var(--ow-text);
  font: 500 max(16px,1rem) var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  transition: box-shadow .2s, border-color .2s; min-height: 52px; -webkit-tap-highlight-color: transparent;
}
.convertisseur-tool .value-input:focus{ outline: none; border-color: var(--ow-primary); box-shadow: 0 0 0 3px rgba(16,185,129,.12) }

/* Steppers */
.convertisseur-tool .stepper-controls{ display: flex; gap: .4rem; flex-direction: row }
.convertisseur-tool .stepper-btn{
  flex: 1; min-height: 48px; background: rgba(16,185,129,.12); border: 1px solid var(--ow-border); border-radius: 8px;
  font-weight: 800; font-size: 1rem; color: var(--ow-text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, transform .15s;
}
.convertisseur-tool .stepper-btn:hover{ background: var(--ow-primary); color: var(--ow-bg) }
.convertisseur-tool .stepper-btn:active{ transform: scale(.97) }
:dir(ltr) .convertisseur-tool .stepper-controls .stepper-btn:first-child{ order: 1 }
:dir(ltr) .convertisseur-tool .stepper-controls .stepper-btn:last-child{ order: 2 }
:dir(rtl) .convertisseur-tool .stepper-controls .stepper-btn:first-child{ order: 2 }
:dir(rtl) .convertisseur-tool .stepper-controls .stepper-btn:last-child{ order: 1 }

.convertisseur-tool .conversion-hint{ font: .72rem var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); color: var(--ow-muted); margin-top: .25rem }

.convertisseur-tool .copy-btn{
  width: 100%; min-height: 48px; background: rgba(16,185,129,.1); border: 1px solid var(--ow-border-accent); color: var(--ow-text);
  padding: .7rem; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: .85rem; font-weight: 700;
}
.convertisseur-tool .copy-btn:hover{ background: rgba(16,185,129,.18) }
.convertisseur-tool .copy-btn.copied{ background: rgba(16,185,129,.28); border-color: var(--ow-primary) }

.convertisseur-tool .table-footer{ padding: .8rem .6rem; background: rgba(17,24,39,.28); border-top: 1px solid var(--ow-border) }
.convertisseur-tool .footer-controls{ display: flex; flex-direction: column; gap: .75rem }
.convertisseur-tool .decimals-control{
  display: flex; align-items: center; gap: .75rem; background: rgba(16,185,129,.03); border: 1px solid rgba(16,185,129,.08); border-radius: 8px; padding: .6rem;
}
.convertisseur-tool .reset-btn{
  width: 100%; min-height: 48px; background: rgba(153,27,27,.1); border: 1px solid rgba(153,27,27,.32); color: #fca5a5; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700;
}

/* ---------------- RÈGLES / EXEMPLES / VIDÉO ---------------- */
.convertisseur-tool .rules-section{ padding: 16px 0 20px; background: rgba(17,24,39,.28) }
.convertisseur-tool .rules-grid{ display: grid; grid-template-columns: 1fr; gap: .75rem }
.convertisseur-tool .rules-card, .convertisseur-tool .examples-card{
  background: linear-gradient(145deg, rgba(16,185,129,.06), rgba(52,211,153,.03));
  border: 1px solid var(--ow-border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow);
}
.convertisseur-tool .section-title{ display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--ow-text); font-size: 1.05rem; margin: 0 0 .9rem }
.convertisseur-tool .rule-item{ margin-bottom: 1rem }
.convertisseur-tool .rule-title{ font-weight: 800; color: var(--ow-primary); font-size: .95rem; margin: 0 0 .4rem }
.convertisseur-tool .rule-description{ color: var(--ow-muted); font-size: .9rem; margin: 0 0 .6rem }

/* Rule chain */
.convertisseur-tool .rule-chain{
  --chip-bg: rgba(16,185,129,.18);
  --chip-br: rgba(16,185,129,.5);
  --mul-bg: rgba(16,185,129,.22);
  --mul-fg: #0e7c59;
  --div-bg: rgba(52,211,153,.22);
  --div-fg: #0b8469;
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: .55rem; padding: .85rem .9rem; background: var(--ow-bg-secondary); border: 1px solid var(--ow-border); border-radius: 12px;
}
.convertisseur-tool .rule-chain .unit{
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.8rem; height: 2.4rem;
  padding: .25rem .55rem; font: 900 .95rem var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  color: #0B0F1A; background: var(--ow-accent);
  border: 1px solid var(--chip-br); border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 -2px 0 rgba(0,0,0,.08);
}
.convertisseur-tool .rule-chain .arrow{
  display: inline-flex; align-items: center; justify-content: center; padding: .38rem .78rem; min-height: 2.1rem;
  font-weight: 900; font-size: .9rem; line-height: 1; border-radius: 999px; letter-spacing: .2px;
  background: var(--mul-bg); color: var(--ow-text); border: 1px solid rgba(255,255,255,.18);
}
.convertisseur-tool .rule-chain.reverse .arrow{ background: var(--div-bg); color: var(--ow-text) }

.convertisseur-tool .example-item{ background: var(--ow-bg-secondary); border: 1px solid var(--ow-border); border-radius: 8px; padding: 1rem; margin-bottom: .75rem }
.convertisseur-tool .example-title{ color: var(--ow-accent); font-weight: 700; font-size: .85rem; margin: 0 0 .6rem }
.convertisseur-tool .example-start, .convertisseur-tool .example-result{
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-weight: 700; text-align: center; border-radius: 6px; padding: .55rem;
}
.convertisseur-tool .example-start{ background: rgba(16,185,129,.1); color: var(--ow-text) }
.convertisseur-tool .example-result{ background: var(--ow-primary); color: var(--ow-bg) }

/* Vidéo */
.convertisseur-tool .video-section{ padding: 16px 0 20px }
.convertisseur-tool .video-card{
  background: linear-gradient(145deg, rgba(16,185,129,.06), rgba(52,211,153,.03));
  border: 1px solid var(--ow-border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); text-align: center;
}
.convertisseur-tool .video-description{ color: var(--ow-muted); font-size: .95rem; margin: 0 0 1rem }
.convertisseur-tool .video-embed{ position: relative; width: 100%; height: 0; padding-bottom: 56.25%; background: var(--ow-bg-secondary); border-radius: 8px; overflow: hidden; margin: 0 0 .9rem }
.convertisseur-tool .video-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.convertisseur-tool .video-credits{
  background: rgba(17,24,39,.5); border: 1px solid var(--ow-border); border-radius: 8px; padding: .75rem; color: var(--ow-muted); font-size: .78rem; text-align: left;
}

/* ---------------- Responsive / desktop enrichi ---------------- */
@media (min-width: 480px){
  .convertisseur-tool .chips{ grid-template-columns: 1fr 1fr }
}
@media (min-width: 768px){
  .convertisseur-tool { max-width: min(1200px, 94vw) }
  .convertisseur-tool .hero-convertisseur{ padding: 28px 0 18px }
  .convertisseur-tool .hero-content{ max-width: 720px }
  .convertisseur-tool .hero-title{ font-size: clamp(2rem,3.6vw,2.6rem) }
  .convertisseur-tool .hero-description{ max-width: 60ch }

  .convertisseur-tool .control-group{ grid-template-columns: 1.3fr 1fr; gap: 1.25rem }

  /* La table redevient une vraie table */
  .convertisseur-tool .conversion-table thead{ display: table-header-group }
  .convertisseur-tool .conversion-table{ width: 100%; border-collapse: collapse }
  .convertisseur-tool .conversion-table tr{ display: table-row; background: transparent; border: none; border-radius: 0; margin: 0 }
  .convertisseur-tool .unit-cell, .convertisseur-tool .value-cell, .convertisseur-tool .action-cell{
    display: table-cell; padding: clamp(.75rem,2vw,1.1rem); vertical-align: top; border-bottom: 1px solid var(--ow-border);
  }
  .convertisseur-tool .conversion-table thead th{
    background: rgba(17,24,39,.5); color: var(--ow-muted); font-weight: 700; font-size: .9rem; padding: 1rem; text-align: left; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--ow-border);
  }
  .convertisseur-tool .unit-row:hover{ background: rgba(16,185,129,.05) }

  .convertisseur-tool .stepper-controls{ flex-direction: row; gap: .35rem }
  .convertisseur-tool .copy-btn, .convertisseur-tool .reset-btn{ width: auto; min-height: 44px }
  .convertisseur-tool .footer-controls{ flex-direction: row; align-items: center; justify-content: space-between }
  .convertisseur-tool .rules-grid{ grid-template-columns: 1fr 1fr; gap: 1.25rem }
}
@media (min-width: 1024px){
  .convertisseur-tool .hero-convertisseur{ padding: 40px 0 24px }
  .convertisseur-tool .hero-content{ max-width: 980px }
  .convertisseur-tool .hero-title{ font-size: clamp(2.2rem,3.2vw,3rem) }
  .convertisseur-tool .hero-description{ max-width: 70ch }
  .convertisseur-tool .hero-features{ flex-direction: row; justify-content: center; align-items: center; gap: .75rem; flex-wrap: wrap; max-width: 980px }
}

/* Accessibilité & préférences */
.convertisseur-tool :focus{ outline: none }
.convertisseur-tool :focus-visible{ outline: 2px solid var(--ow-primary); outline-offset: 2px; border-radius: 6px }
@media (prefers-reduced-motion: reduce){ .convertisseur-tool *{ animation: none !important; transition: none !important; scroll-behavior: auto !important } }
@media (prefers-contrast: more),(prefers-contrast: high){
  .convertisseur-tool{ --ow-border: rgba(255,255,255,.35); --ow-border-accent: rgba(16,185,129,.6) }
}

/* Impression */
@media print{
  .convertisseur-tool .hero-convertisseur, .convertisseur-tool .video-section{ display: none }
  .convertisseur-tool .converter-card, .convertisseur-tool .rules-card, .convertisseur-tool .examples-card{
    background: #fff !important; color: #000 !important; box-shadow: none !important; border: 1px solid #ccc !important;
  }
  .convertisseur-tool .stepper-controls, .convertisseur-tool .copy-btn, .convertisseur-tool .reset-btn{ display: none !important }
  .convertisseur-tool{ print-color-adjust: exact; -webkit-print-color-adjust: exact; color-adjust: exact }
}

/* Hotfix mobile safe-areas / overflow */
@media (max-width: 768px){
  .convertisseur-tool{ overflow-x: clip }
  .convertisseur-tool .conversion-table{ width: 100% }
  .convertisseur-tool .conversion-table tr{ margin-inline: 0 }
  .convertisseur-tool .unit-cell, .convertisseur-tool .value-cell, .convertisseur-tool .action-cell{ padding-inline: 12px }
  .convertisseur-tool img, .convertisseur-tool video, .convertisseur-tool iframe{ display: block; max-width: 100% }
}
@media (max-width: 400px){
  .convertisseur-tool .range-wrapper output{ min-width: 56px }
  .convertisseur-tool .chip{ min-height: 46px }
}