/* ==================================================
   ROOT
================================================== */

:root{
--pa-bg:#f3f3f0;              /* Fond général de l’interface */
--pa-card:#fff;               /* Fond des widgets */
--pa-text:#222;               /* Couleur principale du texte */
--pa-muted:#777;              /* Texte secondaire */
--pa-border:#d9d9d6;          /* Bordures */
--pa-field:#fff;              /* Fond des champs */
--pa-gap:18px;                /* Espacement entre les widgets */
--pa-radius:16px;             /* Arrondi des widgets */
--pa-wrap:1500px;             /* Largeur maximale du dashboard */
--pa-pad-desktop:7%;          /* Padding latéral desktop */
--pa-pad-mobile:20px;         /* Padding latéral mobile */
--pa-button:#3a3a3a;          /* Boutons gris foncé */
}

/* ==================================================
   BASE
================================================== */

*{box-sizing:border-box}
html{background:var(--pa-bg)}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--pa-bg);color:var(--pa-text)}
.wrap{position:relative;width:min(calc(100% - (var(--pa-pad-desktop) * 2)),var(--pa-wrap));margin:34px auto 60px}
h1{margin:0;font-size:38px;line-height:1}
h2{margin:0 0 14px;font-size:17px}
p{margin-top:0}
.ok{color:#167a42}
.muted{color:var(--pa-muted)}
.small{font-size:13px}

/* ==================================================
   MODE SOMBRE
================================================== */

html[data-theme="dark"]{--pa-bg:#181918;--pa-card:#242524;--pa-text:#f1f1ed;--pa-muted:#989a96;--pa-border:#3a3c39;--pa-field:#1d1e1d;--pa-button:#4a4c49}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] .card{box-shadow:0 1px 12px #0004}
html[data-theme="dark"] .piprod-widget-placeholder{border-color:#ffffff30;background:#ffffff08}


/* ==================================================
   BARRE SITE ADMINISTRÉ
================================================== */

.access-sitebar{width:100%;border-bottom:1px solid color-mix(in srgb,var(--pa-border) 55%,transparent)}
.access-sitebar-inner{display:flex;align-items:center;justify-content:flex-end;gap:7px;width:min(calc(100% - (var(--pa-pad-desktop) * 2)),var(--pa-wrap));min-height:53px;margin:auto;font-size:11px}
.access-sitebar-inner span{color:var(--pa-muted);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.access-sitebar-inner strong{font-size:11px;font-weight:700}
.access-sitebar-inner .link{margin-left:6px;font-size:11px}
.access-site-selector{margin:0}
.access-site-selector select{width:auto;margin:0;padding:5px 26px 5px 7px;border:0;border-radius:7px;background:transparent;color:var(--pa-text);font-size:11px;font-weight:700;cursor:pointer;outline:0}
.access-site-selector select:hover{background:color-mix(in srgb,var(--pa-text) 5%,transparent)}



/* ==================================================
   ACTIONS HEADER / THEME
================================================== */

.top-actions{display:flex;align-items:center;gap:12px}
.theme-toggle{display:flex;align-items:center;gap:7px;padding:0;background:transparent;color:var(--pa-muted);border:0;border-radius:0;box-shadow:none}
.theme-toggle:hover{color:var(--pa-text)}
.theme-toggle__sun,.theme-toggle__moon{display:flex;align-items:center;justify-content:center;width:18px;font-size:15px;line-height:1}
.theme-toggle__track{position:relative;width:38px;height:22px;border-radius:999px;background:#c8c9c5;transition:background .2s}
.theme-toggle__track i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .22s}
html[data-theme="dark"] .theme-toggle__track{background:#555854}
html[data-theme="dark"] .theme-toggle__track i{transform:translateX(16px)}
html[data-theme="dark"] .theme-toggle__moon{color:#fff}
html:not([data-theme="dark"]) .theme-toggle__sun{color:#555}

/* ==================================================
   HEADER ACCESS
================================================== */

.top{display:grid;grid-template-columns:auto minmax(260px,1fr) auto;align-items:center;gap:36px;margin-bottom:28px;user-select:none;-webkit-user-select:none}
.top-brand{min-width:0}
.access-title{display:flex;align-items:flex-start;gap:7px}
.access-version{margin-top:1px;padding:3px 6px;background:var(--pa-card);color:var(--pa-muted);border:1px solid var(--pa-border);border-radius:999px;font-size:9px;font-weight:700;line-height:1}
.access-baseline{margin:7px 0 0!important;font-size:10px;line-height:1.3}

.top-miniwidgets{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.access-miniwidget{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--pa-border);border-radius:999px;background:color-mix(in srgb,var(--pa-card) 70%,transparent);white-space:nowrap}
.access-miniwidget span{color:var(--pa-muted);font-size:8px;font-weight:700;letter-spacing:.08em}
.access-miniweather{display:flex;align-items:center;gap:14px;padding:7px 12px;border:1px solid var(--pa-border);border-radius:999px;background:var(--pa-card);white-space:nowrap}
.access-miniweather-date{display:flex;flex-direction:column;gap:1px}
.access-miniweather-date span{color:var(--pa-muted);font-size:9px;font-weight:500}
.access-miniweather-date strong{font-size:11px;font-weight:700}
.access-miniweather-sun{display:flex;align-items:center;gap:5px;padding-left:12px;border-left:1px solid var(--pa-border);color:var(--pa-muted);font-size:10px;font-weight:700}
.access-miniweather-sun svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}

/* ==================================================
   GRILLE WIDGETS / MASONRY
================================================== */

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:4px;column-gap:var(--pa-gap);row-gap:var(--pa-gap);align-items:start}
.piprod-widget{position:relative;min-width:0;align-self:start}
.piprod-widget[data-widget-span="2"]{grid-column:span 2}
.piprod-widget[data-widget-span="3"]{grid-column:span 3}
.piprod-widget[data-widget-span="4"]{grid-column:span 3}
.piprod-widget>.card{height:auto}

/* ==================================================
   CARTES
================================================== */

.card{background:var(--pa-card);color:var(--pa-text);border-radius:var(--pa-radius);padding:22px;box-shadow:0 1px 8px #0001;min-width:0}
.access-health-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.access-health-grid div{padding:12px;border:1px solid var(--pa-border);border-radius:12px}
.access-health-grid span{display:block;margin-bottom:4px;color:var(--pa-muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em}
.access-health-grid strong{font-size:14px}
.access-health-checks{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;color:var(--pa-muted);font-size:10px}

/* ==================================================
   BOUTONS / CHAMPS
================================================== */

.btn,button{display:inline-flex;align-items:center;justify-content:center;background:var(--pa-button);color:#fff;border:0;border-radius:999px;padding:10px 16px;text-decoration:none;cursor:pointer;font:inherit}
.link{display:inline-flex;align-items:center;color:var(--pa-muted);font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer;transition:color .15s}.link:hover{color:var(--pa-text)}
button:disabled{opacity:.4;cursor:default}
input,textarea,select{border:1px solid var(--pa-border);background:var(--pa-field);color:var(--pa-text);font:inherit}
input{width:100%;margin:8px 0 14px;padding:12px;border-radius:10px}

/* ==================================================
   DRAG & DROP
================================================== */

.piprod-widget{cursor:grab;user-select:none;-webkit-user-select:none}
.piprod-widget:active{cursor:grabbing}
.piprod-widget button,.piprod-widget input,.piprod-widget textarea,.piprod-widget select,.piprod-widget a{cursor:auto;user-select:auto;-webkit-user-select:auto}
.piprod-widget button{cursor:pointer}
.piprod-widget-drag{position:absolute;top:10px;right:10px;z-index:20;display:grid;grid-template-columns:repeat(2,3px);gap:3px;padding:7px;cursor:grab;opacity:.25;user-select:none;-webkit-user-select:none;transition:opacity .15s}
.piprod-widget:hover .piprod-widget-drag{opacity:.65}
.piprod-widget-drag:active{cursor:grabbing}
.piprod-widget-drag span{width:3px;height:3px;border-radius:50%;background:currentColor}
.piprod-widget.is-dragging{opacity:.18;cursor:grabbing}
.piprod-widget-placeholder{min-height:140px;border:2px dashed rgba(0,0,0,.22);border-radius:var(--pa-radius);background:rgba(0,0,0,.025)}
.piprod-widget-placeholder[data-widget-span="2"]{grid-column:span 2}
.piprod-widget-placeholder[data-widget-span="3"]{grid-column:span 3}
.piprod-widget-placeholder[data-widget-span="4"]{grid-column:span 3}
.grid.is-sorting{cursor:grabbing}
.grid.is-sorting .piprod-widget{transition:transform .15s}


/* ==================================================
   CATÉGORIES ACCESS
================================================== */

.access-categories{position:sticky;top:12px;z-index:100;isolation:isolate;display:flex;align-items:center;gap:7px;margin:0 auto 28px;padding:6px;background:var(--pa-card);border:1px solid var(--pa-border);border-radius:999px;width:max-content;max-width:100%;box-shadow:0 8px 28px #0002}
.access-categories::before{content:"";position:absolute;z-index:-1;inset:-7px -9px;border-radius:999px;background:var(--pa-bg);box-shadow:0 0 0 1px color-mix(in srgb,var(--pa-border) 35%,transparent)}

.access-category{padding:9px 16px;background:transparent;color:var(--pa-muted);font-size:13px;font-weight:600;white-space:nowrap;transition:background .15s,color .15s,transform .15s,outline-color .15s}
.access-category:hover{color:var(--pa-text)}
.access-category.is-active{background:var(--pa-button);color:#fff}

.access-categories.is-receiving .access-category{outline:1px dashed color-mix(in srgb,var(--pa-muted) 45%,transparent);outline-offset:-2px}
.access-category.is-drop-target{background:var(--pa-button);color:#fff;outline-color:transparent!important;transform:scale(1.04)}


.access-category span{margin-right:3px;font-size:12px}
.access-empty{padding:28px 0;color:var(--pa-muted);font-size:14px}

/* ==================================================
   PERSONNALISATION FOND ACCESS
================================================== */

.access-bg-picker{position:absolute;z-index:20;left:calc(50% + 326px);display:flex;align-items:center;gap:5px;margin-top:-70px;padding:5px 7px;border:1px solid var(--pa-border);border-radius:999px;background:var(--pa-card);box-shadow:0 1px 8px #0001}
.access-bg-picker button{width:18px;height:18px;min-width:18px;padding:0;border:2px solid var(--pa-card);border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #0003;filter:saturate(1.45) contrast(1.18)}
html[data-theme="dark"] .access-bg-picker button{filter:saturate(1.7) brightness(1.35) contrast(1.2)}
html[data-theme="dark"] .access-bg-picker .access-bg-reset{filter:none}
.access-bg-picker button:hover{transform:scale(1.12)}
.access-bg-picker button.is-active{box-shadow:0 0 0 2px var(--pa-text)}
.access-bg-picker .access-bg-reset{background:transparent;color:var(--pa-muted);font-size:11px;font-weight:700}
.access-bg-picker .access-bg-reset:hover{color:var(--pa-text)}

/* ==================================================
   FAVORIS WIDGETS
================================================== */

.piprod-widget-favorite{position:absolute;top:10px;right:42px;z-index:21;width:28px;height:28px;padding:0;background:transparent;color:var(--pa-muted);font-size:15px;line-height:1;opacity:.3;transition:opacity .15s,color .15s,transform .15s}
.piprod-widget:hover .piprod-widget-favorite{opacity:.65}
.piprod-widget-favorite:hover{opacity:1;transform:scale(1.08)}
.piprod-widget-favorite.is-favorite{color:#e05269;opacity:1}
.piprod-widget[hidden]{display:none!important}

/* ==================================================
   SIGNATURE ACCESS
================================================== */

.access-signature{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:30px;color:var(--pa-muted);font-size:11px;text-align:center;opacity:.3}
.access-signature strong{font-weight:600}
.access-signature span{font-size:10px}

/* ==================================================
   BACK UP ACCESS
================================================== */

.access-backup-form{display:flex;margin:0}
.access-backup-button{padding:0;background:transparent;color:var(--pa-muted);border-radius:0;font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.access-backup-button:hover{background:transparent;color:var(--pa-text)}


/* ==================================================
   LOGIN ACCESS
================================================== */

.access-login{min-height:calc(100vh - 110px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 0}
.access-login-card{position:relative;width:min(430px,100%);padding:34px 34px 68px;background:var(--pa-card);border:1px solid var(--pa-border);border-radius:22px}
.access-login-brand{display:flex;align-items:flex-start;gap:7px;margin-bottom:6px}.access-login-brand h1{font-size:34px}
.access-login-security{display:flex;flex-direction:column;gap:3px;margin:0 0 22px;color:var(--pa-muted)}.access-login-security strong{color:var(--pa-text);font-size:10px;font-weight:650}.access-login-security span{font-size:9px;opacity:.65}

.access-login-form{display:grid;gap:12px}
.access-login-field{display:grid;gap:5px}.access-login-field label{font-size:10px;font-weight:600;opacity:.6}
.access-login-field input{height:44px;margin:0;padding:0 14px;border:1px solid var(--pa-border);border-radius:11px;background:var(--pa-field);color:var(--pa-text);outline:0}

.access-login-user-wrap,.access-login-password{position:relative}
.access-login-user-wrap input{padding-right:42px}.access-login-password input{padding-right:46px}

.access-login-user-status{position:absolute;top:50%;right:13px;width:17px;height:17px;transform:translateY(-50%);opacity:0;transition:opacity .15s}
.access-login-user-status i{display:block;width:15px;height:15px;border:2px solid var(--pa-muted);border-top-color:transparent;border-radius:50%;animation:piprodLoginSpin .65s linear infinite}
.access-login-user-status.is-checking{opacity:.55}
.access-login-user-status.is-valid{opacity:1}.access-login-user-status.is-valid i{border-color:#20a05a;border-top-color:transparent}
.access-login-user-status.is-done{opacity:1}.access-login-user-status.is-done i{width:14px;height:8px;border:0;border-left:2px solid #20a05a;border-bottom:2px solid #20a05a;border-radius:0;transform:rotate(-45deg);animation:none}

.access-login-eye{position:absolute;top:50%;right:7px;width:34px;height:34px;padding:0;transform:translateY(-50%);background:transparent;color:var(--pa-muted);border-radius:8px}
.access-login-eye:hover{color:var(--pa-text);background:color-mix(in srgb,var(--pa-text) 6%,transparent)}
.access-login-eye svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.access-login-attempts{display:flex;align-items:center;gap:5px;margin:10px 0 2px;color:var(--pa-muted);font-size:9px}
.access-login-attempts strong,.access-login-attempts small{font-size:9px}.access-login-attempts small{margin-left:3px}
.access-login-attempts.is-warning{color:#d98718}.access-login-attempts.is-danger{color:#d63638}

.access-login-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.access-passkey-button,.access-login-submit{width:100%;min-width:0;min-height:44px;font-weight:700}

.access-passkey-button{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;padding:0 34px 0 10px;white-space:nowrap;background:#1677ff;color:#fff}
.access-passkey-button:hover{background:#0f6ee8}
.access-passkey-label{min-width:0;overflow:hidden;white-space:nowrap;font-size:clamp(9px,2.5vw,11px)}
.access-passkey-button svg{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.access-passkey-fingerprint{position:absolute;right:10px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:currentColor!important;stroke:none!important}.access-passkey-spinner,.access-passkey-check{order:2;display:none}
.access-passkey-spinner{flex:0 0 16px;width:16px;height:16px;border:2px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:piprodLoginSpin .6s linear infinite}
.access-passkey-button.is-loading .access-passkey-fingerprint{display:none}.access-passkey-button.is-loading .access-passkey-spinner{display:block}
.access-passkey-button.is-success{background:#168447}.access-passkey-button.is-success .access-passkey-fingerprint{display:none}.access-passkey-button.is-success .access-passkey-check{display:block}
.access-passkey-button.is-error{background:#1677ff}

.access-passkey-status{min-height:11px;margin-top:-4px;color:var(--pa-muted);font-size:9px;text-align:left}

.access-login-error{margin:0 0 16px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,#d63638 8%,var(--pa-card));color:var(--pa-text);font-size:11px}
.access-login-footer{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:var(--pa-muted);font-size:9px;opacity:.5}
.access-login-theme{position:fixed;right:40px;bottom:40px;z-index:50;display:flex}

@keyframes piprodLoginSpin{to{transform:rotate(360deg)}}

@media(max-width:520px){.access-login{padding:22px 0}.access-login-card{padding:26px 22px 60px;border-radius:18px}.access-login-brand h1{font-size:30px}.access-login-buttons{grid-template-columns:1fr}}

/* ==================================================
   RESPONSIVE
================================================== */

@media(min-width:1500px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.piprod-widget[data-widget-span="4"],.piprod-widget-placeholder[data-widget-span="4"]{grid-column:span 4}}
@media(max-width:1050px){.top{grid-template-columns:1fr auto}.top-miniwidgets{grid-column:1/-1;grid-row:2;justify-content:flex-start}.access-bg-picker{position:static;width:max-content;margin:-16px auto 28px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.piprod-widget[data-widget-span="3"],.piprod-widget[data-widget-span="4"],.piprod-widget-placeholder[data-widget-span="3"],.piprod-widget-placeholder[data-widget-span="4"]{grid-column:span 2}}
@media(max-width:680px){.access-sitebar-inner{width:calc(100% - (var(--pa-pad-mobile) * 2));justify-content:flex-start;flex-wrap:wrap;gap:5px;padding:7px 0}.wrap{width:calc(100% - (var(--pa-pad-mobile) * 2));margin:24px auto 32px}.top{display:flex;flex-direction:column;align-items:stretch;gap:16px}.top-actions{flex-wrap:wrap;flex-shrink:0}.top-miniwidgets{justify-content:flex-start;overflow-x:auto}.access-categories{top:8px;width:100%;overflow-x:auto;justify-content:flex-start}.access-category{flex:0 0 auto}.grid{grid-template-columns:1fr}.piprod-widget,.piprod-widget-placeholder{grid-column:span 1!important}.piprod-widget-drag{opacity:.25}.access-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.top-actions{width:100%;justify-content:space-between}}

/* Favorites sit in the title flow, before the text, rather than in the corner. */
.piprod-widget .piprod-widget-title-with-favorite{display:flex;align-items:center;gap:8px}
.piprod-widget .piprod-widget-title-with-favorite>.piprod-widget-favorite{position:static;inset:auto;z-index:auto;flex:0 0 22px;width:22px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;box-shadow:none;background:transparent}

.piprod-widget-new{display:inline-flex;align-items:center;margin-inline-start:.65rem;padding:.2rem .45rem;border-radius:.2rem;background:#34c866;color:#fff;font-size:.62rem;font-weight:700;line-height:1.15;letter-spacing:.03em;vertical-align:middle;transform:rotate(-7deg);box-shadow:0 .1rem .2rem #00000014}

/* Shared Access tooltips: mouse, keyboard and touch. */
.pa-tooltip-trigger{display:inline-grid;place-items:center;vertical-align:middle;flex:none;width:18px;height:18px;margin-left:6px;padding:0;background:transparent;color:var(--pa-muted);border:1px solid currentColor;border-radius:50%;font:600 12px/1 sans-serif;letter-spacing:normal;cursor:help}
.pa-tooltip-trigger:hover,.pa-tooltip-trigger[aria-expanded="true"]{color:var(--pa-text)}
.pa-tooltip-trigger:focus-visible{outline:2px solid var(--pa-text);outline-offset:3px}
.pa-tooltip{position:fixed;z-index:2147483647;box-sizing:border-box;width:max-content;max-width:min(320px,calc(100vw - 24px));margin:0;padding:12px 14px;background:var(--pa-card);color:var(--pa-text);border:1px solid var(--pa-border);border-radius:10px;box-shadow:0 8px 28px #0003;font-family:inherit;font-size:12px;font-weight:400;line-height:1.5;letter-spacing:normal;text-align:left;text-transform:none;white-space:normal}
.pa-tooltip[hidden]{display:none!important}

/* Compact shared public Search Console diagnostics. Explanations use common tooltips. */
.pa-search h2{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-bottom:16px}
.pa-search-rows{display:grid;gap:0}
.pa-search-row{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,auto) 24px;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--pa-border);font-size:12px}
.pa-search-row>.pa-tooltip-trigger{margin:0;justify-self:end}
.pa-search-value{font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px;text-align:right}
.pa-search-value:before{content:"";width:6px;height:6px;border-radius:50%;background:#8a8a8a;flex:none}
.pa-search-value.is-ok:before{background:#39a56b}.pa-search-value.is-warn:before{background:#b48b2f}.pa-search-value.is-error:before{background:#cf5656}
.pa-search-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.pa-search-status{margin:10px 0 0;min-height:1.4em}

.pa-search-import{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}.pa-search-import>[hidden]{display:none!important}.pa-search-import>button[data-proof-import]{padding:6px 10px;font-size:11px}.pa-search-proofs{min-width:0;overflow-wrap:anywhere}
