/* ============================================================================
   tools.css — Feuille de style partagée pour la "Boîte à outils"
   Réutilise les variables du design system principal (cf. <style> inline de
   index.html). C'est volontairement le seul fichier CSS externe du projet,
   pour qu'AJOUTER UN OUTIL ne demande pas de redupliquer 200 lignes de styles.
   ============================================================================ */

/* ── Variables : copie fidèle du :root de index.html ──────────────────────── */
:root {
  --cream:#F8EFE0; --cream-deep:#F2E6D2; --cream-soft:#FBF5EA;
  --coral:#E8917C; --coral-deep:#D67560;
  --teal:#6FA8AE; --teal-deep:#558E94;
  --ink:#1A1A1A; --ink-soft:#4A4A4A; --ink-faint:#8A8480;
  --line:#1A1A1A14; --line-strong:#1A1A1A1F;
  --shadow-card: 0 1px 0 rgba(26,26,26,.04), 0 12px 28px -16px rgba(26,26,26,.18);
  --shadow-card-hover: 0 2px 0 rgba(26,26,26,.05), 0 24px 48px -20px rgba(26,26,26,.28);
  --serif:'Fraunces','DM Serif Display',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-pill:999px;
  --container:1200px;
  --gutter:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ── Reset & base ──────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--coral);color:var(--cream)}
a{color:inherit;text-decoration-color:var(--line-strong);text-underline-offset:3px}
a:hover{text-decoration-color:var(--coral)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-0.015em;line-height:1.1;margin:0}
h1{font-size:clamp(40px,6vw,72px);font-weight:700;letter-spacing:-0.025em}
h2{font-size:clamp(22px,2.4vw,32px);margin:0 0 14px;font-weight:600}
h3{font-size:18px;margin:0 0 8px;font-weight:600}
p{margin:0 0 14px}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px}

/* ── Nav minimaliste (modèle pages secondaires : brand + bouton retour) ──── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:18px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(248,239,224,.86);
  backdrop-filter:blur(14px) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-0.01em;
  text-decoration:none;
}
.brand:hover{text-decoration:none}
.brand .flower{width:28px;height:28px;color:var(--teal)}
.brand-name{display:flex;align-items:baseline;gap:8px}
.brand-name .first{font-weight:700}
.brand-name .last{
  font-style:italic;font-weight:400;font-size:15px;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--ink-soft);
}
/* Container des actions à droite de la nav (bouton Pro + bouton Retour) */
.nav-actions{display:flex;align-items:center;gap:10px}

/* Bouton "Activer Pro" / "Pro ✓" — toujours visible dans la nav outils.
   L'apparence change selon l'état Pro via la classe .is-pro ajoutée par pro.js. */
.nav-pro-cta{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:14px;font-weight:500;
  padding:9px 16px;border-radius:var(--r-pill);
  border:1.5px solid var(--coral-deep);
  background:linear-gradient(135deg,var(--coral),var(--coral-deep));
  color:var(--cream);cursor:pointer;
  transition:transform .15s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.nav-pro-cta:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}
.nav-pro-cta:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* État connecté : badge vert calme avec ✓ */
.nav-pro-cta.is-pro{
  background:rgba(111,168,174,.15);
  border-color:rgba(111,168,174,.4);
  color:var(--teal-deep);
}
.nav-pro-cta.is-pro::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--teal-deep);margin-right:4px;
}
.nav-pro-cta.is-pro:hover{background:rgba(111,168,174,.25)}

@media (max-width:680px){
  .nav-pro-cta{font-size:13px;padding:7px 14px}
  /* Sur mobile, le back-link devient une icône seule (texte caché visuellement,
     mais reste dans le DOM pour les screen readers grâce à aria-label) */
  .back-link{padding:8px 12px;gap:0;font-size:0}
  .back-link svg{width:16px;height:16px}
  /* nav-actions plus compact */
  .nav-actions{gap:8px}
  /* Le brand-name perd son tag italique sur petit écran (déjà fait) */
}

@media (max-width:420px){
  /* Espace très réduit : le nav-pro-cta passe en icône+1 mot court */
  .nav-pro-cta{padding:6px 10px;font-size:12px;gap:4px}
}

