/* =========================================================
    Pixr Search — "official vibe" UI (Light glass)
    Drop-in styles_s.css
    ========================================================= */

  @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");

  /* ---------- Design tokens (clair : fond lumineux, verre plus vif) ---------- */
  :root{
    --bg0: #c4e4ff;
    --bg1: #eef8ff;
    --glass: rgba(255,255,255,0.72);
    --glass2: rgba(255,255,255,0.88);
    --border: rgba(40,42,54,0.11);
    --border2: rgba(40,42,54,0.18);

    --text: rgba(30,41,59,0.96);
    --muted: rgba(71,85,105,0.92);
    --muted2: rgba(100,116,139,0.78);

    --shadow: 0 20px 56px rgba(37,99,235,0.12);
    --shadow2: 0 12px 32px rgba(14,165,233,0.10);

    --a1: #a78bfa;
    --a2: #22d3ee;
    --a3: #f472b6;

    --radius-xl: 26px;
    --radius-lg: 18px;
    --radius-md: 14px;

    --ring: 0 0 0 3px rgba(189,147,249,0.28), 0 0 0 1px rgba(40,42,54,0.08) inset;

    --link: #7c3aed;
    --linkHover: #a855f7;

    --topbar-top: 50px;
    --topbar-h: 50px;
    --topbar-gap: 14px;
    --topbar-left: 18px;
  }

  /* ---------- Base reset ---------- */
  *{ box-sizing:border-box; }
  html, body{ height:100%; }

  body{
    margin:0;
    color:var(--text);
    font-family: "Space Grotesk","Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:
      radial-gradient(ellipse 140% 90% at 50% -20%, rgba(255,255,255,0.85), transparent 52%),
      radial-gradient(1000px 720px at 12% 20%, rgba(56,189,248,0.22), transparent 58%),
      radial-gradient(900px 640px at 48% 18%, rgba(129,140,248,0.16), transparent 56%),
      radial-gradient(820px 600px at 88% 24%, rgba(34,211,238,0.18), transparent 55%),
      linear-gradient(168deg, var(--bg1) 0%, #dbeafe 42%, var(--bg0) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow-x:hidden;
  }

  /* Nébuleuse animée : plus de profondeur et saturation */
  body::before{
    content:"";
    position:fixed;
    inset:-32%;
    background:
      radial-gradient(circle at 22% 28%, rgba(56,189,248,0.18), transparent 52%),
      radial-gradient(circle at 58% 38%, rgba(167,139,250,0.14), transparent 58%),
      radial-gradient(circle at 80% 32%, rgba(34,211,238,0.16), transparent 56%),
      radial-gradient(circle at 40% 72%, rgba(244,114,182,0.08), transparent 50%);
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(22px);
    opacity: 0.68;
    pointer-events:none;
    animation: floaty 16s ease-in-out infinite alternate;
    transform: translate3d(0,0,0);
  }
  @keyframes floaty{
    from{ transform: translate(-2.5%, -1.2%) scale(1.02); }
    to  { transform: translate( 2.5%,  1.2%) scale(1.06); }
  }

  /* ---------- Layout containers ---------- */
  #pixr_search{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top: 64px;
    position:relative;
    z-index:2;
  }

  .pixr-search-brand{
    display: grid;
    place-items: center;
    text-decoration: none;
    color: inherit;
  }

  .pixr-search-brand > *{
    grid-area: 1 / 1;
  }

  #pixr_search_img{
    filter: drop-shadow(0 18px 35px rgba(0,0,0,0.55));
    user-select:none;
    transition: opacity .22s ease, transform .22s ease;
  }

  .pixr-search-voice-indicator{
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.88);
    transition: opacity .22s ease, transform .22s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .pixr-search-voice-indicator__square{
    width: clamp(44px, 12vw, 64px);
    height: clamp(44px, 12vw, 64px);
    border-radius: 14px;
    background: linear-gradient(155deg, #fb7185 0%, #dc2626 48%, #b91c1c 100%);
    box-shadow:
      0 0 0 3px rgba(248, 113, 113, 0.45),
      0 14px 36px rgba(220, 38, 38, 0.42),
      0 18px 40px rgba(0, 0, 0, 0.35);
    animation: pixr-voice-rec-glow 1.15s ease-in-out infinite;
  }

  @keyframes pixr-voice-rec-glow{
    0%, 100%{
      box-shadow:
        0 0 0 3px rgba(248, 113, 113, 0.45),
        0 14px 36px rgba(220, 38, 38, 0.42),
        0 18px 40px rgba(0, 0, 0, 0.35);
      transform: scale(1);
    }
    50%{
      box-shadow:
        0 0 0 6px rgba(248, 113, 113, 0.22),
        0 16px 42px rgba(220, 38, 38, 0.5),
        0 20px 48px rgba(0, 0, 0, 0.38);
      transform: scale(1.04);
    }
  }

  /* Index a l’indicateur micro dans le logo ; images/vidéos/etc. non — :has évite de masquer le logo seul. */
  #pixr_search.is-voice-listening:has(.pixr-search-voice-indicator) #pixr_search_img{
    opacity: 0;
    transform: scale(0.92);
  }

  #pixr_search.is-voice-listening:has(.pixr-search-voice-indicator) .pixr-search-voice-indicator{
    opacity: 1;
    transform: scale(1);
  }

  html[data-theme="dark"] .pixr-search-voice-indicator__square{
    background: linear-gradient(155deg, #f87171 0%, #ef4444 45%, #dc2626 100%);
    box-shadow:
      0 0 0 3px rgba(252, 165, 165, 0.35),
      0 14px 40px rgba(239, 68, 68, 0.38),
      0 18px 44px rgba(0, 0, 0, 0.5);
  }

  /* Search row centered */
  .search-row{
    width:min(920px, 92vw);
    margin: 24px auto 0 auto;
    display:flex;
    gap: 12px;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:3;
    transition: transform .14s ease;
  }

  /* small hop before search */
  body.pre-search .search-row{
    transform: translateY(-6px);
  }

  /* ---------- Input ---------- */
  #input_search{
    width: clamp(280px, 56vw, 680px);
    height: 56px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--glass);
    color: var(--text);
    outline: none;
    font-size: 16px;
    letter-spacing: 0.2px;
    box-shadow:
      0 10px 32px rgba(37,99,235,0.14),
      0 4px 16px rgba(15,23,42,0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .15s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }

  #input_search::placeholder{ color: rgba(15,23,42,0.45); }
  #input_search:focus::placeholder{ color: transparent; }

  #input_search:focus{
    border-color: rgba(34,211,238,0.55);
    background: var(--glass2);
    box-shadow:
      0 0 0 3px rgba(56,189,248,0.2),
      0 16px 48px rgba(37,99,235,0.18),
      0 8px 24px rgba(15,23,42,0.1);
  }

  /* Aperçu dans la barre quand une suggestion est surlignée (flèches) */
  #input_search.input_search--suggest-preview{
    border-color: rgba(167,139,250,0.55) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(245,243,255,0.94)) !important;
    box-shadow:
      0 0 0 2px rgba(167,139,250,0.22),
      0 12px 40px rgba(99,102,241,0.18),
      0 18px 50px rgba(0,0,0,0.45) !important;
    color: rgba(49,46,129,0.96);
    font-weight: 600;
    letter-spacing: 0.03em;
  }

  /* ---------- Button ---------- */
  #the_button{
    height: 56px;
    padding: 0 18px;
    border-radius: 999px;
    color: white;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor:pointer;
    transition: transform .15s ease, filter .2s ease, box-shadow .2s ease, opacity .2s ease;
    position:relative;
    overflow:hidden;
    user-select:none;
  }

    #the_button:hover{
    transform: translateY(-1px) scale(1.02);
  }
  #the_button:hover::before{ opacity: 1; animation: shimmer 1.1s ease; }
  @keyframes shimmer{ from{ left:-60%; } to{ left: 130%; } }

  /* ---------- Tabs ---------- */
  #nav_tabs{
    width:min(940px, 94vw);
    margin: 22px auto 0 auto;
    display:none;
    position:relative;
    z-index:3;
  }

  .tabs{
    list-style:none;
    padding: 10px;
    margin:0;
    display:flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    justify-content:center;
    align-items:center;
    border: 1px solid var(--border);
    background: var(--glass);
    border-radius: 999px;
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.5) inset,
      0 12px 40px rgba(37,99,235,0.12),
      0 6px 20px rgba(15,23,42,0.06);
  }

  .tab{
    padding: 13px 26px;
    border-radius: 999px;
    color: var(--muted);
    cursor:pointer;
    font-weight: 600;
    font-size: 14px;
    transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    border: 1px solid transparent;
    user-select:none;
  }

  .tab:hover{
    color: rgba(40,42,54,0.95);
    background: rgba(189,147,249,0.14);
    transform: translateY(-1px);
  }

  .tab.active{
    color: white;
    border-color: rgba(167,139,250,0.45);
    background: linear-gradient(135deg, rgba(124,58,237,0.55), rgba(34,211,238,0.35));
    box-shadow:
      0 8px 28px rgba(109,40,217,0.28),
      0 0 0 1px rgba(255,255,255,0.22) inset;
  }

  /* ---------- Suggestions (3–4 lignes, glass Pixr) ---------- */
  @keyframes pixr-suggestions-in{
    from{
      opacity: 0;
      transform: translateY(-8px) scale(0.97);
    }
    to{
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  #suggestions{
    position: fixed;
    margin: 0;
    padding: 8px;
    list-style: none;
    width: auto;
    max-width: min(440px, calc(100vw - 24px));
    max-height: min(240px, 42vh);
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(155deg, rgba(255,255,255,0.94) 0%, rgba(247,244,255,0.9) 48%, rgba(240,249,255,0.92) 100%);
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.28);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.65) inset,
      0 4px 28px rgba(99,102,241,0.12),
      0 24px 56px rgba(15,23,42,0.14);
    z-index: 20000;
    display: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(124,58,237,0.35) transparent;
  }

  #suggestions.suggestions--open{
    animation: pixr-suggestions-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  #suggestions li{
    padding: 11px 14px 11px 13px;
    margin: 3px 2px;
    border-radius: 13px;
    font-family: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: rgba(30,41,59,0.94);
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid transparent;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.14s ease;
  }

  #suggestions li::before{
    content: "";
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #a78bfa, #38bdf8);
    opacity: 0.55;
    box-shadow: 0 0 10px rgba(167,139,250,0.45);
    transition: opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
  }

  #suggestions li:hover{
    background: linear-gradient(135deg, rgba(189,147,249,0.2), rgba(139,233,253,0.12));
    border-color: rgba(167,139,250,0.28);
    box-shadow: 0 4px 16px rgba(124,58,237,0.1);
    transform: translateY(-1px);
  }

  #suggestions li:hover::before{
    opacity: 1;
  }

  #suggestions li.selected{
    background: linear-gradient(135deg, rgba(167,139,250,0.34), rgba(56,189,248,0.18));
    border-color: rgba(124,58,237,0.42);
    box-shadow:
      inset 3px 0 0 0 rgba(124,58,237,0.85),
      0 0 0 2px rgba(167,139,250,0.28),
      0 8px 26px rgba(99,102,241,0.16);
    transform: translateY(-1px);
  }

  #suggestions li.selected::before{
    opacity: 1;
    transform: scale(1.15);
    box-shadow: 0 0 14px rgba(167,139,250,0.65);
  }

  #suggestions li.suggest-loading,
  #suggestions li.suggest-error{
    cursor: default;
    opacity: 0.75;
  }

  #suggestions .sug-title{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #suggestions .sug-badge{
    font-size: 10px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(124,58,237,0.2);
    background: rgba(255,255,255,0.72);
    color: rgba(91,33,182,0.85);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  @keyframes mkConfirm {
    0%   { transform: translateX(0) scale(1); }
    20%  { transform: translateX(-2px) scale(1.01); }
    40%  { transform: translateX( 2px) scale(1.01); }
    60%  { transform: translateX(-1px) scale(1.01); }
    100% { transform: translateX(0) scale(1); }
  }

  #suggestions li.confirm{
    background: rgba(189,147,249,0.22);
    animation: mkConfirm 0.22s ease;
  }

  @media (prefers-reduced-motion: reduce){
    #suggestions.suggestions--open{
      animation: none;
    }
    #suggestions li{
      transition: none;
    }
    #suggestions li::before{
      transition: none;
    }
    #suggestions li:hover,
    #suggestions li.selected{
      transform: none;
    }
    #suggestions li.selected::before{
      transform: none;
    }
  }

  /* ---------- Results container ---------- */
  #result{
    width: min(980px, 94vw);
    margin: 26px auto 80px auto;
    position:relative;
    z-index:2;
  }

  .web-results{
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap: 12px;
  }
  .web-results > li{ list-style:none; }

  .result-row{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    padding: 14px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(15,23,42,0.10);
    background: var(--glass);
    box-shadow: var(--shadow2);
    background-clip: padding-box;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .15s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }

  .web-results > li:hover .result-row{
    transform: translateY(-2px);
    border-color: rgba(189,147,249,0.22);
    background: var(--glass2);
    box-shadow: var(--shadow);
  }

  .result-row--sponsored{
    border-color: rgba(59,130,246,0.30);
    /* Garder le même fond « verre » que les autres lignes ; le dégradé ne fait qu’accentuer (sans tout rendre translucide). */
    background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(139,92,246,0.08)),
                var(--glass);
  }
  .result-sponsored-badge{
    display: block;
    width: fit-content;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(37,99,235,0.95);
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(59,130,246,0.38);
    background: rgba(255,255,255,0.72);
  }
  html[data-theme="dark"] .result-row--sponsored{
    border-color: rgba(56,189,248,0.32);
    background: linear-gradient(135deg, rgba(14,165,233,0.14), rgba(59,130,246,0.10)),
                var(--glass);
  }
  html[data-theme="dark"] .result-sponsored-badge{
    color: rgba(125,211,252,0.98);
    border-color: rgba(56,189,248,0.42);
    background: rgba(15,23,42,0.55);
  }

  .site-icon{
    width: 34px;
    height: 34px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid rgba(15,23,42,0.14);
    background: var(--glass);
  }

  .result-main{ min-width: 0; }
  .result-main a{
    display:inline-block;
    color: var(--link);
    text-decoration:none;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.25;
  }
  .result-main a:hover{
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  .result-main small{
    display:block;
    margin-top: 4px;
    color: var(--muted2);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .result-main span{
    display:block;
    margin-top: 8px;
    color: var(--muted);
    line-height: 1.4;
    font-size: 14px;
    font-family: "Inter", system-ui, sans-serif;
  }

  .loading, .error, .empty, .limit-note{
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(15,23,42,0.10);
    background: var(--glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.45);
    font-family: "Inter", system-ui, sans-serif;
  }
  .error{ border-color: rgba(239,68,68,0.35); }
  .limit-note{ margin-top: 12px; color: var(--muted); }

  /* Correction orthographique — carte compacte ; ligne 1 nettement plus grande que la 2 */
  .spell-suggest{
    margin: 0 0 10px 0;
    padding: 8px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(15,23,42,0.1);
    background: rgba(255,255,255,0.94);
    box-shadow: 0 4px 18px rgba(15,23,42,0.06);
    font-family: "Inter", system-ui, sans-serif;
    line-height: 1.3;
    color: rgba(51,65,85,0.92);
  }
  .spell-suggest__primary{
    margin: 0 0 2px 0;
    font-size: clamp(14px, 1.85vw, 17px);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.28;
    color: rgba(15,23,42,0.94);
  }
  .spell-suggest__secondary{
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(100,116,139,0.96);
  }
  .spell-suggest__link{
    margin-left: 5px;
    color: var(--link);
    font-weight: inherit;
    font-size: inherit;
    text-decoration: none;
  }
  .spell-suggest__primary .spell-suggest__link{
    font-weight: 800;
    font-size: inherit;
  }
  .spell-suggest__link:hover{
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  html[data-theme="dark"] .spell-suggest{
    border-color: rgba(148,163,184,0.2);
    background: rgba(42,48,60,0.97);
    box-shadow: 0 4px 22px rgba(0,0,0,0.35);
    color: rgba(203,213,225,0.9);
  }
  html[data-theme="dark"] .spell-suggest__primary{
    color: rgba(248,250,252,0.96);
  }
  html[data-theme="dark"] .spell-suggest__secondary{
    color: rgba(148,163,184,0.92);
  }

  .visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Calculatrice interne (requête type 1+1 ou mot-clé multilingue) */
  .pixr-calc-card{
    margin: 0 0 16px 0;
    padding: 14px 16px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 28px rgba(15,23,42,0.08);
    font-family: "Inter", system-ui, sans-serif;
  }
  .pixr-calc-card__title{
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
  }
  .pixr-calc-result{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 10px;
    margin-bottom: 14px;
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
  }
  .pixr-calc-result__expr{
    color: var(--muted);
    font-weight: 600;
  }
  .pixr-calc-result__eq{
    opacity: 0.75;
    font-weight: 700;
  }
  .pixr-calc-result__val{
    font-variant-numeric: tabular-nums;
    color: var(--link);
  }
  .pixr-calc-error{
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #dc2626;
  }
  html[data-theme="dark"] .pixr-calc-error{
    color: #f87171;
  }
  .pixr-calc-keypad__label{
    display: block;
    margin-bottom: 10px;
  }
  .pixr-calc-keypad__display{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.65);
    color: var(--text);
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  html[data-theme="dark"] .pixr-calc-keypad__display{
    background: rgba(30,34,42,0.85);
  }
  .pixr-calc-keypad__grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .pixr-calc-btn{
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.5);
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition:
      transform 0.08s ease,
      background 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.12s ease;
  }
  html[data-theme="dark"] .pixr-calc-btn{
    background: rgba(40,46,58,0.75);
  }
  .pixr-calc-btn:hover{
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.35);
  }
  .pixr-calc-btn:active,
  .pixr-calc-btn.pixr-calc-btn--pressed{
    transform: translateY(1px) scale(0.96);
    box-shadow:
      inset 0 2px 8px rgba(15,23,42,0.14),
      0 1px 2px rgba(15,23,42,0.06);
    border-color: rgba(59,130,246,0.5);
    background: rgba(59,130,246,0.18);
  }
  html[data-theme="dark"] .pixr-calc-btn:active,
  html[data-theme="dark"] .pixr-calc-btn.pixr-calc-btn--pressed{
    box-shadow:
      inset 0 2px 10px rgba(0,0,0,0.35),
      0 1px 2px rgba(0,0,0,0.2);
    background: rgba(59,130,246,0.22);
  }
  .pixr-calc-btn--wide{
    grid-column: span 2;
  }
  .pixr-calc-btn--accent{
    background: rgba(59,130,246,0.22);
    border-color: rgba(59,130,246,0.45);
    color: var(--link);
  }
  html[data-theme="dark"] .pixr-calc-btn--accent{
    background: rgba(59,130,246,0.28);
  }
  .pixr-calc-btn--accent:active,
  .pixr-calc-btn--accent.pixr-calc-btn--pressed{
    background: rgba(37,99,235,0.35);
    border-color: rgba(37,99,235,0.65);
  }

  /* ---------- Onglet « All » : aperçus images / vidéos (selon la requête) ---------- */
  .all-vertical-wrap{
    margin: 0 0 18px 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .all-strip{
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--glass);
    padding: 12px 14px 14px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .all-strip__head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .all-strip__title{
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
  }
  .all-strip__more{
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--link);
    text-decoration: none;
    white-space: nowrap;
  }
  .all-strip__more:hover{
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  /* Aperçu « All » : 3 images en grille (style compact type moteur de recherche) */
  .all-img-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    margin: 0;
  }
  .all-img-grid__cell{
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,0.1);
    background: rgba(15,23,42,0.06);
    display: block;
    text-decoration: none;
    min-height: 0;
  }
  .all-img-grid__cell img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Bouton + aperçu modal (comme images.php) : reset .img-card pour garder la grille « All » */
  .all-img-grid button.img-card.all-img-grid__cell{
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    font: inherit;
    color: inherit;
    width: 100%;
    min-height: 0;
    cursor: pointer;
    display: block;
    text-align: left;
    box-shadow: none;
    padding: 0;
  }
  .all-img-grid button.img-card.all-img-grid__cell:hover{
    transform: none;
    border-color: rgba(59,130,246,0.35);
    box-shadow: 0 0 0 1px rgba(59,130,246,0.12);
  }
  .all-img-grid button.img-card.all-img-grid__cell img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  html[data-theme="dark"] .all-img-grid__cell{
    border-color: rgba(148,163,184,0.18);
    background: rgba(30,41,59,0.35);
  }
  html[data-theme="dark"] .all-img-grid button.img-card.all-img-grid__cell:hover{
    border-color: rgba(125,211,252,0.35);
    box-shadow: 0 0 0 1px rgba(56,189,248,0.15);
  }

  /* Vidéos « All » : mêmes cartes que videos.php (video-item + video-text) */
  .all-vid-list{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .all-vid-list > li.video-li{
    list-style: none;
  }
  a.video-item.all-vid-card{
    text-decoration: none;
    color: inherit;
    min-width: 0;
  }
  a.video-item.all-vid-card .video-text{
    min-width: 0;
    flex: 1 1 auto;
  }
  /* Titre : comme .video-text a sur videos.php */
  a.video-item.all-vid-card .video-text .all-vid-ttl{
    display: block;
    color: var(--link);
    text-decoration: none;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.28;
    letter-spacing: 0.2px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  .video-li:hover a.video-item.all-vid-card .video-text .all-vid-ttl{
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  /* Ligne source / durée : comme result-main small */
  a.video-item.all-vid-card .video-text small.all-vid-url-line{
    display: block;
    margin-top: 4px;
    color: var(--muted2);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Description : comme .video-text span sur videos.php */
  a.video-item.all-vid-card .video-text span.all-vid-snippet{
    display: block;
    margin-top: 8px;
    margin-bottom: 0;
    color: var(--muted);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .all-vid-thumb-shell{
    position: relative;
    flex: 0 0 auto;
    line-height: 0;
    border-radius: 14px;
    overflow: hidden;
  }
  .all-vid-thumb-shell .video-thumb{
    display: block;
    vertical-align: top;
  }
  .all-vid-play-ico{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent rgba(255,255,255,0.92);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
    pointer-events: none;
  }

  /* ---------- Pagination ---------- */
  .pagination{
    margin-top: 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
  }

  .page-btn{
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,0.12);
    background: var(--glass);
    color: var(--link);
    font-weight: 700;
    cursor:pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .15s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  }
  .page-btn:hover{
    transform: translateY(-1px);
    background: var(--glass2);
    border-color: rgba(189,147,249,0.24);
  }
  .page-btn:disabled{ opacity: 0.45; cursor:not-allowed; transform:none; }

  .page-label{
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,0.10);
    background: rgba(255,255,255,0.52);
    color: var(--muted);
    font-weight: 700;
    font-family: "Inter", system-ui, sans-serif;
  }

  /* ---------- Images grid ---------- */
  .img-grid{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }

  .img-card{
    border: 1px solid rgba(15,23,42,0.10);
    background: var(--glass);
    border-radius: 16px;
    padding: 0;
    overflow:hidden;
    cursor:pointer;
    box-shadow: var(--shadow2);
    background-clip: padding-box;
    transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
    position:relative;
  }
  .img-card:hover{
    transform: translateY(-2px);
    border-color: rgba(189,147,249,0.22);
    box-shadow: var(--shadow);
  }
  .img-card img{
    display:block;
    width:100%;
    height: 120px;
    object-fit: cover;
  }

  /* ---------- Videos ---------- */
  .video-li{ list-style:none; }
  .video-item{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    padding: 14px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(15,23,42,0.10);
    background: var(--glass);
    box-shadow: var(--shadow2);
    background-clip: padding-box;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .15s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .video-li:hover .video-item{
    transform: translateY(-2px);
    border-color: rgba(189,147,249,0.22);
    background: var(--glass2);
    box-shadow: var(--shadow);
  }
  .video-thumb{
    width: 160px;
    height: 92px;
    object-fit: cover;
    border-radius: 14px;
    flex: 0 0 auto;
    border: 1px solid rgba(15,23,42,0.10);
  }
  .video-text a{
    color: var(--link);
    text-decoration:none;
    font-weight: 800;
  }
  .video-text a:hover{ text-decoration: underline; text-underline-offset: 3px; }
  .video-text span{
    display:block;
    margin-top: 6px;
    color: var(--muted);
    font-family:"Inter", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.4;
  }

  /* ---------- AI coming soon card ---------- */
  .ai-coming-soon{
    padding: 18px 18px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(15,23,42,0.10);
    background: var(--glass);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .ai-coming-soon h2{ margin:0 0 8px 0; font-size: 20px; }
  .ai-coming-soon p{
    margin:0;
    color: var(--muted);
    font-family:"Inter", system-ui, sans-serif;
  }

  /* ---------- Image preview modal ---------- */
  .img-preview{
    position: fixed;
    inset: 0;
    display:flex;
    align-items: flex-start;
    justify-content:center;
    background: rgba(15,23,42,0.50);
    opacity: 0;
    pointer-events:none;
    transition: opacity .18s ease;
    z-index: 99999;
    padding-top: 80px;
  }
  .img-preview.open{
    opacity: 1;
    pointer-events: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  }

  .img-preview-inner{
    width: min(980px, 94vw);
    border-radius: 22px;
    border: 1px solid rgba(15,23,42,0.10);
    background: rgba(255,255,255,0.78);
    box-shadow: 0 30px 90px rgba(0,0,0,0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow:hidden;
    transform: translateY(6px) scale(0.99);
    transition: transform .18s ease;
  }
  .img-preview.open .img-preview-inner{ transform: translateY(0px) scale(1); }

  #imgPreviewImg{
    display:block;
    width:100%;
    max-height: 68vh;
    object-fit: contain;
    background: rgba(15,23,42,0.08);
  }

  .img-preview-meta{
    padding: 14px 16px 18px 16px;
    display:flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .img-preview-title{
    font-weight: 800;
    max-width: 100%;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .img-preview-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  .img-preview-link{
    color: var(--link);
    text-decoration:none;
    font-family:"Inter", system-ui, sans-serif;
    font-weight: 700;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,0.12);
    background: var(--glass);
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
  }
  button.img-preview-link{
    cursor: pointer;
    font: inherit;
    font-family:"Inter", system-ui, sans-serif;
    font-weight: 700;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
  }
  .img-preview-link--with-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .img-preview-dl-icon{
    flex-shrink: 0;
    display: block;
  }
  .img-preview-action-icons{
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Icônes copier ↔ coche : superposées, transition douce */
  .img-preview-copy-btn .img-preview-copy-svg,
  .img-preview-copy-btn .img-preview-tick-svg{
    position: absolute;
    inset: 0;
    margin: auto;
    display: block;
    transition:
      opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
      color 0.28s ease;
  }
  .img-preview-copy-btn .img-preview-copy-svg{
    opacity: 1;
    transform: scale(1);
    color: inherit;
  }
  .img-preview-copy-btn .img-preview-tick-svg{
    opacity: 0;
    transform: scale(0.5);
    color: #16a34a;
    pointer-events: none;
  }
  .img-preview-copy-btn.is-copied .img-preview-copy-svg{
    opacity: 0;
    transform: scale(0.5);
  }
  .img-preview-copy-btn.is-copied .img-preview-tick-svg{
    opacity: 1;
    transform: scale(1);
  }
  @media (prefers-reduced-motion: reduce){
    .img-preview-copy-btn .img-preview-copy-svg,
    .img-preview-copy-btn .img-preview-tick-svg{
      transition-duration: 0.01ms;
    }
  }
  .img-preview-link:hover{
    transform: translateY(-1px);
    background: var(--glass2);
    border-color: rgba(189,147,249,0.24);
  }
  .img-preview-src-label{
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin: 0;
  }
  .img-preview-src-row{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    min-width: 0;
  }
  .img-preview-src-input{
    flex: 1;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,0.12);
    background: rgba(255,255,255,0.55);
    font-size: 12px;
    font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .img-preview-copy-inline-btn{
    flex-shrink: 0;
    align-self: stretch;
    min-width: 48px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,0.12);
    background: var(--glass);
    color: var(--link);
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
  }
  .img-preview-copy-inline-btn:hover{
    transform: translateY(-1px);
    background: var(--glass2);
    border-color: rgba(189,147,249,0.24);
  }
  .img-preview-url-feedback{
    margin: 0;
    min-height: 1.25em;
    font-size: 12px;
    font-weight: 700;
    color: var(--link);
  }

  .img-preview-close{
    position: fixed;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,0.12);
    background: var(--glass2);
    color: white;
    font-size: 22px;
    cursor:pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .15s ease, background .2s ease;
    box-shadow: 0 14px 35px rgba(0,0,0,0.55);
  }
  .img-preview-close:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.10); }

  /* ---------- Accessibility focus rings ---------- */
  :focus-visible{
    outline: none;
    box-shadow: var(--ring);
    border-color: rgba(189,147,249,0.32) !important;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1100px){ .img-grid{ grid-template-columns: repeat(4, 1fr); } }


  @media (max-width: 520px){
    .img-grid{ grid-template-columns: repeat(2, 1fr); }
    .result-row, .video-item{ padding: 12px; }
    .img-preview-title{ max-width: 100%; }
  }

  /* =========================================================
    SEARCHED TOP HEADER LAYOUT (v2 — forces logo move)
    ========================================================= */

  body.searched{
    padding-top: calc(var(--topbar-top) + var(--topbar-h) + var(--topbar-gap) + 64px);
  }

  body.searched #pixr_search{
    position: fixed;
    top: var(--topbar-top);
    left: var(--topbar-left);
    margin: 0 !important;
    width: auto !important;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 10020;
  }

  body.searched #pixr_search_img{
    width: auto !important;
    height: 110px !important;
    max-width: 280px;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,0.55));
  }

  body.searched .search-row{
    position: fixed;
    top: calc(var(--topbar-top) - 17px);
    left: 0;
    right: 0;
    transform: none !important;
    /* Largeur max + centrée dans la fenêtre (évite le collage à gauche sur le logo) */
    width: min(760px, 86vw) !important;
    max-width: min(760px, 86vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 18px;
    z-index: 10030;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  body.searched #input_search{
    flex: 0 1 min(680px, 62vw);
    width: min(680px, 62vw);
    min-width: 260px;
    height: var(--topbar-h);
  }

  body.searched #the_button{
    height: var(--topbar-h);
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body.searched #nav_tabs{
    position: fixed;
    top: calc(var(--topbar-top) + var(--topbar-h) + var(--topbar-gap));
    left: 50%;
    transform: translateX(-50%) !important;
    width: min(850px, 94vw) !important;
    margin: 0 !important;
    z-index: 10010;
    display: flex;
    justify-content: center;
  }


  /* =========================================================
    Horizon AI — iOS glass bubbles (LIGHT)
    ========================================================= */

  .horizon-card{
    padding: 18px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--glass);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .horizon-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    flex-wrap:wrap;
  }

  .horizon-brand{
    display:flex;
    align-items:center;
    gap: 10px;
    font-weight: 800;
    font-size: 18px;
  }

  .horizon-dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg,
      rgba(189,147,249,0.95),
      rgba(255,121,198,0.85),
      rgba(139,233,253,0.88)
    );
    box-shadow: 0 0 0 6px rgba(189,147,249,0.12);
  }

  .horizon-name{ letter-spacing: 0.2px; }

  .horizon-chip{
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.50);
    color: var(--muted);
  }

  .horizon-status{
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 800;
    font-size: 12.5px;
    color: var(--muted);
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.50);
  }

  .horizon-log{
    margin-top: 14px;
    display:flex;
    flex-direction:column;
    gap: 12px;
    max-height: 70vh;
    overflow:hidden;
    padding-right: 2px;
  }

  .horizon-hint{
    margin-top: 14px;
    color: var(--muted);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 13px;
  }

  /* ---------- Bubbles ---------- */
  .horizon-bubble{
    max-width: 100%;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow2);
    font-family: "Inter", system-ui, sans-serif;
    line-height: 1.5;
  }

  .horizon-bubble.user{
    align-self: flex-end;
    border-radius: 18px 18px 6px 18px;
    background: rgba(189,147,249,0.14);
  }

  .horizon-bubble.assistant{
    align-self: flex-start;
    border-radius: 18px 18px 18px 6px;
    background: rgba(255,255,255,0.52);
  }

  .horizon-bubble-body{
    color: var(--text);
    font-size: 14.5px;
  }
  .horizon-bubble-body b,
  .horizon-bubble-body strong{ font-weight: 800; }
  .horizon-bubble-body a{ color: var(--link); text-decoration: none; font-weight: 700; }
  .horizon-bubble-body a:hover{ text-decoration: underline; text-underline-offset: 3px; }

  .horizon-bubble-body ul,
  .horizon-bubble-body ol{
    margin: 10px 0 0 0;
    padding-left: 18px;
  }
  .horizon-bubble-body li{ margin: 6px 0; }

  .horizon-bubble-body h3{
    margin: 10px 0 6px 0;
    font-size: 15.5px;
  }

  /* ---------- Thinking block ---------- */
  .horizon-stage-title{
    font-weight: 900;
    opacity: 0.96;
  }
  .horizon-stage-dots{
    display:inline-block;
    width: 26px;
  }
  .horizon-stage-sub{
    opacity: 0.78;
    font-size: 13px;
    margin-top: 6px;
  }
  .horizon-caret{ opacity: 0.85; }

  /* ---------- Sources (C2) ---------- */
  .horizon-sources{
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(15,23,42,0.10);
  }

  .horizon-sources-btn{
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  .horizon-sources-chev{
    display:inline-block;
    transition: transform .16s ease;
  }

  .horizon-sources-panel{
    margin-top: 10px;
    display:flex;
    flex-direction:column;
    gap: 10px;
    max-height: 0px;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    transition: max-height .22s ease, opacity .18s ease, transform .18s ease;
  }

  .horizon-sources-panel.open{
    max-height: 900px;
    opacity: 1;
    transform: translateY(0px);
  }

  .horizon-source-item{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.62);
    text-decoration:none;
    color: var(--text);
    box-shadow: var(--shadow2);
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
  }

  .horizon-source-item:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,0.72);
    border-color: rgba(189,147,249,0.28);
  }

  .horizon-source-icon .site-icon{
    width: 34px;
    height: 34px;
  }

  .horizon-source-text{ min-width: 0; }

  .horizon-source-title{
    font-weight: 800;
    line-height: 1.25;
  }

  .horizon-source-domain{
    margin-top: 3px;
    opacity: 0.72;
    font-size: 12px;
    font-family: "Inter", system-ui, sans-serif;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  .horizon-source-desc{
    margin-top: 6px;
    opacity: 0.85;
    font-size: 13px;
    line-height: 1.35;
    font-family: "Inter", system-ui, sans-serif;
  }

  body.modal-open .search-row,
  body.modal-open #nav_tabs,
  body.modal-open #pixr_search{
    pointer-events: none;
  }

  /* Aperçu image : pas de scroll sur la page derrière ; le scroll reste dans l’overlay */
  html:has(body.modal-open){
    overflow: hidden !important;
  }
  body.modal-open{
    overflow: hidden !important;
    overscroll-behavior: none;
  }

    /* =========================================================
    PIXR SEARCH — Signature Button (less flashy, more premium)
    - Idle: subtle wave drift + breathing
    - Hover: stronger drift + lift
    - Click: shockwave rings around + sparkles inside
    Paste at VERY BOTTOM of styles_s.css
    ========================================================= */

  /* (Progressive enhancement) smoother animation of custom props */
  @property --lift {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
  }
  @property --scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
  }

  /* ---------- Base button ---------- */
  #the_button{
    /* Dégradé bouton : plus saturé et lumineux */
    --p1: rgba(109,40,217,0.92);
    --p2: rgba(34,211,238,0.78);
    --p3: rgba(59,130,246,0.88);

    /* breathing controls */
    --lift: 0px;
    --scale: 1;

    border: 1px solid rgba(255,255,255,0.28);
    background: linear-gradient(125deg, var(--p1), var(--p2), var(--p3));
    background-size: 260% 260%;
    background-position: 0% 50%;

    filter: saturate(1.12) brightness(1.02);

    /* Premium shadow (less “black hole”) */
    box-shadow:
      0 14px 32px rgba(0,0,0,0.38),
      0 0 0 1px rgba(255,255,255,0.10) inset;

    transform: translateY(var(--lift)) scale(var(--scale));
    will-change: transform, background-position, filter, box-shadow;

    /* Idle life */
    animation: pixrIdle 6.8s ease-in-out infinite;
  }

  /* Subtle moving sheen (NOT too strong) */
  #the_button::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    pointer-events:none;

    background: linear-gradient(
      105deg,
      transparent 0%,
      rgba(255,255,255,0.16) 44%,
      transparent 62%
    );
    opacity: 0.10;               /* very subtle at rest */
    transform: translateX(-35%);
    mix-blend-mode: screen;
    animation: pixrSheen 8.5s ease-in-out infinite;
  }

  /* Sparkles layer (only visible on click) */

  /* ---------- Idle animation (wave + breathe) ---------- */
  @keyframes pixrIdle{
    0%, 100% { background-position: 0% 50%;  --lift: 0px;   }
    50%      { background-position: 100% 50%; --lift: -1px; }
  }

  /* ---------- Sheen slow drift ---------- */
  @keyframes pixrSheen{
    0%, 100% { transform: translateX(-35%); opacity: 0.08; }
    50%      { transform: translateX( 35%); opacity: 0.14; }
  }

  /* ---------- Hover: more alive, still classy ---------- */
  #the_button:hover{
    --scale: 1.03;
    filter: saturate(1.06) brightness(1.02);

    box-shadow:
      0 18px 44px rgba(0,0,0,0.48),
      0 0 0 1px rgba(255,255,255,0.12) inset;

    animation: pixrHover 2.8s ease-in-out infinite;
  }

  #the_button:hover::before{
    opacity: 0.22;
    animation-duration: 3.2s;
  }

  @keyframes pixrHover{
    0%, 100% { background-position: 0% 50%;  --lift: -1px; }
    50%      { background-position: 100% 50%; --lift: -3px; }
  }

  /* ---------- Click: shockwave rings around + sparkles inside ---------- */
  /* We keep your existing :active feel but add “brand fireworks” */
  #the_button:active{
    --scale: 0.99;
    filter: saturate(1.02) brightness(0.98);

    /* Keep idle running + add click burst once */
    animation: pixrHover 1.8s ease-in-out infinite, pixrClick 650ms ease-out 1;
  }

  /* “Shockwave” around button via animated box-shadows */
  @keyframes pixrClick{
    0%{
      box-shadow:
        0 18px 44px rgba(0,0,0,0.48),
        0 0 0 0 rgba(139,233,253,0.26),
        0 0 0 0 rgba(124,58,237,0.16),
        0 0 0 1px rgba(255,255,255,0.12) inset;
    }
    45%{
      box-shadow:
        0 18px 44px rgba(0,0,0,0.48),
        0 0 0 10px rgba(139,233,253,0.16),
        0 0 0 22px rgba(124,58,237,0.00),
        0 0 0 1px rgba(255,255,255,0.12) inset;
    }
    100%{
      box-shadow:
        0 14px 32px rgba(0,0,0,0.38),
        0 0 0 0 rgba(139,233,253,0.00),
        0 0 0 0 rgba(124,58,237,0.00),
        0 0 0 1px rgba(255,255,255,0.10) inset;
    }
  }

  /* Sparkles pop on click */
  #the_button:active::after{
    animation: pixrSpark 650ms ease-out 1;
  }

  @keyframes pixrSpark{
    0%   { opacity: 0;   transform: scale(0.55) rotate(0deg); }
    35%  { opacity: 0.9; transform: scale(0.88) rotate(10deg); }
    100% { opacity: 0;   transform: scale(1.10) rotate(18deg); }
  }

  /* ---------- Respect user motion settings ---------- */
  @media (prefers-reduced-motion: reduce){
    #the_button{ animation: none; }
    #the_button::before{ animation: none; }
  }

  /* =========================================================
    LOGO SIZE OVERRIDE — paste at VERY BOTTOM
    Change only the variables to resize.
    ========================================================= */
  :root{
    /* HOME (centered logo before search) */
    --logo-home-max: 680px;     /* augmente ça pour agrandir sur PC */
    --logo-home-vw: 92vw;       /* limite en % d’écran */

    /* SEARCHED (top header logo after search) */
    --logo-top-h: 64px;         /* hauteur logo en mode searched (PC) */
    --logo-top-max: 360px;      /* largeur max en mode searched (PC) */

    /* MOBILE tweaks */
    --logo-home-max-mobile: 720px;
    --logo-home-vw-mobile: 94vw;

    --logo-top-h-mobile: 52px;  /* logo en mode searched sur tel/tablette */
    --logo-top-max-mobile: 300px;
  }

  /* Home logo size */
  #pixr_search_img{
    width: min(var(--logo-home-max), var(--logo-home-vw)) !important;
    height: auto !important;
  }

  /* Searched header logo size */
  body.searched #pixr_search_img{
    height: 150px !important; /* mets 130px, 150px, etc */
    max-width: 360px;         /* monte à 360px/420px si besoin */
  }


  /* Mobile */
  @media (max-width: 520px){
    #pixr_search_img{
      width: min(var(--logo-home-max-mobile), var(--logo-home-vw-mobile)) !important;
    }
    body.searched #pixr_search_img{
      height: var(--logo-top-h-mobile) !important;
      max-width: var(--logo-top-max-mobile) !important;
    }
  }

  /* Remonter la barre AVANT recherche uniquement */
  body:not(.searched) .search-row{
    margin-top: 8px !important;        /* essaye 0px, 8px, 12px */
    /* option bonus si tu veux encore plus haut : */
    /* transform: translateY(-12px) !important; */
  }

  /* ✅ Click effect that works on quick tap/click (no long press) */
