:root {
  color-scheme: light;
  --bg: #fff8ed;
  --bg-soft: #fffdf8;
  --surface: #ffffff;
  --surface-soft: #f7faf8;
  --ink: #24323d;
  --muted: #68757f;
  --line: #e8e2d8;
  --primary: #e85d3f;
  --primary-dark: #c9432a;
  --primary-soft: #fff0eb;
  --mint: #e8f7f0;
  --mint-ink: #277055;
  --yellow: #ffe7a5;
  --yellow-ink: #72551c;
  --good: #237a52;
  --warn: #a56216;
  --bad: #a73a3a;
  --shadow: 0 18px 50px rgba(63, 48, 32, .08);
  --radius: 24px;
  --radius-small: 16px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(255, 224, 174, .34), transparent 28rem),
    linear-gradient(180deg, var(--bg) 0, var(--bg-soft) 38rem, #fff 100%);
}

a { color: inherit; }
button, select, input { font: inherit; }
button, label, input[type="radio"], input[type="checkbox"] { -webkit-tap-highlight-color: transparent; }

.site-header {
  position: relative;
  z-index: 20;
  padding: 20px 20px 0;
}

.site-header-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.site-header-centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-logo-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  text-decoration: none;
}

.site-logo {
  display: block;
  width: min(720px, 96vw);
  height: auto;
  max-height: none;
  object-fit: contain;
}

.site-main { min-height: 70vh; }

.tool-page {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 70px;
}

.tool-hero {
  max-width: 820px;
  margin: 0 auto 28px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 15px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--mint-ink);
  font-size: .79rem;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.tool-hero h1 {
  max-width: 780px;
  margin: 0 auto 13px;
  font-size: clamp(2.05rem, 5.6vw, 4.35rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.tool-hero > p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  line-height: 1.65;
}

.trust-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(39,112,85,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #466159;
  font-size: .87rem;
  font-weight: 750;
}

.ad-space {
  min-height: 102px;
  margin: 28px 0;
  display: block;
  width: 100%;
  min-width: 0;
  border-radius: 18px;
  color: #a29a8d;
  background: rgba(255,255,255,.48);
  border: 1px dashed #ddd3c3;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ad-space .adsbygoogle {
  display: block !important;
  width: 100% !important;
}

.optimizer-shell {
  position: relative;
  padding: 24px;
  border: 1px solid rgba(220, 211, 197, .88);
  border-radius: 32px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.simple-settings { display: grid; gap: 22px; }

.setting-block > .setting-title,
.setting-title {
  display: block;
  margin-bottom: 10px;
  font-size: .91rem;
  font-weight: 850;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.choice-card,
.size-chip {
  position: relative;
  cursor: pointer;
}

.choice-card input,
.size-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-card span {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 15px;
  border: 2px solid transparent;
  border-radius: 18px;
  background: #f7f5f1;
  transition: .15s ease;
}

.choice-card strong { font-size: .98rem; }
.choice-card small { color: var(--muted); line-height: 1.35; }
.choice-card input:checked + span {
  border-color: rgba(232,93,63,.34);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px rgba(232,93,63,.04);
}
.choice-card:hover span { transform: translateY(-1px); }

.setting-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
}

.resize-block { min-width: 0; }
.size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.size-chip span {
  min-width: 62px;
  display: inline-flex;
  justify-content: center;
  padding: 10px 11px;
  border: 1px solid #e4ded4;
  border-radius: 12px;
  background: #fff;
  font-weight: 850;
  color: #59656d;
  transition: .15s ease;
}
.size-chip input:checked + span {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}

.trim-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 52px;
  padding: 10px 13px;
  border-radius: 14px;
  background: var(--mint);
  color: #355f50;
  cursor: pointer;
}
.trim-toggle input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  accent-color: var(--good);
}
.trim-toggle > span { display:grid; gap:2px; }
.trim-toggle strong { font-size:.88rem; line-height:1.25; }
.trim-toggle small { color:#5c776d; font-size:.76rem; line-height:1.3; font-weight:600; }

.advanced-options {
  border-top: 1px solid #eee8de;
  padding-top: 15px;
}
.advanced-options summary {
  width: max-content;
  max-width: 100%;
  cursor: pointer;
  color: #68757f;
  font-size: .9rem;
  font-weight: 800;
}
.advanced-inner {
  width: min(420px, 100%);
  margin-top: 12px;
  display: grid;
  gap: 7px;
}
.advanced-inner label { color: var(--muted); font-size: .84rem; font-weight: 750; }
.advanced-inner select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd7cd;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}
.field.inactive { opacity: .48; }

.dropzone {
  position: relative;
  min-height: 230px;
  margin-top: 22px;
  display: grid;
  place-items: center;
  padding: 34px 24px;
  border: 2px dashed #e5b5a8;
  border-radius: 24px;
  background: linear-gradient(145deg, #fff9f5, #fffdf9);
  text-align: center;
  cursor: pointer;
  transition: .16s ease;
  overflow: hidden;
}
.dropzone:hover,
.dropzone.dragover {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: translateY(-1px);
}
#fileInput {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.drop-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 13px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: var(--primary);
  color: #fff;
  font-size: 1.65rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(232,93,63,.20);
}
.dropzone strong {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(1.12rem, 3vw, 1.4rem);
}
.dropzone span { color: var(--muted); font-size: .95rem; }

.toolbar-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

