/* =========================================================
    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 proche du preset « ocean » — pas de rose au 1er rendu) ---------- */
  :root{
    --bg0: #dbeafe;
    --bg1: #f0f9ff;
    --glass: rgba(255,255,255,0.62);
    --glass2: rgba(255,255,255,0.78);
    --border: rgba(40,42,54,0.12);
    --border2: rgba(40,42,54,0.20);

    --text: rgba(40,42,54,0.94);
    --muted: rgba(98,114,164,0.92);
    --muted2: rgba(98,114,164,0.68);

    --shadow: 0 18px 50px rgba(40,42,54,0.10);
    --shadow2: 0 10px 25px rgba(40,42,54,0.08);

    --a1: #bd93f9;
    --a2: #8be9fd;
    --a3: #ff79c6;

    --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(1200px 800px at 18% 18%, rgba(56,189,248,0.14), transparent 58%),
                radial-gradient(900px 650px at 52% 22%, rgba(96,165,250,0.10), transparent 55%),
                radial-gradient(900px 650px at 82% 22%, rgba(125,211,252,0.12), transparent 55%),
                linear-gradient(180deg, var(--bg1), var(--bg0));
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow-x:hidden;
  }

  /* Subtle animated “nebula” overlay */
  body::before{
    content:"";
    position:fixed;
    inset:-30%;
    background:
      radial-gradient(circle at 24% 30%, rgba(56,189,248,0.10), transparent 55%),
      radial-gradient(circle at 55% 40%, rgba(96,165,250,0.08), transparent 60%),
      radial-gradient(circle at 78% 34%, rgba(125,211,252,0.09), transparent 60%);
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(18px);
    opacity: 0.55;
    pointer-events:none;
    animation: floaty 14s ease-in-out infinite alternate;
    transform: translate3d(0,0,0);
  }
  @keyframes floaty{
    from{ transform: translate(-2%, -1%) scale(1.02); }
    to  { transform: translate( 2%,  1%) scale(1.05); }
  }

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

  #pixr_search_img{
    filter: drop-shadow(0 18px 35px rgba(0,0,0,0.55));
    user-select:none;
  }

  /* 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 30px rgba(0,0,0,0.35);
    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.45);
    background: var(--glass2);
    box-shadow: 0 18px 50px rgba(0,0,0,0.55);
    transform: translateY(-1px);
  }

  /* 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;
    gap: 25px;
    justify-content:center;
    align-items:center;
    border: 1px solid var(--border);
    background: var(--glass);
    border-radius: 999px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.45);
  }

  .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(255,121,198,0.28);
    background: linear-gradient(135deg, rgba(189,147,249,0.35), rgba(139,233,253,0.18));
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(189,147,249,0.2) 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);
  }

  /* ---------- 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; }

  .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-wrap:wrap;
    gap: 10px;
    align-items:center;
    justify-content:space-between;
  }
  .img-preview-title{
    font-weight: 800;
    max-width: 66%;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .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;
  }
  .img-preview-link:hover{
    transform: translateY(-1px);
    background: var(--glass2);
    border-color: rgba(189,147,249,0.24);
  }

  .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;
  }

    /* =========================================================
    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{
    /* Softer “aurora” gradient (less aggressive) */
    --p1: rgba(124,58,237,0.82);
    --p2: rgba(139,233,253,0.66);
    --p3: rgba(96,165,250,0.74);

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

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

    /* A bit less “flashy” by default */
    filter: saturate(1.02) brightness(0.98);

    /* 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{
  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{
    flex-direction: column !important;
    align-items: flex-start !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;
}

#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: translateY(-0.5px);
}

#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 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);
}

/* Fichier image : même gabarit que les <select> (langue / thème) */
#settings_panel input[type="file"].settings-file{
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(40,42,54,0.16);
  background: rgba(255,255,255,0.95);
  color: rgba(40,42,54,0.75);
  padding: 0 10px 0 0;
  font-size: 12px;
  font-family: "Space Grotesk","Inter",system-ui,sans-serif;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 10px;
}

#settings_panel input[type="file"].settings-file:focus{
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.14);
}

#settings_panel input[type="file"].settings-file::file-selector-button,
#settings_panel input[type="file"].settings-file::-webkit-file-upload-button{
  height: 48px;
  margin: 0;
  margin-right: 10px;
  padding: 0 12px;
  border: none;
  border-right: 1px solid rgba(40,42,54,0.12);
  border-radius: 11px 0 0 11px;
  background: rgba(15,23,42,0.06);
  color: rgba(40,42,54,0.92);
  font-weight: 600;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

#settings_panel input[type="file"].settings-file:hover::file-selector-button,
#settings_panel input[type="file"].settings-file:hover::-webkit-file-upload-button{
  background: rgba(15,23,42,0.09);
}

/* ---------- Thème sombre équilibré : lisible sans effet « mode clair déguisé » ---------- */
html[data-theme="dark"]{
  --bg0: #2f3544;
  --bg1: #262b38;
  --glass: rgba(40,46,60,0.72);
  --glass2: rgba(52,58,74,0.78);
  --border: rgba(148,163,184,0.14);
  --border2: rgba(148,163,184,0.22);
  --text: rgba(226,232,240,0.95);
  --muted: rgba(148,163,184,0.92);
  --muted2: rgba(100,116,139,0.95);
  --link: #7dd3fc;
  --linkHover: #bae6fd;
  --ring: 0 0 0 3px rgba(56,189,248,0.22), 0 0 0 1px rgba(255,255,255,0.06) inset;
}