#the_button.clicked{
  /* Keep animation for compatibility */
  animation:
    kartSelection 2600ms cubic-bezier(.03,.95,.13,1.08) both !important,
    kartJolt 2600ms cubic-bezier(.03,.95,.13,1.08) both !important;
}

/* sparkles on click */
#the_button.clicked::after{
  animation: kartSplash 2600ms ease-out 1 !important;
}

/* =========================================================
   Logo behavior + cool interaction (home disabled, searched clickable)
   Paste at VERY BOTTOM
   ========================================================= */

/* Toujours : pas de drag / sélection */
#pixr_search_img{
  user-select: none !important;
  -webkit-user-drag: none !important;
  cursor: default;
}

/* AVANT searched : logo complètement inerte */
body:not(.searched) #pixr_search{
  pointer-events: none !important;
}
body:not(.searched) #pixr_search_img{
  cursor: default !important;
}

/* EN searched : logo devient un "bouton" cool */
body.searched #pixr_search{
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
}

/* l'image suit le curseur */
body.searched #pixr_search_img{
  cursor: pointer !important;
  transition: transform .16s ease, filter .18s ease, opacity .18s ease;
}

/* Glow glass derrière (effet premium) */
body.searched #pixr_search::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 140%;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%,
    rgba(139,233,253,0.18),
    rgba(124,58,237,0.10),
    transparent 70%);
  filter: blur(10px);
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}