.back-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;padding:10px 18px;
  border-radius:var(--r-pill);
  border:1.5px solid var(--ink);
  color:var(--ink);text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.back-link:hover{background:var(--ink);color:var(--cream);text-decoration:none}
.back-link svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.back-link:hover svg{transform:translateX(-3px)}
@media (max-width:680px){.brand-name .last{display:none}}

/* ── Wrap + page-header (modèle commun aux pages secondaires) ─────────────── */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:780px}

.page-header{padding:140px 0 40px;position:relative;overflow:hidden}
.page-header .deco{
  position:absolute;top:80px;right:-120px;width:340px;height:340px;
  color:var(--coral);opacity:.18;
  animation:spin 90s linear infinite;pointer-events:none;
}
@keyframes spin{to{transform:rotate(360deg)}}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--serif);font-style:italic;
  color:var(--ink-soft);font-size:16px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--ink);opacity:.5}
.page-header p.lead{margin-top:18px;color:var(--ink-soft);font-size:17px;max-width:620px}

/* Privacy badge : signal de confiance "tes données restent locales".
   Style cohérent avec .badge--free (teal léger) mais visuellement plus
   présent (icône + texte plus long). */
.privacy-badge{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:20px;padding:8px 16px;
  background:rgba(111,168,174,.14);
  color:var(--teal-deep);
  border:1px solid rgba(111,168,174,.3);
  border-radius:var(--r-pill);
  font-size:13px;font-weight:500;
  font-family:var(--sans);
}
.privacy-badge svg{width:14px;height:14px;flex-shrink:0}

main{padding-bottom:120px}

/* ── Tool cards (utilisées dans /outils/) ─────────────────────────────────── */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
  margin-top:32px;
}
.tool-card{
  position:relative;
  background:var(--cream-soft);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  padding:24px;
  display:flex;flex-direction:column;gap:12px;
  text-decoration:none;color:inherit;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
  box-shadow:var(--shadow-card);
}
.tool-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-card-hover);
  border-color:var(--ink);
  text-decoration:none;
}
.tool-card[aria-disabled="true"]{
  opacity:.55;cursor:default;pointer-events:none;
}
.tool-card .tool-icon{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream-deep);border-radius:var(--r-sm);
  color:var(--teal);
}
.tool-card .tool-icon svg{width:28px;height:28px}
.tool-card h3{font-family:var(--serif);font-size:20px;margin:0}
.tool-card p{color:var(--ink-soft);font-size:14.5px;margin:0;flex:1}
.tool-card .tool-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;
}
.tool-card .tool-card-cta{
  font-size:13.5px;font-weight:500;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;
}
.tool-card .tool-card-cta svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.tool-card:hover .tool-card-cta svg{transform:translateX(3px)}

/* ── Badges Free / Pro ────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;
  padding:4px 10px;border-radius:var(--r-pill);
  letter-spacing:0.03em;text-transform:uppercase;
}
.badge--free{background:rgba(111,168,174,.16);color:var(--teal-deep);border:1px solid rgba(111,168,174,.3)}
.badge--pro{background:rgba(232,145,124,.18);color:var(--coral-deep);border:1px solid rgba(232,145,124,.35)}
.badge--soon{background:var(--line);color:var(--ink-faint);border:1px solid var(--line-strong)}

/* ── Boutons (cohérents avec ceux de l'index) ─────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--r-pill);
  font-family:var(--sans);font-size:15px;font-weight:500;
  text-decoration:none;cursor:pointer;border:none;
  transition:background .25s var(--ease),color .25s var(--ease),
             transform .15s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{background:var(--coral)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-pro{
  background:linear-gradient(135deg,var(--coral),var(--coral-deep));
  color:var(--cream);
}
.btn-pro:hover{background:var(--coral-deep);transform:translateY(-1px);box-shadow:var(--shadow-card)}
.btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}

/* Tailles SVG par défaut dans les boutons & badges. Sans cette règle, un
   <svg><use href="#..."/></svg> sans width/height hérite des dimensions
   par défaut du navigateur (300×150 px) — boutons gigantesques. */