button {
  border: 0;
  border-radius: 13px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 850;
  transition: transform .12s ease, opacity .12s ease, background .12s ease;
}
button:hover { transform: translateY(-1px); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.primary { color: #fff; background: var(--primary); }
.primary:hover { background: var(--primary-dark); }
.secondary { color: #4f5d66; background: #f0f2f2; }
.danger { color: #9a3d3d; background: #fff0f0; }

.summary {
  display: none;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 9px;
  margin: 18px 0 0;
}
.summary.visible { display: grid; }
.stat {
  padding: 13px;
  border-radius: 16px;
  background: #f8f7f4;
}
.stat small { display: block; margin-bottom: 4px; color: var(--muted); font-size: .76rem; }
.stat strong { font-size: 1rem; }

.list { display: grid; gap: 18px; margin-top: 18px; }
.card {
  overflow: hidden;
  border: 1px solid #e8e3da;
  border-radius: 24px;
  background: #fff;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  border-bottom: 1px solid #eee9e1;
}
.name { min-width: 0; }
.name strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.name small { color: var(--muted); }
.badge {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f0f2f2;
  color: #66747d;
  font-size: .78rem;
  font-weight: 850;
}
.badge.good { color: var(--good); background: #eaf7f0; }
.badge.warn { color: var(--warn); background: #fff3df; }
.badge.bad { color: var(--bad); background: #fff0f0; }
.card-body { padding: 15px; }

.item-settings {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee9e1;
  display: grid;
  gap: 16px;
}
.item-choice-grid { grid-template-columns: repeat(3, 1fr); }
.item-setting-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
}
.item-actions-main {
  display: flex;
  justify-content: flex-start;
}
.item-actions-main .process {
  min-width: min(100%, 240px);
}
.compare-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  font-size: .84rem;
  font-weight: 800;
}
.compare-meta span:last-child { text-align:right; }
.comparison {
  --split: 50%;
  --zoom: 1;
  --pan-x: 0px;
  --pan-y: 0px;
  position: relative;
  height: min(64vh, 590px);
  min-height: 370px;
  overflow: hidden;
  border: 1px solid #e4e1dc;
  border-radius: 18px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eee 25%, transparent 25%),
    linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%),
    linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  user-select: none;
  touch-action: none;
  outline: none;
}
.comparison.can-pan { cursor: grab; }
.comparison.is-panning { cursor: grabbing; }
.comparison.is-splitting { cursor: ew-resize; }
.comparison.is-pinching { cursor: zoom-in; }
.comparison:focus-visible { box-shadow: 0 0 0 4px rgba(232,93,63,.15); }
.comparison-layer { position:absolute; inset:0; overflow:hidden; contain:paint; }
.comparison-layer img {
  position:absolute;
  left:calc(50% + var(--pan-x));
  top:calc(50% + var(--pan-y));
  display:block;
  width:auto;
  height:auto;
  max-width:calc(100% - 28px);
  max-height:calc(100% - 28px);
  object-fit:contain;
  image-rendering:auto;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(var(--zoom));
  transform-origin:center center;
  will-change:left, top, transform;
}
.comparison-after { clip-path: inset(0 0 0 var(--split)); }
.compare-divider {
  position:absolute;
  z-index:4;
  top:0; bottom:0;
  left:var(--split);
  width:3px;
  transform:translateX(-1.5px);
  background:rgba(255,255,255,.97);
  box-shadow:0 0 0 1px rgba(36,50,61,.28),0 0 10px rgba(0,0,0,.18);
  pointer-events:none;
}
.compare-handle {
  position:absolute;
  top:50%; left:50%;
  width:44px; height:44px;
  transform:translate(-50%,-50%);
  display:grid; place-items:center;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  box-shadow:0 4px 15px rgba(0,0,0,.18);
  font-size:20px;
  font-weight:900;
}
.compare-range { position:absolute; z-index:5; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; }
.compare-label {
  position:absolute;
  z-index:3;
  top:11px;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(36,50,61,.75);
  color:#fff;
  backdrop-filter:blur(3px);
  font-size:.75rem;
  font-weight:850;
  pointer-events:none;
}
.compare-label.before { left:11px; }
.compare-label.after { right:11px; }
.placeholder { display:grid; place-items:center; height:100%; padding:20px; color:var(--muted); text-align:center; }
.progress {
  position:absolute;
  inset:auto 12px 12px;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(70,80,90,.15);
}
.progress > div { height:100%; width:15%; border-radius:inherit; background:var(--primary); animation:slide 1.15s infinite ease-in-out; }
@keyframes slide { 0%{transform:translateX(-120%)} 100%{transform:translateX(750%)} }
.card-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  padding:13px 16px;
  border-top:1px solid #eee9e1;
  background:#fffdf9;
}
.metrics { display:flex; flex-wrap:wrap; gap:11px; color:var(--muted); font-size:.83rem; }
.metrics strong { color:var(--ink); }
.card-actions { display:flex; gap:7px; }

.tool-tip {
  margin: 14px 2px 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
  text-align: center;
}

.content-section {
  width: min(900px, 100%);
  margin: 56px auto 0;
}
.content-section h2 {
  margin: 0 0 12px;
  font-size: clamp(1.55rem, 3.5vw, 2.35rem);
  letter-spacing: -.035em;
}
.content-section > p { color: var(--muted); line-height: 1.75; }
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.info-card {
  padding: 20px;
  border: 1px solid #eee5d8;
  border-radius: 20px;
  background: #fff;
}
.info-card .number {
  width: max-content; min-width:34px; height:34px;
  padding: 0 8px;
  display:grid; place-items:center;
  margin-bottom:12px;
  border-radius:12px;
  background:var(--yellow);
  color:var(--yellow-ink);
  font-weight:900;
}
.info-card h3 { margin:0 0 7px; font-size:1rem; }
.info-card p { margin:0; color:var(--muted); line-height:1.6; font-size:.91rem; }
.faq-list { display:grid; gap:9px; margin-top:18px; }
.faq-list details {
  padding: 15px 17px;
  border:1px solid #ece5da;
  border-radius:16px;
  background:#fff;
}
.faq-list summary { cursor:pointer; font-weight:850; }
.faq-list p { margin:10px 0 0; color:var(--muted); line-height:1.65; }

.site-footer {
  padding: 32px 20px 24px;
  border-top: 1px solid #eee6da;
  background: #fffdf9;
}
.site-footer-inner {
  width:min(1180px,100%);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
}
.site-footer strong { font-size:1.05rem; }
.site-footer p { margin:6px 0 0; color:var(--muted); font-size:.88rem; }
.site-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 16px; }
.site-footer nav a { color:#64717a; text-decoration:none; font-size:.88rem; }
.site-footer nav a:hover { text-decoration:underline; }
.copyright { width:min(1180px,100%); margin:22px auto 0 !important; font-size:.78rem !important; }

@media (max-width: 780px) {
  .site-logo-link { width:100%; }
  .site-header-inner { width:100%; }
  .item-choice-grid { grid-template-columns:1fr; }
  .item-setting-line { grid-template-columns:1fr; align-items:stretch; }
  .item-actions-main .process { width:100%; }
  .site-header { padding: 10px 8px 0; }
  .site-logo { width:100%; max-width:none; max-height:none; }
  .tool-page { width:min(100% - 20px,1180px); padding-top:24px; }
  .tool-hero h1 { font-size:clamp(2.25rem,11vw,3.3rem); }
  .optimizer-shell { padding:15px; border-radius:24px; }
  .choice-grid { grid-template-columns:1fr; }
  .choice-card span { min-height:72px; }
  .setting-line { grid-template-columns:1fr; align-items:stretch; }
  .trim-toggle { white-space:normal; }
  .summary { grid-template-columns:1fr 1fr; }
  .comparison { height:52vh; min-height:300px; border-radius:15px; }
  .card-head { align-items:flex-start; flex-direction:column; }
  .card-foot { align-items:stretch; flex-direction:column; }
  .card-actions { width:100%; }
  .card-actions button { flex:1; }
  .info-grid { grid-template-columns:1fr; }
  .site-footer-inner { flex-direction:column; }
  .site-footer nav { justify-content:flex-start; }
}

@media (max-width: 480px) {
  .site-header { padding-left:6px; padding-right:6px; }
  .site-logo { width:100%; max-width:none; max-height:none; }
  .tool-page { width:min(100% - 14px,1180px); }
  .optimizer-shell { padding:11px; }
  .size-options { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
  .size-chip span { min-width:0; width:100%; padding:9px 4px; font-size:.82rem; }
  .summary { gap:6px; }
  .stat { padding:10px; }
  .compare-meta { font-size:.75rem; }
  .comparison { height:46vh; min-height:270px; }
  .metrics { display:grid; gap:5px; }
}

/* Sur la page de l’optimiseur, le navigateur conserve le défilement à un doigt
   mais ne prend pas en charge le pincement de la page. Le comparateur gère
   lui-même son zoom local avec touch-action:none. */
body.optimizer-no-page-pinch {
  touch-action: pan-x pan-y;
}
body.optimizer-no-page-pinch .comparison,
body.optimizer-no-page-pinch .comparison * {
  touch-action: none !important;
}


.toolbar-actions-bottom {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eee9e1;
}
.advanced-options[hidden] { display: none !important; }


/* Optimiseur JPG */
.item-setting-line-single {
  grid-template-columns: 1fr;
}
.jpeg-advanced[hidden] {
  display: none !important;
}
.jpeg-quality-field {
  width: min(520px, 100%);
}
.jpeg-quality-field input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}
.jpeg-quality-field small {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}


/* Convertisseur */
.quality-settings-block[hidden] { display: none !important; }
.format-note {
  margin: -4px 0 0;
  padding: 10px 13px;
  border-radius: 14px;
  background: #fff4e4;
  color: #7f5b26;
  font-size: .84rem;
  line-height: 1.45;
  font-weight: 700;
}
.format-note[hidden] { display:none !important; }


/* Redimensionneur d’image */
.resize-quick-options { gap: 8px; }
.dimension-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  width: min(720px, 100%);
}
.dimension-field { display: grid; gap: 6px; }
.dimension-field > label {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}
.dimension-input-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #ddd7cd;
  border-radius: 13px;
  background: #fff;
}
.dimension-input-wrap input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 11px 12px;
  background: transparent;
  color: var(--ink);
  font-weight: 850;
}
.dimension-input-wrap span {
  padding: 0 12px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 750;
}
.ratio-lock {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  border: 1px solid #ded8cf;
  background: #f6f5f2;
  color: #6c777e;
  white-space: nowrap;
}
.ratio-lock.active {
  background: var(--mint);
  color: var(--mint-ink);
  border-color: rgba(39,112,85,.18);
}
.image-dimensions-info {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: .82rem;
}