html[data-theme="dark"] body{
  background: radial-gradient(1200px 800px at 18% 18%, rgba(79,70,229,0.1), transparent 52%),
              radial-gradient(900px 650px at 52% 22%, rgba(59,130,246,0.07), transparent 50%),
              radial-gradient(900px 650px at 82% 22%, rgba(14,165,233,0.08), transparent 52%),
              linear-gradient(185deg, #343a4c 0%, #2a2f3e 42%, #22252f 100%);
}

html[data-theme="dark"] #settings_panel{
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

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{
  border: 1px solid rgba(59,130,246,0.14);
  box-shadow:
    0 16px 44px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

html[data-theme="dark"] #settings_panel h3{
  color: rgba(15,23,42,0.94);
}

html[data-theme="dark"] #settings_panel label{
  color: rgba(15,23,42,0.88);
}

html[data-theme="dark"] #settings_panel select{
  min-height: 48px;
  height: 48px;
  border-radius: 12px;
  border-color: rgba(59,130,246,0.28);
  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='%23475569' 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%, #f8fafc 55%, #f1f5f9 100%);
  color: #0f172a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 4px rgba(15,23,42,0.06);
}

html[data-theme="dark"] #settings_panel select:hover{
  border-color: rgba(59,130,246,0.42);
  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%, #f1f5f9 100%);
}

html[data-theme="dark"] #settings_panel select:focus{
  border-color: rgba(37,99,235,0.55);
  box-shadow:
    0 0 0 3px rgba(59,130,246,0.22),
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 2px 10px rgba(0,0,0,0.15);
}

html[data-theme="dark"] #settings_panel input[type="file"].settings-file{
  height: 48px;
  border-radius: 12px;
  background: rgba(248,250,252,0.92);
  color: rgba(15,23,42,0.88);
  border-color: rgba(59,130,246,0.28);
}

html[data-theme="dark"] #settings_panel input[type="file"].settings-file:focus{
  border-color: rgba(59,130,246,0.5);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}

html[data-theme="dark"] #settings_panel input[type="file"].settings-file::file-selector-button,
html[data-theme="dark"] #settings_panel input[type="file"].settings-file::-webkit-file-upload-button{
  height: 48px;
  background: rgba(239,246,255,0.98);
  color: #1e40af;
  border-right-color: rgba(59,130,246,0.25);
}

html[data-theme="dark"] #settings_panel input[type="file"].settings-file:hover::file-selector-button,
html[data-theme="dark"] #settings_panel input[type="file"].settings-file:hover::-webkit-file-upload-button{
  background: rgba(219,234,254,0.98);
}

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;
}

#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 --- */
html[data-theme="dark"] #input_search{
  background: linear-gradient(180deg, #8f9ab0 0%, #7a8498 38%, #6b7488 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(248,250,252,0.98) !important;
  border: 1.5px solid rgba(255,255,255,0.2) !important;
  border-right: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 4px 20px rgba(0,0,0,0.22) !important;
}

html[data-theme="dark"] #input_search::placeholder{
  color: rgba(226,232,240,0.65) !important;
}

html[data-theme="dark"] #input_search:focus{
  border-color: rgba(56,189,248,0.55) !important;
  background: linear-gradient(180deg, #9aa6bb 0%, #858fa5 45%, #768090 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 0 0 3px rgba(56,189,248,0.22),
    0 6px 24px rgba(0,0,0,0.28) !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(15,23,42,0.1);
}

.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(30,41,59,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);
}

.bg-preset--brand{
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.85),
    0 0 0 4px rgba(37,99,235,0.65),
    0 4px 14px rgba(37,99,235,0.35) !important;
}

.bg-preset--brand:hover{
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.9),
    0 0 0 4px rgba(37,99,235,0.8),
    0 8px 20px rgba(37,99,235,0.4) !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);
}

.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 plus discret quand fond perso */
html[data-pixr-bg="gradient"] body::before,
html[data-pixr-bg="image"] body::before{
  opacity: 0.16 !important;
}

/* ---------- 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(180deg, rgba(255,255,255,0.97) 0%, rgba(248,250,252,0.95) 100%);
  border-color: rgba(59,130,246,0.18);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

html[data-theme="dark"] .cookie-banner__title,
html[data-theme="dark"] .cookie-banner__subtitle{
  color: rgba(15,23,42,0.94);
}

html[data-theme="dark"] .cookie-banner__desc,
html[data-theme="dark"] .cookie-banner__detail,
html[data-theme="dark"] .cookie-banner__check{
  color: rgba(30,41,59,0.9);
}

html[data-theme="dark"] .cookie-banner__detail{
  background: rgba(59,130,246,0.08);
  border-color: rgba(59,130,246,0.15);
}

@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(180deg, rgba(255,255,255,0.97) 0%, rgba(248,250,252,0.95) 100%);
  border-color: rgba(59,130,246,0.18);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

html[data-theme="dark"] .auth-modal__title{
  color: rgba(15,23,42,0.94);
}

html[data-theme="dark"] .auth-modal__desc,
html[data-theme="dark"] .auth-modal__hint{
  color: rgba(30,41,59,0.9);
}

html[data-theme="dark"] .auth-modal__close{
  background: rgba(15,23,42,0.08);
  color: rgba(15,23,42,0.8);
}

html[data-theme="dark"] .auth-modal__close:hover{
  background: rgba(15,23,42,0.12);
}

/* ---------- 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{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.searched #input_search{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !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;
}