.btn svg,
button svg:not([width]):not([height]){
  width:16px;height:16px;flex-shrink:0;
}

/* ── Layout outil : panneau de contrôle à gauche, aperçu à droite ─────────── */
.tool-layout{
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(320px,1fr);
  gap:32px;
  align-items:start;
}
@media (max-width:880px){.tool-layout{grid-template-columns:1fr}}

.tool-panel{
  background:var(--cream-soft);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  padding:28px;
}
.tool-panel + .tool-panel{margin-top:0}

/* Sticky preview à droite : l'aperçu + les boutons d'export restent visibles
   quand l'utilisateur scrolle dans le formulaire à gauche. La nav fixe
   prend ~80px en haut, on garde 24px de marge pour le confort visuel.
   Désactivé en single-column (mobile) car ça n'a pas de sens. */
.tool-layout .tool-panel:nth-child(2){
  position:sticky;
  top:104px;
}
@media (max-width:880px){
  .tool-layout .tool-panel:nth-child(2){position:static;top:auto}
  /* Resserre le layout sur tablette : moins de gap entre panneaux, padding
     interne réduit. La largeur min de 320px par panneau est conservée. */
  .tool-layout{gap:20px}
  .tool-panel{padding:22px}
}

/* Mobile compact (< 520px) — l'espace est précieux, on resserre tout */
@media (max-width:520px){
  .tool-panel{padding:18px}
  .pro-section{padding:16px 18px;margin-top:18px}
  /* Le hero prend moins de place pour laisser voir le contenu plus vite */
  .page-header{padding:120px 0 28px}
  .page-header .deco{display:none}
  /* Segmented control : laisse les labels respirer sans min-width imposée */
  .segmented label{min-width:auto;font-size:13px;padding:8px 10px}
  /* Boutons d'export en pleine largeur (1 colonne) sur très petit écran —
     plus lisible et plus facile à toucher au doigt. */
  .qr-export-row{flex-direction:column;gap:8px}
  .qr-export-row .btn{width:100%;min-width:0}
  /* Aperçu et placeholder vide adaptés */
  .qr-preview{padding:16px}
  .qr-empty{padding:24px 16px}
}

/* Sections Pro dans les outils : léger contraste de fond pour matérialiser
   visuellement la zone premium, sans rupture brutale. Plus engageant qu'un
   simple border-top, et le user comprend immédiatement où commence la zone
   à débloquer. */
.pro-section{
  background:var(--cream-deep);
  border-radius:var(--r-md);
  padding:20px 22px;
  margin-top:24px;
  position:relative;
}
.pro-section + .pro-section{margin-top:18px}
.pro-section-header{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.pro-section-header h3{font-family:var(--serif);font-size:17px;margin:0}

/* ── Form controls (alignés sur ceux du formulaire de contact de l'index) ─ */
.field{margin-bottom:16px}
.field label{
  display:block;font-size:13px;font-weight:500;
  color:var(--ink-soft);margin-bottom:6px;
  letter-spacing:0.01em;
}
.field input[type="text"],
.field input[type="url"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field input[type="number"],
.field textarea,
.field select{
  width:100%;
  padding:11px 14px;
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--cream);
  font-family:var(--sans);font-size:15px;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(232,145,124,.18);
}
.field textarea{resize:vertical;min-height:90px;line-height:1.5}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}

/* Color input + range slider — pour les options Pro */
.field input[type="color"]{
  width:54px;height:38px;padding:2px;
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--cream);cursor:pointer;
}
.field-color-row{display:flex;align-items:center;gap:12px}
.field-color-row label{margin:0}

/* File input — styling cohérent avec le reste du form (le rendu natif est
   moche et incohérent entre navigateurs). On utilise ::file-selector-button
   pour styliser le bouton du sélecteur natif (supporté Chrome/Safari/Firefox
   depuis 2020). */