@media (max-width: 620px) {
  .dimension-editor {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ratio-lock {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
  .dimension-field:first-child { grid-column: 1; grid-row: 1; }
  .dimension-field:last-child { grid-column: 2; grid-row: 1; }
}


/* Recadrage d'image */
.crop-stage-wrap {
  padding: 10px;
  border: 1px solid #e7e1d8;
  border-radius: 20px;
  background: #f7f7f5;
}
.crop-stage {
  position: relative;
  width: 100%;
  height: min(68vh, 650px);
  min-height: 380px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #ececec 25%, transparent 25%),
    linear-gradient(-45deg, #ececec 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ececec 75%),
    linear-gradient(-45deg, transparent 75%, #ececec 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  touch-action: none;
  user-select: none;
}
.crop-source {
  display: block;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
.crop-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(255,255,255,.86);
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}
.crop-loading[hidden] { display: none; }
.crop-box {
  position: absolute;
  z-index: 4;
  display: block;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(36,50,61,.48), 0 0 0 9999px rgba(23,31,37,.52);
  cursor: move;
  touch-action: none;
  outline: none;
}
.crop-box:focus-visible { box-shadow: 0 0 0 3px rgba(232,93,63,.35), 0 0 0 9999px rgba(23,31,37,.52); }
.crop-box.dragging { cursor: grabbing; }
.crop-grid-line { position:absolute; pointer-events:none; background:rgba(255,255,255,.52); }
.crop-grid-v { top:0; bottom:0; width:1px; }
.crop-grid-v.one { left:33.333%; }
.crop-grid-v.two { left:66.666%; }
.crop-grid-h { left:0; right:0; height:1px; }
.crop-grid-h.one { top:33.333%; }
.crop-grid-h.two { top:66.666%; }
.crop-handle {
  position:absolute;
  z-index:6;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 2px 9px rgba(0,0,0,.22), inset 0 0 0 3px #fff;
  touch-action:none;
}
.crop-handle.nw { left:-14px; top:-14px; cursor:nwse-resize; }
.crop-handle.ne { right:-14px; top:-14px; cursor:nesw-resize; }
.crop-handle.sw { left:-14px; bottom:-14px; cursor:nesw-resize; }
.crop-handle.se { right:-14px; bottom:-14px; cursor:nwse-resize; }
.crop-selection-info {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:10px;
  color:var(--muted);
  font-size:.84rem;
}
.crop-selection-info strong { color:var(--ink); }
.crop-ratio-options {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.crop-ratio-options .size-chip span { min-width:68px; }
.crop-main-actions {
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px;
}
.crop-main-actions .process { min-width:220px; }
.crop-result {
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #eee9e1;
}
.crop-result[hidden] { display:none !important; }
.crop-result-head {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
  color:var(--muted);
  font-size:.86rem;
}
.crop-result-head strong { color:var(--ink); }
.crop-result-preview {
  min-height:220px;
  max-height:520px;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:12px;
  border:1px solid #e4e1dc;
  border-radius:16px;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#eee 25%,transparent 25%),
    linear-gradient(-45deg,#eee 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eee 75%),
    linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:22px 22px;
  background-position:0 0,0 11px,11px -11px,-11px 0;
}
.crop-result-preview img { display:block; max-width:100%; max-height:490px; object-fit:contain; }

@media (max-width:780px) {
  .crop-stage { height:56vh; min-height:330px; }
  .crop-main-actions { display:grid; grid-template-columns:1fr; }
  .crop-main-actions button { width:100%; }
  .crop-main-actions .process { min-width:0; }
  .crop-handle { width:32px; height:32px; }
  .crop-handle.nw { left:-16px; top:-16px; }
  .crop-handle.ne { right:-16px; top:-16px; }
  .crop-handle.sw { left:-16px; bottom:-16px; }
  .crop-handle.se { right:-16px; bottom:-16px; }
}
@media (max-width:480px) {
  .crop-stage-wrap { padding:6px; border-radius:16px; }
  .crop-stage { height:50vh; min-height:300px; }
  .crop-ratio-options { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
  .crop-ratio-options .size-chip span { min-width:0; width:100%; padding:9px 5px; font-size:.82rem; }
  .crop-selection-info { display:grid; gap:4px; }
}


/* =========================================================
   Accueil PourQui - identité visuelle V16
   ========================================================= */
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

body.home-page {
  background:#fffaf2;
  overflow-x:hidden;
}

.home-page .site-header {
  position:relative;
  z-index:30;
  padding:0 18px;
  background:transparent;
}

.home-page .site-header-inner {
  width:min(1500px,100%);
}

.home-page .site-logo {
  width:min(690px,88vw);
  max-height:none;
  margin-top:-34px;
  margin-bottom:-22px;
  filter:drop-shadow(0 8px 16px rgba(21,59,104,.06));
}

.home-page .site-main {
  min-height:auto;
}

.home-landing {
  position:relative;
  overflow-x: clip;
}

.home-hero {
  position:relative;
  min-height:650px;
  margin-top:0;
  padding:8px 24px 96px;
  overflow:visible;
  isolation:isolate;
}

.home-hero-inner {
  position:relative;
  z-index:5;
  width:min(1500px,100%);
  margin:0 auto;
  text-align:center;
}

.home-hero h1 {
  max-width:980px;
  margin:0 auto;
  color:#0c2c5a;
  font-size:clamp(2.2rem,4.1vw,3.75rem);
  line-height:.96;
  letter-spacing:-.055em;
  font-weight:900;
}

.home-hero h1 span {
  display:inline-block;
}

.home-lead {
  max-width:760px;
  margin:13px auto 0;
  color:#55708f;
  font-size:clamp(1rem,1.55vw,1.28rem);
  line-height:1.55;
  font-weight:500;
}

.home-benefits {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:18px auto 0;
}

.home-benefit {
  min-height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 15px 6px 7px;
  border:1px solid rgba(24,58,99,.07);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#0d2d59;
  box-shadow:0 12px 30px rgba(44,71,106,.08);
  font-size:.84rem;
}

.benefit-icon {
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
}

.benefit-icon svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.benefit-blue { color:#1778e8; background:#e8f3ff; }
.benefit-green { color:#1bbd78; background:#e5fbf1; }
.benefit-orange { color:#ff9a13; background:#fff3dc; }

.home-tools {
  margin-top:25px;
}

.home-tools-grid {
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:18px;
  width:min(1720px,100%);
  margin:0 auto;
}

.home-tool-card {
  min-height:230px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:30px 18px 22px;
  border:1px solid rgba(23,59,103,.07);
  border-radius:28px;
  background:rgba(255,255,255,.94);
  text-decoration:none;
  box-shadow:0 16px 44px rgba(38,64,96,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.home-tool-card:hover {
  transform:translateY(-6px);
  border-color:rgba(23,94,176,.13);
  box-shadow:0 23px 56px rgba(38,64,96,.13);
}

.home-tool-icon {
  width:104px;
  height:104px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:25px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 12px 24px rgba(43,73,110,.09);
}

.home-tool-icon svg {
  width:72px;
  height:72px;
  fill:none;
  stroke:currentColor;
  stroke-width:3.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.tool-png .home-tool-icon { color:#10b981; background:linear-gradient(145deg,#dcfcee,#c9f7e5); }
.tool-jpg .home-tool-icon { color:#7451de; background:linear-gradient(145deg,#eee8ff,#e0d8ff); }
.tool-webp .home-tool-icon { color:#d14f91; background:linear-gradient(145deg,#ffe9f3,#ffd8e9); }
.tool-convert .home-tool-icon { color:#1677dc; background:linear-gradient(145deg,#e6f2ff,#d4e8ff); }
.tool-heic .home-tool-icon { color:#d85e8f; background:linear-gradient(145deg,#ffe9f2,#ffdce9); }
.tool-enhance .home-tool-icon { color:#d99000; background:linear-gradient(145deg,#fff5cf,#ffe7a3); }
.tool-mask .home-tool-icon { color:#c84c63; background:linear-gradient(145deg,#ffe8ed,#ffd6df); }
.tool-mask .home-tool-icon .pixel { fill:currentColor; stroke:none; opacity:.82; }
.tool-imgpdf .home-tool-icon { color:#ef6a2c; background:linear-gradient(145deg,#ffe9dd,#ffd7c6); }
.tool-pdfimg .home-tool-icon { color:#0d9ec0; background:linear-gradient(145deg,#ddf9ff,#cbf0fb); }
.tool-rotate .home-tool-icon { color:#8b62ff; background:linear-gradient(145deg,#efe8ff,#ddd0ff); }
.tool-resize .home-tool-icon { color:#f28a13; background:linear-gradient(145deg,#fff0d5,#ffe5ba); }
.tool-crop .home-tool-icon { color:#0e9e9d; background:linear-gradient(145deg,#e0faf8,#cef3f1); }
.tool-convert .home-tool-icon .accent { stroke:#1677dc; stroke-width:3.1; }
.tool-png .home-tool-icon .spark { stroke-width:3; }

.home-tool-name {
  color:#0d2d59;
  font-size:1.08rem;
  line-height:1.12;
  font-weight:900;
}

.home-tool-desc {
  max-width:180px;
  margin-top:9px;
  color:#75879c;
  font-size:.82rem;
  line-height:1.35;
}

.home-decoration,
.home-wave,
.home-dots {
  position:absolute;
  pointer-events:none;
  z-index:0;
}

.home-decoration-left {
  width:300px;
  height:520px;
  left:-210px;
  top:190px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,208,130,.38),rgba(255,225,172,.18) 56%,transparent 58%);
  box-shadow:90px 0 0 -24px rgba(255,222,165,.18);
}

.home-decoration-right {
  width:430px;
  height:430px;
  right:-230px;
  top:130px;
  border-radius:48% 52% 58% 42%;
  background:radial-gradient(circle at 40% 50%,rgba(162,229,233,.48),rgba(196,239,239,.23) 55%,transparent 57%);
  transform:rotate(-18deg);
  box-shadow:-70px 80px 0 -30px rgba(188,231,246,.18);
}

.home-dots {
  width:150px;
  height:100px;
  opacity:.65;
  background-image:radial-gradient(circle,#4bbfd8 2.5px,transparent 3px);
  background-size:24px 24px;
}
.home-dots-left {
  left:34px;
  top:390px;
  background-image:radial-gradient(circle,#f6b75e 2.5px,transparent 3px);
}
.home-dots-right {
  right:38px;
  top:28px;
}

.home-wave {
  left:-180px;
  bottom:-190px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:linear-gradient(180deg,#d8ebff 0%,#c7def8 100%);
  transform:none;
  opacity:.9;
}

.home-wave::after {
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  left:88px;
  top:82px;
  border-radius:50%;
  background:rgba(236,246,255,.48);
}

.home-seo-section {
  position:relative;
  z-index:3;
  padding:116px 24px 86px;
  background:transparent;
}

.home-seo-inner {
  width:min(1120px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:start;
}

.home-section-kicker {
  display:inline-block;
  margin-bottom:11px;
  color:#1c7bd9;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.home-seo-copy h2 {
  margin:0;
  color:#0d2d59;
  font-size:clamp(1.8rem,3vw,2.8rem);
  line-height:1.08;
  letter-spacing:-.035em;
}

.home-seo-copy p {
  margin:18px 0 0;
  color:#657b94;
  font-size:1rem;
  line-height:1.75;
}

.home-seo-points {
  display:grid;
  gap:12px;
}

.home-seo-points article {
  padding:19px 21px;
  border:1px solid #e9eff5;
  border-radius:18px;
  background:#fbfdff;
}

.home-seo-points strong {
  color:#0d2d59;
  font-size:.98rem;
}

.home-seo-points p {
  margin:5px 0 0;
  color:#71849a;
  font-size:.88rem;
  line-height:1.5;
}

.home-page .site-footer {
  background:transparent;
  border-top:1px solid #e6edf5;
}

@media (max-width:1100px) {
  .home-tools-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-tool-card { min-height:215px; }
}

@media (max-width:780px) {
  .home-page .site-header { padding:0 6px; }
  .home-page .site-logo { width:100%; max-width:none; margin-top:-20px; margin-bottom:-13px; }
  .home-hero { min-height:auto; padding:8px 14px 70px; }
  .home-hero h1 { font-size:clamp(1.9rem,8.8vw,2.75rem); line-height:1.02; }
  .home-hero h1 br { display:inline; }
  .home-lead { max-width:620px; margin-top:11px; font-size:.94rem; }
  .home-benefits { gap:7px; margin-top:15px; }
  .home-benefit { min-height:40px; padding:5px 11px 5px 6px; font-size:.78rem; }
  .benefit-icon { width:28px; height:28px; }
  .benefit-icon svg { width:16px; height:16px; }
  .home-tools { margin-top:21px; }
  .home-tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .home-tool-card { min-height:188px; padding:22px 10px 17px; border-radius:22px; }
  .home-tool-icon { width:82px; height:82px; margin-bottom:14px; border-radius:21px; }
  .home-tool-icon svg { width:58px; height:58px; }
  .home-tool-name { font-size:.98rem; }
  .home-tool-desc { font-size:.74rem; }
  .home-decoration-left { left:-255px; top:220px; }
  .home-decoration-right { right:-330px; top:150px; }
  .home-dots-left { left:4px; top:430px; }
  .home-dots-right { right:3px; top:12px; }
  .home-seo-section { padding:92px 18px 68px; }
  .home-seo-inner { grid-template-columns:1fr; gap:28px; }
}


@media (max-width:780px) {
  .home-wave {
    left:-170px;
    bottom:-150px;
    width:390px;
    height:390px;
  }
  .home-wave::after {
    width:270px;
    height:270px;
    left:66px;
    top:62px;
  }
}

@media (max-width:430px) {
  .home-page .site-logo { width:100%; }
  .home-hero { padding-inline:9px; }
  .home-hero h1 { font-size:clamp(1.8rem,8.4vw,2.35rem); }
  .home-benefits { display:grid; grid-template-columns:1fr 1fr; width:min(100%,360px); }
  .home-benefit:last-child { grid-column:1 / -1; justify-self:center; }
  .home-tools-grid { grid-template-columns:1fr 1fr; gap:9px; }
  .home-tool-card { min-height:178px; }
  .home-tool-icon { width:74px; height:74px; }
  .home-tool-icon svg { width:52px; height:52px; }
  .home-tool-desc { display:none; }
}


/* =========================================================
   V21 — NOUVEAU LOOK DES OUTILS
   L'accueil ci-dessus reste exactement celui de la V19.
   Tout ce bloc est limité aux pages autres que .home-page.
   ========================================================= */

body:not(.home-page) {
  --primary: #1677dc;
  --primary-dark: #0d60ba;
  --primary-soft: #eaf4ff;
  overflow-x: hidden;
  background:
    radial-gradient(circle at -4% 24%, rgba(255, 218, 157, .28), transparent 19rem),
    radial-gradient(circle at 104% 34%, rgba(172, 232, 235, .25), transparent 21rem),
    #fffaf2;
}

/* Même présence du logo que sur l'accueil : pas de grand vide au-dessus. */
body:not(.home-page) .site-header {
  padding: 0 18px;
  background: transparent;
}

body:not(.home-page) .site-header-inner {
  width: min(1500px, 100%);
}

body:not(.home-page) .site-logo {
  width: min(650px, 88vw);
  max-height: none;
  margin-top: -32px;
  margin-bottom: -22px;
  filter: drop-shadow(0 8px 16px rgba(21,59,104,.06));
}

body:not(.home-page) .tool-page {
  width: min(1180px, calc(100% - 32px));
  padding-top: 6px;
  padding-bottom: 74px;
}

body:not(.home-page) .tool-hero {
  max-width: 920px;
  margin-bottom: 22px;
}

body:not(.home-page) .eyebrow {
  margin-bottom: 10px;
  padding: 7px 12px;
  border: 1px solid rgba(28,123,217,.08);
  background: #eef5ff;
  color: #1c7bd9;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .06em;
}

body:not(.home-page) .tool-hero h1 {
  max-width: 850px;
  margin: 0 auto 10px;
  color: #0d2d59;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1;
  letter-spacing: -.05em;
  font-weight: 900;
}

body:not(.home-page) .tool-hero > p {
  max-width: 750px;
  color: #5f7791;
  font-size: clamp(.98rem, 1.7vw, 1.12rem);
  line-height: 1.58;
  font-weight: 500;
}

body:not(.home-page) .trust-row {
  gap: 9px;
  margin-top: 16px;
}

body:not(.home-page) .trust-pill {
  min-height: 42px;
  padding: 6px 13px;
  border: 1px solid rgba(24,58,99,.07);
  background: rgba(255,255,255,.92);
  color: #0d2d59;
  box-shadow: 0 10px 24px rgba(44,71,106,.07);
  font-size: .81rem;
  font-weight: 800;
}

body:not(.home-page) .ad-space {
  min-height: 94px;
  margin: 22px 0;
  border: 1px dashed #d9e1e9;
  border-radius: 24px;
  background: rgba(255,255,255,.62);
  color: #9aa5b1;
}

body:not(.home-page) .optimizer-shell {
  padding: 24px;
  border: 1px solid rgba(23,59,103,.07);
  border-radius: 30px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 18px 48px rgba(38,64,96,.08);
  backdrop-filter: blur(10px);
}

body:not(.home-page) .dropzone {
  min-height: 190px;
  margin-top: 0;
  padding: 28px 22px;
  border: 2px dashed rgba(22,119,220,.20);
  border-radius: 26px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f9ff 100%);
}

body:not(.home-page) .dropzone:hover,
body:not(.home-page) .dropzone.dragover {
  border-color: rgba(22,119,220,.42);
  background: #edf6ff;
  transform: translateY(-1px);
}

body:not(.home-page) .drop-icon {
  width: 66px;
  height: 66px;
  margin-bottom: 14px;
  border-radius: 20px;
  background: linear-gradient(145deg,#e6f2ff,#d4e8ff);
  color: #1677dc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 12px 24px rgba(43,73,110,.09);
}

body:not(.home-page) .dropzone strong {
  color: #0d2d59;
}

body:not(.home-page) .dropzone span,
body:not(.home-page) .tool-tip,
body:not(.home-page) .name small,
body:not(.home-page) .stat small,
body:not(.home-page) .info-card p,
body:not(.home-page) .faq-list p,
body:not(.home-page) .content-section > p,
body:not(.home-page) .choice-card small {
  color: #6c8299;
}

body:not(.home-page) button {
  border-radius: 15px;
}

body:not(.home-page) .primary {
  color: #fff;
  background: linear-gradient(180deg,#2789ee 0%,#1677dc 100%);
  box-shadow: 0 10px 20px rgba(22,119,220,.20);
}

body:not(.home-page) .primary:hover {
  background: linear-gradient(180deg,#3091f5 0%,#0d60ba 100%);
}

body:not(.home-page) .secondary {
  color: #4f657c;
  background: #f1f6fb;
}

body:not(.home-page) .danger {
  color: #a64a4a;
  background: #fff1f1;
}

body:not(.home-page) .summary {
  gap: 11px;
}

body:not(.home-page) .stat {
  padding: 14px 15px;
  border: 1px solid #e7edf4;
  border-radius: 17px;
  background: #fbfdff;
  box-shadow: 0 7px 18px rgba(38,64,96,.035);
}

body:not(.home-page) .card {
  border: 1px solid rgba(23,59,103,.08);
  border-radius: 26px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 38px rgba(38,64,96,.07);
}

body:not(.home-page) .card-head {
  padding: 16px 18px;
  border-bottom-color: #edf1f6;
  background: #fbfdff;
}

body:not(.home-page) .name strong,
body:not(.home-page) .setting-title,
body:not(.home-page) .compare-meta,
body:not(.home-page) .info-card h3,
body:not(.home-page) .faq-list summary,
body:not(.home-page) .content-section h2 {
  color: #0d2d59;
}

body:not(.home-page) .badge {
  background: #eef4fb;
  color: #5d7188;
}

body:not(.home-page) .choice-card span {
  border: 1px solid #e5ecf4;
  border-radius: 19px;
  background: #fbfdff;
}

body:not(.home-page) .choice-card input:checked + span {
  border-color: rgba(22,119,220,.28);
  background: #eaf4ff;
  box-shadow: 0 8px 20px rgba(22,119,220,.08);
}

body:not(.home-page) .size-chip span {
  border-color: #dde6ef;
  border-radius: 13px;
  color: #5d7187;
}

body:not(.home-page) .size-chip input:checked + span {
  color: #fff;
  border-color: #1677dc;
  background: #1677dc;
  box-shadow: 0 8px 18px rgba(22,119,220,.20);
}

body:not(.home-page) .trim-toggle {
  border: 1px solid #dcefe7;
  border-radius: 16px;
  background: #effbf6;
}

body:not(.home-page) .advanced-options {
  padding-top: 0;
  border: 1px solid #e6edf4;
  border-radius: 17px;
  background: #fbfdff;
  overflow: hidden;
}

body:not(.home-page) .advanced-options summary {
  width: 100%;
  padding: 13px 15px;
  color: #0d2d59;
}

body:not(.home-page) .advanced-inner {
  margin-top: 0;
  padding: 0 15px 15px;
}

body:not(.home-page) .item-settings {
  border-top-color: #edf1f6;
}

body:not(.home-page) .comparison {
  border-color: #dce6ef;
  border-radius: 21px;
}

body:not(.home-page) .comparison:focus-visible {
  box-shadow: 0 0 0 4px rgba(22,119,220,.14);
}

body:not(.home-page) .compare-handle {
  background: #1677dc;
  box-shadow: 0 7px 20px rgba(22,119,220,.28);
}

body:not(.home-page) .card-foot {
  border-top-color: #edf1f6;
  background: #fbfdff;
}

body:not(.home-page) .content-section {
  padding: 28px;
  border: 1px solid #e8eef5;
  border-radius: 26px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 34px rgba(38,64,96,.055);
}

body:not(.home-page) .info-card,
body:not(.home-page) .faq-list details {
  border-color: #e7eef5;
  background: #fbfdff;
  box-shadow: 0 8px 22px rgba(38,64,96,.04);
}

body:not(.home-page) .info-card {
  border-radius: 20px;
}

body:not(.home-page) .faq-list details {
  border-radius: 17px;
}

body:not(.home-page) .site-footer {
  border-top-color: #e5edf5;
  background: rgba(248,251,254,.92);
}

@media (max-width:780px) {
  body:not(.home-page) .site-header {
    padding: 0 6px;
  }
  body:not(.home-page) .site-logo {
    width: 100%;
    max-width: none;
    margin-top: -20px;
    margin-bottom: -14px;
  }
  body:not(.home-page) .tool-page {
    width: min(100% - 20px,1180px);
    padding-top: 4px;
  }
  body:not(.home-page) .tool-hero h1 {
    font-size: clamp(1.9rem,8.8vw,2.75rem);
    line-height: 1.02;
  }
  body:not(.home-page) .tool-hero > p {
    font-size: .94rem;
  }
  body:not(.home-page) .trust-row {
    gap: 7px;
    margin-top: 14px;
  }
  body:not(.home-page) .trust-pill {
    min-height: 38px;
    padding: 5px 10px;
    font-size: .76rem;
  }
  body:not(.home-page) .optimizer-shell {
    padding: 15px;
    border-radius: 23px;
  }
  body:not(.home-page) .dropzone {
    min-height: 164px;
    padding: 22px 14px;
    border-radius: 21px;
  }
  body:not(.home-page) .drop-icon {
    width: 56px;
    height: 56px;
    border-radius: 17px;
  }
  body:not(.home-page) .content-section {
    padding: 20px;
    border-radius: 22px;
  }
}

@media (max-width:480px) {
  body:not(.home-page) .tool-page {
    width: min(100% - 14px,1180px);
  }
  body:not(.home-page) .optimizer-shell {
    padding: 11px;
  }
}


/* =========================================================
   V22 — Décor pastel aussi sur les pages outils
   L'accueil V19 reste inchangé.
   ========================================================= */

body:not(.home-page) {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: #fffaf2;
}

/* Grande forme jaune, comme sur l'accueil. */
body:not(.home-page)::before {
  content: "";
  position: absolute;
  z-index: -3;
  pointer-events: none;
  width: 320px;
  height: 540px;
  left: -220px;
  top: 210px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255,208,130,.40),
    rgba(255,225,172,.20) 56%,
    transparent 58%
  );
  box-shadow: 95px 0 0 -26px rgba(255,222,165,.19);
}

/* Grande forme turquoise sur la droite. */
body:not(.home-page)::after {
  content: "";
  position: absolute;
  z-index: -3;
  pointer-events: none;
  width: 440px;
  height: 440px;
  right: -245px;
  top: 300px;
  border-radius: 48% 52% 58% 42%;
  background: radial-gradient(
    circle at 40% 50%,
    rgba(162,229,233,.48),
    rgba(196,239,239,.23) 55%,
    transparent 57%
  );
  transform: rotate(-18deg);
  box-shadow: -72px 82px 0 -31px rgba(188,231,246,.18);
}

/* Les éléments de la page restent devant le décor. */
body:not(.home-page) .site-header,
body:not(.home-page) .tool-page,
body:not(.home-page) .site-footer {
  position: relative;
  z-index: 1;
}

/* Deux petits nuages de points décoratifs autour du titre. */
body:not(.home-page) .tool-hero {
  position: relative;
}

body:not(.home-page) .tool-hero::before,
body:not(.home-page) .tool-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 145px;
  height: 98px;
  opacity: .58;
  background-size: 24px 24px;
}

body:not(.home-page) .tool-hero::before {
  left: -155px;
  top: 78px;
  background-image: radial-gradient(circle, #f6b75e 2.5px, transparent 3px);
}

body:not(.home-page) .tool-hero::after {
  right: -155px;
  top: 8px;
  background-image: radial-gradient(circle, #4bbfd8 2.5px, transparent 3px);
}

/* Grand cercle bleu doux sous le premier bloc, comme celui validé sur l'accueil. */
body:not(.home-page) .tool-page::before {
  content: "";
  position: absolute;
  z-index: -2;
  pointer-events: none;
  width: 510px;
  height: 510px;
  left: -335px;
  top: 780px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d8ebff 0%, #c6defa 100%);
  opacity: .92;
}

body:not(.home-page) .tool-page::after {
  content: "";
  position: absolute;
  z-index: -2;
  pointer-events: none;
  width: 350px;
  height: 350px;
  left: -250px;
  top: 860px;
  border-radius: 50%;
  background: rgba(230,242,255,.70);
}

@media (max-width: 780px) {
  body:not(.home-page)::before {
    width: 240px;
    height: 400px;
    left: -190px;
    top: 190px;
  }

  body:not(.home-page)::after {
    width: 330px;
    height: 330px;
    right: -245px;
    top: 330px;
  }

  body:not(.home-page) .tool-hero::before {
    left: -55px;
    top: 110px;
    width: 95px;
    height: 75px;
    opacity: .38;
  }

  body:not(.home-page) .tool-hero::after {
    right: -50px;
    top: 24px;
    width: 90px;
    height: 70px;
    opacity: .38;
  }

  body:not(.home-page) .tool-page::before {
    width: 370px;
    height: 370px;
    left: -260px;
    top: 720px;
  }

  body:not(.home-page) .tool-page::after {
    width: 250px;
    height: 250px;
    left: -205px;
    top: 780px;
  }
}

@media (max-width: 480px) {
  body:not(.home-page) .tool-hero::before,
  body:not(.home-page) .tool-hero::after {
    opacity: .25;
  }

  body:not(.home-page) .tool-page::before {
    width: 320px;
    height: 320px;
    left: -235px;
  }

  body:not(.home-page) .tool-page::after {
    width: 215px;
    height: 215px;
    left: -186px;
    top: 772px;
  }
}


/* ===== V23 : logo identique partout + footer blanc partout ===== */
body:not(.home-page) .site-logo {
  width: min(690px, 88vw);
  max-height: none;
  margin-top: -34px;
  margin-bottom: -22px;
  filter: drop-shadow(0 8px 16px rgba(21,59,104,.06));
}

.home-page .site-footer,
body:not(.home-page) .site-footer {
  background: #ffffff;
  border-top: 1px solid #e6edf5;
}

@media (max-width: 780px) {
  body:not(.home-page) .site-logo {
    width: 100%;
    max-width: none;
    margin-top: -20px;
    margin-bottom: -13px;
  }
}


/* ===== V25 : convertisseur HEIC vers JPG ===== */
.heic-status-note {
  margin: 0 0 18px;
  padding: 12px 15px;
  border: 1px solid #e7edf5;
  border-radius: 16px;
  background: #fbfdff;
  color: #657b94;
  font-size: .88rem;
  line-height: 1.55;
}
.heic-list { display:grid; gap:18px; margin-top:18px; }
.heic-card {
  overflow:hidden;
  border:1px solid rgba(23,59,103,.08);
  border-radius:28px;
  background:rgba(255,255,255,.97);
  box-shadow:0 16px 34px rgba(38,64,96,.07);
}
.heic-card-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid #edf1f6;
  background:#fbfdff;
}
.heic-card-name { min-width:0; }
.heic-card-name strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#0d2d59;
}
.heic-card-name small { color:#6c8299; }
.heic-card-body {
  display:grid;
  grid-template-columns:minmax(250px,.85fr) minmax(280px,1.15fr);
  gap:22px;
  padding:18px;
  align-items:start;
}
.heic-preview {
  min-height:300px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid #dfe7ef;
  border-radius:22px;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#eee 25%,transparent 25%),
    linear-gradient(-45deg,#eee 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eee 75%),
    linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:22px 22px;
  background-position:0 0,0 11px,11px -11px,-11px 0;
}
.heic-preview img {
  display:block;
  max-width:100%;
  max-height:520px;
  object-fit:contain;
}
.heic-preview-placeholder {
  padding:30px;
  color:#7b8da2;
  text-align:center;
  line-height:1.5;
}
.heic-options { display:grid; gap:18px; }
.heic-options-title {
  margin:0;
  color:#0d2d59;
  font-size:1.02rem;
  font-weight:900;
}
.heic-quality-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.heic-quality {
  position:relative;
  cursor:pointer;
}
.heic-quality input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.heic-quality span {
  min-height:72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  padding:12px 13px;
  border:1px solid #e7edf5;
  border-radius:18px;
  background:#fbfdff;
  transition:.16s ease;
}
.heic-quality strong { color:#0d2d59; font-size:.9rem; }
.heic-quality small { color:#6c8299; font-size:.75rem; line-height:1.3; }
.heic-quality input:checked + span {
  border-color:rgba(216,94,143,.3);
  background:#fff0f6;
  box-shadow:0 10px 22px rgba(216,94,143,.08);
}
.heic-quality:hover span { transform:translateY(-2px); }
.heic-result-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.heic-result-box {
  padding:13px 14px;
  border:1px solid #e8eef6;
  border-radius:16px;
  background:#fbfdff;
}
.heic-result-box small { display:block; margin-bottom:4px; color:#6c8299; font-size:.75rem; }
.heic-result-box strong { color:#0d2d59; font-size:.95rem; }
.heic-card-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}
.heic-card-actions .primary { min-width:170px; }
.heic-error {
  display:none;
  padding:11px 13px;
  border-radius:14px;
  background:#fff0f0;
  color:#9b4040;
  font-size:.84rem;
  line-height:1.45;
}
.heic-error.visible { display:block; }
.heic-progress {
  display:none;
  align-items:center;
  gap:10px;
  color:#617890;
  font-size:.86rem;
  font-weight:750;
}
.heic-progress.visible { display:flex; }
.heic-spinner {
  width:18px;
  height:18px;
  border:2px solid #d9e6f4;
  border-top-color:#d85e8f;
  border-radius:50%;
  animation:heic-spin .8s linear infinite;
}
@keyframes heic-spin { to { transform:rotate(360deg); } }
@media (max-width:900px) {
  .home-tools-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .heic-card-body { grid-template-columns:1fr; }
  .heic-preview { min-height:260px; }
}
@media (max-width:600px) {
  .heic-quality-grid { grid-template-columns:1fr; }
  .heic-quality span { min-height:58px; }
  .heic-result-grid { grid-template-columns:1fr 1fr; }
  .heic-card-actions { flex-direction:column; }
  .heic-card-actions button { width:100%; }
  .heic-card-head { align-items:flex-start; flex-direction:column; }
}


/* Images vers PDF */
.pdf-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.pdf-option-card {
  padding: 16px;
  border: 1px solid #e8eef6;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(38,64,96,.04);
}

.text-input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #dfe7ef;
  border-radius: 14px;
  background: #fff;
  color: #0d2d59;
  font: inherit;
}

.text-input:focus {
  outline: none;
  border-color: rgba(22,119,220,.45);
  box-shadow: 0 0 0 4px rgba(22,119,220,.12);
}

.compact-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-choice span {
  min-height: 72px;
}

.pdf-card-body {
  display: grid;
  gap: 14px;
}

.pdf-preview-wrap {
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 14px;
  border: 1px solid #dfe7ef;
  border-radius: 22px;
  background:
    linear-gradient(45deg, #f4f7fb 25%, transparent 25%),
    linear-gradient(-45deg, #f4f7fb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f4f7fb 75%),
    linear-gradient(-45deg, transparent 75%, #f4f7fb 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}

.pdf-preview {
  max-width: 100%;
  max-height: min(50vh, 420px);
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(38,64,96,.12);
  background: #fff;
}

.pdf-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: #6c8299;
  font-size: .92rem;
}

.pdf-card-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.pdf-result {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid #d9ebde;
  background: linear-gradient(180deg, #f0fbf4 0%, #e9f9ef 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.pdf-result strong {
  display: block;
  color: #0d2d59;
  margin-bottom: 4px;
}

.pdf-result p {
  margin: 0;
  color: #5f7791;
}

@media (max-width: 1500px) {
  .home-tools-grid {
    grid-template-columns: repeat(5, minmax(0,1fr));
    width:min(1220px,100%);
  }
}

@media (max-width: 1180px) {
  .home-tools-grid {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}

@media (max-width: 900px) {
  .pdf-options {
    grid-template-columns: 1fr;
  }
  .compact-choice-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .pdf-preview-wrap {
    min-height: 210px;
  }
  .pdf-result {
    flex-direction: column;
    align-items: stretch;
  }
}


/* PDF vers images */
.pdf-dropzone .drop-icon {
  width: 76px;
  height: 58px;
  border-radius: 18px;
  font-size: 1rem;
  letter-spacing: .08em;
}

.pdfi-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.pdfi-option-card {
  padding: 16px;
  border: 1px solid #e8eef6;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(38,64,96,.04);
}

.compact-choice-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.range-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.left-tip {
  text-align: left;
  margin: 10px 0 0;
}

.toolbar-actions-split {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.toolbar-actions-split .toolbar-actions {
  margin-top: 0;
}

.pdfi-card-body {
  display: grid;
  gap: 14px;
}

.pdfi-preview-wrap {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 14px;
  border: 1px solid #dfe7ef;
  border-radius: 22px;
  background: linear-gradient(180deg, #f9fbfe 0%, #f2f7fc 100%);
}

.pdfi-preview {
  max-width: 100%;
  max-height: min(44vh, 360px);
  display: block;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(38,64,96,.12);
}

.pdfi-meta {
  display: grid;
  gap: 12px;
}

.pdfi-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #0d2d59;
}

.pdfi-check input {
  width: 18px;
  height: 18px;
  accent-color: #1677dc;
}

.pdfi-infos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: #6c8299;
  font-size: .92rem;
}

.pdfi-card-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .pdfi-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .toolbar-actions-split {
    flex-direction: column;
    align-items: stretch;
  }
  .toolbar-actions-split .toolbar-actions {
    justify-content: stretch;
  }
  .toolbar-actions-split .toolbar-actions button {
    flex: 1;
  }
  .pdfi-preview-wrap {
    min-height: 200px;
  }
  .compact-choice-grid-3 {
    grid-template-columns: 1fr;
  }
}


/* ===== V28 : grille d'outils d'accueil sur plusieurs lignes ===== */
.home-tools-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
}

.home-tool-card {
  flex: 0 1 245px;
  width: 245px;
  min-width: 215px;
  max-width: 245px;
}

@media (max-width: 1180px) {
  .home-tools-grid {
    width: min(1040px, calc(100% - 36px));
  }
  .home-tool-card {
    flex-basis: 230px;
    width: 230px;
    max-width: 230px;
  }
}

@media (max-width: 780px) {
  .home-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 620px);
    gap: 11px;
  }
  .home-tool-card {
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 430px) {
  .home-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 9px;
  }
}


/* Pivoter / retourner */
.rotate-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.rotate-option-card {
  padding: 16px;
  border: 1px solid #e8eef6;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(38,64,96,.04);
}

.rotate-card-body {
  display: grid;
  gap: 14px;
}

.rotate-preview-wrap {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 14px;
  border: 1px solid #dfe7ef;
  border-radius: 22px;
  background:
    linear-gradient(45deg, #f4f7fb 25%, transparent 25%),
    linear-gradient(-45deg, #f4f7fb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f4f7fb 75%),
    linear-gradient(-45deg, transparent 75%, #f4f7fb 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}

.rotate-preview {
  max-width: 100%;
  max-height: min(46vh, 390px);
  display: block;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(38,64,96,.12);
}

.rotate-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: #6c8299;
  font-size: .92rem;
}

.rotate-controls {
  display: grid;
  gap: 14px;
}

.control-group {
  display: grid;
  gap: 9px;
}

.small-title {
  font-size: .95rem;
}

.control-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.control-buttons button {
  min-width: 128px;
}

.button-active,
.control-buttons .button-active {
  color: #fff;
  background: linear-gradient(180deg, #2487f0 0%, var(--primary) 100%);
  box-shadow: 0 12px 20px rgba(22,119,220,.23);
}

.rotate-card-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .rotate-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .rotate-preview-wrap {
    min-height: 200px;
  }
  .control-buttons button {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* =========================================================
   Verrouillage horizontal commun à tout PourQui
   ========================================================= */
html,
body {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}

@supports (overflow-x:clip) {
  html,
  body {
    overflow-x:clip;
  }
}

.tool-page,
.tool-hero,
.optimizer-shell,
.content-section,
.ad-space,
.summary,
.list,
.card {
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

.tool-page img,
.tool-page canvas,
.tool-page svg,
.tool-page video {
  max-width:100%;
}

/* =========================================================
   Maillage interne commun
   ========================================================= */
/* Maillage interne : outils complémentaires. */
.related-tools-section {
  margin-top:32px;
}

.related-tools-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}

.related-tool-link {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:17px 16px;
  border:1px solid rgba(35,47,62,.10);
  border-radius:17px;
  background:#fff;
  color:#232f3e;
  text-decoration:none;
  box-shadow:0 5px 18px rgba(35,47,62,.045);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.related-tool-link:hover,
.related-tool-link:focus-visible {
  transform:translateY(-2px);
  border-color:rgba(35,47,62,.18);
  box-shadow:0 9px 24px rgba(35,47,62,.08);
}

.related-tool-link strong {
  font-size:.96rem;
  line-height:1.3;
}

.related-tool-link span {
  color:#68768a;
  font-size:.84rem;
  line-height:1.45;
}

@media (max-width:780px) {
  .related-tools-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:480px) {
  .related-tools-grid {
    grid-template-columns:minmax(0,1fr);
  }
}

/* =========================================================
   Footer final centré
   ========================================================= */
.site-footer {
    margin-top: 34px !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #53657a !important;
    border-top: 1px solid #eee5d9 !important;
  }

  .site-footer * {
    box-sizing: border-box;
  }

  .site-footer-inner {
    width: min(920px, calc(100% - 40px)) !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    padding: 34px 0 26px !important;
    display: block !important;
    text-align: center !important;
  }

  .footer-brand {
    margin: 0 auto !important;
  }

  .footer-brand strong {
    display: block !important;
    margin: 0 0 8px !important;
    color: #17324d !important;
    font-size: 1.14rem !important;
    line-height: 1.25 !important;
  }

  .footer-brand p {
    max-width: 650px !important;
    margin: 0 auto !important;
    color: #607086 !important;
    font-size: .94rem !important;
    line-height: 1.6 !important;
  }

  .footer-links-wrap {
    display: block !important;
    width: 100% !important;
    margin: 26px auto 0 !important;
    text-align: center !important;
  }

  .footer-links-title {
    display: block !important;
    width: 100% !important;
    margin: 0 0 13px !important;
    text-align: center !important;
    color: #17324d !important;
    font-size: .9rem !important;
    font-weight: 800 !important;
  }

  .footer-tool-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px 10px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .footer-tool-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 7px 13px !important;
    border: 1px solid #eadfce !important;
    border-radius: 999px !important;
    background: #fffaf3 !important;
    color: #53657a !important;
    text-decoration: none !important;
    font-size: .88rem !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }

  .footer-tool-links a:hover,
  .footer-tool-links a:focus-visible {
    border-color: #d8c9b6 !important;
    background: #fff6e9 !important;
    color: #17324d !important;
  }

  .footer-bottom {
    width: min(920px, calc(100% - 40px)) !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    padding: 16px 0 20px !important;
    border-top: 1px solid #eee5d9 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 18px !important;
    text-align: center !important;
  }

  .footer-bottom p {
    margin: 0 !important;
    color: #7a8898 !important;
    font-size: .82rem !important;
    line-height: 1.45 !important;
  }

  .footer-bottom-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .footer-bottom-nav a {
    color: #607086 !important;
    text-decoration: none !important;
    font-size: .82rem !important;
    line-height: 1.45 !important;
  }

  .footer-bottom-nav a:hover,
  .footer-bottom-nav a:focus-visible {
    color: #17324d !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }

  @media (max-width: 600px) {
    .site-footer {
      margin-top: 26px !important;
    }

    .site-footer-inner {
      width: calc(100% - 28px) !important;
      padding: 28px 0 23px !important;
    }

    .footer-brand strong {
      font-size: 1.08rem !important;
    }

    .footer-brand p {
      max-width: 410px !important;
      font-size: .9rem !important;
      line-height: 1.55 !important;
    }

    .footer-links-wrap {
      margin-top: 23px !important;
    }

    .footer-tool-links {
      gap: 8px !important;
    }

    .footer-tool-links a {
      min-height: 34px !important;
      padding: 7px 11px !important;
      font-size: .85rem !important;
    }

    .footer-bottom {
      width: calc(100% - 28px) !important;
      padding: 15px 0 18px !important;
      gap: 7px 16px !important;
    }
  }

  @media (max-width: 380px) {
    .footer-tool-links a {
      white-space: normal !important;
    }
  }

/* =========================================================
   Pages outils — espace entre la publicité finale et le footer
   La publicité possède déjà sa propre marge de 22 px.
   ========================================================= */
body:not(.home-page) .tool-page {
  padding-bottom: 0;
}

body:not(.home-page) .site-footer {
  margin-top: 0 !important;
}

/* Compteur de visiteurs en ligne */
.online-counter {
  width: 100%;
  margin: 12px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: .85rem;
  text-align: center;
}

.online-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--good);
}