/* Hover */
body.searched #pixr_search:hover::after{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1.02);
}
body.searched #pixr_search:hover #pixr_search_img{
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 18px 32px rgba(0,0,0,0.55));
}

/* Click "pop" (déclenché par JS via classe) */
body.searched #pixr_search.logo-clicked #pixr_search_img{
  animation: logoPop 240ms ease;
}
@keyframes logoPop{
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-1px) scale(1.06); }
  100% { transform: translateY(0) scale(1.00); }
}

/* FIX: keep the logo fixed in searched (undo the accidental relative) */
body.searched #pixr_search{
  position: fixed !important;
  top: var(--topbar-top) !important;
  left: var(--topbar-left) !important;
  margin: 0 !important;
  width: auto !important;
  height: var(--topbar-h) !important;
}

/* Le conteneur de la barre ne bloque plus les clics autour */
body.searched .search-row{
  pointer-events: none !important;
}

/* Mais l'input et le bouton restent cliquables */
body.searched #input_search,
body.searched #the_button,
body.searched #search_pill_voice{
  pointer-events: auto !important;
}

/* =========================================================
   PIXR SEARCH — RESPONSIVE FINAL PATCH v3 (2026)
   Colle TOUT EN BAS de styles_s.css
   Objectif:
   - PC: rien ne change
   - Tablette/Tel: layout propre, pas de chevauchement,
     barre stable, tabs scroll, grilles adaptées
   ========================================================= */