.field input[type="file"]{
  width:100%;
  padding:8px 10px;
  border:1.5px dashed var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--cream);
  font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.field input[type="file"]:hover{
  border-color:var(--ink);background:var(--cream-soft);
}
.field input[type="file"]:focus{
  outline:none;border-color:var(--ink);border-style:solid;
  box-shadow:0 0 0 3px rgba(232,145,124,.18);
}
.field input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:7px 16px;
  border-radius:var(--r-pill);
  border:none;
  background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-size:13px;font-weight:500;
  cursor:pointer;
  transition:background .2s var(--ease);
}
.field input[type="file"]::file-selector-button:hover{
  background:var(--coral);
}
/* Préfixe WebKit pour Safari < 14.1 (rare aujourd'hui mais coûte rien) */
.field input[type="file"]::-webkit-file-upload-button{
  margin-right:12px;
  padding:7px 16px;
  border-radius:var(--r-pill);
  border:none;
  background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-size:13px;font-weight:500;
  cursor:pointer;
}

/* Segmented control (pour le choix de type de QR) */
.segmented{
  display:flex;flex-wrap:wrap;gap:6px;
  background:var(--cream-deep);
  padding:5px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
}
.segmented input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.segmented label{
  flex:1;text-align:center;
  padding:8px 14px;
  font-size:13.5px;font-weight:500;
  color:var(--ink-soft);
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
  user-select:none;
  margin:0;
}
.segmented label:hover{color:var(--ink)}
.segmented input[type="radio"]:checked + label{
  background:var(--ink);color:var(--cream);
}

/* ── Overlay de verrouillage Pro (généré par pro.js sur [data-pro]) ───────── */
.pro-locked{
  position:relative;
}
.pro-locked > *{
  filter:blur(4px) saturate(.7);
  pointer-events:none;
  user-select:none;
}
.pro-lock-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(180deg,rgba(248,239,224,.55),rgba(248,239,224,.92));
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  border-radius:inherit;
  text-align:center;
  padding:24px;
  z-index:2;
}
.pro-lock-overlay .pro-lock-icon{
  width:36px;height:36px;color:var(--coral-deep);
}
.pro-lock-overlay .pro-lock-label{
  font-family:var(--serif);font-style:italic;
  font-size:15px;color:var(--ink-soft);
}
.pro-lock-overlay .pro-lock-cta{
  /* hérite de .btn .btn-pro */
}