/* Base safety */
img, video { max-width: 100%; height: auto; }
#result { overflow-x: hidden; }

/* ---------- TABLET + PHONE ---------- */
@media (max-width: 980px){

  body{
    padding-left: max(0px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0px, env(safe-area-inset-right, 0px)) !important;
  }
  body:not(.searched) #chrome_trailing{
    top: max(18px, env(safe-area-inset-top, 0px)) !important;
    right: max(18px, env(safe-area-inset-right, 0px)) !important;
  }
  /* 1) On neutralise le header FIXE en mode searched (sinon ça se superpose) */
  body.searched{
    padding-top: 0 !important;
  }

  body.searched #pixr_search,
  body.searched .search-row,
  body.searched #nav_tabs{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    width: min(920px, 94vw) !important;
    z-index: auto !important;
  }

  /* 2) Logo centré + taille raisonnable */
  #pixr_search{
    justify-content: center !important;
    margin-top: 22px !important;
    z-index: 2 !important;
  }
  body:not(.searched) #pixr_search_img{
    width: min(calc(var(--logo-home-max, 680px) * var(--ui-scale, 1)), 92vw) !important;
    max-width: 92vw !important;
    height: auto !important;
  }
  body.searched #pixr_search_img{
    width: min(520px, 88vw) !important;
    max-width: 88vw !important;
    height: auto !important;
  }

  /* 3) Barre de recherche: input large + bouton stable (sur une ligne) */
  .search-row{
    width: min(920px, 94vw) !important;
    margin: 14px auto 0 auto !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(50px, 56px) !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
  }

  #input_search{
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    border-radius: 26px !important;
    font-size: 16px !important; /* évite le zoom iOS */
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
  }

  #the_button{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 52px !important;
    border-radius: 26px !important;
    padding: 0 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
  }

  /* 4) Tabs visibles + espacées + scroll horizontal */
  body:not(.searched) #nav_tabs{
    display: none !important;
  }
  body.searched #nav_tabs{
    display: block !important;
  }
  #nav_tabs{
    width: min(920px, 94vw) !important;
    margin: 14px auto 0 auto !important;
  }

  .tabs{
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 18px !important;
  }
  .tabs::-webkit-scrollbar{ height: 0px !important; }

  .tab{
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    touch-action: manipulation;
  }

  /* 5) Suggestions */
  #suggestions{
    width: auto !important;
    max-width: min(440px, calc(100vw - 24px)) !important;
    max-height: min(240px, 42vh) !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  /* 6) Résultats: marges + anti overflow */
  #result{
    width: min(980px, 94vw) !important;
    margin: 22px auto max(70px, env(safe-area-inset-bottom, 0px)) auto !important;
  }

  .result-row,
  .video-item{
    flex-wrap: wrap !important;
  }
  .result-main small{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* 7) Grilles */
  .img-grid{ grid-template-columns: repeat(3, 1fr) !important; }
  .img-card img{ height: 120px !important; }

  /* 8) Vidéos */
  .video-thumb{ width: 140px !important; height: 84px !important; }
}

/* ---------- PHONE ---------- */
@media (max-width: 520px){

  /* Accueil : garde les variables logo mobile ; pas de plafond 560px */
  body:not(.searched) #pixr_search_img{
    width: min(calc(var(--logo-home-max-mobile, 720px) * var(--ui-scale, 1)), 94vw) !important;
    max-width: 94vw !important;
  }

  /* Barre: une ligne, colonne bouton fixe */
  .search-row{
    grid-template-columns: minmax(0, 1fr) 52px !important;
    gap: 8px !important;
  }

  #input_search{
    grid-column: 1 !important;
    height: 50px !important;
    border-radius: 24px !important;
    font-size: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #the_button{
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;
    border-radius: 24px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Tabs: toujours scrollable, pas collé */
  #nav_tabs{ margin-top: 14px !important; }

  /* Grille images */
  .img-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .img-card img{ height: 110px !important; }

  /* Vidéos: en colonne */
  .video-item{ flex-direction: column !important; }
  .video-thumb{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* Modal preview: plus confortable */
  .img-preview{
    align-items: flex-start !important;
    padding-top: 72px !important;
  }
  .img-preview-meta{
    align-items: stretch !important;
  }
  .img-preview-title{ max-width: 100% !important; }
}

/* ---------- Très petits écrans ---------- */
@media (max-width: 360px){
  #input_search, #the_button{ height: 48px !important; }
  .tab{ padding: 9px 12px !important; }
}

/* iPhone notch safe area */
@supports (padding: env(safe-area-inset-top)){
  .img-preview-close{
    top: max(18px, env(safe-area-inset-top)) !important;
    right: max(18px, env(safe-area-inset-right)) !important;
  }
}

/* =========================================================
   Search button — style simple (v2)
   ========================================================= */

/* Bouton simple, forme bulle, nuances bleues + contour noir */
#the_button{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: 999px !important;
  height: 56px !important;
  padding: 0 18px !important;
  border: 2px solid #111111 !important;
  background:
    linear-gradient(
      180deg,
      #3b82f6 0%,
      #2563eb 50%,
      #1d4ed8 100%
    ) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(15,23,42,0.25),
    0 6px 18px rgba(15,23,42,0.22) !important;
  cursor: pointer !important;
  animation: none !important;
  transform: none !important;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease !important;

  --tx0: 0px;  --ty0: 0px;
  --tx1: -40px;  --ty1: 8px;
  --tx2: 44px;   --ty2: -7px;
  --tx3: -34px;  --ty3: 6px;
  --tx4: 40px;   --ty4: -6px;
  --tx5: -28px;  --ty5: 5px;
  --tx6: 32px;   --ty6: -5px;
  --tx7: -24px;  --ty7: 4px;
  --tx8: 24px;   --ty8: -4px;
  --tx9: -18px;  --ty9: 3px;
  --tx10: 16px;  --ty10: -4px;
  --tx11: -12px; --ty11: 2px;
  --tx12: 8px;   --ty12: -3px;
  --tx13: -6px;  --ty13: 2px;
  --tx14: 4px;   --ty14: -2px;
  --tx15: -2px;  --ty15: 1px;
  --tx16: 0px;   --ty16: 0px;
}

#the_button::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,0.45), rgba(255,255,255,0.05) 48%, transparent 58%);
  opacity: 0.42;
}

#the_button::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.28), transparent 58%);
  opacity: 0;
}

#the_button:hover{
  transform: none !important;
  animation: searchChaoticHover 420ms ease-in-out infinite !important;
  filter: brightness(1.04) saturate(108%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    inset 0 -1px 0 rgba(15,23,42,0.3),
    0 10px 22px rgba(37,99,235,0.35) !important;
}

#the_button:focus-visible{
  outline: 2px solid rgba(59,130,246,0.45);
  outline-offset: 2px;
}

#the_button:active{
  animation:
    kartSelection 620ms cubic-bezier(.03,.95,.13,1.08) both !important,
    kartJolt 620ms cubic-bezier(.03,.95,.13,1.08) both !important;
  transform: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(15,23,42,0.32),
    0 4px 12px rgba(15,23,42,0.20) !important;
}

/* Keep burst animation only for the click effect (subtle) */
#the_button.pixr-burst{
  animation:
    kartSelection 2600ms cubic-bezier(.03,.95,.13,1.08) both !important,
    kartJolt 2600ms cubic-bezier(.03,.95,.13,1.08) both !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    inset 0 -1px 0 rgba(15,23,42,0.32),
    0 0 0 2px rgba(15,23,42,0.28),
    0 0 0 6px rgba(59,130,246,0.26),
    0 18px 34px rgba(15,23,42,0.30) !important;
}

#the_button.pixr-burst::after{
  opacity: 0.9;
  animation: kartSplash 2600ms ease-out !important;
}

@keyframes kartSelection{
  0%   { transform: translateX(var(--tx0,0px))  translateY(var(--ty0,0px)) rotate(0.1deg); }
  2%   { transform: translateX(var(--tx1,0px))  translateY(var(--ty1,0px)) rotate(-1.6deg); }
  4%   { transform: translateX(var(--tx2,0px))  translateY(var(--ty2,0px)) rotate(1.8deg); }
  7%   { transform: translateX(var(--tx3,0px))  translateY(var(--ty3,0px)) rotate(-1.1deg); }
  11%  { transform: translateX(var(--tx4,0px))  translateY(var(--ty4,0px)) rotate(1.9deg); }
  16%  { transform: translateX(var(--tx5,0px))  translateY(var(--ty5,0px)) rotate(-2.2deg); }
  19%  { transform: translateX(var(--tx6,0px))  translateY(var(--ty6,0px)) rotate(1.6deg); }
  25%  { transform: translateX(var(--tx7,0px))  translateY(var(--ty7,0px)) rotate(-2.4deg); }
  31%  { transform: translateX(var(--tx8,0px))  translateY(var(--ty8,0px)) rotate(2.1deg); }
  38%  { transform: translateX(var(--tx9,0px))  translateY(var(--ty9,0px)) rotate(-1.2deg); }
  45%  { transform: translateX(var(--tx10,0px)) translateY(var(--ty10,0px)) rotate(1.5deg); }
  51%  { transform: translateX(var(--tx11,0px)) translateY(var(--ty11,0px)) rotate(-1.7deg); }
  58%  { transform: translateX(var(--tx12,0px)) translateY(var(--ty12,0px)) rotate(2.3deg); }
  64%  { transform: translateX(var(--tx13,0px)) translateY(var(--ty13,0px)) rotate(-0.8deg); }
  70%  { transform: translateX(var(--tx14,0px)) translateY(var(--ty14,0px)) rotate(1.2deg); }
  78%  { transform: translateX(var(--tx15,0px)) translateY(var(--ty15,0px)) rotate(-0.9deg); }
  86%  { transform: translateX(var(--tx16,0px)) translateY(var(--ty16,0px)) rotate(0.4deg); }
  92%  { transform: translate(2px, -2px); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

@keyframes searchChaoticHover{
  0%   { transform: translate(0px, 0px); }
  8%   { transform: translate(1px, -2px); }
  18%  { transform: translate(-2px, 1px); }
  26%  { transform: translate(2px, -1px); }
  34%  { transform: translate(-1px, 2px); }
  42%  { transform: translate(2px, 1px); }
  53%  { transform: translate(-2px, -2px); }
  63%  { transform: translate(1px, 2px); }
  72%  { transform: translate(-1px, -1px); }
  84%  { transform: translate(2px, -2px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes kartJolt{
  0%   { filter: brightness(1.16) saturate(1.10) contrast(1.03); }
  2%   { filter: brightness(2.45) saturate(2.15) contrast(1.45); }
  5%   { filter: brightness(2.2) saturate(2.02) contrast(1.42); }
  9%   { filter: brightness(2.5) saturate(2.2) contrast(1.5); }
  14%  { filter: brightness(2.15) saturate(1.98) contrast(1.4); }
  20%  { filter: brightness(1.95) saturate(1.84) contrast(1.32); }
  28%  { filter: brightness(1.78) saturate(1.63) contrast(1.22); }
  38%  { filter: brightness(1.55) saturate(1.42) contrast(1.14); }
  50%  { filter: brightness(1.34) saturate(1.24) contrast(1.08); }
  62%  { filter: brightness(1.22) saturate(1.16) contrast(1.06); }
  72%  { filter: brightness(1.12) saturate(1.09) contrast(1.03); }
  84%  { filter: brightness(1.06) saturate(1.03) contrast(1.02); }
  92%  { filter: brightness(1.03) saturate(1.01) contrast(1.01); }
  100% { filter: brightness(1) saturate(1) contrast(1); }
}

@keyframes kartSplash{
  0%    { opacity:0;    transform: scale(0.45); }
  8%    { opacity:1;    transform: scale(1.18); }
  16%   { opacity:0.95; transform: scale(3.6); }
  28%   { opacity:0.9;  transform: scale(4.8); }
  42%   { opacity:0.6;  transform: scale(5.9); }
  60%   { opacity:0.34; transform: scale(6.8); }
  76%   { opacity:0.14; transform: scale(7.2); }
  88%   { opacity:0.05; transform: scale(7.35); }
  100%  { opacity:0;    transform: scale(7.5); }
}

.web-results > li:hover .result-row,
.video-li:hover .video-item,
.img-card:hover{
  box-shadow: var(--shadow) !important;
}

/* === FIX: enlever les ombres carrées des résultats === */
.result-row, .video-item, .img-card,
.loading, .error, .empty, .limit-note{
  box-shadow: none !important;
}

/* =========================================================
   FULLSCREEN + NO-SCROLL + SCALE 110% (2026-03)
   - Global scale from base size
   - Page scroll disabled (viewport locked)
   - Subset of results displayed to fit one screen
   ========================================================= */
:root{
  --ui-scale: 1.20;
  --fs-shell: 98vw;
  --fs-row-max: 1260px;
  --fs-tabs-max: 1180px;
  --fs-result-max: 1320px;
  --reserve-home: calc(290px * var(--ui-scale));
  --reserve-searched: calc(252px * var(--ui-scale));
}

html{
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
}

body{
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Accueil : défilement pour atteindre les suggestions sous la ligne de recherche */
html.pre-search-page{
  height: auto !important;
  max-height: none !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.pre-search{
  height: auto !important;
  max-height: none !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overscroll-behavior: auto !important;
  padding-bottom: min(240px, 28vh);
  box-sizing: border-box !important;
}

html{
  font-size: calc(16px * var(--ui-scale));
}

body{
  min-height: 100dvh !important;
}

#pixr_search{
  margin-top: calc(44px * var(--ui-scale)) !important;
}

  /* Accueil : logo large (comme avant) ; pas de plafond 520px / 74vw */
  body:not(.searched) #pixr_search_img{
    width: min(calc(var(--logo-home-max, 680px) * var(--ui-scale)), 92vw) !important;
    height: auto !important;
  }

.search-row{
  width: min(var(--fs-row-max), var(--fs-shell)) !important;
  gap: calc(10px * var(--ui-scale)) !important;
  margin-top: calc(14px * var(--ui-scale)) !important;
}

#input_search{
  width: clamp(280px, 62vw, 760px) !important;
  height: calc(52px * var(--ui-scale)) !important;
  padding: 0 calc(16px * var(--ui-scale)) 0 calc(20px * var(--ui-scale)) !important;
  font-size: calc(16px * var(--ui-scale)) !important;
}

#the_button{
  height: calc(52px * var(--ui-scale)) !important;
  padding: 0 calc(16px * var(--ui-scale)) !important;
  font-size: calc(14px * var(--ui-scale)) !important;
}

#nav_tabs{
  width: min(var(--fs-tabs-max), var(--fs-shell)) !important;
  margin-top: calc(14px * var(--ui-scale)) !important;
}

.tabs{
  gap: calc(12px * var(--ui-scale)) !important;
  padding: calc(8px * var(--ui-scale)) !important;
}

.tab{
  padding: calc(10px * var(--ui-scale)) calc(16px * var(--ui-scale)) !important;
  font-size: calc(13px * var(--ui-scale)) !important;
}

#suggestions{
  width: auto !important;
  max-width: min(440px, calc(100vw - 24px)) !important;
  max-height: min(240px, 42vh) !important;
  box-sizing: border-box !important;
}

#result{
  width: min(var(--fs-result-max), var(--fs-shell)) !important;
  margin: calc(14px * var(--ui-scale)) auto 0 auto !important;
  max-height: calc(100dvh - var(--reserve-home));
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

body.searched #result{
  margin-top: calc(10px * var(--ui-scale)) !important;
  max-height: calc(100dvh - var(--reserve-searched));
}

#result > .web-results,
#result > .img-grid{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden !important;
}

#result > .pagination{
  flex: 0 0 auto;
  margin-top: calc(8px * var(--ui-scale)) !important;
}

.result-row,
.video-item{
  gap: calc(10px * var(--ui-scale)) !important;
  padding: calc(12px * var(--ui-scale)) !important;
}

.site-icon{
  width: calc(30px * var(--ui-scale)) !important;
  height: calc(30px * var(--ui-scale)) !important;
}

.result-main a{
  font-size: calc(15px * var(--ui-scale));
}

.result-main small{
  font-size: calc(11px * var(--ui-scale));
}

.result-main span,
.video-text span,
a.video-item.all-vid-card .video-text span.all-vid-snippet{
  font-size: calc(13px * var(--ui-scale));
}

.pagination{
  gap: calc(8px * var(--ui-scale)) !important;
}

.page-btn{
  height: calc(40px * var(--ui-scale)) !important;
  padding: 0 calc(12px * var(--ui-scale)) !important;
  font-size: calc(13px * var(--ui-scale)) !important;
}

.page-label{
  padding: calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale)) !important;
  font-size: calc(12px * var(--ui-scale)) !important;
}

.img-grid{
  gap: calc(10px * var(--ui-scale)) !important;
}

.img-card img{
  height: calc(106px * var(--ui-scale)) !important;
}

.video-thumb{
  width: calc(144px * var(--ui-scale)) !important;
  height: calc(82px * var(--ui-scale)) !important;
}

/* No-scroll mode: keep only first items that fit in viewport */
.web-results > li:nth-child(n + 5){
  display: none !important;
}

.img-grid > .img-card:nth-child(n + 11){
  display: none !important;
}

/* After search: restore full page scrolling and full result visibility */
body.searched{
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: auto !important;
}

body.searched #result{
  max-height: none !important;
  overflow: visible !important;
}

body.searched #result > .web-results,
body.searched #result > .img-grid{
  overflow: visible !important;
}

body.searched .web-results > li:nth-child(n + 5),
body.searched .img-grid > .img-card:nth-child(n + 11){
  display: list-item !important;
}
body.searched .img-grid > .img-card:nth-child(n + 11){
  display: block !important;
}

body.searched{
  padding-top: calc((var(--topbar-top) + var(--topbar-h) + var(--topbar-gap) + 54px) * var(--ui-scale)) !important;
}

body.searched #pixr_search{
  top: calc(var(--topbar-top) * var(--ui-scale)) !important;
  left: calc(var(--topbar-left) * var(--ui-scale)) !important;
  height: calc(var(--topbar-h) * var(--ui-scale)) !important;
}

body.searched #pixr_search_img{
  height: calc(116px * var(--ui-scale)) !important;
  max-width: calc(300px * var(--ui-scale)) !important;
}

body.searched .search-row{
  top: calc((var(--topbar-top) - 16px) * var(--ui-scale)) !important;
  padding: 0 calc(14px * var(--ui-scale)) !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.searched #input_search{
  flex: 0 1 min(720px, 66vw) !important;
  width: min(720px, 66vw) !important;
  height: calc(var(--topbar-h) * var(--ui-scale)) !important;
}

body.searched #the_button{
  height: calc(var(--topbar-h) * var(--ui-scale)) !important;
}

body.searched #nav_tabs{
  top: calc((var(--topbar-top) + var(--topbar-h) + var(--topbar-gap)) * var(--ui-scale)) !important;
  width: min(var(--fs-tabs-max), var(--fs-shell)) !important;
}

@media (max-width: 980px){
  :root{
    --fs-shell: 96vw;
    --fs-row-max: 1080px;
    --fs-tabs-max: 1040px;
    --fs-result-max: 1080px;
    --reserve-home: calc(258px * var(--ui-scale));
    --reserve-searched: calc(240px * var(--ui-scale));
  }

  .search-row{
    grid-template-columns: 86% 14% !important;
    margin-top: calc(10px * var(--ui-scale)) !important;
  }

  #input_search{
    width: 100% !important;
    height: calc(48px * var(--ui-scale)) !important;
  }

  #the_button{
    width: 100% !important;
    height: calc(48px * var(--ui-scale)) !important;
  }

  .web-results > li:nth-child(n + 4){
    display: none !important;
  }

  .img-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .img-grid > .img-card:nth-child(n + 8){
    display: none !important;
  }

  body.searched .web-results > li:nth-child(n + 4){
    display: list-item !important;
  }
  body.searched .img-grid > .img-card:nth-child(n + 8){
    display: block !important;
  }
}

@media (max-width: 520px){
  :root{
    --fs-shell: 97vw;
    --reserve-home: calc(230px * var(--ui-scale));
    --reserve-searched: calc(220px * var(--ui-scale));
  }

  .search-row{
    grid-template-columns: 84% 16% !important;
    gap: calc(6px * var(--ui-scale)) !important;
  }

  #pixr_search_img{
    width: min(68vw, calc(420px * var(--ui-scale))) !important;
  }

  #input_search{
    height: calc(44px * var(--ui-scale)) !important;
    font-size: calc(15px * var(--ui-scale)) !important;
  }

  #the_button{
    height: calc(44px * var(--ui-scale)) !important;
    font-size: calc(12px * var(--ui-scale)) !important;
  }

  .tab{
    font-size: calc(11px * var(--ui-scale)) !important;
  }

  .img-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .img-grid > .img-card:nth-child(n + 7){
    display: none !important;
  }

  body.searched .img-grid > .img-card:nth-child(n + 7){
    display: block !important;
  }
}

@media (max-width: 360px){
  .search-row{
    grid-template-columns: 82% 18% !important;
  }
}

/* =========================================================
   Search Bar Visual Replace (Image #1 + Image #2 icon)
   ========================================================= */
.search-row{
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: min(960px, 95vw) !important;
}

#input_search{
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: calc(54px * var(--ui-scale)) !important;
  padding: 0 calc(16px * var(--ui-scale)) 0 calc(18px * var(--ui-scale)) !important;
  border-radius: 999px 0 0 999px !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  border-right: 0 !important;
  background: #ececec !important;
  box-shadow: none !important;
}

#input_search::placeholder{
  color: rgba(90,90,90,0.82) !important;
}

#the_button{
  flex: 0 0 86px !important;
  width: 86px !important;
  min-width: 86px !important;
  height: calc(54px * var(--ui-scale)) !important;
  padding: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  border-left: 2px solid rgba(0,0,0,0.30) !important;
  background: #3d87ff !important;
  background-image: url("/assets/5279826-loupe-ou-loupe-couleur-blanche-icone-vectoriel-removebg-preview.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 30px 30px !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

#the_button::before,
#the_button::after{
  content: none !important;
  display: none !important;
}

#the_button:hover,
#the_button:active,
#the_button.pixr-burst{
  transform: none !important;
  filter: none !important;
  animation: none !important;
  box-shadow: none !important;
}

body.searched #input_search,
body.searched #the_button{
  height: calc(52px * var(--ui-scale)) !important;
}

@media (max-width: 980px){
  .search-row{
    width: min(940px, 95vw) !important;
  }

  #the_button{
    flex-basis: 78px !important;
    width: 78px !important;
    min-width: 78px !important;
    background-size: 27px 27px !important;
  }
}

@media (max-width: 520px){
  .search-row{
    width: min(96vw, 620px) !important;
  }

  #input_search{
    height: calc(48px * var(--ui-scale)) !important;
  }

  #the_button{
    flex-basis: 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    height: calc(48px * var(--ui-scale)) !important;
    background-size: 24px 24px !important;
  }
}

/* =========================================================
   Search bar tweak (smaller + modern + subtle animation)
   ========================================================= */
:root{
  --search-modern-width: min(780px, 88vw);
  --search-modern-height: 56px;
  --search-modern-icon-size: 78px;
}

.search-row{
  width: var(--search-modern-width) !important;
  transition: transform .22s ease, filter .22s ease !important;
}

#input_search{
  height: var(--search-modern-height) !important;
  background: linear-gradient(180deg, #f7f9fc 0%, #edf2f9 100%) !important;
  border-color: #0f172a !important;
  border-width: 1.5px !important;
  padding-left: 28px !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}

#input_search:focus{
  border-color: rgba(59,130,246,0.55) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.16) !important;
  background: #ffffff !important;
  transform: none !important;
}

#input_search:focus::placeholder{
  color: transparent !important;
}

#the_button{
  height: var(--search-modern-height) !important;
  border-color: transparent !important;
  border-width: 0 !important;
  background-color: #2f7dff !important;
  background-size: var(--search-modern-icon-size) var(--search-modern-icon-size) !important;
  transition: transform .18s ease, background-color .2s ease, box-shadow .2s ease !important;
  animation: searchBtnFloat 2.6s ease-in-out infinite !important;
}

#the_button:hover{
  background-color: #236ff0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px rgba(37,99,235,0.26) !important;
}

.search-row:focus-within #input_search,
.search-row:focus-within #the_button{
  border-color: #3b82f6 !important;
}

@keyframes searchBtnFloat{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

body.searched .search-row{
  width: min(760px, 86vw) !important;
  max-width: min(760px, 86vw) !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 980px){
  :root{
    --search-modern-width: min(720px, 92vw);
    --search-modern-height: 52px;
    --search-modern-icon-size: 66px;
  }
}

@media (max-width: 520px){
  :root{
    --search-modern-width: min(96vw, 560px);
    --search-modern-height: 48px;
    --search-modern-icon-size: 56px;
  }
}

/* =========================================================
   Global UI polish pass (lightweight)
   ========================================================= */

#input_search{
  letter-spacing: 0.15px;
}

#input_search:focus{
  transform: none;
}

#the_button{
  box-shadow: 0 8px 18px rgba(37,99,235,0.24) !important;
}

#the_button:active{
  animation: none !important;
  transform: none !important;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.18),
    0 6px 14px rgba(37,99,235,0.20) !important;
  filter: brightness(0.96) saturate(1.04) !important;
  background-color: transparent !important;
  background-image:
    url("/assets/5279826-loupe-ou-loupe-couleur-blanche-icone-vectoriel-removebg-preview.png"),
    linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-size: var(--search-modern-icon-size, 78px) var(--search-modern-icon-size, 78px), 100% 100% !important;
}

body.is-searching #the_button{
  filter: saturate(1.05) brightness(1.04);
}

.result-row{
  border: 1px solid rgba(15,23,42,0.12) !important;
  transition: transform .18s ease, border-color .2s ease, background .2s ease !important;
}

.web-results > li:hover .result-row{
  border-color: rgba(59,130,246,0.36) !important;
}

.result-main a{
  text-underline-offset: 3px;
}

.result-main a:focus-visible,
.page-btn:focus-visible,
.tab:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.24) !important;
  border-color: rgba(59,130,246,0.42) !important;
}

@media (prefers-reduced-motion: reduce){
  .result-row,
  #input_search,
  #the_button,
  .tab{
    transition: none !important;
    animation: none !important;
  }
}

/* Image-result fallback states */
.img-card{
  background: linear-gradient(180deg, rgba(226,232,240,0.7), rgba(203,213,225,0.72)) !important;
}

.img-card img.img-broken{
  object-fit: contain !important;
  padding: 8px !important;
}

#imgPreviewImg.img-preview-broken{
  object-fit: contain !important;
  background: linear-gradient(180deg, rgba(226,232,240,0.9), rgba(203,213,225,0.9)) !important;
}

/* Réglages + compte (top-right) */
#chrome_trailing{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  z-index: 12000;
}

#settings_widget{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: static;
}

.chrome-fab-btn{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.16);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15,23,42,0.18);
  transition: transform .16s ease, background .2s ease, box-shadow .2s ease;
  padding: 0;
  flex-shrink: 0;
}

.chrome-fab-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.9);
}

.chrome-fab-btn.is-pressing{
  transform: scale(0.9);
  box-shadow: 0 4px 10px rgba(15,23,42,0.18);
}

.chrome-fab-btn img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}

.chrome-fab-btn img.account-avatar--user{
  object-fit: cover;
}

/* Compte invité : Login.svg petit au centre (comme l’icône réglages) */
#account_toggle.chrome-fab-btn img.account-avatar:not(.account-avatar--user){
  width: 26px;
  height: 26px;
  max-width: 78%;
  max-height: 78%;
  object-fit: contain;
  border-radius: 0;
}

/* Compte connecté : photo profil plein bouton */
#account_toggle.chrome-fab-btn img.account-avatar--user{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}

/* Réglages : même taille de bouton que le compte ; icône un peu plus petite au centre */
#settings_toggle.chrome-fab-btn img{
  width: 26px;
  height: 26px;
  max-width: 78%;
  max-height: 78%;
  object-fit: contain;
  border-radius: 0;
}

#settings_panel{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  margin-top: 0;
  width: min(320px, 92vw);
  max-height: min(85vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 32px rgba(15,23,42,0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .22s ease, transform .22s ease;
  z-index: 12001;
  /* Ouverture : brièvement visible mais opacity 0 → sans ça le panneau peut capter les clics au mauvais endroit (mobile) */
  pointer-events: none;
}

#settings_panel[hidden]{
  display: none !important;
}

#settings_panel.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#settings_panel h3{
  margin: 0 0 4px 0;
  font-size: 14px;
}

#settings_panel label{
  font-size: 12px;
  font-weight: 700;
  color: rgba(40,42,54,0.85);
}

#settings_panel .settings-field-label{
  font-size: 12px;
  font-weight: 700;
  color: rgba(40,42,54,0.85);
}

.theme-pills{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.theme-pill{
  min-height: 44px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 2px solid rgba(15,23,42,0.14);
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 2px 6px rgba(15,23,42,0.08);
}

.theme-pill:hover{
  transform: scale(1.03);
  border-color: rgba(59,130,246,0.4);
}

.theme-pill.theme-pill--active{
  border-color: rgba(37,99,235,0.95);
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.95),
    0 0 0 4px rgba(37,99,235,0.55),
    0 4px 14px rgba(37,99,235,0.25);
  transform: scale(1.05);
  z-index: 1;
  position: relative;
}