/* ── Dialog waitlist (injecté par pro.js, partagé entre tous les outils) ── */
dialog.pro-waitlist{
  width:min(440px,calc(100% - 32px));
  border:none;border-radius:var(--r-md);
  background:var(--cream);color:var(--ink);
  padding:32px 28px;
  box-shadow:0 30px 80px -20px rgba(26,26,26,.5);
}
dialog.pro-waitlist::backdrop{
  background:rgba(26,26,26,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
dialog.pro-waitlist h2{
  font-family:var(--serif);font-size:24px;margin:0 0 8px;
}
dialog.pro-waitlist .lead{
  color:var(--ink-soft);font-size:14.5px;margin:0 0 22px;
}
dialog.pro-waitlist .close{
  position:absolute;top:12px;right:14px;
  background:transparent;border:none;cursor:pointer;
  font-size:22px;color:var(--ink-faint);line-height:1;
  padding:6px 10px;border-radius:var(--r-sm);
}
dialog.pro-waitlist .close:hover{color:var(--ink);background:var(--line)}
dialog.pro-waitlist .actions{
  display:flex;gap:10px;justify-content:flex-end;margin-top:8px;
}
dialog.pro-waitlist .success{
  text-align:center;padding:16px 4px;
}
dialog.pro-waitlist .success svg{color:var(--teal);width:40px;height:40px;margin-bottom:12px}
dialog.pro-waitlist .success p{color:var(--ink-soft);margin:0}
dialog.pro-waitlist [hidden]{display:none}

/* ── Aperçu QR (utilisé par /outils/qr-code) ─────────────────────────────── */
.qr-preview{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream);
  border-radius:var(--r-md);
  padding:24px;
  min-height:300px;
  border:1px solid var(--line);
  transition:background .25s var(--ease);
}
.qr-preview svg, .qr-preview canvas, .qr-preview img{
  max-width:100%;height:auto;display:block;
  transition:opacity .2s var(--ease);
}
.qr-preview canvas{
  /* Léger pop d'animation quand le QR se régénère */
  animation:qr-pop .25s var(--ease);
}
@keyframes qr-pop{
  from{transform:scale(.97);opacity:0}
  to{transform:scale(1);opacity:1}
}

/* État vide engageant (overlay si pas de contenu) */
.qr-empty{
  position:absolute;inset:24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;
  background:var(--cream);
  border-radius:calc(var(--r-md) - 6px);
  pointer-events:none;
  color:var(--ink-faint);
}
.qr-empty[hidden]{display:none}
.qr-empty svg{width:56px;height:56px;color:var(--teal);opacity:.55}
.qr-empty .qr-empty-title{
  font-family:var(--serif);font-size:18px;color:var(--ink-soft);font-style:italic;
}
.qr-empty .qr-empty-hint{
  font-size:13px;color:var(--ink-faint);max-width:240px;line-height:1.5;
}

.qr-export-row{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;
}
.qr-export-row .btn{flex:1;min-width:140px}

/* Fix HTML5 hidden : sans ça, [hidden] est override par les display:flex
   spécifiques aux composants ci-dessous (qr-capacity, qr-scan-hint, etc.) */
[hidden]{display:none !important}

/* Capacité du QR : barre fine + texte */
.qr-capacity{
  margin-top:14px;
  font-size:12.5px;color:var(--ink-faint);
  display:flex;align-items:center;gap:10px;
}
.qr-capacity-bar{
  flex:1;height:4px;
  background:var(--line);
  border-radius:2px;overflow:hidden;
}
.qr-capacity-fill{
  height:100%;background:var(--teal);
  width:0%;border-radius:2px;
  transition:width .3s var(--ease),background .2s var(--ease);
}
.qr-capacity-fill.is-warn{background:var(--accent-warn,#D29922);background:#D29922}
.qr-capacity-fill.is-full{background:var(--coral-deep)}
.qr-capacity-text{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Indicateur de scannabilité (badge sur l'aperçu) */
.qr-scan-hint{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--ink-faint);
  margin-top:12px;
}
.qr-scan-hint::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--teal);
}
.qr-scan-hint.is-warn::before{background:#D29922}
.qr-scan-hint.is-bad::before{background:var(--coral-deep)}

/* ── Validation live des inputs ─────────────────────────────────────────── */
.field-feedback{
  margin-top:6px;font-size:12.5px;
  color:var(--ink-faint);
  min-height:1.2em;  /* évite le saut quand le message apparaît */
  transition:color .2s var(--ease);
}
.field-feedback.is-valid{color:var(--teal-deep)}
.field-feedback.is-invalid{color:var(--coral-deep)}
.field-feedback .check{
  display:inline-flex;align-items:center;gap:4px;
}
.field-feedback svg{width:12px;height:12px}

/* Border colorée discrète selon état */
.field.is-valid input:not(:focus),
.field.is-valid textarea:not(:focus),
.field.is-valid select:not(:focus){
  border-color:rgba(111,168,174,.55);
}
.field.is-invalid input:not(:focus),
.field.is-invalid textarea:not(:focus),
.field.is-invalid select:not(:focus){
  border-color:rgba(214,117,96,.55);
}

/* ── Toast notifications (bas-droite, auto-disparition) ─────────────────── */
.toast-container{
  position:fixed;bottom:24px;right:24px;
  display:flex;flex-direction:column;gap:10px;
  z-index:1000;pointer-events:none;
}
.toast{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--cream);
  padding:12px 18px;border-radius:var(--r-pill);
  font-size:14px;font-weight:500;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.4);
  animation:toast-in .25s var(--ease),toast-out .25s var(--ease) 2.5s forwards;
  pointer-events:auto;
}
.toast svg{width:16px;height:16px;color:var(--teal)}
.toast.is-error svg{color:var(--coral)}
@keyframes toast-in{
  from{transform:translateY(16px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@keyframes toast-out{
  to{transform:translateY(16px);opacity:0}
}
@media (max-width:520px){
  .toast-container{left:16px;right:16px;bottom:16px}
  .toast{justify-content:center}
}

/* ── Footer (modèle simple, comme mentions/cgv) ────────────────────────────── */
.footer{background:var(--ink);color:var(--cream);padding:40px var(--gutter)}
.footer-inner{
  max-width:var(--container);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;
  font-size:13px;color:#FBF5EA99;
}
.footer a{color:var(--cream)}
.footer a:hover{color:var(--coral)}
.footer .links{display:flex;gap:24px;flex-wrap:wrap}
.made{font-family:var(--serif);font-style:italic}

/* ── Divider fleur (cohérent avec mentions/cgv) ──────────────────────────── */
.div-flower{display:flex;align-items:center;justify-content:center;gap:24px;margin:50px 0}
.div-flower .line{flex:1;height:1px;background:var(--line-strong);max-width:160px}
.div-flower svg{width:24px;height:24px}
.div-flower svg:first-of-type{color:var(--coral)}
.div-flower svg:last-of-type{color:var(--teal)}

/* ════════════════════════════════════════════════════════════════════════════
   OUTIL : Suppression d'arrière-plan (/outils/supprimer-arriere-plan)
   Composants spécifiques : zone de dépôt, aperçu damier, slider avant/après,
   barre de progression du modèle IA, swatches de fond, liste batch.
   ════════════════════════════════════════════════════════════════════════════ */

/* Motif damier réutilisable pour matérialiser la transparence (PNG détouré) */
.checker-bg{
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#0000000d 25%,transparent 25%),
    linear-gradient(-45deg,#0000000d 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#0000000d 75%),
    linear-gradient(-45deg,transparent 75%,#0000000d 75%);
  background-size:22px 22px;
  background-position:0 0,0 11px,11px -11px,-11px 0;
}

/* ── Zone de dépôt (drag & drop + clic + collage) ─────────────────────────── */
.dropzone{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-align:center;
  min-height:280px;
  padding:36px 24px;
  border:2px dashed var(--line-strong);
  border-radius:var(--r-md);
  background:var(--cream);
  cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.dropzone:hover{border-color:var(--ink);background:var(--cream-soft)}
.dropzone.is-dragover{
  border-color:var(--coral-deep);
  background:rgba(232,145,124,.08);
  transform:scale(1.005);
}
.dropzone .dz-icon{width:56px;height:56px;color:var(--teal);opacity:.6}
.dropzone .dz-title{font-family:var(--serif);font-size:20px;font-style:italic;color:var(--ink-soft)}
.dropzone .dz-hint{font-size:13.5px;color:var(--ink-faint);max-width:340px;line-height:1.55}
.dropzone .dz-formats{font-size:11.5px;color:var(--ink-faint);opacity:.85;letter-spacing:.02em}
/* L'input file couvre toute la zone, invisible (le visuel est géré par .dropzone) */
.dropzone input[type="file"]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:none;padding:0;
}

/* ── Réglages du détourage : tolérance + pipette ──────────────────────────── */
.bg-settings{
  margin:0 0 18px;
  padding:16px 18px;
  background:var(--cream-deep);
  border-radius:var(--r-md);
}
.slider-row{display:flex;align-items:center;gap:12px}
.slider-row input[type="range"]{flex:1;accent-color:var(--coral-deep);cursor:pointer}
.slider-row output{
  font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;color:var(--ink);
  min-width:26px;text-align:right;
}
.bg-tools-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.btn-tool{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-soft);
  padding:8px 14px;border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong);background:var(--cream);cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.btn-tool svg{width:15px;height:15px;flex-shrink:0}
.btn-tool:hover{border-color:var(--ink);color:var(--ink)}
.btn-tool.is-active{
  background:linear-gradient(135deg,var(--coral),var(--coral-deep));
  border-color:var(--coral-deep);color:var(--cream);
}
/* Curseur pipette sur l'aperçu quand le mode pipette est actif */
.compare.is-picking{cursor:crosshair}
.compare.is-picking .cmp-handle{display:none}

/* ── Aperçu du résultat (sur damier) + slider avant/après ─────────────────── */
.bg-stage{
  position:relative;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  overflow:hidden;
  min-height:300px;
  display:flex;align-items:center;justify-content:center;
}
.bg-stage .bg-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:40px 24px;color:var(--ink-faint);
}
.bg-stage .bg-empty svg{width:52px;height:52px;color:var(--teal);opacity:.5}
.bg-stage .bg-empty-title{font-family:var(--serif);font-size:18px;font-style:italic;color:var(--ink-soft)}
.bg-stage .bg-empty-hint{font-size:13px;color:var(--ink-faint);max-width:260px;line-height:1.5}

/* Slider de comparaison : image résultat (base, sur damier) + image originale
   révélée à gauche via clip-path piloté en JS (--cmp = position %). */
.compare{
  position:relative;width:100%;
  touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none;
  --cmp:50%;
}
.compare .cmp-base{display:block;width:100%;height:auto;max-height:540px;object-fit:contain;margin:0 auto}
.compare .cmp-before{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;
  clip-path:inset(0 calc(100% - var(--cmp)) 0 0);
  pointer-events:none;
}
.compare .cmp-handle{
  position:absolute;top:0;bottom:0;left:var(--cmp);
  transform:translateX(-50%);
  width:36px;display:flex;align-items:center;justify-content:center;
  z-index:3;
}
.compare .cmp-handle::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:2px;background:#fff;box-shadow:0 0 0 1px rgba(26,26,26,.18);
}
.compare .cmp-knob{
  position:relative;width:34px;height:34px;border-radius:50%;
  background:#fff;box-shadow:0 2px 10px rgba(26,26,26,.3);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
}
.compare .cmp-knob svg{width:18px;height:18px}
.compare .cmp-tag{
  position:absolute;bottom:10px;
  font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);
  background:rgba(26,26,26,.62);color:#fff;backdrop-filter:blur(4px);
  z-index:2;pointer-events:none;
}
.compare .cmp-tag.is-left{left:10px}
.compare .cmp-tag.is-right{right:10px}

/* Overlay "traitement en cours" */
.bg-busy{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(248,239,224,.84);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  text-align:center;padding:24px;border-radius:inherit;
}
.bg-busy .spinner{
  width:36px;height:36px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--coral);
  animation:spin .8s linear infinite;
}
.bg-busy .bg-busy-label{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-soft)}