.theme-pill.theme-pill--active:hover{
  transform: scale(1.06);
}

#settings_panel select{
  width: 100%;
  min-height: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid rgba(59,130,246,0.55);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%232563eb' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 22px 22px,
    linear-gradient(180deg, #ffffff 0%, #eff6ff 55%, #e0f2fe 100%);
  color: #0f172a;
  padding: 0 46px 0 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 3px 10px rgba(37,99,235,0.18);
}

#settings_panel select:hover{
  border-color: rgba(37,99,235,0.75);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%231d4ed8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 22px 22px,
    linear-gradient(180deg, #ffffff 0%, #dbeafe 50%, #bfdbfe 100%);
}

#settings_panel select:focus{
  border-color: rgba(37,99,235,0.9);
  box-shadow:
    0 0 0 3px rgba(59,130,246,0.26),
    inset 0 1px 0 rgba(255,255,255,0.98),
    0 3px 12px rgba(37,99,235,0.22);
}

#settings_panel .settings-file-field-label{
  display: block;
  margin: 10px 0 6px 0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(40,42,54,0.88);
}

#settings_panel .settings-file-picker{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#settings_panel .settings-file-input-visually-hidden{
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

#settings_panel .settings-file-browse{
  flex-shrink: 0;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(40,42,54,0.16);
  background: rgba(15,23,42,0.06);
  color: rgba(40,42,54,0.92);
  font-weight: 700;
  font-size: 12px;
  font-family: "Space Grotesk","Inter",system-ui,sans-serif;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
}

#settings_panel .settings-file-browse:hover{
  background: rgba(15,23,42,0.09);
}

#settings_panel .settings-file-browse:focus-visible{
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.14);
}

#settings_panel .settings-file-chosen{
  flex: 1;
  min-width: 120px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(40,42,54,0.78);
  line-height: 1.35;
  word-break: break-word;
}

/* ---------- Thème sombre : bleus profonds, halos plus vifs ---------- */
html[data-theme="dark"]{
  --bg0: #1e2640;
  --bg1: #252b45;
  --glass: rgba(45,52,78,0.78);
  --glass2: rgba(55,62,92,0.84);
  --border: rgba(129,140,248,0.16);
  --border2: rgba(56,189,248,0.14);
  --text: rgba(241,245,249,0.96);
  --muted: rgba(165,180,252,0.88);
  --muted2: rgba(148,163,184,0.9);
  --link: #7dd3fc;
  --linkHover: #e0f2fe;
  --ring: 0 0 0 3px rgba(56,189,248,0.28), 0 0 0 1px rgba(255,255,255,0.08) inset;
}

html[data-theme="dark"] body{
  background:
    radial-gradient(ellipse 130% 85% at 50% -15%, rgba(99,102,241,0.22), transparent 55%),
    radial-gradient(1000px 700px at 8% 25%, rgba(14,165,233,0.14), transparent 58%),
    radial-gradient(880px 620px at 92% 30%, rgba(167,139,250,0.12), transparent 54%),
    radial-gradient(700px 500px at 50% 100%, rgba(56,189,248,0.08), transparent 50%),
    linear-gradient(168deg, #2d3555 0%, #232a44 38%, #1a1f33 100%);
}

html[data-theme="dark"] body::before{
  background:
    radial-gradient(circle at 24% 30%, rgba(56,189,248,0.12), transparent 54%),
    radial-gradient(circle at 62% 36%, rgba(129,140,248,0.14), transparent 56%),
    radial-gradient(circle at 82% 28%, rgba(34,211,238,0.1), transparent 54%);
  opacity: 0.48;
  filter: blur(26px);
}

/* Aperçu image (modal) — thème sombre cohérent avec le reste du site */
html[data-theme="dark"] .img-preview{
  background: rgba(0,0,0,0.78);
}
html[data-theme="dark"] .img-preview-inner{
  background: linear-gradient(180deg, rgba(48,54,70,0.98) 0%, rgba(32,36,48,0.99) 100%);
  border-color: rgba(148,163,184,0.22);
  box-shadow:
    0 28px 80px rgba(0,0,0,0.72),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
html[data-theme="dark"] #imgPreviewImg{
  background: rgba(0,0,0,0.42);
}
html[data-theme="dark"] #imgPreviewImg.img-preview-broken{
  background: linear-gradient(180deg, rgba(51,65,85,0.85), rgba(30,41,59,0.92)) !important;
}
html[data-theme="dark"] .img-preview-title{
  color: var(--text);
}
html[data-theme="dark"] .img-preview-link{
  border-color: rgba(148,163,184,0.22);
  background: var(--glass);
  color: var(--link);
}
html[data-theme="dark"] .img-preview-link:hover{
  background: var(--glass2);
  border-color: rgba(56,189,248,0.32);
}
html[data-theme="dark"] .img-preview-src-label{
  color: var(--muted);
}
html[data-theme="dark"] .img-preview-src-input{
  background: rgba(15,23,42,0.55);
  border-color: rgba(148,163,184,0.22);
  color: var(--text);
}
html[data-theme="dark"] .img-preview-copy-inline-btn{
  background: var(--glass);
  border-color: rgba(148,163,184,0.22);
  color: var(--link);
}
html[data-theme="dark"] .img-preview-copy-inline-btn:hover{
  background: var(--glass2);
  border-color: rgba(56,189,248,0.32);
}
html[data-theme="dark"] .img-preview-url-feedback{
  color: var(--link);
}
html[data-theme="dark"] .img-preview-close{
  border-color: rgba(148,163,184,0.28);
  background: rgba(30,35,48,0.92);
  color: var(--text);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
}
html[data-theme="dark"] .img-preview-close:hover{
  background: rgba(52,58,74,0.96);
}

html[data-theme="dark"] #settings_panel{
  background: linear-gradient(165deg, rgba(30,41,59,0.97) 0%, rgba(15,23,42,0.99) 55%, rgba(12,17,28,0.99) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(100,116,139,0.38);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.05) inset,
    inset 0 1px 0 rgba(255,255,255,0.04);
}

html[data-theme="dark"] .chrome-fab-btn{
  /* Un ton plus sombre que le panneau : gris-bleu doux */
  background: linear-gradient(180deg, #e8edf4 0%, #dce4f0 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(59,130,246,0.2);
  box-shadow:
    0 8px 26px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.75);
}

html[data-theme="dark"] .chrome-fab-btn:hover{
  background: linear-gradient(180deg, #eef2f8 0%, #e2e9f3 100%);
  border-color: rgba(59,130,246,0.3);
  box-shadow:
    0 10px 30px rgba(37,99,235,0.1),
    inset 0 1px 0 rgba(255,255,255,0.85);
}

html[data-theme="dark"] #settings_panel h3{
  color: rgba(241,245,249,0.96);
}

html[data-theme="dark"] #settings_panel label{
  color: rgba(203,213,225,0.92);
}

html[data-theme="dark"] #settings_panel .settings-field-label{
  color: rgba(203,213,225,0.92);
}

html[data-theme="dark"] .theme-pill{
  border-color: rgba(148,163,184,0.35);
  background: linear-gradient(180deg, #475569 0%, #334155 100%);
  color: #f1f5f9;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

html[data-theme="dark"] .theme-pill.theme-pill--active{
  border-color: rgba(56,189,248,0.8);
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  box-shadow:
    0 0 0 2px rgba(15,23,42,0.92),
    0 0 0 4px rgba(56,189,248,0.45),
    0 4px 18px rgba(56,189,248,0.22);
}

html[data-theme="dark"] #settings_panel select{
  min-height: 48px;
  height: 48px;
  border-radius: 12px;
  border-color: rgba(56,189,248,0.38);
  padding: 0 46px 0 16px;
  font-size: 15px;
  font-weight: 700;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%2394a3b8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 22px 22px,
    linear-gradient(180deg, #475569 0%, #334155 45%, #1e293b 100%);
  color: #f1f5f9;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 2px 10px rgba(0,0,0,0.25);
}

html[data-theme="dark"] #settings_panel select:hover{
  border-color: rgba(56,189,248,0.52);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%237dd3fc' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 22px 22px,
    linear-gradient(180deg, #64748b 0%, #475569 48%, #334155 100%);
}

html[data-theme="dark"] #settings_panel select:focus{
  border-color: rgba(56,189,248,0.65);
  box-shadow:
    0 0 0 3px rgba(56,189,248,0.22),
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 14px rgba(0,0,0,0.3);
}

html[data-theme="dark"] #settings_panel .settings-file-field-label{
  color: rgba(226,232,240,0.9);
}

html[data-theme="dark"] #settings_panel .settings-file-browse{
  background: rgba(51,65,85,0.95);
  color: #e2e8f0;
  border-color: rgba(100,116,139,0.4);
}

html[data-theme="dark"] #settings_panel .settings-file-browse:hover{
  background: rgba(71,85,105,0.98);
}

html[data-theme="dark"] #settings_panel .settings-file-browse:focus-visible{
  border-color: rgba(56,189,248,0.45);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.15);
}

html[data-theme="dark"] #settings_panel .settings-file-chosen{
  color: rgba(203,213,225,0.92);
}

html[data-theme="dark"] body::before{
  background:
    radial-gradient(circle at 24% 30%, rgba(99,102,241,0.11), transparent 48%),
    radial-gradient(circle at 55% 40%, rgba(59,130,246,0.07), transparent 50%),
    radial-gradient(circle at 78% 34%, rgba(14,165,233,0.09), transparent 48%);
  opacity: 0.48;
}

/* =========================================================
   top_chrome — logo + barre + settings alignés (mode searched)
   ========================================================= */
:root{
  /* Hauteur bandeau searched (logo ~110px × ui-scale + marges) */
  --searched-top-row-h: calc(124px * var(--ui-scale, 1));
}

#top_chrome{
  width: 100%;
}

body:not(.searched) #top_chrome{
  display: flex;
  flex-direction: column;
  align-items: center;
}

body:not(.searched) #chrome_trailing{
  position: fixed;
  top: 18px;
  right: 18px;
}

body.searched #top_chrome{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10040;
  min-height: var(--searched-top-row-h);
  display: grid;
  /* Colonnes égales : la barre reste centrée à l’écran */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 16px 12px 14px;
  box-sizing: border-box;
  pointer-events: none;
}

body.searched #top_chrome > *{
  pointer-events: auto;
}

body.searched #pixr_search{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  grid-column: 1;
  justify-self: start;
  align-self: center;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.searched #pixr_search_img{
  /* Taille initiale mode searched (comme avant la ligne compacte) */
  height: calc(110px * var(--ui-scale, 1)) !important;
  max-width: calc(280px * var(--ui-scale, 1)) !important;
  width: auto !important;
  object-fit: contain;
}

body.searched .search-row{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  grid-column: 2;
  justify-self: center;
  align-self: center;
  width: min(760px, 86vw) !important;
  max-width: min(760px, 92vw) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 8px !important;
}

body.searched #chrome_trailing{
  position: relative !important;
  top: auto !important;
  right: auto !important;
  grid-column: 3;
  justify-self: end;
  align-self: center;
}

body.searched #nav_tabs{
  top: calc(var(--searched-top-row-h) + 8px) !important;
}

body.searched{
  padding-top: calc(var(--searched-top-row-h) + var(--topbar-h) * var(--ui-scale, 1) + var(--topbar-gap) * var(--ui-scale, 1) + 36px) !important;
}

@media (max-width: 980px){
  /* Ligne 1 : logo + compte/réglages alignés verticalement ; ligne 2 : barre pleine largeur (plus de FAB fixes qui rognent / barre minuscule) */
  body.searched #top_chrome{
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 14px !important;
    min-height: 0 !important;
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 12px !important;
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
    pointer-events: auto !important;
  }

  body.searched #pixr_search{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
    margin-top: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    z-index: 2 !important;
  }

  body.searched #pixr_search a{
    display: flex !important;
    align-items: center !important;
  }

  body.searched #pixr_search_img{
    width: auto !important;
    max-width: min(260px, 58vw) !important;
    height: auto !important;
    max-height: clamp(40px, 11vw, 52px) !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  /* relative (pas static) : #settings_panel en absolute a besoin d’un ancêtre positionné, sinon il se colle au viewport et peut bloquer les taps */
  body.searched #chrome_trailing{
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 12100 !important;
    flex-shrink: 0 !important;
  }

  body.searched #settings_widget{
    position: relative !important;
    z-index: 1 !important;
  }

  body.searched .search-row{
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.searched #nav_tabs{
    top: auto !important;
    position: static !important;
    transform: none !important;
    margin: 14px auto 0 auto !important;
  }

  body.searched{
    padding-top: 0 !important;
  }
}

/* Très étroit : deux FAB identiques ; seule l’icône réglages reste plus petite */
@media (max-width: 380px){
  body.searched #chrome_trailing{
    gap: 8px !important;
  }
  body.searched .chrome-fab-btn{
    width: 50px !important;
    height: 50px !important;
  }
  body.searched #settings_toggle.chrome-fab-btn img{
    width: 22px !important;
    height: 22px !important;
    max-width: 78% !important;
    max-height: 78% !important;
  }
  body.searched #account_toggle.chrome-fab-btn img.account-avatar:not(.account-avatar--user){
    width: 22px !important;
    height: 22px !important;
    max-width: 78% !important;
    max-height: 78% !important;
  }
}

/* ---------- Téléphone paysage (hauteur courte) ---------- */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 960px){
  body:not(.searched) #pixr_search{
    margin-top: 10px !important;
  }
  body:not(.searched) #pixr_search_img{
    max-height: min(28vh, 96px) !important;
    width: auto !important;
    max-width: min(360px, 50vw) !important;
    height: auto !important;
  }
  body:not(.searched) .search-row{
    margin-top: 8px !important;
  }
  body.searched #pixr_search_img{
    height: 40px !important;
    max-height: 44px !important;
    max-width: min(130px, 30vw) !important;
    width: auto !important;
  }
  #input_search, #the_button{
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 22px !important;
  }
  #nav_tabs{
    margin-top: 8px !important;
  }
  #result{
    margin-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
  }
  body:not(.searched) #chrome_trailing,
  body.searched #chrome_trailing{
    top: max(10px, env(safe-area-inset-top, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
  }
  .img-preview{
    padding-top: max(48px, env(safe-area-inset-top, 0px)) !important;
    align-items: flex-start !important;
  }
}

@media (max-height: 380px) and (orientation: landscape) and (max-width: 960px){
  body:not(.searched) #pixr_search_img{
    max-height: 64px !important;
    max-width: 42vw !important;
  }
  body.searched #pixr_search_img{
    height: 36px !important;
    max-width: 100px !important;
  }
}

/* =========================================================
   Barre de recherche — style affiné (clair + sombre)
   ========================================================= */

/* --- Mode clair (défaut) --- */
#input_search{
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 45%, #f1f5f9 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(15,23,42,0.92) !important;
  border: 1.5px solid rgba(15,23,42,0.10) !important;
  border-right: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 2px 10px rgba(15,23,42,0.06) !important;
}

#input_search::placeholder{
  color: rgba(100,116,139,0.75) !important;
}

#input_search:focus{
  border-color: rgba(59,130,246,0.45) !important;
  background: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 3px rgba(59,130,246,0.14),
    0 6px 20px rgba(59,130,246,0.12) !important;
  transform: none !important;
}

#the_button{
  background-color: transparent !important;
  background-image:
    url("/assets/5279826-loupe-ou-loupe-couleur-blanche-icone-vectoriel-removebg-preview.png"),
    linear-gradient(180deg, #5b9aff 0%, #3b82f6 42%, #2563eb 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-size: var(--search-modern-icon-size, 78px) var(--search-modern-icon-size, 78px), 100% 100% !important;
  border: 1.5px solid rgba(15,23,42,0.10) !important;
  border-left: 1px solid rgba(37,99,235,0.45) !important;
  box-shadow:
    0 4px 16px rgba(37,99,235,0.32),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

#the_button:hover{
  background-image:
    url("/assets/5279826-loupe-ou-loupe-couleur-blanche-icone-vectoriel-removebg-preview.png"),
    linear-gradient(180deg, #60a5fa 0%, #3b82f6 48%, #1d4ed8 100%) !important;
  box-shadow:
    0 6px 22px rgba(37,99,235,0.4),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

.search-row:focus-within #input_search{
  border-color: rgba(59,130,246,0.35) !important;
}

.search-row:focus-within #the_button{
  border-color: rgba(37,99,235,0.35) !important;
}

/* --- Mode sombre : champ ardoise (ni blanc criard ni gris boueux) --- */
html[data-theme="dark"] #input_search{
  background: linear-gradient(180deg, #475569 0%, #334155 42%, #1e293b 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(241,245,249,0.96) !important;
  border: 1.5px solid rgba(100,116,139,0.45) !important;
  border-right: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 4px 20px rgba(0,0,0,0.35),
    0 0 0 1px rgba(56,189,248,0.08) !important;
}

html[data-theme="dark"] #input_search::placeholder{
  color: rgba(148,163,184,0.82) !important;
}

html[data-theme="dark"] #input_search:focus{
  border-color: rgba(56,189,248,0.5) !important;
  background: linear-gradient(180deg, #64748b 0%, #475569 40%, #334155 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 0 3px rgba(56,189,248,0.2),
    0 8px 32px rgba(0,0,0,0.4),
    0 0 24px rgba(56,189,248,0.08) !important;
  transform: none !important;
}

html[data-theme="dark"] #input_search.input_search--suggest-preview{
  background: linear-gradient(145deg, #4f46e5 0%, #4338ca 38%, #3730a3 100%) !important;
  border-color: rgba(125,211,252,0.5) !important;
  color: #f8fafc !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 0 0 3px rgba(56,189,248,0.32),
    0 14px 40px rgba(0,0,0,0.45) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
}

html[data-theme="dark"] .search-row:focus-within #input_search{
  border-color: rgba(56,189,248,0.4) !important;
}

html[data-theme="dark"] #the_button{
  background-color: transparent !important;
  background-image:
    url("/assets/5279826-loupe-ou-loupe-couleur-blanche-icone-vectoriel-removebg-preview.png"),
    linear-gradient(180deg, #7dd3fc 0%, #38bdf8 38%, #0ea5e9 72%, #0284c7 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-size: var(--search-modern-icon-size, 78px) var(--search-modern-icon-size, 78px), 100% 100% !important;
  border: 1.5px solid rgba(255,255,255,0.18) !important;
  border-left: 1px solid rgba(125,211,252,0.55) !important;
  box-shadow:
    0 4px 22px rgba(56,189,248,0.4),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

html[data-theme="dark"] #the_button:hover{
  background-image:
    url("/assets/5279826-loupe-ou-loupe-couleur-blanche-icone-vectoriel-removebg-preview.png"),
    linear-gradient(180deg, #bae6fd 0%, #7dd3fc 35%, #38bdf8 70%, #0ea5e9 100%) !important;
  box-shadow:
    0 6px 28px rgba(56,189,248,0.48),
    inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

html[data-theme="dark"] .search-row:focus-within #the_button{
  border-color: rgba(56,189,248,0.45) !important;
}

html[data-theme="dark"] #the_button:active{
  background-image:
    url("/assets/5279826-loupe-ou-loupe-couleur-blanche-icone-vectoriel-removebg-preview.png"),
    linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: rgba(56,189,248,0.35) !important;
}

@media (prefers-reduced-motion: reduce){
  #the_button{
    animation: none !important;
  }
}

/* ========== Settings : fond personnalisé ========== */
.settings-divider{
  height: 1px;
  margin: 10px 0 8px 0;
  background: rgba(15,23,42,0.12);
  border: 0;
}

html[data-theme="dark"] .settings-divider{
  background: rgba(148,163,184,0.18);
}

.settings-subtitle{
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,0.88);
}

html[data-theme="dark"] .settings-subtitle{
  color: rgba(226,232,240,0.9);
}

.bg-presets{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.bg-preset-btn{
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px solid rgba(15,23,42,0.12);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 2px 8px rgba(15,23,42,0.1);
}

.bg-preset-btn:hover{
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(15,23,42,0.18);
  z-index: 1;
}

.bg-preset-btn[data-preset="white"]{
  border-color: rgba(148,163,184,0.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9), 0 2px 8px rgba(15,23,42,0.08);
}

/* Préréglage d’arrière-plan actif (tous les presets, pas seulement Ocean) */
.bg-preset-btn.bg-preset-btn--selected,
.bg-preset-btn[aria-current="true"]{
  transform: scale(1.06);
  z-index: 2;
  position: relative;
  border-color: rgba(37,99,235,0.9) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.95),
    0 0 0 4px rgba(37,99,235,0.55),
    0 6px 18px rgba(37,99,235,0.28) !important;
}

.bg-preset-btn.bg-preset-btn--selected:hover,
.bg-preset-btn[aria-current="true"]:hover{
  transform: scale(1.08);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.98),
    0 0 0 4px rgba(37,99,235,0.72),
    0 8px 22px rgba(37,99,235,0.34) !important;
}

.bg-preset-btn[data-preset="white"].bg-preset-btn--selected,
.bg-preset-btn[data-preset="white"][aria-current="true"]{
  box-shadow:
    0 0 0 2px rgba(37,99,235,0.4),
    0 0 0 4px rgba(37,99,235,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.92),
    0 6px 16px rgba(37,99,235,0.22) !important;
}

html[data-theme="dark"] .bg-preset-btn{
  border-color: rgba(148,163,184,0.28);
  box-shadow: 0 2px 10px rgba(0,0,0,0.28);
}

html[data-theme="dark"] .bg-preset-btn.bg-preset-btn--selected,
html[data-theme="dark"] .bg-preset-btn[aria-current="true"]{
  border-color: rgba(56,189,248,0.88) !important;
  box-shadow:
    0 0 0 2px rgba(15,23,42,0.95),
    0 0 0 4px rgba(56,189,248,0.5),
    0 6px 20px rgba(56,189,248,0.26) !important;
}

html[data-theme="dark"] .bg-preset-btn.bg-preset-btn--selected:hover,
html[data-theme="dark"] .bg-preset-btn[aria-current="true"]:hover{
  box-shadow:
    0 0 0 2px rgba(15,23,42,0.98),
    0 0 0 4px rgba(56,189,248,0.65),
    0 8px 24px rgba(56,189,248,0.32) !important;
}

.bg-color-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#bg_color{
  width: 52px;
  height: 38px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid rgba(15,23,42,0.18);
  cursor: pointer;
  background: transparent;
}

.settings-mini-btn{
  flex: 1;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(59,130,246,0.45);
  background: rgba(59,130,246,0.12);
  color: #2563eb;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-mini-btn:hover{
  background: rgba(59,130,246,0.22);
}

html[data-theme="dark"] .settings-mini-btn{
  border-color: rgba(59,130,246,0.45);
  background: rgba(59,130,246,0.12);
  color: #2563eb;
}


.settings-reset-btn{
  width: 100%;
  height: 36px;
  margin-top: 4px;
  border-radius: 10px;
  border: 1px solid rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.08);
  color: #b91c1c;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.settings-reset-btn:hover{
  background: rgba(239,68,68,0.16);
}

html[data-theme="dark"] .settings-reset-btn{
  border-color: rgba(239,68,68,0.35);
  color: #b91c1c;
  background: rgba(239,68,68,0.08);
}

html[data-theme="dark"] #suggestions{
  background: linear-gradient(155deg, rgba(38,44,58,0.96) 0%, rgba(30,36,48,0.94) 100%);
  border-color: rgba(100,116,139,0.38);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 4px 32px rgba(0,0,0,0.35),
    0 20px 50px rgba(0,0,0,0.45);
  scrollbar-color: rgba(125,211,252,0.35) transparent;
}

html[data-theme="dark"] #suggestions li{
  color: var(--text);
}

html[data-theme="dark"] #suggestions li::before{
  background: linear-gradient(135deg, #818cf8, #38bdf8);
  box-shadow: 0 0 12px rgba(56,189,248,0.4);
}

html[data-theme="dark"] #suggestions li:hover{
  background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(14,165,233,0.12));
  border-color: rgba(56,189,248,0.28);
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}

html[data-theme="dark"] #suggestions li.selected{
  background: linear-gradient(135deg, rgba(79,70,229,0.35), rgba(14,165,233,0.15));
  border-color: rgba(56,189,248,0.4);
  box-shadow: 0 0 0 2px rgba(56,189,248,0.15), 0 6px 22px rgba(0,0,0,0.3);
}

html[data-theme="dark"] #suggestions li.confirm{
  background: rgba(56,189,248,0.2);
}

html[data-theme="dark"] .tabs{
  border-color: rgba(148,163,184,0.14);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}

html[data-theme="dark"] .tab:hover{
  color: var(--text);
  background: rgba(255,255,255,0.06);
}

html[data-theme="dark"] .tab.active{
  color: #f8fafc;
  border-color: rgba(56,189,248,0.35);
  background: linear-gradient(135deg, rgba(14,165,233,0.35), rgba(59,130,246,0.22));
  box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(56,189,248,0.2) inset;
}

/* Voile nébuleuse : un peu plus présent sur fond perso pour lier l’UI */
html[data-pixr-bg="gradient"] body::before,
html[data-pixr-bg="image"] body::before{
  opacity: 0.3 !important;
  filter: blur(20px);
}