/* ── Sélecteur de fond de remplacement (Pro) ──────────────────────────────── */
.bg-swatches{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px;align-items:center}
.bg-swatch{
  width:32px;height:32px;border-radius:9px;
  border:2px solid var(--line-strong);cursor:pointer;
  transition:transform .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease);
  padding:0;background-clip:padding-box;
}
.bg-swatch:hover{transform:scale(1.1)}
.bg-swatch.is-active{
  border-color:var(--ink);
  box-shadow:0 0 0 2px var(--cream),0 0 0 4px var(--ink);
}
.bg-swatch.swatch-transparent{
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#0000001f 25%,transparent 25%),
    linear-gradient(-45deg,#0000001f 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#0000001f 75%),
    linear-gradient(-45deg,transparent 75%,#0000001f 75%);
  background-size:12px 12px;
  background-position:0 0,0 6px,6px -6px,-6px 0;
}

/* ── Liste de traitement par lot (Pro) ────────────────────────────────────── */
.batch-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.batch-item{
  display:flex;align-items:center;gap:12px;
  padding:8px 10px;
  background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:13px;
}
.batch-item .bi-thumb{
  width:42px;height:42px;border-radius:7px;flex-shrink:0;
  object-fit:contain;
  background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0;
}
.batch-item .bi-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
.batch-item .bi-status{font-size:11.5px;color:var(--ink-faint);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.batch-item .bi-status.is-done{color:var(--teal-deep)}
.batch-item .bi-status.is-error{color:var(--coral-deep)}
.batch-item .bi-spin{
  width:13px;height:13px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--coral);
  animation:spin .8s linear infinite;display:inline-block;
}