/* ---------- Modal consentement cookies (overlay — ne décale pas la page) ---------- */
.cookie-banner{
  position: fixed;
  inset: 0;
  z-index: 13050;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.cookie-banner[hidden]{
  display: none !important;
}

.cookie-banner__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html[data-theme="dark"] .cookie-banner__backdrop{
  background: rgba(0,0,0,0.55);
}

.cookie-banner__card{
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: min(880px, calc(100vw - 40px));
  margin: auto;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 24px 64px rgba(0,0,0,0.22),
    0 0 0 1px rgba(255,255,255,0.85) inset;
  padding: 22px 24px 18px;
  max-height: min(82vh, 580px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.cookie-banner__title{
  margin: 0 0 10px 0;
  font-size: 17px;
  font-weight: 800;
  color: rgba(15,23,42,0.95);
  letter-spacing: -0.02em;
}

.cookie-banner__desc{
  margin: 0 0 10px 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(51,65,85,0.92);
}

.cookie-banner__detail{
  margin: 0 0 12px 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(71,85,105,0.94);
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(59,130,246,0.06);
  border: 1px solid rgba(59,130,246,0.1);
}

.cookie-banner__more{
  margin: 0 0 16px 0;
  font-size: 13px;
}

.cookie-banner__link{
  color: #2563eb;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__link:hover{
  color: #1d4ed8;
}

.cookie-banner__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.cookie-banner__actions--manage{
  margin-top: 14px;
  justify-content: space-between;
}

.cookie-banner__btn{
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.cookie-banner__btn--primary{
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 4px 12px rgba(37,99,235,0.25);
}

.cookie-banner__btn--primary:hover{
  filter: brightness(1.05);
}

.cookie-banner__btn--secondary{
  background: rgba(15,23,42,0.04);
  color: rgba(15,23,42,0.88);
  border-color: rgba(15,23,42,0.12);
}

.cookie-banner__btn--secondary:hover{
  background: rgba(15,23,42,0.07);
}

.cookie-banner__subtitle{
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 800;
  color: rgba(15,23,42,0.92);
}

.cookie-banner__check{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(51,65,85,0.95);
  cursor: pointer;
}

.cookie-banner__check input{
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}

/* Empêche le scroll du fond pendant que le modal cookies est ouvert */
html.cookie-banner-visible,
body.cookie-banner-visible{
  overflow: hidden;
}

html[data-theme="dark"] .cookie-banner__card{
  background: linear-gradient(165deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%);
  border-color: rgba(100,116,139,0.38);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.05) inset;
}

html[data-theme="dark"] .cookie-banner__title,
html[data-theme="dark"] .cookie-banner__subtitle{
  color: rgba(241,245,249,0.96);
}

html[data-theme="dark"] .cookie-banner__desc,
html[data-theme="dark"] .cookie-banner__detail,
html[data-theme="dark"] .cookie-banner__check{
  color: rgba(203,213,225,0.92);
}

html[data-theme="dark"] .cookie-banner__detail{
  background: rgba(56,189,248,0.08);
  border-color: rgba(56,189,248,0.22);
}

html[data-theme="dark"] .cookie-banner__link{
  color: #7dd3fc;
}

html[data-theme="dark"] .cookie-banner__link:hover{
  color: #bae6fd;
}

html[data-theme="dark"] .cookie-banner__btn--secondary{
  background: rgba(255,255,255,0.06);
  color: rgba(241,245,249,0.92);
  border-color: rgba(148,163,184,0.28);
}

html[data-theme="dark"] .cookie-banner__btn--secondary:hover{
  background: rgba(255,255,255,0.1);
}

@media (max-width: 520px){
  .cookie-banner__actions{
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-banner__btn{
    width: 100%;
    text-align: center;
  }
}

/* ---------- Modal connexion Google (même esprit que cookies, au-dessus) ---------- */
.auth-modal{
  position: fixed;
  inset: 0;
  z-index: 13060;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.auth-modal[hidden]{
  display: none !important;
}

.auth-modal__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html[data-theme="dark"] .auth-modal__backdrop{
  background: rgba(0,0,0,0.55);
}

.auth-modal__card{
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: min(440px, calc(100vw - 40px));
  margin: auto;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 24px 64px rgba(0,0,0,0.22),
    0 0 0 1px rgba(255,255,255,0.85) inset;
  padding: 22px 24px 18px;
  max-height: min(82vh, 520px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.auth-modal__close{
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: rgba(15,23,42,0.06);
  color: rgba(15,23,42,0.75);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.auth-modal__close:hover{
  background: rgba(15,23,42,0.1);
  color: rgba(15,23,42,0.92);
}

.auth-modal__title{
  margin: 0 36px 10px 0;
  font-size: 17px;
  font-weight: 800;
  color: rgba(15,23,42,0.95);
  letter-spacing: -0.02em;
}

.auth-modal__desc{
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(51,65,85,0.92);
}

.auth-modal__desc--user strong{
  font-weight: 700;
  color: rgba(15,23,42,0.95);
}

.auth-modal__actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 14px;
}

.auth-modal__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  box-sizing: border-box;
}

.auth-modal__btn--google{
  background: #fff;
  color: rgba(15,23,42,0.9);
  border-color: rgba(15,23,42,0.14);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.auth-modal__btn--google:hover{
  background: #f8fafc;
  border-color: rgba(15,23,42,0.2);
}

.auth-modal__google-icon{
  display: flex;
  flex-shrink: 0;
}

.auth-modal__btn--secondary{
  background: rgba(15,23,42,0.04);
  color: rgba(15,23,42,0.88);
  border-color: rgba(15,23,42,0.12);
}

.auth-modal__btn--secondary:hover{
  background: rgba(15,23,42,0.07);
}

/* Sign out — rouge « déconnexion » classique */
.auth-modal__btn--danger{
  background: #dc2626;
  color: #fff !important;
  border-color: #b91c1c;
  box-shadow: 0 2px 10px rgba(220,38,38,0.28);
}
.auth-modal__btn--danger:hover{
  background: #b91c1c;
  border-color: #991b1b;
  color: #fff !important;
  transform: translateY(-1px);
}
.auth-modal__btn--danger:active{
  background: #991b1b;
  transform: translateY(0);
}

.auth-modal__hint{
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(71,85,105,0.85);
}

html.auth-modal-visible,
body.auth-modal-visible{
  overflow: hidden;
}

html[data-theme="dark"] .auth-modal__card{
  background: linear-gradient(165deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%);
  border-color: rgba(100,116,139,0.38);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.05) inset;
}

html[data-theme="dark"] .auth-modal__title{
  color: rgba(241,245,249,0.96);
}

html[data-theme="dark"] .auth-modal__desc,
html[data-theme="dark"] .auth-modal__hint{
  color: rgba(203,213,225,0.92);
}

html[data-theme="dark"] .auth-modal__desc--user strong{
  color: rgba(241,245,249,0.98);
}

html[data-theme="dark"] .auth-modal__btn--secondary{
  background: rgba(255,255,255,0.06);
  color: rgba(241,245,249,0.92);
  border-color: rgba(148,163,184,0.28);
}

html[data-theme="dark"] .auth-modal__btn--secondary:hover{
  background: rgba(255,255,255,0.1);
}

html[data-theme="dark"] .auth-modal__close{
  background: rgba(255,255,255,0.08);
  color: rgba(241,245,249,0.85);
}

html[data-theme="dark"] .auth-modal__close:hover{
  background: rgba(255,255,255,0.14);
  color: #fff;
}

/* ---------- Mobile / tablette « searched » : pas de 2e dégradé sur html (évite mélange violet/blanc), pas de bande blanche à droite ---------- */
@media (max-width: 980px){
  html:has(body.searched){
    height: auto !important;
    max-height: none !important;
    min-height: 100dvh !important;
    overflow-x: clip !important;
    background: transparent !important;
  }

  body.searched{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  body.searched #nav_tabs,
  body.searched #result{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.searched #suggestions{
    width: auto !important;
    max-width: min(440px, calc(100vw - 24px)) !important;
    max-height: min(240px, 42vh) !important;
    box-sizing: border-box !important;
  }

  /* Contre les règles « fullscreen » plus haut (clamp 280px, etc.) */
  body.searched .search-row:not(.search-row--pill){
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.searched .search-row:not(.search-row--pill) #input_search{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.searched .search-row.search-row--pill{
    width: min(680px, calc(100vw - 100px)) !important;
    max-width: min(680px, calc(100vw - 100px)) !important;
    display: flex !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
  }
}

/* ---------- #the_button: no motion (overrides stacked legacy rules; fixes iOS tap jank) ---------- */
#the_button,
#the_button:hover,
#the_button:active,
#the_button:focus,
#the_button:focus-visible,
#the_button.clicked,
#the_button.pixr-burst{
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
#the_button::before,
#the_button::after,
#the_button:hover::before,
#the_button:active::before,
#the_button:active::after,
#the_button.clicked::after,
#the_button.pixr-burst::after{
  animation: none !important;
  transition: none !important;
}
body.is-searching #the_button{
  filter: none !important;
}

/* Bandeau « All » : vignette fixe, remplissage + recadrage centré (cover) — pas de barres, bords coupés si besoin */
.all-img-grid button.img-card.all-img-grid__cell{
  display: block !important;
  overflow: hidden !important;
}
.all-img-grid button.img-card.all-img-grid__cell img{
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Liens sponsorisés : même rendu que les titres classiques (visited / strong inclus). */
.result-row--sponsored .result-main a,
.result-row--sponsored .result-main a:link,
.result-row--sponsored .result-main a:visited,
.result-row--sponsored .result-main a strong{
  color: var(--link) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--link) !important;
}
.result-row--sponsored .result-main a:hover,
.result-row--sponsored .result-main a:hover strong{
  color: var(--link) !important;
  -webkit-text-fill-color: var(--link) !important;
}

/* =========================================================
   Barre pilule — calée sur maquette (clair / sombre)
   Clair: #fff, bordure 2px « Dracula » (#44475a), icônes / texte idem, placeholder comment (#6272a4)
   Sombre: fond gris-bleu adouci (moins noir que #282a36), léger liseré, texte lisible
   Loupe + micro : type="button" (icônes cliquables). Soumission via
   #search_form_implicit_submit (visually-hidden) pour Enter + événement submit.
   ========================================================= */

.search-row.search-row--pill{
  --pill-dracula-fg: #44475a;
  --pill-dracula-muted: #6272a4;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: min(680px, 92vw) !important;
  max-width: min(680px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 2px solid var(--pill-dracula-fg) !important;
  border-radius: 50px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: border-color 0.15s ease !important;
  grid-template-columns: unset !important;
}

html[data-theme="dark"] .search-row.search-row--pill{
  --pill-dracula-fg: #f4f4f8;
  --pill-dracula-muted: #c8b8f5;
  background: linear-gradient(180deg, #4a4d62 0%, #3f4255 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 4px 18px rgba(0, 0, 0, 0.22) !important;
}

.search-row.search-row--pill:focus-within{
  box-shadow: none !important;
}

html[data-theme="dark"] .search-row.search-row--pill:focus-within{
  border-color: rgba(189, 147, 249, 0.45) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 4px 22px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(189, 147, 249, 0.2) !important;
}

.search-row--pill .search-pill__icon-svg{
  display: block !important;
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 22px !important;
  vector-effect: non-scaling-stroke;
}

.search-row--pill .search-pill__icon-svg,
.search-row--pill .search-pill__icon-svg *{
  stroke-width: 2 !important;
}

/* Un seul emplacement visuel : micro OU carré stop (pas deux icônes en flex côte à côte). */
.search-row.search-row--pill #search_pill_voice .search-pill__voice-icon-stack{
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.search-row--pill .search-pill__voice-icon-stack .search-pill__icon-svg{
  grid-area: 1 / 1 !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  transition: opacity 0.15s ease, visibility 0.15s ease !important;
}

.search-row--pill .search-pill__voice-icon-stack .search-pill__icon-svg--recstop{
  color: #dc2626 !important;
  stroke: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.search-row--pill .search-pill__voice-icon-stack .search-pill__icon-svg--recstop *{
  stroke-width: 0 !important;
}

.search-row--pill #search_pill_voice.is-listening .search-pill__voice-icon-stack .search-pill__icon-svg--mic{
  opacity: 0 !important;
  visibility: hidden !important;
}

.search-row--pill #search_pill_voice.is-listening .search-pill__voice-icon-stack .search-pill__icon-svg--recstop{
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-theme="dark"] .search-row--pill #search_pill_voice.is-listening .search-pill__voice-icon-stack .search-pill__icon-svg--recstop{
  color: #f87171 !important;
}

/* Micro : préparation (permission / audio prêt) — pas encore l’état « enregistrement » plein. */
.search-row--pill #search_pill_voice.is-voice-arming:not(.is-listening){
  opacity: 0.82 !important;
  animation: pixr-voice-arming 0.95s ease-in-out infinite !important;
}

@keyframes pixr-voice-arming{
  0%, 100%{ opacity: 0.72; }
  50%{ opacity: 1; }
}

/* IDs requis : les règles globales #the_button (dégradés bleus, !important) battent .class.seulement */
.search-row.search-row--pill #the_button.search-pill__submit,
.search-row.search-row--pill #search_pill_voice.search-pill__voice{
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  color: var(--pill-dracula-fg, #44475a) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-indent: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transition: opacity 0.15s ease !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent;
}

.search-row.search-row--pill #the_button.search-pill__submit{
  padding-left: 20px !important;
  padding-right: 10px !important;
}

.search-row.search-row--pill #search_pill_voice.search-pill__voice{
  padding-left: 10px !important;
  padding-right: 20px !important;
}

.search-row.search-row--pill:not(:has(.search-pill__voice)) #input_search.search-pill__field{
  padding-right: 20px !important;
}

html[data-theme="dark"] .search-row.search-row--pill #the_button.search-pill__submit,
html[data-theme="dark"] .search-row.search-row--pill #search_pill_voice.search-pill__voice{
  color: var(--pill-dracula-fg, #f8f8f2) !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.search-row.search-row--pill #the_button.search-pill__submit:hover:not(:disabled),
.search-row.search-row--pill #search_pill_voice.search-pill__voice:hover:not(:disabled){
  opacity: 0.88 !important;
}

.search-row.search-row--pill #the_button.search-pill__submit:disabled,
.search-row.search-row--pill #search_pill_voice.search-pill__voice:disabled{
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Annuler tous les états bleus hérités des feuilles #the_button (hover / active / focus / burst) */
.search-row.search-row--pill #the_button.search-pill__submit:hover,
.search-row.search-row--pill #the_button.search-pill__submit:active,
.search-row.search-row--pill #the_button.search-pill__submit:focus,
.search-row.search-row--pill #the_button.search-pill__submit:focus-visible,
.search-row.search-row--pill #the_button.search-pill__submit.clicked,
.search-row.search-row--pill #the_button.search-pill__submit.pixr-burst,
html[data-theme="dark"] .search-row.search-row--pill #the_button.search-pill__submit:hover,
html[data-theme="dark"] .search-row.search-row--pill #the_button.search-pill__submit:active,
html[data-theme="dark"] .search-row.search-row--pill #the_button.search-pill__submit:focus-visible{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  border: none !important;
  animation: none !important;
}

body.is-searching .search-row.search-row--pill #the_button.search-pill__submit{
  filter: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

.search-row--pill #the_button.search-pill__submit::before,
.search-row--pill #the_button.search-pill__submit::after,
.search-row--pill .search-pill__voice::before,
.search-row--pill .search-pill__voice::after{
  content: none !important;
  display: none !important;
}

.search-row--pill #input_search.search-pill__field,
.search-row--pill input#input_search.search-pill__field{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 8px 0 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  outline: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--pill-dracula-fg, #44475a) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: color 0.15s ease !important;
  transform: none !important;
}

html[data-theme="dark"] .search-row--pill #input_search.search-pill__field,
html[data-theme="dark"] .search-row--pill input#input_search.search-pill__field{
  color: var(--pill-dracula-fg, #f8f8f2) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.search-row--pill .search-pill__field[type="search"]::-webkit-search-decoration,
.search-row--pill .search-pill__field[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none !important;
  appearance: none !important;
}

.search-row--pill #input_search.search-pill__field::placeholder{
  color: #999999 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .search-row--pill #input_search.search-pill__field::placeholder{
  color: #9b9eb8 !important;
  opacity: 1 !important;
}

.search-row--pill #input_search.search-pill__field:focus::placeholder{
  color: transparent !important;
}

.search-row--pill #input_search.search-pill__field:focus,
.search-row--pill #input_search.search-pill__field:focus-visible{
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
  background: transparent !important;
}

html[data-theme="dark"] .search-row--pill #input_search.search-pill__field:focus,
html[data-theme="dark"] .search-row--pill #input_search.search-pill__field:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.search-row--pill #input_search.search-pill__field.input_search--suggest-preview{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--pill-dracula-fg, #44475a) !important;
  font-weight: 600 !important;
}

html[data-theme="dark"] .search-row--pill #input_search.search-pill__field.input_search--suggest-preview{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--pill-dracula-fg, #f8f8f2) !important;
}

.search-row.search-row--pill:focus-within #input_search,
.search-row.search-row--pill:focus-within #the_button{
  border-color: transparent !important;
  box-shadow: none !important;
}

body.pre-search .search-row.search-row--pill{
  transform: translateY(-6px) !important;
}

body.searched .search-row.search-row--pill{
  width: min(760px, calc(86vw - 24px)) !important;
  max-width: min(760px, calc(86vw - 24px)) !important;
  height: calc(var(--topbar-h, 46px) * var(--ui-scale, 1)) !important;
  min-height: calc(var(--topbar-h, 46px) * var(--ui-scale, 1)) !important;
  align-items: stretch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  gap: 0 !important;
  display: flex !important;
  grid-template-columns: unset !important;
}

body.searched .search-row.search-row--pill #the_button.search-pill__submit{
  padding-left: 14px !important;
  padding-right: 8px !important;
}

body.searched .search-row.search-row--pill #search_pill_voice.search-pill__voice{
  padding-left: 8px !important;
  padding-right: 14px !important;
}

body.searched .search-row--pill #input_search.search-pill__field{
  height: 100% !important;
  min-height: 0 !important;
  font-size: 15px !important;
}

body.searched .search-row--pill #the_button.search-pill__submit{
  height: 100% !important;
  min-height: 0 !important;
  animation: none !important;
}

@media (max-width: 980px){
  .search-row.search-row--pill{
    display: flex !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
    width: min(720px, 92vw) !important;
  }

  .search-row--pill #input_search.search-pill__field{
    width: auto !important;
    min-width: 0 !important;
  }

  .search-row.search-row--pill #the_button.search-pill__submit,
  .search-row.search-row--pill #search_pill_voice.search-pill__voice{
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 520px){
  .search-row.search-row--pill{
    width: min(96vw, 560px) !important;
  }

  .search-row--pill #input_search.search-pill__field{
    height: 48px !important;
    font-size: 16px !important;
  }
}