/* ============================================================
     RESET & TOKENS
  ============================================================ */
  :root {
    /* V1.69 : PALETTE WALLRUS CHALEUREUSE & LUMINEUSE
       ------------------------------------------------------------
       Principe : le sombre ne s'impose JAMAIS en surface dominante.
       
       - Fonds : crème, blanc cassé, lumineux partout
       - Texte principal : OR foncé chaud (#8C6F22), pas anthracite
       - Trust strip : jaune VIP avec texte anthracite (signature Wallrus)
       - CTA principal : jaune VIP (déjà en place V1.68)
       - Accents : jaune VIP, or, corail CUT
       - Anthracite réservé : sur fonds jaunes (CTA, trust strip) pour lisibilité,
         et sur la card Skin qui reste sombre (contraste narratif intentionnel)
       
       Le nom des variables --lm-* est conservé pour ne pas casser les ~200
       références dans le code. La sémantique a juste changé :
       --lm = "couleur primaire Wallrus" = OR foncé maintenant. */
    --lm: #8C6F22;          /* OR foncé chaud — couleur primaire (texte titres, accents) */
    --lm-dark: #705820;     /* Or plus foncé pour hover/active */
    --lm-darker: #5C4810;   /* Or très foncé pour texte sur cremes clairs */
    --lm-soft: #F3E8C9;     /* Or très clair pour fonds doux, bordures */
    --lm-tint: #FFF9EB;     /* Cream légèrement doré pour fonds subtils */
    --ink: #2C2520;         /* Anthracite chaleureux (pas noir pur) pour fond jaune VIP */
    --ink-2: #4A3D2E;       /* Marron chaud pour textes secondaires */
    --ink-3: #7A6850;       /* Or moyen pour textes tertiaires */
    --paper: #ffffff;
    --paper-2: #FFFBF2;     /* Blanc cassé très chaud */
    --paper-3: #FFF4E0;     /* Crème prononcé */
    --line: rgba(140,111,34,0.10);   /* Lignes teintées or */
    --line-2: rgba(140,111,34,0.20);
    --vip: #FAC775;         /* Jaune VIP — signature produit ET CTA principal */
    --vip-d: #854F0B;
    --vip-dark: #E5B25E;    /* Hover du CTA */
    --vip-tint: #FFF4E0;
    --cut: #F0997B;         /* Corail CUT — signature produit conservée */
    --cut-d: #993C1D;
    --warn: #c44a1a;
    --warn-bg: #fef0e8;
    --shadow: 0 2px 8px rgba(140,111,34,0.08);
    --shadow-md: 0 8px 24px -8px rgba(140,111,34,0.20);
    --shadow-lm: 0 6px 20px -6px rgba(250,199,117,0.55);
    --display: 'Fraunces', Georgia, serif;
    --body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;

    /* V1.68/69 : couleur de la trust strip (bandeau du haut).
       Par défaut (mode standard Wallrus), JAUNE VIP avec texte anthracite.
       Overridée par applyRetailer() quand un partenaire est actif. */
    --trust-bg: var(--vip);
    --trust-fg: #1A1B20;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  /* V1.66 : retiré 'overscroll-behavior: none' qui empêchait le scroll trackpad
     sur Mac dans certains cas. Le rebond iOS est géré localement sur les zones
     de drag (.edit-photo-wrap, .scan-wrap) via overscroll-behavior: contain. */
  /* V2.7-r2 : Support de la police arabe (layout LTR conserve, pas de miroir).
     Decision UX : moins disruptif lors des switchs de langue. */
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&family=Amiri:wght@400;700&display=swap');
  html.lang-ar,
  html.lang-ar body {
    font-family: "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, sans-serif;
  }
  /* Titres serif Wallrus (Georgia/Playfair) -> Amiri en arabe (style elegant equivalent) */
  html.lang-ar h1,
  html.lang-ar h2,
  html.lang-ar .pdf-cover-title,
  html.lang-ar .modal-title,
  html.lang-ar .screen-title {
    font-family: "Amiri", "Noto Sans Arabic", serif;
  }
  /* V2.5-r2 : on garde overflow-x:hidden mais on RETIRE overscroll-behavior:none
     qui cassait le scroll trackpad Mac. Le bounce iOS sera gere autrement si necessaire. */
  html, body {
    overflow-x: hidden;
  }
  html {
    background: var(--paper-2);
  }
  /* Bounce iOS desactive UNIQUEMENT sur vrais devices touch (jamais sur Mac avec
     fenetre redimensionnee). pointer:coarse = doigt, pointer:fine = souris/trackpad. */
  @media (pointer: coarse) {
    html, body {
      overscroll-behavior-y: none;
    }
  }
  body {
    font-family: var(--body);
    background: var(--paper-2);
    color: var(--ink-2);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* r61 : trust-strip supprimée en r57, on garde uniquement la safe-area iOS (notch) */
    padding-top: env(safe-area-inset-top);
  }
  /* V1.69 : background autour de l'app sur desktop = crème doux,
     prolongement naturel de l'app pour pas casser la chaleur. */
  @media (min-width: 768px) {
    body {
      background: #F5EFE0;
    }
  }
  button { font-family: inherit; }

  /* ============================================================
     APP SHELL
  ============================================================ */
  .app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--paper);
    position: relative;
    box-shadow: 0 0 60px rgba(10,10,10,0.08);
  }

  /* V1.67 : co-branding revendeur — logo à l'extrémité droite du header.
     Wallrus à gauche, partenaire à droite : disposition équilibrée typique
     d'une vraie collaboration (cf. cover de press releases, annonces partenariats).
     V2.0-beta : sur mobile, on compresse le logo revendeur (max 70px au lieu de 110px)
     pour éviter le chevauchement avec "Measure" et les pills auth. */
  /* r62 : slot logo partenaire agrandi pour plus de présence visuelle */
  .retailer-logo-slot {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    line-height: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 180px;
    overflow: hidden;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(10,10,10,0.12);
  }
  /* V2.5 : les elements fixes ne se compriment JAMAIS, le retailer absorbe la contrainte */
  .auth-pill, .lang-toggle, .brand { flex-shrink: 0; }
  .retailer-logo-slot svg,
  .retailer-logo-slot img {
    height: 32px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
  }
  @media (max-width: 480px) {
    /* V2.5-rc6 : Mobile - on garde le texte (plus clair) mais on masque l icone
       et on raccourcit en "Connexion" pour gagner de la place. */
    .auth-pill svg { display: none !important; }
    .auth-pill { padding: 7px 12px !important; gap: 0 !important; font-size: 12px !important; }
    .lang-toggle { padding: 5px 9px; font-size: 10.5px; }
    /* r62 - Logo retailer encore plus grand sur mobile (presence partenaire maximale) */
    .retailer-logo-slot svg,
    .retailer-logo-slot img { max-width: 100%; height: 30px; width: auto; object-fit: contain; }
    .retailer-logo-slot { margin-left: 6px; padding-left: 6px; max-width: 200px; }
    .topbar-right { gap: 6px; }
    .topbar { padding: 12px 8px 12px 0; }
    /* V2.0-rc4 : sur mobile, on masque "Measure" même hors mode revendeur.
       Le mot italique 16px (~100px de large) faisait overflow le bouton "Se connecter"
       en état visiteur non-connecté. Le logo Wallrus suffit à l'identification. */
    .brand-suffix { display: none; }
    /* r77 - Règles hero mobile DÉPLACÉES dans le bloc override r74
       (@media max-width:767px, situé après les règles de base).
       Une seule source de vérité → plus de divergence selon la largeur. */
    .start-card-content > h2,
    .start-card-tagline { padding-right: 0; }
    /* r56 - Titre Georgia : réduit pour rester en 2 lignes max sur iPhone (375-414px) */
    .start-card-content > h2 {
      font-size: 36px;
      line-height: 1.1;
      letter-spacing: -0.01em;
    }
    .start-card-content > h2 em {
      display: block;
    }
    /* V2.0-rc5 : "jusqu'à -60%" (12 chars) dépassait à 22px en Fraunces sur chip ~110px.
       17px tient sur 1 ligne tout en restant lisible. Appliqué aux 3 chips (R=10,
       jusqu'à -60%, G→D) via la classe partagée pour symétrie visuelle. */
    .micro-stat-num { font-size: 17px; }
    /* V2.0-rc6 : "devient déco." en Fraunces 34px chevauchait .teaser-card-finishes
       (grille 118px en absolute right:16, bord gauche à x=241). On contraint le h2 à
       finir à x~221 sur mobile. Desktop conserve son impact visuel pleine largeur. */
    .teaser-card h2 { padding-right: 130px; }
    /* V2.0-rc6 : le bouton admin "·" (34px de hauteur, opacity 0.3) est le principal
       contributeur de l'espace blanc en bas. L'admin se fait au desktop de toute façon.
       Masquage mobile = -42px (button + margin-top). */
    .app-footer-admin-link { display: none; }
  }

  /* V1.62 : barre sticky en bas de l'écran 'Votre mur'
     Le CTA "Confirmer et continuer" reste toujours visible, même quand la liste
     des ouvertures pousse le contenu vers le bas. Inspiré des barres d'action
     iOS Mail / Apple Wallet.
     La barre est à l'intérieur de #screen-edit-dims et hérite du display:none
     du parent quand l'écran n'est pas actif (donc invisible sur les autres écrans). */
  .wall-sticky-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    z-index: 50;
    padding: 10px 18px max(16px, env(safe-area-inset-bottom));
    background: rgba(255,251,242,0.94);   /* V1.69 : crème transparent */
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -8px rgba(10,10,10,0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* V1.66 : centré sur l'écran Mac, max 480px comme le shell de l'app */
    max-width: 480px;
  }
  /* Bouton CTA dans la barre sticky : pas de margin, full width */
  .wall-cta {
    margin-top: 0 !important;
    width: 100%;
  }
  /* Bouton "Reprendre la photo" : lien discret au-dessus du CTA */
  .btn-link-retake {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--ink-3);
    font-family: var(--body);
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    transition: color 0.15s ease;
  }
  .btn-link-retake:hover { color: var(--ink); }
  .btn-link-retake:active { transform: scale(0.97); }

  /* V2.10 r24 : 2 actions secondaires inline sous photo (Reinitialiser + Reprendre) */
  .wall-secondary-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 4px 0;
    flex-wrap: wrap;
  }
  .wall-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-3);
    cursor: pointer;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.15s ease;
    font-family: var(--body);
    padding: 4px 6px;
  }
  .wall-action-link:hover { opacity: 1; }
  .wall-action-link:active { transform: scale(0.97); }
  .wall-action-sep {
    color: var(--ink-3);
    opacity: 0.4;
    font-size: 13px;
  }
  /* Sticky compact : un cran de moins (plus de btn-link-retake a l'interieur) */
  .wall-sticky-bar--compact .btn-link-retake { display: none; }

  /* V2.10 r33 : Sticky bottom Project Overview (pattern Votre mur).
     CTA principal 'Passage en caisse' (QR Leroy Merlin) + 2 liens secondaires. */
  .overview-action-spacer {
    height: 140px;
    pointer-events: none;
  }
  /* V2.10 r35-B : fix bug graphique sticky qui debordait sur mobile.
     - max-width pour ne pas deborder du viewport
     - margin auto pour centrer
     - padding safe-area iOS (env(safe-area-inset-bottom)) */
  .overview-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: linear-gradient(to top, #FFFBF2 85%, rgba(255, 251, 242, 0));
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(133, 79, 11, 0.08);
    box-sizing: border-box;
  }
  .overview-cta-primary {
    width: 100%;
    background: linear-gradient(135deg, #FAC775 0%, #F5B655 100%);
    color: #854F0B;
    border: 0;
    border-radius: 100px;
    padding: 16px 22px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(133, 79, 11, 0.18);
    transition: all 0.18s;
  }
  .overview-cta-primary:hover {
    box-shadow: 0 6px 18px rgba(133, 79, 11, 0.25);
    transform: translateY(-1px);
  }
  .overview-cta-primary:active { transform: scale(0.98); }
  .overview-cta-primary svg { flex-shrink: 0; }
  .overview-cta-pieces {
    background: rgba(133, 79, 11, 0.15);
    color: #854F0B;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 4px;
  }
  /* V2.10 r36-A : Refonte secondary actions en 2 vrais boutons stylises.
     Avant : liens texte discrets (afterthought).
     Apres : boutons ghost premium cote a cote, hierarchie claire vs PDF principal. */
  .overview-secondary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
  }
  .overview-cta-secondary {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(133, 79, 11, 0.15);
    color: #854F0B;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 14px;
    border-radius: 100px;
    transition: all 0.18s;
  }
  .overview-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(133, 79, 11, 0.3);
    transform: translateY(-1px);
  }
  .overview-cta-secondary:active { transform: scale(0.98); }
  .overview-cta-secondary svg {
    flex-shrink: 0;
    opacity: 0.75;
  }
  /* V2.4 : Wrapper bouton recadrer + jauge Puissance IA */
  .recadrer-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
  }
  .btn-recadrer {
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3) 100%);
    border: 1px solid rgba(0,0,0,0.08);
    color: var(--ink);
    font-family: var(--body);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
    flex-shrink: 0;
  }
  .btn-recadrer:hover {
    background: linear-gradient(180deg, var(--paper-3) 0%, #F5E8C9 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  .btn-recadrer:active { transform: scale(0.97); }
  .btn-recadrer-icon {
    display: inline-flex;
    align-items: center;
    color: var(--lm-dark);
  }
  .btn-recadrer-label {
    letter-spacing: -0.005em;
  }
  /* Jauge "Puissance IA" — container fixe (charte doree), seuls eclair + barre changent */
  .ai-power {
    flex: 1;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 16px;
    background: linear-gradient(135deg, rgba(250,199,117,0.12) 0%, rgba(250,199,117,0.04) 100%);
    border: 1px solid rgba(133,79,11,0.20);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .ai-power-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1;
    color: var(--lm-darker);
  }
  .ai-power-icon {
    display: inline-flex;
    color: #FAC775; /* JAUNE eclair par defaut (pleine puissance) */
    transition: color 0.4s ease;
  }
  .ai-power-label {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex: 1;
    color: var(--lm-darker);
  }
  .ai-power-value {
    font-family: var(--mono, "JetBrains Mono", monospace);
    font-weight: 500;
    font-size: 11px;
    color: var(--lm-dark);
    letter-spacing: 0.02em;
  }
  .ai-power-bar {
    height: 4px;
    background: rgba(133,79,11,0.10);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .ai-power-bar-fill {
    height: 100%;
    min-width: 6px;
    /* Vert olive doux, dans la palette terreuse Wallrus */
    background: linear-gradient(90deg, #6B8E3D 0%, #8FAE5C 60%, #A8C271 100%);
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(0.22,1,0.36,1), background 0.4s ease;
  }
  /* Etat "bas" : <= 30% restant — eclair orange + barre orange */
  .ai-power.is-low .ai-power-icon { color: #E97B3F; }
  .ai-power.is-low .ai-power-bar-fill {
    background: linear-gradient(90deg, #C2410C 0%, #E97B3F 60%, #F2A93C 100%);
  }
  /* Etat "depuise" : 0 restant — eclair rouge + barre rouge (min 6px visible) */
  .ai-power.is-depleted .ai-power-icon { color: #B23404; }
  .ai-power.is-depleted .ai-power-bar-fill {
    background: linear-gradient(90deg, #B23404 0%, #E64A19 100%);
    width: 6px !important; /* force visible meme si 0% */
  }
  /* Heartbeat sur l'eclair */
  .ai-power:not(.is-depleted) .ai-power-icon svg {
    animation: heartbeatPulse 1.8s ease-in-out infinite;
  }
  .ai-power.is-depleted .ai-power-icon svg {
    animation: heartbeatPulseWeak 2.6s ease-in-out infinite;
  }
  @keyframes heartbeatPulse {
    0%   { transform: scale(1);    opacity: 1; }
    12%  { transform: scale(1.18); opacity: 1; }
    22%  { transform: scale(0.98); opacity: 0.85; }
    34%  { transform: scale(1.12); opacity: 1; }
    44%  { transform: scale(1);    opacity: 0.95; }
    100% { transform: scale(1);    opacity: 1; }
  }
  /* V2.4 : Rolling counter pour la jauge AI Power */
  .ap-rolling-stack {
    position: relative;
    display: inline-block;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    vertical-align: top;
    min-width: 1.4em;
    text-align: right;
  }
  .ap-rolling-current,
  .ap-rolling-incoming {
    display: inline-block;
    transition: transform 0.85s cubic-bezier(0.22,1,0.36,1), opacity 0.85s ease;
    will-change: transform, opacity;
  }
  .ap-rolling-incoming {
    position: absolute;
    right: 0;
    top: 0;
  }
  .ap-rolling-enter-top    { transform: translateY(-100%); opacity: 0; }
  .ap-rolling-enter-bottom { transform: translateY( 100%); opacity: 0; }
  .ap-rolling-incoming-in  { transform: translateY(0);     opacity: 1; }
  .ap-rolling-exit-top     { transform: translateY(-100%); opacity: 0; }
  .ap-rolling-exit-bottom  { transform: translateY( 100%); opacity: 0; }

  @keyframes heartbeatPulseWeak {
    0%   { transform: scale(1);    opacity: 0.6; }
    14%  { transform: scale(1.06); opacity: 0.85; }
    28%  { transform: scale(0.98); opacity: 0.55; }
    100% { transform: scale(1);    opacity: 0.6; }
  }
    14%  { transform: scale(1.06); opacity: 0.85; }
    28%  { transform: scale(0.98); opacity: 0.55; }
    100% { transform: scale(1);    opacity: 0.6; }
  }
    50% { opacity: 0.7; transform: scale(1.08); }
  }
  /* Spacer pour que le contenu scrollable ne soit pas masqué par la barre */
  .wall-action-spacer {
    height: 110px;
  }

  /* V1.61 : footer marketing & légal sur l'accueil
     Discret, lisible, sans concurrencer le CTA principal. */
  .app-footer {
    margin-top: 22px;
    padding: 22px 14px 4px;
    border-top: 1px solid var(--line);
    text-align: center;
  }
  .app-footer-section {
    margin-bottom: 14px;
  }
  .app-footer-section:last-child {
    margin-bottom: 0;
  }
  .app-footer-aids {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--lm-darker);
    letter-spacing: 0.06em;
    line-height: 1.5;
  }
  .app-footer-divider {
    height: 1px;
    background: var(--line);
    margin: 16px auto;
    width: 60px;
  }
  .app-footer-company {
    font-family: var(--display);
    font-weight: 500;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  /* V1.63 : mention partenariat sous Verdian SAS */
  .app-footer-partnership {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    margin-top: 6px;
    letter-spacing: 0.04em;
  }
  .app-footer-partnership span:last-child {
    color: var(--lm-darker);
    font-weight: 700;
  }
  .app-footer-address {
    font-family: var(--body);
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 4px;
    line-height: 1.4;
  }
  .app-footer-made {
    font-family: var(--body);
    font-size: 10.5px;
    color: var(--ink-3);
    line-height: 1.5;
    font-style: normal;
    padding: 0 8px;
  }
  .app-footer-link {
    font-family: var(--body);
    font-size: 11px;
    color: var(--lm-dark);
    text-decoration: none;
    border-bottom: 1px dashed var(--lm-soft);
    padding-bottom: 1px;
    transition: border-color 0.15s ease;
  }
  .app-footer-link:hover {
    border-bottom-color: var(--lm-dark);
  }
  .app-footer-legal {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin-top: 16px;
    opacity: 0.7;
  }
  .app-footer-legal a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s;
  }
  .app-footer-legal a:hover {
    opacity: 1;
    text-decoration: underline;
  }
  /* V1.65 : lien admin ultra discret en pied de page.
     Un simple point cliquable, invisible pour 99% des utilisateurs. */
  .app-footer-admin-link {
    margin-top: 8px;
  }
  .admin-link {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 18px;
    line-height: 1;
    padding: 8px 16px;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .admin-link:hover,
  .admin-link:active { opacity: 0.7; }

  /* V1.65 : back-office Wallrus (écran admin) */
  .admin-tabs {
    display: flex;
    gap: 4px;
    margin: 20px 0 24px;
    overflow-x: auto;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  }
  .admin-tab {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--ink-3);
    font-family: var(--body);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .admin-tab:hover { color: var(--ink); }
  .admin-tab.is-active {
    color: var(--lm-dark);
    border-bottom-color: var(--lm);
    font-weight: 600;
  }
  .admin-panel.hidden { display: none; }
  .admin-stats-period-seg {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 3px;
    margin: 16px 0 24px;
    background: var(--paper-3);
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.06);
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-stats-period-seg::-webkit-scrollbar { display: none; }
  .admin-stats-period-btn {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  }
  .admin-stats-period-btn:hover:not(.is-active) {
    color: var(--ink);
    background: rgba(0,0,0,0.04);
  }
  .admin-stats-period-btn.is-active {
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  }
  .admin-stats-period-btn:focus-visible {
    outline: 2px solid var(--lm-dark);
    outline-offset: 2px;
  }
  /* V2.4 Reglages admin rapports */
  .admin-settings-card {
    background: var(--paper-2);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 20px;
    margin: 12px 0 28px;
  }
  .admin-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
  }
  .admin-settings-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -0.02em;
  }
  .admin-settings-desc {
    font-size: 13px;
    color: var(--ink-3);
    margin: 0 0 16px;
    line-height: 1.4;
  }
  .admin-settings-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
  }
  .admin-settings-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .admin-settings-select,
  .admin-settings-input {
    appearance: none;
    -webkit-appearance: none;
    background: var(--paper);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    width: 100%;
    box-sizing: border-box;
  }
  .admin-settings-select {
    padding-right: 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23705820' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 7px;
  }
  .admin-settings-select:focus,
  .admin-settings-input:focus {
    outline: none;
    border-color: var(--lm-dark);
    box-shadow: 0 0 0 3px rgba(112,88,32,0.15);
  }
  .admin-settings-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
  }
  .admin-settings-save-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: var(--lm-dark);
    color: var(--paper);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s ease, opacity 0.18s ease;
  }
  .admin-settings-save-btn:hover:not(:disabled) {
    background: var(--lm-darker);
  }
  .admin-settings-save-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .admin-settings-test-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid rgba(0,0,0,0.15);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s ease;
  }
  .admin-settings-test-btn:hover {
    background: rgba(0,0,0,0.04);
  }
  .admin-settings-status {
    font-size: 13px;
    color: var(--ink-3);
    font-style: italic;
  }
  .admin-settings-status.is-success { color: #2D7A3A; font-style: normal; font-weight: 500; }
  .admin-settings-status.is-error { color: #C0392B; font-style: normal; font-weight: 500; }
  /* Toggle switch iOS-like */
  .admin-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
  }
  .admin-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .admin-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.18);
    border-radius: 999px;
    transition: background 0.2s ease;
  }
  .admin-toggle-slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    top: 3px;
    background: var(--paper);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
  }
  .admin-toggle-switch input:checked + .admin-toggle-slider {
    background: var(--lm-dark);
  }
  .admin-toggle-switch input:checked + .admin-toggle-slider::before {
    transform: translateX(18px);
  }
  /* V2.4 Bandeau IA indispo */
  .ai-skipped-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #FFF4DC;
    border: 1px solid #F2C679;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 14px 0 18px;
    color: #5C4810;
  }
  .ai-skipped-banner-icon {
    flex-shrink: 0;
    color: #B07811;
    display: flex;
    align-items: center;
    padding-top: 1px;
  }
  .ai-skipped-banner-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.45;
  }
  .ai-skipped-banner-text strong {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
    color: #5C4810;
  }
  .ai-skipped-banner-text span {
    color: #6E5A30;
  }
  .admin-section-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: 18px;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .admin-section-desc {
    font-family: var(--body);
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .admin-section-desc code {
    font-family: var(--mono);
    background: var(--paper-3);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    color: var(--ink-2);
  }
  .admin-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .admin-list-item {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .admin-list-item-main {
    flex: 1;
    min-width: 0;
  }
  .admin-list-item-name {
    font-family: var(--display);
    font-weight: 500;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .admin-list-item-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    margin-top: 4px;
    letter-spacing: 0.04em;
  }
  .admin-list-item-actions {
    display: flex;
    gap: 8px;
  }
  .admin-list-item-btn {
    appearance: none;
    background: var(--paper-3);
    border: 1px solid var(--line);
    color: var(--ink-2);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .admin-list-item-btn:hover { background: var(--lm-tint); color: var(--lm-darker); border-color: var(--lm-soft); }
  .admin-list-item-btn-danger:hover { background: #FEE; color: #B00; border-color: #FCC; }
  .admin-list-item-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--paper-3);
    object-fit: cover;
    flex-shrink: 0;
  }
  .admin-retailer-tester {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .admin-retailer-tester button {
    appearance: none;
    background: var(--paper-2);
    border: 1px solid var(--line);
    padding: 8px 14px;
    border-radius: 8px;
    font-family: var(--body);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .admin-retailer-tester button:hover { background: var(--lm-tint); color: var(--lm-darker); }
  .admin-content-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .admin-content-fields label {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .admin-content-fields label span {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .admin-content-fields input {
    appearance: none;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--body);
    font-size: 14px;
    color: var(--ink);
    -webkit-appearance: none;
  }
  .admin-content-fields input:focus {
    outline: none;
    border-color: var(--lm);
    box-shadow: 0 0 0 3px var(--lm-tint);
  }
  .admin-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .admin-tool-btn {
    appearance: none;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .admin-tool-btn strong {
    font-family: var(--body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
  }
  .admin-tool-btn small {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
  }
  .admin-tool-btn:hover { background: var(--lm-tint); border-color: var(--lm-soft); }
  .admin-tool-btn-danger:hover { background: #FEE; border-color: #FCC; }
  .admin-tool-btn-danger strong { color: #B00; }
  #adminStateDump {
    background: var(--paper-3);
    border-radius: 8px;
    padding: 12px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-2);
    margin-top: 12px;
    overflow: auto;
    max-height: 300px;
    white-space: pre-wrap;
    word-break: break-all;
  }
  .admin-bottom-bar {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    text-align: center;
  }

  /* V1.60 : toggle langue dans header (FR ↔ EN) */
  .lang-toggle {
    appearance: none;
    background: var(--paper-3);
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .lang-toggle:hover { background: var(--lm-tint); color: var(--lm-darker); }
  .lang-toggle:active { transform: scale(0.95); }
  /* V2.6 : nouveau picker langue avec drapeau + dropdown */
  .lang-picker {
    position: relative;
    flex-shrink: 0;
  }
  .lang-pill {
    appearance: none;
    background: var(--paper-3);
    border: 1px solid var(--line);
    color: var(--ink-2);
    padding: 5px 8px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .lang-pill:hover { background: var(--lm-tint); }
  .lang-pill:active { transform: scale(0.95); }
  .lang-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
  }
  .lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: #FFFBF2;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 24px -4px rgba(20,15,5,0.18), 0 2px 6px rgba(20,15,5,0.06);
    padding: 6px;
    z-index: 100;
    display: none;
    flex-direction: column;
    gap: 2px;
  }
  .lang-menu.is-open { display: flex; }
  .lang-menu-item {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--ink);
    font-family: var(--body);
    font-size: 14px;
    text-align: left;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.12s ease;
  }
  .lang-menu-item:hover { background: var(--paper-2); }
  .lang-menu-item.is-active {
    background: var(--vip-tint, #FCEFD0);
    font-weight: 600;
  }
  .lang-menu-item .lang-flag { width: 22px; height: 22px; }

  /* V1.59 : renommé de lm-strip → trust-strip
     V1.68 : couleurs via variables --trust-bg / --trust-fg, overridées par applyRetailer
     selon le partenaire actif. Permet à chaque revendeur d'avoir sa couleur signature
     dans le bandeau du haut, tandis que le reste de l'app reste neutre Wallrus. */
  /* V2.5 : Fine ligne coloree en bas, couleur du retailer (var --trust-bg).
     Position fixed pour rester visible meme en scrollant. */
  .trust-strip-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(4px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--trust-bg, transparent);
    z-index: 100;
    pointer-events: none;
    transition: background 0.3s ease;
  }
  /* Sans retailer (Wallrus neutre) : pas de bandeau bas visible */
  body:not(.has-retailer) .trust-strip-bottom { display: none; }

  .trust-strip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--trust-bg);
    color: var(--trust-fg);
    padding: 6px 22px;
    /* Safe area iOS : ajoute le padding du notch */
    padding-top: max(6px, env(safe-area-inset-top));
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .trust-strip .pulse {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px;
    background: rgba(255,251,242,0.94);   /* V1.69 : crème transparent au lieu de blanc */
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    position: sticky; top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--line);
  }
  .topbar-left { display: flex; align-items: center; gap: 10px; }
  /* V1.67 : groupe d'éléments à droite du header (logo revendeur + toggle langue).
     Le revendeur est à l'extrémité droite, naturellement opposé au logo Wallrus. */
  .topbar-right { display: flex; align-items: center; gap: 10px; }

  /* V2.0-alpha : pill auth (Se connecter / Mon compte).
     V2.0-rc1 : texte TOUJOURS visible (mobile + desktop) pour clarté maximale.
     C'est plus important d'être compréhensible que compact.
     La pill "Se connecter" est styled comme un CTA discret mais visible. */
  .auth-pill {
    appearance: none;
    background: var(--lm);
    border: 1px solid var(--lm-dark);
    color: #fff;
    font-family: var(--body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 6px -2px rgba(140,111,34,0.40);
  }
  .auth-pill:hover { background: var(--lm-dark); transform: translateY(-1px); }
  .auth-pill:active { transform: scale(0.96); }
  .auth-pill-account {
    background: var(--vip);
    border-color: rgba(140,111,34,0.30);
    color: #1A1B20;
    box-shadow: 0 2px 6px -2px rgba(250,199,117,0.55);
  }
  .auth-pill-account:hover { background: var(--vip-dark); color: #1A1B20; transform: translateY(-1px); }
  .auth-pill svg { flex-shrink: 0; }

  /* V2.0-rc1 : sur mobile très étroit (≤380px), on réduit juste un peu le padding
     mais on garde le texte. */
  @media (max-width: 380px) {
    .auth-pill { padding: 6px 10px; font-size: 11px; gap: 4px; }
    .auth-pill svg { width: 12px; height: 12px; }
  }
  .back-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 0;
    background: var(--paper-3);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .back-btn:active { transform: scale(0.92); }
  .back-btn svg { width: 16px; height: 16px; color: var(--ink); }
  /* V2.0-rc6 : fallback "width:0 + visibility:hidden" pour libérer l'espace du back-btn
     sur welcome (logo Wallrus moins centré) sans casser la transition welcome → autre
     écran. display:none aurait produit un shift abrupt de 44px non animé.
     Gap flex 10px reste appliqué → shift résiduel de 34px à la transition. */
  .back-btn.hidden {
    visibility: hidden;
    pointer-events: none;
    width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  /* V1.36 : logo Wallrus officiel (SVG vectoriel) */
  .brand { display: flex; align-items: center; gap: 10px; }
  .brand-logo {
    height: 22px;
    width: auto;
    display: block;
    /* V1.70 : logo cliquable = raccourci accueil */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease;
  }
  .brand-logo:hover { opacity: 0.7; }
  .brand-logo:active { opacity: 0.5; }
  .brand-logo svg {
    height: 100%;
    width: auto;
    display: block;
  }
  .brand-logo svg path,
  .brand-logo svg polygon {
    fill: var(--ink);
  }
  .brand-suffix {
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    font-size: 16px;
    color: var(--lm-dark);
    letter-spacing: -0.01em;
    line-height: 1;
    border-left: 1.5px solid var(--line-2);
    padding-left: 10px;
    margin-left: 2px;
  }

  /* V2.0-rc1 : quand un revendeur est actif, on masque "Measure" PARTOUT
     (mobile + desktop). Cohérent : "Wallrus | Leroy Merlin" est plus lisible
     que "Wallrus | Measure Leroy Merlin". Mode standard sans revendeur :
     "Wallrus | Measure" reste visible (c'est notre nom de produit). */
  body.has-retailer .brand-suffix { display: none; }

  .lm-tag {
    display: flex; align-items: center; gap: 5px;
    background: var(--lm-soft);
    padding: 5px 9px 5px 7px;
    border-radius: 100px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--lm-darker);
  }
  .lm-tag .tri {
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--lm);
  }

  /* ============================================================
     SCREENS
  ============================================================ */
  .screen {
    display: none;
    padding: 14px 22px 120px;
    box-sizing: border-box;
    /* V1.47 : transition raffinée. Légèrement plus rapide (0.32s) que l'ancienne 0.4s,
       avec un easing custom qui donne une sensation iOS-like. */
    animation: screenIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .screen.active { display: block; }

  /* V1.37 : adaptation petit écran (iPhone < 400px) — padding réduit pour éviter scroll horizontal */
  @media (max-width: 400px) {
    .screen { padding: 14px 16px 120px; }
  }
  /* V2.0-rc6 : welcome n'a pas de sticky bar bottom (contrairement à edit-dims etc.),
     donc les 120px de padding-bottom hérités de .screen sont du dead space.
     Réduit à 4px (combiné avec .app-footer padding-bottom 4 et masquage admin-link mobile)
     pour ramener le total sous 12px avant le chrome navigateur (theme-color #78BE20). */
  #screen-welcome { padding-bottom: 4px; }
  /* V1.47 : slide léger + fade (était fadeUp avec translateY 8px → maintenant translateX 12px) */
  @keyframes screenIn {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
  }
  /* V1.47 : respect prefers-reduced-motion (accessibilité, exigence Apple Store et UE) */
  @media (prefers-reduced-motion: reduce) {
    .screen { animation: none; }
  }

  /* ============================================================
     V1.47 — STEPPER (parcours visuel "X sur 4")
     Discret, en haut de chaque écran de flow. S'auto-affiche/masque
     selon l'étape via JS. Inspiré Apple Setup / Stripe Checkout.
  ============================================================ */
  .step-bar {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 22px 0;
    margin-top: -4px;
    user-select: none;
  }
  .step-bar.is-visible { display: flex; }
  .step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lm-soft);
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .step-dot.is-current {
    background: var(--lm);
    transform: scale(1.3);
  }
  .step-dot.is-done {
    background: var(--lm-dark);
  }
  .step-line {
    width: 14px;
    height: 2px;
    background: var(--lm-soft);
    transition: background 0.25s ease;
  }
  .step-line.is-done { background: var(--lm-dark); }
  .step-label {
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    margin-left: 10px;
    text-transform: uppercase;
    font-weight: 500;
  }
  @media (prefers-reduced-motion: reduce) {
    .step-dot, .step-line { transition: none; }
  }

  /* TYPOGRAPHIC HEROES */
  h1.h-hero {
    font-family: var(--display);
    font-weight: 400;
    font-size: 38px;
    line-height: 1.0;
    letter-spacing: -0.035em;
    margin: 18px 0 10px;
  }
  h1.h-hero em { font-style: italic; color: var(--lm-dark); }
  h1.h-mid {
    font-family: var(--display);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 18px 0 8px;
  }
  h1.h-mid em { font-style: italic; color: var(--lm-dark); }
  .lede {
    font-size: 14px;
    color: var(--ink-3);
    margin-bottom: 22px;
    max-width: 32ch;
    line-height: 1.5;
  }

  /* ============================================================
     WELCOME — Apple-like minimal
  ============================================================ */
  .slogan {
    text-align: center;
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    color: var(--lm-darker);
    margin: 8px 0 16px;
    letter-spacing: -0.005em;
    opacity: 0.8;
  }

  /* V1.68 : carte d'accueil refondue.
     Fond crème chaleureux (cohérent avec --paper-2/--paper-3), accents jaune VIP
     pour signature produit. CTA principal en jaune VIP (texte anthracite),
     très différenciant et chaleureux — c'est le seul élément coloré dominant
     de l'écran d'accueil. */
  /* r60 - Hero ZONE 1 : full-bleed jaune VIP dégradé + bord arrondi inférieur dramatique */
  .start-card {
    background: linear-gradient(160deg, #FAC775 0%, #F4B86A 60%, #EFA85E 100%);
    color: #1A1B20;
    border-radius: 0 0 40px 40px;
    padding: 24px 24px 32px;
    /* r69 - margin-top négatif renforcé : zone jaune VRAIMENT à ras de la topbar */
    margin: -14px -16px 14px -16px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
    border: none;
    box-shadow: 0 12px 28px rgba(189, 130, 47, 0.18);
  }
  .start-card:active { transform: scale(0.99); }
  .start-card::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(255, 230, 180, 0.45) 0%, transparent 65%);
    pointer-events: none;
  }
  .start-card::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(240, 153, 123, 0.22) 0%, transparent 65%);
    pointer-events: none;
  }
  /* r62 - Desktop : alignement Skin, on garde le bord arrondi inférieur dramatique */
  /* r79 - Mode desktop hero SUPPRIMÉ : un seul mode (compact) pour
     toutes les largeurs. Mac et iPhone rendent strictement à l'identique.
     L'app est plafonnée à max-width:480px → le mode compact suffit partout. */
  .start-card-content { position: relative; z-index: 1; }
  .start-card .kicker {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(26, 27, 32, 0.72);
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 8px;
    font-weight: 700;
  }
  .start-card .kicker .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #1A1B20;
    animation: pulse 1.8s ease-in-out infinite;
  }
  .start-card h2 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin-bottom: 14px;
    color: var(--ink);
  }
  .start-card h2 em {
    font-style: italic;
    color: var(--vip-d);
  }
  /* r60 - Hero zoné jaune full-bleed (style For Buddy) */
  .hero-title-v3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: #1A1B20;
    margin: 0 0 0 0;
    text-align: left;
  }
  /* r65 - Titre fixe 2 lignes : chaque span sur sa ligne, pas de re-wrap */
  .hero-title-v3 span {
    display: block;
    white-space: nowrap;
  }
  .hero-title-v3 br { display: none; }
  /* Preuve sociale subtile */
  .hero-social-proof {
    margin-top: 18px;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(26, 27, 32, 0.45);
    text-transform: uppercase;
    font-weight: 600;
  }
  /* Desktop : titre plus grand, toujours 2 lignes fixes */
  /* r79 - Titre desktop supprimé : taille unique pour toutes largeurs */
  /* iPhone SE : titre réduit pour que la ligne 1 tienne en nowrap */
  @media (max-width: 360px) {
    .hero-title-v3 { font-size: 27px; }
  }
  .start-card-tagline {
    font-family: var(--body);
    font-weight: 500;
    font-size: 13px;
    color: var(--ink-2);
    margin-bottom: 20px;
    line-height: 1.45;
    letter-spacing: 0.01em;
  }
  .start-card-tagline strong { color: var(--ink); font-weight: 700; }

  /* r67 - Wrapper : bouton large + phone qui chevauche le coin droit.
     Le bouton s'arrête avant le bord droit, le phone dépasse par-dessus. */
  .cta-with-phone {
    position: relative;
    margin-top: 30px;
    padding-right: 56px;
  }
  /* r68 - Phone à droite, recouvre partiellement la flèche → flèche devinée */
  .start-card-product {
    position: absolute;
    right: -4px;
    bottom: -10px;
    width: 118px;
    height: 165px;
    pointer-events: none;
    z-index: 5;
  }
  .start-card-product svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 12px 24px rgba(15, 25, 5, 0.18))
            drop-shadow(0 4px 8px rgba(15, 25, 5, 0.10));
  }

  /* ============================================================
     r74 - OVERRIDE HERO MOBILE
     Placé APRÈS les règles de base du hero pour GAGNER en cascade CSS.
     Le bloc @media en haut du fichier (ligne ~206) était écrasé par
     les règles de base situées plus bas. Ce bloc-ci, situé après,
     applique enfin les valeurs mobile correctes.
  ============================================================ */
  /* r79 - Mode compact appliqué à TOUTES les largeurs (plus de @media) */
  @media (max-width: 99999px) {
    .cta-with-phone { margin-top: 32px; padding-right: 0; }
    .start-card-product { width: 84px; height: 117px; bottom: -6px; right: -2px; }
    .start-card-action { padding-right: 92px; }
    .start-card-camera { width: 34px; height: 34px; }
    .start-card-camera svg { width: 17px; height: 17px; }
    .start-card-action-text span { font-size: 10px; letter-spacing: 0.01em; }
    .start-card-action-text strong { font-size: 17px; }
  }

  /* r60 - CTA principal SOMBRE flottant qui chevauche ZONE 1 (jaune) et ZONE 2 (blanc).
     Style "For Buddy search bar" : pilule premium qui pop visuellement par contraste. */
  .start-card-action {
    display: flex; align-items: center; gap: 14px;
    background: #1A1B20;
    /* r68 - bouton large, moins arrondi, texte calé à gauche */
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
    color: #FAC775;
    padding: 16px 20px;
    /* r68 - place à droite pour que le phone chevauche le coin + flèche devinée */
    padding-right: 64px;
    border-radius: 22px;
    justify-content: flex-start;
    margin: 16px 8px 0 8px;
    box-shadow: 0 16px 36px rgba(26, 27, 32, 0.28),
                0 4px 12px rgba(26, 27, 32, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    z-index: 3;
  }
  .start-card-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 40px rgba(26, 27, 32, 0.32),
                0 6px 14px rgba(26, 27, 32, 0.22);
  }
  .start-card-action:active { transform: translateY(0); }
  .start-card-camera {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(250, 199, 117, 0.18);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .start-card-camera svg { width: 20px; height: 20px; color: #FAC775; }
  /* r79 - Bouton desktop supprimé : style unique pour toutes largeurs */
  .start-card-action-text { flex: 0 1 auto; min-width: 0; overflow: visible; }
  .start-card-action-text strong {
    font-size: 16px; font-weight: 700;
    display: block;
    letter-spacing: -0.005em;
    color: #FFFFFF;
    margin-bottom: 1px;
  }
  .start-card-action-text span {
    font-size: 10.5px;
    opacity: 0.62;
    font-family: var(--mono);
    letter-spacing: 0.04em;
    font-weight: 600;
    color: #FFFFFF;
    display: block;
    white-space: nowrap;
  }
  .start-card-arrow {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(250, 199, 117, 0.18);
    display: flex; align-items: center; justify-content: center;
    color: #FAC775;
    font-size: 16px;
    flex-shrink: 0;
    font-weight: 700;
    /* r68 - flèche repoussée tout à droite, sera partiellement recouverte
       par le phone qui chevauche → effet "flèche devinée" */
    margin-left: auto;
  }

  /* ============================================================
     V1.48 — CARTE SKIN TEASING (gamme à venir)
     Visuellement cohérente avec start-card mais palette froide
     (bleu nuit + jute + marbre) pour un effet "premium en attente".
     Pas cliquable. Badge "Prochainement" animé qui attire l'œil
     sans frustrer.
  ============================================================ */
  .teaser-card {
    background: linear-gradient(135deg, #1a2030 0%, #2a3548 60%, #324560 100%);
    color: #f6f3ec;
    border-radius: 28px;
    padding: 26px 24px 24px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: default;
  }
  .teaser-card::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(196,170,120,0.18) 0%, transparent 65%);
    pointer-events: none;
  }
  .teaser-card::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(120,190,32,0.10) 0%, transparent 65%);
    pointer-events: none;
  }
  .teaser-card-content { position: relative; z-index: 1; }

  .teaser-card .kicker {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    /* V2.0-rc2 : doré clair (entre --vip #FAC775 et le tan d'origine #c4aa78)
       pour mieux accrocher l'œil sur le fond navy sans casser la sobriété. */
    color: #E5C792;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
    font-weight: 700;
  }
  .teaser-card .kicker .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #E5C792;
    animation: pulse 1.8s ease-in-out infinite;
  }
  .teaser-card h2 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin-bottom: 14px;
    color: #f6f3ec;
  }
  .teaser-card h2 em {
    font-style: italic;
    color: #c4aa78;
  }
  .teaser-card-tagline {
    font-family: var(--body);
    font-weight: 500;
    font-size: 13px;
    color: rgba(246,243,236,0.72);
    margin-bottom: 20px;
    line-height: 1.45;
    letter-spacing: 0.01em;
    max-width: 60%;  /* laisse de la place aux 4 finitions à droite */
  }
  .teaser-card-tagline strong { color: #f6f3ec; font-weight: 700; }

  /* Vignettes des 4 finitions, en grille 2x2 dans le coin droit */
  .teaser-card-finishes {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
  }
  .teaser-finish {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08);
    overflow: hidden;
    position: relative;
  }
  .teaser-finish svg { width: 100%; height: 100%; display: block; }
  .teaser-finish-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-family: var(--mono);
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 0;
    text-align: center;
  }

  /* Pseudo-bouton "Prochainement" — non cliquable, mais attractif */
  .teaser-card-action {
    display: flex; align-items: center; gap: 12px;
    background: rgba(196,170,120,0.15);
    border: 1px solid rgba(196,170,120,0.35);
    color: #f6f3ec;
    padding: 14px 16px;
    border-radius: 100px;
    margin-top: 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .teaser-card-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #c4aa78;
  }
  .teaser-card-icon svg { width: 18px; height: 18px; }
  .teaser-card-action-text { flex: 1; }
  .teaser-card-action-text strong {
    font-size: 15px; font-weight: 700;
    display: block;
    letter-spacing: -0.005em;
    color: #f6f3ec;
  }
  .teaser-card-action-text span {
    font-size: 11px;
    color: #c4aa78;
    font-family: var(--mono);
    letter-spacing: 0.04em;
    font-weight: 600;
  }
  /* Badge animé "Prochainement" en coin haut droit */
  .teaser-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #c4aa78;
    color: #1a2030;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 4px 10px;
    border-radius: 100px;
    text-transform: uppercase;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0,0,0,0.20);
    animation: shimmer 3s ease-in-out infinite;
  }
  @keyframes shimmer {
    0%, 100% { background: #c4aa78; }
    50% { background: #d8be8c; }
  }
  /* V2.0-rc5 : sur mobile, le badge passe en flow (above kicker) pour éviter l'overlap
     sur "SKIN · LA NOUVELLE GÉNÉRATION". Override placé APRÈS la règle par défaut
     position:absolute (sinon la règle plus tardive en source order gagne au runtime). */
  @media (max-width: 480px) {
    .teaser-badge {
      position: static;
      display: inline-block;
      margin: 0 0 14px 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .teaser-badge { animation: none; }
    .teaser-card .kicker .dot { animation: none; }
  }

  /* Mini formulaire "M'avertir" : petit lien discret en bas */
  .teaser-notify {
    margin-top: 12px;
    text-align: center;
    font-size: 11px;
    color: rgba(246,243,236,0.55);
    font-family: var(--mono);
    letter-spacing: 0.06em;
  }
  .teaser-notify-btn {
    background: none;
    border: none;
    color: #c4aa78;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 0 4px;
  }

  /* Quick stats row Apple-style */
  /* V1.57 : ligne mention dispositifs d'aide sur l'accueil */
  /* V1.59 : section "Disponible chez nos partenaires"
     Discrète mais présente, signale que Wallrus est multi-revendeurs.
     V1.67 : carte "Vous achetez chez X" supprimée (redondante avec header). */

  .retailers-section {
    margin-top: 28px;
    padding: 18px 14px 14px;
    border-top: 1px solid var(--line);
  }
  .retailers-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 12px;
  }
  .retailers-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .retailer-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 140px;
  }
  .retailer-name {
    font-family: var(--body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    flex: 1;
  }
  .retailer-tag {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--ink-3);
    background: var(--paper-3);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
  }
  .retailer-card-soon {
    border-style: dashed;
    opacity: 0.65;
  }
  .retailer-card-soon .retailer-name {
    color: var(--ink-3);
  }

  /* r194 : Normes & Certifications (remplace .retailers-section sur app.wallrus.fr) */
  .certifications-section {
    margin-top: 28px;
    padding: 22px 14px 18px;
    border-top: 1px solid var(--line);
  }
  .certifications-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--lm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 4px;
  }
  .certifications-sub {
    font-family: var(--body);
    font-size: 12px;
    color: var(--ink-3);
    text-align: center;
    margin-bottom: 14px;
    line-height: 1.4;
    padding: 0 8px;
  }
  .certifications-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
  }
  .cert-card {
    background: var(--paper);
    border: 1px solid rgba(133,79,11,0.15);
    border-radius: 12px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    position: relative;
  }
  /* r196b : icone info cliquable - fix Safari iOS (couleur bleue + position) */
  .cert-info {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ink-3) !important;
    text-decoration: none !important;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    z-index: 2;
    margin: 0;
    padding: 0;
  }
  .cert-info svg {
    color: var(--ink-3);
    stroke: currentColor;
    fill: none;
  }
  .cert-info:link, .cert-info:visited {
    color: var(--ink-3) !important;
  }
  .cert-info:hover, .cert-info:active, .cert-info:focus {
    color: var(--lm) !important;
    background: rgba(140,111,34,0.08);
    outline: none;
  }
  .cert-info:hover svg, .cert-info:active svg, .cert-info:focus svg {
    color: var(--lm);
  }
  .cert-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FAEEDA 0%, #FAC775 100%);
    border: 1px solid #EF9F27;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cert-title {
    font-family: var(--body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.2px;
  }
  .cert-sub {
    font-family: var(--body);
    font-size: 10px;
    color: var(--ink-3);
    line-height: 1.3;
  }


  .welcome-aids {
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin-top: -8px;
    margin-bottom: 18px;
    padding: 0 12px;
  }
  .welcome-aids strong {
    color: var(--lm-dark);
    font-weight: 700;
  }

  /* V2.10 r22 : hairline discrete entre Partenaires et Stats sur Welcome.
     Couleur VIP texte a 8% opacite = perceptible sans alourdir. */
  .micro-stats.micro-stats--hairline {
    border-top: 1px solid rgba(133, 79, 11, 0.08);
    padding-top: 28px;
    margin-top: 16px;
  }

  .micro-stats {
    display: flex; justify-content: space-between;
    padding: 14px 6px;
    margin-bottom: 8px;
  }
  .micro-stat { text-align: center; flex: 1; }
  .micro-stat-num {
    font-family: var(--display);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
  }
  .micro-stat-lab {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 4px;
    font-weight: 600;
  }

  .cart-pill {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 12px;
    width: 100%;
    color: var(--ink);
  }
  .cart-pill:hover { border-color: var(--lm); }
  .cart-pill svg { color: var(--lm-darker); }
  .cart-pill .count {
    margin-left: auto;
    background: var(--lm);
    color: #fff;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 700;
  }

  /* ============================================================
     V2.1-alpha — PILL MES PROJETS sur l'accueil
     Style très similaire à cart-pill mais avec accent VIP (or)
     pour distinguer visuellement : cart-pill = en cours, projects-pill = sauvegardés.
  ============================================================ */
  .projects-pill {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--vip-tint);
    border: 1px solid rgba(140,111,34,0.20);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 12px;
    width: 100%;
    color: var(--ink);
  }
  .projects-pill:hover { border-color: var(--vip-d); background: var(--vip); }
  .projects-pill svg { color: var(--vip-d); }
  .projects-pill .count {
    margin-left: auto;
    background: var(--vip-d);
    color: #fff;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 100px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 700;
  }

  /* ============================================================
     V2.1-alpha — ÉCRAN MES PROJETS
  ============================================================ */
  .projects-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
  }
  .projects-header .h-hero { margin-bottom: 0; }
  .btn-icon-action {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--vip);
    color: #1A1B20;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-lm);
    transition: transform 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .btn-icon-action:hover { background: var(--vip-dark); transform: scale(1.05); }
  .btn-icon-action:active { transform: scale(0.94); }

  /* V2.10 r7 : skeleton loader Apple-grade
     Anime shimmer + structure realiste pour donner l illusion que les vraies
     cards arrivent. Bien plus elegant qu un spinner. */
  .skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
  }
  .skeleton-card {
    background: var(--paper-2, #fdf8ec);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  /* Card projets : grosse thumb a gauche + body */
  .skeleton-card-project .skeleton-thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    flex-shrink: 0;
  }
  /* Card mailings : petite icone ronde + body + action */
  .skeleton-card-mail .skeleton-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .skeleton-card-mail .skeleton-action {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    flex-shrink: 0;
  }
  .skeleton-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .skeleton-line {
    height: 12px;
    border-radius: 6px;
  }
  .skeleton-line-title { width: 60%; height: 14px; }
  .skeleton-line-meta { width: 80%; }
  .skeleton-line-badge { width: 100px; height: 22px; border-radius: 999px; margin-top: 4px; }
  /* Animation shimmer : gradient qui se deplace de gauche a droite */
  @keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  .skeleton-shimmer {
    background: linear-gradient(
      90deg,
      rgba(20, 15, 5, 0.06) 0%,
      rgba(20, 15, 5, 0.12) 50%,
      rgba(20, 15, 5, 0.06) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
  }
  /* Reduce motion : on garde un gris uni si l user prefere */
  @media (prefers-reduced-motion: reduce) {
    .skeleton-shimmer {
      animation: none;
      background: rgba(20, 15, 5, 0.08);
    }
  }
  .projects-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 0;
    color: var(--ink-3);
    font-size: 14px;
    font-weight: 600;
  }
  .projects-spinner {
    animation: authSpin 0.8s linear infinite;
    color: var(--vip-d);
  }

  /* Liste des cards projets — grille adaptative */
  .projects-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 32px;
  }
  @media (min-width: 640px) {
    .projects-list { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 960px) {
    .projects-list { grid-template-columns: repeat(3, 1fr); }
  }

  /* V2.2-alpha r10g — Mailings list (Mes plans envoyés)
     Layout simple en colonne verticale, focus sur lisibilité historique. */
  /* V2.9 : header de la liste mailings */
  .mailings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 4px;
  }
  .mailings-count {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    font-weight: 600;
  }
  .mailings-clear-all {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: #B91C1C;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
  }
  .mailings-clear-all:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.5);
  }
  /* V2.9 : bouton delete sur chaque card */
  .mailing-btn-delete {
    color: var(--ink-3);
    background: transparent;
    border: 1px solid var(--line);
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mailing-btn-delete svg {
    width: 16px;
    height: 16px;
  }
  .mailing-btn-delete:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.5);
    color: #B91C1C;
  }
  .mailings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 32px;
  }
  .mailing-card {
    background: var(--paper);
    border: 1px solid rgba(140, 111, 34, 0.12);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: background 0.12s, border-color 0.12s;
  }
  .mailing-card:hover { background: var(--paper-2); border-color: rgba(140, 111, 34, 0.20); }
  .mailing-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--lm-soft);
    color: var(--lm-dark);
    display: flex; align-items: center; justify-content: center;
  }
  .mailing-info {
    flex: 1;
    min-width: 0;
  }
  .mailing-project {
    font-family: var(--display);
    font-weight: 500;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mailing-meta {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mailing-meta .sep { margin: 0 6px; opacity: 0.4; }
  .mailing-actions {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
  }
  .mailing-btn {
    background: var(--paper-2);
    border: 1px solid rgba(140, 111, 34, 0.15);
    border-radius: 100px;
    padding: 6px 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .mailing-btn:hover { background: var(--paper-3); border-color: rgba(140, 111, 34, 0.30); }
  .mailing-btn-disabled { opacity: 0.45; cursor: not-allowed; }

  /* V2.2-alpha r10h-ui — Badge statut du mail (Envoyé / Ouvert) */
  .mailing-status-row {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .mailing-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
  }
  .mailing-status svg { flex-shrink: 0; }
  /* Envoyé : neutre, sobre, gris-bleu */
  .mailing-status-sent {
    background: rgba(120, 130, 145, 0.10);
    color: #5d6878;
    border-color: rgba(120, 130, 145, 0.18);
  }
  /* Ouvert : vert succès, signal positif */
  .mailing-status-opened {
    background: rgba(46, 160, 67, 0.10);
    color: #1f7a32;
    border-color: rgba(46, 160, 67, 0.22);
  }

  /* Card projet individuelle
     V2.2-alpha : card refondue — partie clickable + bouton menu indépendant */
  .project-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .project-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--vip);
  }
  .project-card-clickable {
    cursor: pointer;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .project-card-clickable:active { transform: scale(0.99); }
  .project-card-menu-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
  }
  .project-card-menu-btn:hover { background: var(--paper); transform: scale(1.05); }
  .project-card-menu-btn:active { transform: scale(0.94); }

  /* Vignette photo (placeholder en Phase 2a, vraie photo en Phase 2b) */
  .project-card-thumb {
    width: 100%;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--lm-tint) 0%, var(--vip-tint) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vip-d);
    position: relative;
    overflow: hidden;
  }
  .project-card-thumb svg { width: 36px; height: 36px; opacity: 0.5; }
  /* V2.2-alpha r10b — image cliente (vignette de la 1ère surface du projet) */
  .project-card-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .project-card-thumb-status {
    position: absolute;
    top: 10px;
    right: 48px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(4px);
    color: var(--ink);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 9px;
    border-radius: 100px;
    white-space: nowrap;
  }
  .project-card-thumb-status.completed { background: rgba(122,196,108,0.96); color: #fff; }
  /* V2.10 r11 : badge "Corbeille" et style card trashed */
  .project-card-thumb-status.trashed { background: rgba(180,80,60,0.92); color: #fff; }
  .project-card-trashed {
    opacity: 0.92;
  }
  /* V2.10 r49 : fix layout Corbeille - Restaurer + Supprimer cote a cote */
  .trash-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: nowrap;
    overflow: visible;
  }
  .trash-action-btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .trash-action-btn svg { width: 14px; height: 14px; }
  /* V2.10 r49-B : bouton "Supprimer" texte + icone (au lieu de 38px rond) */
  .trash-action-permdel {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(180,80,60,0.35);
    background: rgba(255,235,230,0.5);
    color: rgba(180,80,60,1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
  }
  .trash-action-permdel svg { width: 14px; height: 14px; }
  .trash-action-permdel:hover {
    background: rgba(180,80,60,0.95);
    color: #fff;
    border-color: rgba(180,80,60,0.95);
  }
  .trash-action-permdel:active { transform: scale(0.97); }
  /* Bouton danger pour modale (rouge / rose) */
  .wallrus-modal-btn-danger {
    background: rgba(180,80,60,0.95);
    color: #fff;
    border: none;
  }
  .wallrus-modal-btn-danger:hover { background: rgba(160,60,40,1); }
  /* Icone modale "warning" (rouge) */
  .wallrus-modal-icon-warning {
    background: rgba(180,80,60,0.12);
    color: rgba(180,80,60,0.95);
  }
  /* Meta corbeille (date + jours restants) */
  .trash-meta-deleted, .trash-meta-countdown {
    font-size: 11px;
    color: var(--ink-3);
  }
  .trash-meta-countdown {
    font-weight: 600;
    color: rgba(180,80,60,0.85);
  }
  .trash-meta-separator { opacity: 0.4; margin: 0 4px; }

  .project-card-body {
    padding: 14px 16px 16px;
  }
  .project-card-name {
    font-family: var(--display);
    font-weight: 500;
    font-size: 17px;
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-bottom: 8px;
    /* Tronquer si trop long */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .project-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 500;
  }
  .project-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .project-card-meta-item svg { color: var(--ink-3); opacity: 0.7; }
  .project-card-meta-sep { color: var(--line-2); }

  /* État vide / erreur */
  .projects-empty, .projects-error {
    text-align: center;
    padding: 48px 16px;
    color: var(--ink-3);
  }
  .projects-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--lm-tint);
    color: var(--lm-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
  }
  .projects-empty h3 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
  }
  /* V2.10 r3 : etats vides redesign Apple-grade
     Override les styles existants pour un look plus moderne et engageant */
  .projects-empty, .projects-error {
    /* V2.10 r8 : pas de !important sur display, sinon JS ne peut plus le cacher.
       On utilise une classe .is-visible pour activer le flex-column. */
    flex-direction: column;
    align-items: center;
    padding: 56px 24px 40px;
    text-align: center;
    background: linear-gradient(180deg, #fff 0%, var(--paper-2) 100%);
    border-radius: 24px;
    border: 1px solid var(--line);
    margin-top: 24px;
    gap: 0;
  }
  /* Quand JS met display:block ou flex, on force le layout vertical */
  .projects-empty[style*="block"],
  .projects-empty[style*="flex"],
  .projects-error[style*="block"],
  .projects-error[style*="flex"] {
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }
  .projects-empty .btn,
  .projects-error .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 220px;
    max-width: 320px;
    padding: 12px 28px !important;
    border-radius: 999px !important;
    margin: 0 auto !important;
  }
  .projects-empty-icon {
    width: 80px !important;
    height: 80px !important;
    background: linear-gradient(135deg, var(--vip-tint, #FFF6E0) 0%, #FFEFC9 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px !important;
    color: #6B5418;
    box-shadow: 0 4px 16px -4px rgba(250, 199, 117, 0.45);
    position: relative;
  }
  /* Halo lumineux derriere l icone */
  .projects-empty-icon::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: var(--vip-tint, #FFF6E0);
    opacity: 0.4;
    z-index: -1;
    filter: blur(12px);
  }
  .projects-empty-icon svg {
    width: 38px !important;
    height: 38px !important;
    stroke-width: 1.8 !important;
  }
  .projects-empty h2, .projects-empty h3 {
    font-family: var(--display, Georgia, serif) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    margin: 0 0 10px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
  }
  .projects-empty p {
    font-size: 13px;
    color: var(--ink-3);
    margin-bottom: 20px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
  }

  /* ============================================================
     V2.1-alpha — CARD "Mes projets" dans Mon compte
  ============================================================ */
  /* V2.9 r4 : banniere "Tu as un scan en attente" sur accueil */
  .draft-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--vip-tint, #FFF6E0);
    border: 1px solid rgba(250, 199, 117, 0.55);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .draft-banner:hover {
    background: #FFEFC9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px rgba(250, 199, 117, 0.4);
  }
  .draft-banner-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--vip);
    color: #1A1B20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .draft-banner-body { flex: 1; min-width: 0; }
  .draft-banner-title {
    font-family: var(--body);
    font-size: 14px;
    font-weight: 700;
    color: #1A1B20;
    line-height: 1.3;
  }
  .draft-banner-meta {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6B5418;
    font-weight: 600;
    margin-top: 2px;
  }
  .draft-banner-arrow {
    color: #6B5418;
    flex-shrink: 0;
  }
  .account-action-card {
    appearance: none;
    width: 100%;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    font-family: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .account-action-card:hover {
    border-color: var(--vip);
    background: var(--vip-tint);
  }
  .account-action-card:active { transform: scale(0.99); }
  .account-action-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--vip);
    color: #1A1B20;
    display: flex; align-items: center; justify-content: center;
  }
  .account-action-content { flex: 1; min-width: 0; }
  /* V2.10 : badge compteur discret type iOS Settings */
  .account-action-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .account-action-title-row > span:first-child {
    font-family: var(--body);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
  }
  .account-action-badge {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B5418;
    background: var(--vip-tint, #FFF6E0);
    border: 1px solid rgba(250, 199, 117, 0.45);
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
  }
  .account-action-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 2px;
  }
  .account-action-text {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
  }
  .account-action-arrow {
    flex-shrink: 0;
    color: var(--ink-3);
    opacity: 0.6;
  }

  /* ============================================================
     GUIDE — minimalist illustration
  ============================================================ */
  .guide-illu {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 32px;
    margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4/3;
  }
  .guide-illu svg { width: 100%; height: 100%; max-width: 320px; }

  .guide-tips {
    display: flex; flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
  }
  .guide-tip {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    transition: all 0.15s;
  }
  /* V1.18 : tip A4 obligatoire mis en évidence */
  .guide-tip-mandatory {
    background: var(--lm-tint);
    border: 2px solid var(--lm);
    box-shadow: 0 2px 8px rgba(120,190,32,0.18);
  }
  .guide-tip-mandatory .guide-tip-ico {
    background: var(--lm);
    color: #fff;
  }
  .guide-tip-mandatory .guide-tip-txt strong {
    color: var(--lm-darker);
  }
  .guide-tip-ico {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--lm-tint);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--lm-darker);
  }
  .guide-tip-txt { flex: 1; min-width: 0; }
.guide-tip-txt strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.005em;
    margin-bottom: 2px;
  }
  .guide-tip-txt span {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
  }

  /* legacy guide-checks (kept for safety, hidden) */
  .guide-checks {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px;
  }
  .guide-check {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 10px;
    text-align: center;
    transition: all 0.15s;
  }
  .guide-check.ready { border-color: var(--lm); background: var(--lm-tint); }
  .guide-check svg { color: var(--ink-3); margin: 0 auto 6px; display: block; }
  .guide-check.ready svg { color: var(--lm-darker); }
  .guide-check-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.02em;
  }
  .guide-check.ready .guide-check-label { color: var(--lm-darker); }

  /* ============================================================
     MODAL : ORIENTATION PORTRAIT
  ============================================================ */
  .orientation-modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.25s ease-out;
  }
  .orientation-modal.is-open {
    display: flex;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .orientation-modal-content {
    background: var(--paper);
    border-radius: 24px;
    padding: 28px 24px 22px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,0.40);
    animation: slideUp 0.3s ease-out;
    position: relative;
  }
  .orientation-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--paper-3);
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: background 0.15s;
    z-index: 1;
  }
  .orientation-modal-close:hover {
    background: var(--line-2);
  }
  .orientation-modal-close svg {
    width: 18px;
    height: 18px;
  }
  @keyframes slideUp {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  .orientation-illu {
    width: 100%;
    max-width: 220px;
    margin: 0 auto 18px;
  }
  .orientation-illu svg { width: 100%; height: auto; display: block; }
  .orientation-modal-content h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    color: var(--ink);
  }
  .orientation-modal-content p {
    font-size: 14px;
    color: var(--ink-3);
    line-height: 1.5;
    margin-bottom: 22px;
  }
  .orientation-modal-content p strong { color: var(--ink); font-weight: 700; }
  .orientation-modal-actions {
    display: flex; flex-direction: column;
    gap: 10px;
  }

  /* ============================================================
     MODAL : CHOIX MÉTHODE
  ============================================================ */
  .method-modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.25s ease-out;
  }
  .method-modal.is-open { display: flex; }
  .method-modal-content {
    background: var(--paper);
    border-radius: 24px;
    padding: 28px 22px 20px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,0.40);
    animation: slideUp 0.3s ease-out;
    position: relative;
  }
  .method-modal-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--paper-3);
    border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
    transition: background 0.15s;
  }
  .method-modal-close:hover { background: var(--line-2); }
  .method-modal-close svg { width: 18px; height: 18px; }

  .method-modal-header { text-align: center; margin-bottom: 20px; }
  .method-modal-kicker {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--lm-darker);
    font-weight: 700;
    margin-bottom: 10px;
  }
  .method-modal-content h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  .method-option {
    display: flex; align-items: center; gap: 14px;
    width: 100%;
    background: var(--paper);
    border: 2px solid var(--line);
    border-radius: 16px;
    padding: 16px 16px 16px 14px;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    font-family: inherit;
  }
  .method-option:hover {
    border-color: var(--lm);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -6px rgba(120,190,32,0.30);
  }
  .method-option-precise {
    border-color: var(--lm);
    background: var(--lm-tint);
  }
  .method-option-precise:hover {
    background: var(--lm-soft);
  }
  .method-option-ico {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--lm-darker);
  }
  .method-option-precise .method-option-ico {
    background: var(--lm);
    border-color: var(--lm);
    color: #fff;
  }
  .method-option-ico svg { width: 22px; height: 22px; }
  .method-option-text { flex: 1; min-width: 0; }
  .method-option-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .method-option-badge {
    background: var(--lm);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .method-option-desc {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
  }
  .method-option-arrow {
    color: var(--ink-3);
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .method-option-precise .method-option-arrow {
    color: var(--lm-darker);
  }
  .method-modal-foot {
    text-align: center;
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 10px;
    line-height: 1.5;
  }

  /* ============================================================
     CART MODAL — récap e-commerce
  ============================================================ */
  .cart-modal {
    max-height: 92vh;
    overflow-y: auto;
  }
  .cart-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }
  .cart-modal-check {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--lm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .cart-modal-surfaces {
    background: var(--paper-2);
    border-radius: 12px;
    padding: 4px 0;
    margin-bottom: 14px;
  }
  .cart-modal-surface-row {
    display: flex; align-items: center;
    padding: 10px 14px;
    gap: 12px;
    border-bottom: 1px solid var(--line);
  }
  .cart-modal-surface-row:last-child { border-bottom: 0; }
  .cart-modal-surface-thumb {
    width: 36px; height: 36px;
    background: var(--lm-tint);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--lm-darker);
    flex-shrink: 0;
  }
  .cart-modal-surface-info {
    flex: 1; min-width: 0;
  }
  .cart-modal-surface-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
  }
  .cart-modal-surface-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    margin-top: 1px;
    letter-spacing: 0.02em;
  }
  .cart-modal-surface-qty {
    font-family: var(--display);
    font-size: 18px;
    font-weight: 400;
    color: var(--ink);
    flex-shrink: 0;
  }
  .cart-modal-surface-qty small {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    margin-left: 3px;
    font-weight: 600;
  }
  .cart-modal-surface-del {
    margin-left: 8px;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: var(--paper);
    color: var(--ink-3);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    padding: 0;
  }
  .cart-modal-surface-del:hover {
    border-color: var(--warn);
    color: var(--warn);
    background: var(--warn-bg);
  }

  /* Lignes produits */
  .cart-modal-products {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
  }
  .cart-modal-product {
    display: flex;
    align-items: center;
    padding: 14px;
    gap: 14px;
    border-bottom: 1px solid var(--line);
  }
  .cart-modal-product:last-child { border-bottom: 0; }
  .cart-modal-product-img {
    width: 56px; height: 56px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    line-height: 1.2;
    border: 1.5px solid;
  }
  .cart-modal-product-img.vip {
    background: var(--vip);
    color: var(--vip-d);
    border-color: var(--vip-d);
  }
  .cart-modal-product-img.cut {
    background: var(--cut);
    color: var(--cut-d);
    border-color: var(--cut-d);
  }
  .cart-modal-product-info {
    flex: 1; min-width: 0;
  }
  .cart-modal-product-name {
    font-weight: 700;
    color: var(--ink);
    font-size: 14px;
    margin-bottom: 2px;
  }
  .cart-modal-product-desc {
    font-size: 11px;
    color: var(--ink-3);
    line-height: 1.4;
  }
  .cart-modal-product-ref {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-3);
    margin-top: 3px;
    letter-spacing: 0.04em;
  }
  .cart-modal-product-qty {
    text-align: right;
    flex-shrink: 0;
  }
  .cart-modal-product-qty-num {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1;
  }
  .cart-modal-product-qty-lab {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 2px;
    font-weight: 700;
  }

  /* Totaux */
  .cart-modal-total {
    background: var(--lm-tint);
    border: 1.5px solid var(--lm);
    border-radius: 12px;
    padding: 12px 14px;
  }
  .cart-modal-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: 13px;
    color: var(--ink-2);
  }
  .cart-modal-total-row strong {
    font-family: var(--display);
    font-weight: 400;
    font-size: 15px;
    color: var(--ink);
  }
  .cart-modal-total-final {
    border-top: 1px solid rgba(120, 190, 32, 0.3);
    margin-top: 4px;
    padding-top: 8px;
    font-weight: 700;
  }
  .cart-modal-total-final strong {
    font-size: 22px;
    color: var(--lm-darker);
    font-weight: 600;
  }

  /* Bouton Sauvegarder dans la modale */
  .cart-modal-save {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.15s;
  }
  .cart-modal-save:hover {
    border-color: var(--lm);
    color: var(--lm-darker);
    background: var(--lm-tint);
  }
  .cart-modal-save svg { color: var(--lm-darker); }

  /* ============================================================
     BUTTONS
  ============================================================ */
  .btn {
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 17px 22px;
    border: 0;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    letter-spacing: 0.005em;
  }
  .btn:active { transform: scale(0.98); }
  .btn:disabled { opacity: 0.35; cursor: not-allowed; }
  .btn-primary { background: var(--lm); color: #fff; box-shadow: var(--shadow-lm); }
  .btn-primary:hover:not(:disabled) { background: var(--lm-dark); }
  .btn-primary.btn-disabled-style {
    background: var(--warn);
    box-shadow: 0 6px 20px -6px rgba(196, 74, 26, 0.45);
  }
  .btn-primary.btn-disabled-style:hover {
    background: #a73e16;
  }
  .btn-secondary { background: var(--paper-3); color: var(--ink); }
  .btn-ghost { background: transparent; color: var(--ink-3); }
  .btn-arrow {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 14px;
  }

  .file-wrap { position: relative; display: block; }
  .file-wrap input[type="file"] {
    position: absolute; inset: 0;
    opacity: 0; cursor: pointer;
  }

  /* ============================================================
     V1.57 — CARROUSEL pendant scan IA
     Éduque le client pendant les ~10s d'attente. Auto-rotate 2.5s.
     Mix de messages techniques (rassurance "ça marche") et commerciaux
     (R=10, EPD, MaPrimeRénov').
  ============================================================ */
  .scan-carousel {
    width: 100%;
    background: var(--lm-tint);
    border-radius: 16px;
    padding: 16px 18px 12px;
    margin-bottom: 18px;
    border: 1px solid var(--lm-soft);
    overflow: hidden;
  }
  .scan-carousel-track {
    position: relative;
    min-height: 56px;
  }
  .scan-carousel-slide {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
  }
  .scan-carousel-slide.is-active {
    opacity: 1;
    transform: translateY(0);
  }
  .scan-carousel-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
  }
  .scan-carousel-slide p {
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-2);
    margin: 0;
    letter-spacing: 0.005em;
  }
  .scan-carousel-slide p strong {
    color: var(--ink);
    font-weight: 700;
  }
  .scan-carousel-dots {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 12px;
  }
  .scan-carousel-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(120,190,32,0.25);
    transition: background 0.3s ease, width 0.3s ease;
  }
  .scan-carousel-dots .dot.is-active {
    background: var(--lm);
    width: 18px;
    border-radius: 3px;
  }
  @media (prefers-reduced-motion: reduce) {
    .scan-carousel-slide,
    .scan-carousel-dots .dot { transition: none; }
  }

  /* ============================================================
     SCANNING — theatrical
  ============================================================ */
  .scan-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: #000;
    border-radius: 22px;
    overflow: hidden;
    margin-bottom: 18px;
  }
  .scan-wrap img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
  }
  .scan-wrap canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
  }
  .scan-line {
    position: absolute;
    left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--lm) 50%, transparent);
    box-shadow: 0 0 16px var(--lm), 0 0 24px var(--lm);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    top: 0;
  }
  .scan-line.scanning { animation: scanSweep 2.5s ease-in-out 0s infinite; opacity: 1; }
  @keyframes scanSweep {
    0% { top: 0; }
    50% { top: calc(100% - 3px); }
    100% { top: 0; }
  }
  .scan-title {
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    background: rgba(10,10,10,0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    padding: 8px 14px;
    border-radius: 100px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    z-index: 4;
    transition: opacity 0.2s;
    white-space: nowrap;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .scan-checklist {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 6px 16px;
    margin-bottom: 18px;
  }
  .scan-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
  }
  .scan-row:last-child { border-bottom: 0; }
  .scan-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.3s;
  }
  /* V2.10 r29 : refonte etats scan-icon pour distinction visuelle claire */

  /* PENDING : etape pas encore commencee, gris discret, PAS de spinner (avant : toutes spinnaient ensemble) */
  .scan-icon.pending {
    background: var(--paper-3);
    border: 2px solid var(--paper-3);
    opacity: 0.55;
  }
  .scan-icon.pending::after {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ink-3);
    opacity: 0.5;
  }

  /* IS-CURRENT : etape en cours d'execution - DOREE + pulse (visible 1 seule a la fois) */
  .scan-icon.is-current {
    background: linear-gradient(135deg, #FAC775 0%, #F5B655 100%);
    border: 2px solid #FAC775;
    opacity: 1;
    box-shadow: 0 0 0 4px rgba(250, 199, 117, 0.25);
    animation: scanCurrentPulse 1.3s ease-in-out infinite;
  }
  .scan-icon.is-current::after {
    content: '';
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1.8px solid #854F0B;
    border-top-color: transparent;
    background: transparent;
    animation: spin 0.7s linear infinite;
    opacity: 1;
  }

  @keyframes scanCurrentPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(250, 199, 117, 0.25); }
    50% { box-shadow: 0 0 0 8px rgba(250, 199, 117, 0.45); }
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* SUCCESS : etape terminee, vert (comme avant) */
  .scan-icon.success {
    background: var(--lm);
    color: #fff;
    border: 2px solid var(--lm);
    opacity: 1;
    animation: scanSuccessPop 0.4s ease-out;
  }
  .scan-icon.success::after {
    content: '✓';
    background: transparent;
    border: 0;
    width: auto; height: auto;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    opacity: 1;
  }
  @keyframes scanSuccessPop {
    0% { transform: scale(0.7); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
  }
  .scan-icon.warning { background: var(--warn); color: #fff; }
  .scan-icon.warning::after { content: '!'; font-size: 14px; font-weight: 800; }

  .scan-skip-btn {
    margin-top: 14px;
    font-size: 13px !important;
    padding: 12px 20px !important;
    color: var(--ink-3) !important;
  }
  .scan-skip-btn:hover {
    color: var(--ink) !important;
  }
  .scan-row strong { font-weight: 600; flex: 1; }
  .scan-row .val {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
  }

  /* ============================================================
     RESULT — wall with panels overlaid
  ============================================================ */
  /* V1.57 : encart économies estimées sur le résultat */
  .result-savings {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #FAC775 0%, #F5B655 100%);
    border-radius: 18px;
    padding: 16px 18px;
    margin-bottom: 18px;
    color: #2c1d05;
    box-shadow: 0 4px 14px -6px rgba(133,79,11,0.35);
  }
  .result-savings-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
  }
  .result-savings-body { flex: 1; }
  .result-savings-num {
    font-family: var(--display);
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.025em;
    color: #2c1d05;
    margin-bottom: 2px;
  }
  .result-savings-label {
    font-family: var(--body);
    font-size: 13px;
    font-weight: 500;
    color: rgba(44,29,5,0.85);
  }
  .result-savings-note {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.04em;
    color: rgba(44,29,5,0.55);
    margin-top: 4px;
    text-transform: uppercase;
  }

  .result-hero {
    background: var(--lm);
    color: #fff;
    border-radius: 22px;
    padding: 22px 22px 20px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
  }
  .result-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
  }
  .result-hero > * { position: relative; }
  .result-hero-lab {
    font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 6px;
    font-weight: 600;
  }
  .result-hero-num {
    font-family: var(--display); font-weight: 300;
    font-size: 56px; line-height: 0.95; letter-spacing: -0.04em;
  }
  .result-hero-num small {
    font-size: 20px; opacity: 0.8; margin-left: 6px; font-weight: 400;
  }
  .result-hero-stats {
    display: flex; gap: 20px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.18);
  }
  .result-hero-stat {
    flex: 1;
  }
  .result-hero-stat-num {
    font-family: var(--display);
    font-weight: 400;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .result-hero-stat-lab {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.72;
    margin-top: 4px;
    font-weight: 600;
  }

  /* TOGGLE Photo / Schéma */
  .view-toggle {
    display: flex;
    background: var(--paper-3);
    border-radius: 100px;
    padding: 4px;
    margin-bottom: 14px;
  }
  .view-toggle button {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 10px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-3);
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
  }
  .view-toggle button.active {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(10,10,10,0.08);
  }
  .view-toggle svg { width: 14px; height: 14px; }

  /* === Toggle d'orientation des panneaux === */
  .orientation-toggle {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  .orientation-toggle-label {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    font-weight: 700;
    margin-bottom: 9px;
  }
  .orientation-toggle-label svg { color: var(--lm-darker); }
  .orientation-toggle-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .orientation-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--line-2);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
    transition: all 0.15s;
    color: var(--ink-2);
    font-size: 13px;
    text-align: left;
  }
  .orientation-btn:hover {
    border-color: var(--ink-3);
  }
  .orientation-btn.active {
    border-color: var(--lm);
    background: var(--lm-tint);
    color: var(--lm-darker);
  }
  .orient-icon {
    display: inline-block;
    flex-shrink: 0;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    background: rgba(0,0,0,0.05);
  }
  .orient-icon-vertical {
    width: 14px; height: 22px;
  }
  .orient-icon-horizontal {
    width: 22px; height: 11px;
  }
  .orientation-btn.active .orient-icon {
    background: var(--vip);
    border-color: var(--vip-d);
  }
  .orient-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-weight: 700;
    font-size: 13px;
  }
  .orient-text small {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--ink-3);
    margin-top: 1px;
    letter-spacing: 0.02em;
  }
  .orientation-btn.active .orient-text small {
    color: var(--lm-darker);
  }
  .orientation-toggle-hint {
    text-align: center;
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 8px;
    line-height: 1.4;
  }
  .orientation-toggle-hint.is-savings {
    color: var(--lm-darker);
    font-weight: 600;
  }

  /* Badge "Détecté par l'IA" */
  .ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #6B5BD9 0%, #4F8FE5 100%);
    color: #fff;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(75, 95, 200, 0.25);
    width: fit-content;
  }
  .ai-badge svg {
    color: #fff;
    animation: aiPulse 2s ease-in-out infinite;
  }
  .ai-badge-confidence {
    background: rgba(255, 255, 255, 0.22);
    padding: 1px 7px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    font-family: var(--mono);
  }
  @keyframes aiPulse {
    0%, 100% { opacity: 0.7; transform: rotate(0deg); }
    50% { opacity: 1; transform: rotate(180deg); }
  }

  /* === Schéma 2D du mur (mode manuel sans photo) === */
  .wall-diagram-wrap {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
  }
  .wall-diagram-meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .wall-diagram-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: repeating-linear-gradient(
      0deg,
      #f5f5f0 0px,
      #f5f5f0 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      90deg,
      #f5f5f0 0px,
      #f5f5f0 1px,
      transparent 1px,
      transparent 12px
    );
    border: 2px solid var(--ink-3);
    border-radius: 8px;
    overflow: hidden;
    /* r133 : touch-action none — le drag des coins ne doit pas scroller la page (annule r122, restaure fix V1.48) */
    touch-action: none;
  }
  .wall-diagram-stage canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
  }
  .wall-diagram-hint {
    text-align: center;
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 10px;
    line-height: 1.4;
  }

  .wall-view {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 14px;
  }
  .wall-view-canvas {
    position: relative;
    background: #000;
    aspect-ratio: 4/3;
    overflow: hidden;
  }
  .wall-view-canvas img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
  }
  .wall-view-canvas canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
  }
  .wall-view-canvas.schema {
    background: var(--paper-2);
    aspect-ratio: 4/3;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
  }
  .wall-view-canvas.schema svg {
    max-width: 100%;
    max-height: 100%;
  }

  .wall-view-legend {
    padding: 10px 14px;
    display: flex; gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--ink-3);
    border-top: 1px solid var(--line);
    background: var(--paper-2);
  }
  .legend-dot {
    display: inline-flex; align-items: center; gap: 5px;
  }
  .legend-dot::before {
    content: ''; display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
  }
  .legend-vip::before { background: var(--vip); border: 0.5px solid var(--vip-d); }
  .legend-cut::before { background: var(--cut); border: 0.5px solid var(--cut-d); }
  .legend-win::before { background: rgba(133,183,235,0.4); border: 0.5px solid #185FA5; }
  .legend-door::before { background: rgba(186,117,23,0.4); border: 0.5px solid #854F0B; }

  /* Per-product sticky cards */
  .product-card-row {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px 18px;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 14px;
  }
  .product-card-vis {
    width: 36px; height: 70px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(0,0,0,0.5);
  }
  .product-card-vis.vip {
    background: linear-gradient(135deg, var(--vip), #d4a755);
    border: 0.5px solid rgba(0,0,0,0.15);
  }
  .product-card-vis.cut {
    background: linear-gradient(135deg, var(--cut), var(--cut-d));
    border: 0.5px solid rgba(0,0,0,0.15);
    color: rgba(255,255,255,0.85);
  }
  .product-card-vis svg { width: 18px; height: 18px; }
  .product-card-info { flex: 1; }
  .product-card-name {
    font-family: var(--display); font-weight: 500;
    font-size: 15px; letter-spacing: -0.01em;
    line-height: 1.1;
  }
  .product-card-sub {
    font-family: var(--mono); font-size: 10px;
    color: var(--ink-3);
    margin-top: 4px; letter-spacing: 0.04em;
  }
  /* V1.59 : SKU technique mis en avant pour le passage en caisse */
  .product-card-sku {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
    margin-top: 3px;
    letter-spacing: 0.06em;
    background: var(--paper-3);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
  }
  .product-card-qty {
    font-family: var(--display); font-weight: 400;
    font-size: 26px;
    color: var(--lm-darker);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .product-card-qty small {
    font-family: var(--mono); font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin-left: 4px; font-weight: 700;
  }

  /* CTA LM block */
  .cta-lm {
    background: var(--lm);
    color: #fff;
    border-radius: 18px;
    padding: 18px;
    border: 0;
    cursor: pointer;
    width: 100%;
    display: flex; align-items: center; gap: 14px;
    box-shadow: var(--shadow-lm);
    margin: 14px 0 10px;
    text-align: left;
  }
  .cta-lm-icon {
    width: 42px; height: 42px;
    background: rgba(255,255,255,0.18);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .cta-lm-icon svg { width: 20px; height: 20px; color: #fff; }
  .cta-lm-text { flex: 1; }
  .cta-lm-title { font-weight: 700; font-size: 14px; line-height: 1.2; }
  .cta-lm-sub { font-size: 11px; opacity: 0.85; margin-top: 2px; }

  /* V2.2-alpha r4 : CTA Passage en caisse (QR).
     Remplace le CTA Leroy Merlin sur l'écran cart, en attendant le branchement
     réel du connecteur LM. Palette VIP or pour rester dans la signature Wallrus. */
  .cta-qr-checkout {
    background: var(--vip);
    color: #1A1B20;
    border-radius: 18px;
    padding: 18px;
    border: 0;
    cursor: pointer;
    width: 100%;
    display: flex; align-items: center; gap: 14px;
    box-shadow: 0 4px 12px -2px rgba(250,199,117,0.55), 0 1px 3px rgba(0,0,0,0.06);
    margin: 14px 0 10px;
    text-align: left;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .cta-qr-checkout:hover {
    background: var(--vip-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -2px rgba(250,199,117,0.65), 0 2px 4px rgba(0,0,0,0.08);
  }
  .cta-qr-checkout:active { transform: scale(0.985); }
  .cta-qr-checkout-icon {
    width: 42px; height: 42px;
    background: rgba(133, 79, 11, 0.16);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .cta-qr-checkout-icon svg { width: 20px; height: 20px; color: var(--vip-d); }
  .cta-qr-checkout-text { flex: 1; }
  .cta-qr-checkout-title { font-weight: 700; font-size: 15px; line-height: 1.2; color: #1A1B20; }
  .cta-qr-checkout-sub { font-size: 11px; opacity: 0.7; margin-top: 2px; color: #1A1B20; }

  /* Action chips */
  .actions-chips {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .chip {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    font-size: 13px; font-weight: 600;
    transition: all 0.15s;
    color: var(--ink);
  }
  .chip:active { transform: scale(0.98); }
  .chip:hover { border-color: var(--lm); }
  .chip svg { width: 16px; height: 16px; color: var(--lm-darker); flex-shrink: 0; }
  .chip.chip-save {
    background: var(--lm-tint);
    border: 1.5px solid var(--lm);
    color: var(--lm-darker);
  }
  .chip.chip-save:hover {
    background: var(--lm-soft);
    border-color: var(--lm-dark);
  }
  .chip.chip-save svg { color: var(--lm-dark); }

  /* ============================================================
     CART
  ============================================================ */
  .surface-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 12px;
  }
  .surface-card-thumb {
    width: 56px; height: 56px;
    border-radius: 10px;
    background: var(--paper-2);
    flex-shrink: 0;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;  /* V2.2-alpha r10a : click pour voir détail */
    transition: transform 0.15s;
    position: relative;
  }
  .surface-card-thumb:hover { transform: scale(1.05); }
  .surface-card-thumb:active { transform: scale(0.96); }
  .surface-card-thumb svg,
  .surface-card-thumb img { width: 100%; height: 100%; display: block; }
  .surface-card-thumb img { object-fit: cover; }
  .surface-card-info { flex: 1; min-width: 0; }

  /* V2.2-alpha r10c — Actions à droite : ✎ Renommer + ✕ Supprimer */
  .surface-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
  }
  .surface-card-action-btn {
    width: 30px; height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--ink);
    opacity: 0.55;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.15s, background 0.15s, transform 0.1s;
    flex-shrink: 0;
  }
  .surface-card-action-btn:hover { opacity: 1; background: var(--paper-3); }
  .surface-card-action-btn:active { transform: scale(0.92); }
  .surface-card-action-btn-danger:hover {
    background: rgba(240, 153, 123, 0.2);
    color: var(--cut-d);
    opacity: 1;
  }

  /* ========================================================
     V2.2-alpha r10c — KPI VIP/CUT (conformité R=10)
     Le ratio VIP doit être ≥ 75% pour garantir R=10 légalement.
  ======================================================== */
  .r10-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-weight: 600;
    border-radius: 100px;
    line-height: 1;
    white-space: nowrap;
  }
  .r10-badge-inline {
    font-size: 10px;
    padding: 4px 9px;
    letter-spacing: 0.04em;
  }
  .r10-badge-block {
    font-size: 11px;
    padding: 7px 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  /* Conforme : vert validation Wallrus */
  .r10-badge-compliant {
    background: rgba(122, 196, 108, 0.14);
    color: #3F6810;
  }
  /* Non conforme : orange (cut-d), pas rouge pour rester constructif */
  .r10-badge-warning {
    background: rgba(240, 153, 123, 0.18);
    color: #993C1D;
  }
  /* Mode neutre (jamais affiché, mais safety) */
  .r10-badge-neutral {
    background: var(--paper-2);
    color: var(--ink-3);
  }
  .r10-badge svg { flex-shrink: 0; }
  /* V2.2-alpha r10c — placement du badge R10 dans la card projet */
  .project-card-r10 {
    margin-top: 10px;
  }
  /* V2.2-alpha r10c — Badge R10 dans l'écran cart, juste sous les totaux */
  .cart-r10-badge-row {
    display: flex;
    justify-content: center;
    margin-top: -8px;
    margin-bottom: 16px;
  }
  /* V2.10 r43 : Span cliquable pour renommage in-place + input mode edition */
  .surface-card-name-editable {
    cursor: pointer;
    border-radius: 4px;
    padding: 1px 4px;
    margin-left: -4px;
    transition: background 0.15s, color 0.15s;
  }
  .surface-card-name-editable:hover {
    background: rgba(250, 199, 117, 0.18);
    color: #6B4E0F;
  }
  .surface-card-name-editable:focus-visible {
    outline: 2px solid #FAC775;
    outline-offset: 1px;
  }
  .surface-card-name-input {
    background: #FFFBF2;
    border: 1.5px solid #FAC775;
    border-radius: 5px;
    padding: 3px 6px;
    margin-left: -6px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: #1A1B20;
    width: calc(100% - 8px);
    max-width: 200px;
    box-shadow: 0 0 0 3px rgba(250, 199, 117, 0.2);
    outline: none;
  }
  .surface-card-name-input:focus {
    border-color: #B8851C;
  }

  .surface-card-name {
    font-family: var(--display); font-weight: 500;
    font-size: 15px; letter-spacing: -0.01em;
    line-height: 1.1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .surface-card-meta {
    font-family: var(--mono); font-size: 10px;
    color: var(--ink-3);
    margin-top: 4px;
    letter-spacing: 0.04em;
  }
  .surface-card-qty {
    font-family: var(--display); font-weight: 400;
    font-size: 22px;
    color: var(--lm-darker);
    line-height: 1;
  }
  .surface-card-qty small {
    font-family: var(--mono); font-size: 9px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-left: 3px;
    font-weight: 700;
  }
  .surface-card-del {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--paper);
    cursor: pointer;
    color: var(--ink-3);
    font-size: 12px;
    margin-left: 6px;
  }

  .add-more-btn {
    width: 100%;
    padding: 16px;
    border: 1.5px dashed var(--line-2);
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-3);
    margin: 8px 0 14px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .add-more-btn:hover { border-color: var(--lm); color: var(--lm-darker); background: var(--lm-tint); }

  .cart-totals {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    margin: 14px 0;
  }
  .cart-total-cell {
    background: var(--paper);
    padding: 12px;
    text-align: center;
  }
  .cart-total-num {
    font-family: var(--display); font-weight: 400;
    font-size: 22px;
    color: var(--lm-darker);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .cart-total-lab {
    font-family: var(--mono); font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-top: 4px;
    font-weight: 600;
  }

  .empty-state {
    text-align: center;
    padding: 40px 20px;
  }
  .empty-state svg { opacity: 0.25; margin: 0 auto 16px; }
  .empty-state h3 {
    font-family: var(--display); font-weight: 500;
    font-size: 20px; letter-spacing: -0.01em;
    margin-bottom: 6px;
  }
  .empty-state p {
    font-size: 13px; color: var(--ink-3);
    margin-bottom: 18px;
  }

  /* ============================================================
     NAME INPUT
  ============================================================ */
  .name-input {
    width: 100%;
    padding: 16px 18px;
    border: 1.5px solid var(--line-2);
    border-radius: 14px;
    font-family: var(--body);
    font-size: 16px;
    margin-bottom: 16px;
    transition: all 0.15s;
    -webkit-appearance: none;
    appearance: none;
    background: var(--paper);
  }
  .name-input:focus {
    outline: none;
    border-color: var(--lm);
    box-shadow: 0 0 0 4px rgba(120,190,32,0.15);
  }

  /* ============================================================
     MODAL
  ============================================================ */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(10,10,10,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100;
    display: none;
    align-items: flex-end; justify-content: center;
  }
  .modal-overlay.show { display: flex; animation: fadeIn 0.2s; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .modal {
    background: var(--paper);
    border-radius: 24px 24px 0 0;
    width: 100%; max-width: 480px;
    padding: 22px 22px 32px;
    animation: slideUp 0.3s ease-out;
    max-height: 90vh; overflow-y: auto;
  }
  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .modal-handle {
    width: 36px; height: 4px;
    background: var(--line-2);
    border-radius: 100px;
    margin: 0 auto 18px;
  }
  .modal h3 {
    font-family: var(--display); font-weight: 500;
    font-size: 22px; letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .modal p { font-size: 13px; color: var(--ink-3); margin-bottom: 16px; line-height: 1.5; }

  .qr-box {
    background: #fff;
    border: 2px solid var(--lm);
    border-radius: 16px;
    padding: 18px;
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
  }
  .qr-box svg,
  .qr-box canvas,
  .qr-box img {
    /* V2.2-alpha r9b : qrcodejs insère un canvas + img dans l'élément.
       On force les dimensions pour que ça remplisse le conteneur proprement. */
    width: 100% !important;
    height: 100% !important;
    max-width: 240px;
    max-height: 240px;
    display: block;
  }
  .qr-id {
    font-family: var(--mono); font-size: 11px;
    text-align: center; letter-spacing: 0.1em;
    color: var(--ink-3);
    margin-bottom: 16px;
    font-weight: 600;
  }

  /* ============================================================
     DEV BANNER
  ============================================================ */
  .dev-banner {
    background: #ffeb3b; color: #000;
    padding: 4px 22px;
    font-family: var(--mono); font-size: 9px;
    letter-spacing: 0.15em; text-transform: uppercase;
    text-align: center; font-weight: 600;
  }

  /* ============================================================
     ADJUST MODE
  ============================================================ */
  .adjust-canvas-wrap {
    position: relative;
    background: #000;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 14px;
    aspect-ratio: 4/3;
  }
  .adjust-canvas-wrap img {
    width: 100%; height: 100%;
    object-fit: contain; display: block;
  }
  .adjust-canvas-wrap canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    /* r133 : touch-action none — le drag des coins ne doit pas scroller la page (annule r122, restaure fix V1.48) */
    touch-action: none;
  }

  /* ============================================================
     V0.9 — CONFIRMATION SCREEN
  ============================================================ */
  .photo-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 14px;
    position: relative;
  }
  .photo-thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
  }
  .photo-thumb canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
  }

  .confirm-list {
    display: flex; flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
  }
  .confirm-warning {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--warn-bg);
    border: 1px solid rgba(196, 74, 26, 0.25);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .confirm-warning:hover {
    border-color: var(--warn);
    background: rgba(254, 240, 232, 1);
  }
  .confirm-warning-arrow {
    color: var(--warn);
    font-weight: 700;
    font-size: 18px;
    align-self: center;
    flex-shrink: 0;
    margin-left: 4px;
  }
  .confirm-warning-ico {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(196, 74, 26, 0.12);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--warn);
  }
  .confirm-warning-ico svg { width: 18px; height: 18px; }
  .confirm-warning-text { flex: 1; min-width: 0; }
  .confirm-warning-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--warn);
    margin-bottom: 2px;
  }
  .confirm-warning-text span {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
  }

  /* === Panneau hybride 3 actions (V1.9) === */
  .hybrid-measure-panel {
    background: linear-gradient(135deg, #FAFAF7 0%, #F4FAEC 100%);
    border: 1.5px solid var(--lm-soft);
    border-radius: 18px;
    padding: 16px 14px 14px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(10,10,10,0.04);
  }
  .hybrid-panel-header {
    text-align: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--lm-soft);
  }
  .hybrid-panel-eyebrow {
    font-family: var(--mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--lm-darker);
    font-weight: 700;
    margin-bottom: 4px;
  }
  .hybrid-panel-title {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.1;
  }
  .hybrid-panel-sub {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 4px;
  }
  .hybrid-panel-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .hybrid-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--paper);
    border: 1.5px solid var(--line-2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
    color: var(--ink);
    font-family: inherit;
  }
  .hybrid-action:hover { border-color: var(--lm); background: #FCFEF9; }
  .hybrid-action:active { transform: scale(0.99); }
  .hybrid-action-primary {
    background: var(--lm);
    border-color: var(--lm-dark);
    color: #fff;
  }
  .hybrid-action-primary:hover {
    background: var(--lm-dark);
    border-color: var(--lm-darker);
  }
  .hybrid-action-ico {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--lm-tint);
    color: var(--lm-darker);
    display: flex; align-items: center; justify-content: center;
  }
  .hybrid-action-primary .hybrid-action-ico {
    background: rgba(255,255,255,0.22);
    color: #fff;
  }
  .hybrid-action-ico svg { width: 18px; height: 18px; }
  .hybrid-action-text { flex: 1; min-width: 0; }
  .hybrid-action-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }
  .hybrid-action-text span {
    display: block;
    font-size: 11.5px;
    opacity: 0.8;
    margin-top: 2px;
    line-height: 1.3;
  }

  /* === Édition inline des dimensions (V1.11) === */
  .inline-dims {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin: 4px 0 6px;
  }
  .inline-dim-field {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 12px;
    background: var(--paper);
    border: 1.5px dashed var(--lm-soft);
    cursor: text;
    transition: all 0.15s ease;
    min-width: 92px;
    justify-content: center;
  }
  .inline-dim-field:hover { border-color: var(--lm); background: #FCFEF9; }
  .inline-dim-field:active { transform: scale(0.99); }
  .inline-dim-field.is-edited {
    border-color: var(--lm);
    border-style: solid;
    background: var(--lm-tint);
  }
  .inline-dim-field.is-editing {
    border-color: var(--lm);
    border-style: solid;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(120,190,32,0.18);
  }
  .inline-dim-value {
    font-family: var(--display);
    font-size: 30px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
    min-width: 56px;
    text-align: center;
    background: transparent;
    border: none;
    padding: 0;
    outline: none;
    -moz-appearance: textfield;
  }
  .inline-dim-value::-webkit-outer-spin-button,
  .inline-dim-value::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .inline-dim-unit {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .inline-dim-times {
    font-family: var(--display);
    font-size: 24px;
    color: var(--ink-3);
    font-weight: 400;
    user-select: none;
  }
  .inline-dim-hint {
    text-align: center;
    font-size: 11.5px;
    color: var(--ink-3);
    margin-top: 8px;
    line-height: 1.4;
  }
  .inline-dim-hint .ico-pencil {
    display: inline-block;
    width: 11px;
    height: 11px;
    vertical-align: -1px;
    margin-right: 3px;
    opacity: 0.7;
  }
  .inline-dim-ratio-note {
    text-align: center;
    font-size: 10.5px;
    color: var(--lm-darker);
    margin-top: 6px;
    font-family: var(--mono);
    letter-spacing: 0.02em;
    opacity: 0.85;
  }

  /* V1.14 : sous-titre directif sous "Point de départ" */
  .hybrid-panel-subtle {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 2px;
    opacity: 0.75;
  }

  /* V1.14 : chips de hauteurs typiques sous le champ H */
  .height-chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(120,190,32,0.25);
  }
  .height-chips-label {
    font-size: 11px;
    color: var(--ink-3);
    font-family: var(--body);
    margin-right: 2px;
  }
  .height-chip {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--paper);
    border: 1px solid var(--lm-soft);
    border-radius: 999px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.12s ease;
    letter-spacing: 0.02em;
  }
  .height-chip:hover {
    background: var(--lm-tint);
    border-color: var(--lm);
    color: var(--lm-darker);
  }
  .height-chip:active { transform: scale(0.96); }
  .height-chip.is-active {
    background: var(--lm);
    border-color: var(--lm);
    color: #fff;
  }

  /* === Modal "1 cote" === */
  .one-cote-modal .modal-content {
    max-width: 380px;
    padding: 22px 24px;
  }
  .one-cote-modal h3 {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 6px 0;
  }
  .one-cote-modal > .modal-content > p {
    font-size: 13px;
    color: var(--ink-3);
    margin: 0 0 18px 0;
    line-height: 1.5;
  }
  .one-cote-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }
  .one-cote-tab {
    padding: 10px 12px;
    border: 1.5px solid var(--line-2);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    font-family: inherit;
  }
  .one-cote-tab.active {
    border-color: var(--lm);
    background: var(--lm-tint);
    color: var(--lm-darker);
  }
  .one-cote-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--paper-2);
    border: 1.5px solid var(--line-2);
    border-radius: 12px;
    padding: 14px 16px;
  }
  .one-cote-input-row label {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    font-weight: 700;
    flex-shrink: 0;
  }
  .one-cote-input-row input {
    flex: 1;
    font-family: var(--display);
    font-size: 28px;
    font-weight: 600;
    background: transparent;
    border: 0;
    outline: none;
    text-align: right;
    color: var(--ink);
    width: 100%;
    min-width: 0;
  }
  .one-cote-input-row .unit {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-3);
    font-weight: 600;
  }
  .one-cote-preview {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--lm-tint);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--lm-darker);
    line-height: 1.5;
  }
  .one-cote-preview strong { font-weight: 700; }
  .one-cote-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
  }
  .one-cote-modal-actions button { flex: 1; }
  .confirm-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
    transition: all 0.15s;
  }
  .confirm-row:hover { border-color: var(--lm); }
  .confirm-row .ico {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--lm-tint);
    color: var(--lm-darker);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .confirm-row .ico svg { width: 18px; height: 18px; }
  .confirm-row .info { flex: 1; min-width: 0; }
  .confirm-row .info strong {
    display: block;
    font-size: 13px; font-weight: 600;
    margin-bottom: 2px;
  }
  .confirm-row .info span {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
  }
  .confirm-row .edit-btn {
    background: var(--paper-3);
    color: var(--ink-2);
    border: 0;
    padding: 7px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
  }
  .confirm-row .edit-btn:hover { background: var(--lm); color: #fff; }

  /* ============================================================
     V0.9 — EDIT DIMENSIONS
  ============================================================ */
  .edit-form {
    display: flex; flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
  }
  /* ============================================================
     MANUAL INPUT
  ============================================================ */
  .manual-input-illu {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 16/10;
  }
  .manual-input-illu svg { width: 100%; height: 100%; max-width: 380px; }

  .manual-tip {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 14px;
    background: var(--lm-tint);
    border-radius: 10px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--lm-darker);
    line-height: 1.4;
  }
  .manual-tip svg { flex-shrink: 0; margin-top: 1px; color: var(--lm-darker); }

  /* ============================================================
     EDIT MUR : DRAG-TO-EDIT photo + handles
  ============================================================ */
  .edit-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--paper-3);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 14px;
    /* V1.48 FIX CRITIQUE MOBILE : retour à `none` sur le wrap (était `pan-y` en V1.47).
       En `pan-y`, le drag d'un handle sur iPhone faisait scroller la page (le navigateur
       reprenait la main sur le geste vertical). En `none`, le canvas a toute la priorité
       sur les gestes tactiles. Le scroll de la page reste possible via les marges/header
       qui sont en touch-action par défaut. */
    touch-action: none; /* r133 : annule r122, restaure fix V1.48 (drag des coins sans scroll page) */
    user-select: none;
    -webkit-user-select: none;
    /* V1.51 : empêcher le rebound iOS Safari pendant le drag. Sans ça, sur certains
       iPhones, drag + scroll natif coexistaient et créaient une sensation de glissement. */
    overscroll-behavior: contain;
  }
  .edit-photo-wrap img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
  }
  .edit-photo-wrap canvas {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
  }

  .edit-live-dims {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 8px 14px;
    border-radius: 100px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.30);
    z-index: 5;
  }
  .edit-live-dim { display: flex; align-items: baseline; gap: 4px; }
  .edit-live-dim-label {
    color: #78BE20;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .edit-live-dim-val {
    font-size: 16px;
    font-weight: 800;
    font-family: var(--display);
    letter-spacing: -0.01em;
  }
  .edit-live-dim-unit {
    color: rgba(255,255,255,0.55);
    font-size: 10px;
    font-weight: 600;
  }
  .edit-live-dim-sep {
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    font-weight: 400;
  }
  .edit-live-dims.is-pulsing {
    animation: livePulse 0.4s ease-out;
    background: rgba(120, 190, 32, 0.92);
  }
  @keyframes livePulse {
    0% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.08); }
    100% { transform: translateX(-50%) scale(1); }
  }

  .edit-section-title {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 16px 0 8px;
  }
  .edit-section-title svg {
    color: var(--lm-darker);
    flex-shrink: 0;
  }

  /* V1.26 : CSS .edit-a4-info / .edit-a4-toggle supprimé */

  .edit-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .edit-input-wrap {
    background: var(--paper);
    border: 1.5px solid var(--line-2);
    border-radius: 14px;
    padding: 14px 16px 12px;
    transition: all 0.15s;
  }
  .edit-input-wrap:focus-within {
    border-color: var(--lm);
    box-shadow: 0 0 0 4px rgba(120,190,32,0.15);
  }
  .edit-input-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 6px;
    font-weight: 600;
  }
  .edit-input-row {
    display: flex; align-items: baseline; gap: 6px;
  }
  .edit-input {
    flex: 1;
    border: 0; background: transparent;
    font-family: var(--display);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink);
    outline: none;
    width: 100%;
    -moz-appearance: textfield;
  }
  .edit-input::-webkit-outer-spin-button,
  .edit-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .edit-unit {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-3);
    flex-shrink: 0;
  }

  /* V1.39 : style "estimation IA" — champ pré-rempli mais non confirmé */
  .edit-input-wrap.is-ai-estimate {
    background: #FAF7F1;
    border-color: #E8DFC9;
    border-style: dashed;
  }
  .edit-input-wrap.is-ai-estimate .edit-input {
    color: #9A8E72;
    font-style: italic;
  }
  .edit-input-wrap.is-ai-estimate .edit-unit {
    color: #B8AB8E;
  }
  .edit-input-wrap.is-confirmed {
    border-color: #78BE20;
    background: #F4FAEC;
  }
  .edit-input-wrap.is-confirmed .edit-input {
    color: var(--ink);
    font-style: normal;
  }

  .edit-input-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 100px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .edit-input-badge.badge-ai {
    background: #FF7A30;
    color: #fff;
  }
  .edit-input-badge.badge-confirmed {
    background: #78BE20;
    color: #fff;
  }
  .label-required {
    color: #E63946;
    font-weight: 700;
    margin-left: 4px;
  }
  .wall-cta-hint {
    color: #FF7A30;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 8px;
  }

  /* V2.10 r25 : couleur du chiffre dimension selon l'etat.
     Orange en estimation IA, noir en confirme. */
  .edit-input-wrap.is-ai-estimate .edit-input {
    color: #854F0B;  /* V2.10 r26 : VIP marron dore (charte) au lieu du rouge sang trop agressif */
  }
  .edit-input-wrap.is-confirmed .edit-input {
    color: #2C2520;
  }
  .openings-help-compact {
    font-size: 11px;
    color: var(--ink-3, #A89968);
    margin: 4px 0 0 0;
    opacity: 0.75;
    line-height: 1.4;
  }

  /* V1.39 : bandeau d'avertissement pour estimations IA */
  .ai-estimate-warning {
    background: linear-gradient(135deg, #FFF8E8 0%, #FAF1D8 100%);
    border: 1.5px solid #E8C97A;
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .ai-estimate-warning-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #E8C97A;
    color: #6B4E0A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    margin-top: 1px;
  }
  .ai-estimate-warning-content {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
    color: #6B4E0A;
  }
  .ai-estimate-warning-content strong {
    color: #4A3300;
    font-weight: 700;
  }
  .ai-estimate-warning.hidden {
    display: none;
  }

  /* V2.10 r23 : mini-legende ouvertures detectees sur page Confirm */
  .confirm-openings-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px 0 18px 0;
    font-size: 13px;
    color: var(--ink-2, #6B5418);
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .confirm-openings-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .confirm-openings-legend .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
  }
  .confirm-openings-legend .legend-dot-window { background: #185FA5; }
  .confirm-openings-legend .legend-dot-door { background: #993C1D; }
  .confirm-openings-legend .legend-sep {
    color: var(--ink-3, #A89968);
    opacity: 0.5;
  }

  /* List of openings (in edit mode) */
  .openings-list {
    display: flex; flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
  }
  .opening-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
  }
  .opening-item-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
  }
  .opening-item-icon.window {
    background: rgba(133,183,235,0.3);
    color: #185FA5;
  }
  .opening-item-icon.door {
    background: rgba(250,199,117,0.4);
    color: var(--vip-d);
  }
  .opening-item-info {
    flex: 1;
  }
  .opening-item-type {
    font-size: 13px;
    font-weight: 600;
  }
  .opening-item-dim {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin-top: 2px;
  }
  .opening-item-del {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink-3);
    cursor: pointer;
    font-size: 12px;
  }

  /* V1.40 : ouverture en mode expand inline */
  .opening-item.is-expanded {
    flex-direction: column;
    align-items: stretch;
    border-color: var(--lm);
    background: #FBFDF7;
  }
  .opening-item-header {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    cursor: pointer;
  }
  .opening-item-toggle {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--ink-3);
    cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s;
  }
  .opening-item.is-expanded .opening-item-toggle {
    transform: rotate(180deg);
    color: var(--lm-dark);
  }
  .opening-item-edit-zone {
    display: none;
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .opening-item.is-expanded .opening-item-edit-zone {
    display: block;
  }
  .opening-item-edit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }
  .opening-mini-input-wrap {
    background: var(--paper);
    border: 1.5px solid var(--line-2);
    border-radius: 12px;
    padding: 8px 10px;
    transition: all 0.15s;
  }
  .opening-mini-input-wrap:focus-within {
    border-color: var(--lm);
    box-shadow: 0 0 0 3px rgba(120,190,32,0.12);
  }
  .opening-mini-input-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 1px;
    font-weight: 600;
  }
  .opening-mini-input-row {
    display: flex; align-items: baseline; gap: 4px;
  }
  .opening-mini-input {
    flex: 1;
    border: 0; background: transparent;
    font-family: var(--display);
    font-size: 18px;
    font-weight: 400;
    color: var(--ink);
    outline: none;
    width: 100%;
    -moz-appearance: textfield;
  }
  .opening-mini-input::-webkit-outer-spin-button,
  .opening-mini-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .opening-mini-unit {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    flex-shrink: 0;
  }
  .opening-item-action-row {
    display: flex; gap: 6px;
  }
  .opening-item-action-btn {
    flex: 1;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    color: var(--ink-3);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-family: inherit;
  }
  .opening-item-action-btn.danger {
    color: var(--warn);
    border-color: rgba(196,74,26,0.3);
  }
  .opening-item-action-btn.ok {
    color: #fff;
    background: var(--lm);
    border-color: var(--lm-dark);
    font-weight: 600;
  }
  .opening-item-action-btn.ok:hover {
    background: var(--lm-dark);
  }
  .opening-item-action-btn:hover {
    background: var(--paper-2);
  }
  .opening-add-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }
  .opening-add-btn {
    padding: 12px;
    background: var(--paper);
    border: 1.5px dashed var(--line-2);
    border-radius: 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .opening-add-btn:hover {
    border-style: solid;
    border-color: var(--lm);
    background: var(--lm-tint);
  }
  .opening-add-btn:active { transform: scale(0.98); }

  /* V2.10 r30 : bande rassurance commerciale sur Result, juste avant CTA.
     Charte Wallrus : couleur VIP marron dore, fond crème subtil, icones traits fins. */
  /* V2.10 r46 : Badge "Sauvegarde" sous le lede (rassurance immediate) */
  .result-saved-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 16px 0;
    padding: 4px 10px;
    background: rgba(120, 190, 32, 0.10);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: #3a5a16;
    letter-spacing: 0.01em;
  }
  .result-saved-badge svg {
    color: #78BE20;
    flex-shrink: 0;
  }

  /* V2.10 r46 : Banner non-connecte (incite a creer compte, non bloquant) */
  .result-signup-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 20px 0;
    padding: 14px 16px;
    background: rgba(250, 199, 117, 0.10);
    border: 1px solid rgba(133, 79, 11, 0.18);
    border-radius: 12px;
  }
  .result-signup-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: #FAC775;
    color: #6B4E0F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .result-signup-body {
    flex: 1;
    min-width: 0;
  }
  .result-signup-title {
    font-weight: 600;
    font-size: 14px;
    color: #1A1B20;
    margin-bottom: 2px;
  }
  .result-signup-text {
    font-size: 12px;
    color: #6b6b6b;
    line-height: 1.4;
  }
  .result-signup-btn {
    flex-shrink: 0;
    background: #FAC775;
    color: #6B4E0F;
    border: none;
    border-radius: 100px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
  }
  .result-signup-btn:hover {
    background: #F5B655;
  }

  .result-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 14px 0;
    padding: 10px 14px;
    background: linear-gradient(135deg, #FFFBF2 0%, #FAF4E4 100%);
    border: 1px solid rgba(133, 79, 11, 0.10);
    border-radius: 14px;
    flex-wrap: wrap;
  }
  .result-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #854F0B;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .result-trust-item svg {
    flex-shrink: 0;
    opacity: 0.85;
  }
  .result-trust-sep {
    color: rgba(133, 79, 11, 0.35);
    font-weight: 400;
    font-size: 12px;
  }

  /* ============================================================
     V0.9 — SIMPLIFIED CTA (Apple-like e-commerce)
  ============================================================ */
  .add-cart-cta {
    background: var(--lm);
    color: #fff;
    border: 0;
    border-radius: 100px;
    padding: 18px 22px;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    box-shadow: var(--shadow-lm);
    margin-bottom: 12px;
    transition: all 0.18s;
  }
  .add-cart-cta:active { transform: scale(0.98); }
  .add-cart-cta:hover { background: var(--lm-dark); }
  .add-cart-cta svg { width: 20px; height: 20px; }
  .add-cart-cta .pieces {
    background: rgba(255,255,255,0.22);
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 4px;
  }

  .secondary-actions {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .secondary-btn {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    transition: all 0.15s;
  }
  .secondary-btn:hover {
    background: var(--paper-2);
    border-color: var(--ink-3);
  }
  .secondary-btn svg { width: 14px; height: 14px; opacity: 0.7; }

  /* Bouton sauvegarder en évidence (vert LM) */
  .secondary-btn-save {
    background: var(--lm-tint) !important;
    border: 1.5px solid var(--lm) !important;
    color: var(--lm-darker) !important;
    font-weight: 700;
  }
  .secondary-btn-save:hover {
    background: var(--lm-soft) !important;
    border-color: var(--lm-dark) !important;
  }
  .secondary-btn-save svg { color: var(--lm-dark); opacity: 1 !important; }

  /* ============================================================
     V0.9 — TECHNICAL SCHEMA (proper drafting style)
  ============================================================ */
  .wall-view-canvas.tech-schema {
    background: #fff;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center; justify-content: center;
    padding: 20px;
  }
  .wall-view-canvas.tech-schema #schemaContent {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wall-view-canvas.tech-schema svg {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    display: block;
  }

  /* ============================================================
     V0.9 — EMAIL MODAL INPUT
  ============================================================ */
  .email-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--line-2);
    border-radius: 14px;
    font-family: var(--body);
    font-size: 15px;
    margin-bottom: 14px;
    outline: none;
    transition: all 0.15s;
  }
  .email-input:focus {
    border-color: var(--lm);
    box-shadow: 0 0 0 4px rgba(120,190,32,0.15);
  }

  /* ============================================================
     V2.0-alpha — MODALE AUTH (magic link)
  ============================================================ */
  .auth-modal {
    max-width: 380px;
    padding: 36px 28px 28px;
    text-align: center;
    position: relative;
    background: var(--paper);
    border-radius: 24px;
  }
  .auth-modal .modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: var(--paper-3);
    color: var(--ink-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .auth-modal .modal-close:hover { background: var(--lm-soft); color: var(--ink); }
  .auth-state { animation: authFadeIn 0.3s ease; }
  @keyframes authFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .auth-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--vip-tint);
    color: var(--vip-d);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
  }
  .auth-icon-success {
    background: var(--lm-soft);
    color: var(--lm-darker);
  }
  .auth-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: 10px;
    color: var(--ink);
  }
  .auth-subtitle {
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.5;
    margin-bottom: 22px;
  }
  .auth-subtitle strong {
    color: var(--lm-darker);
    font-weight: 700;
  }
  .auth-email-input {
    width: 100%;
    appearance: none;
    background: var(--paper-3);
    border: 1px solid var(--line-2);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    font-weight: 500;
    padding: 14px 16px;
    border-radius: 14px;
    text-align: center;
    margin-bottom: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
  }
  .auth-email-input:focus {
    outline: none;
    border-color: var(--vip-d);
    box-shadow: 0 0 0 4px rgba(250,199,117,0.20);
  }
  .auth-email-input::placeholder { color: var(--ink-3); opacity: 0.6; }
  .auth-error {
    background: var(--warn-bg);
    color: var(--warn);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
  }
  .auth-cta {
    width: 100%;
    appearance: none;
    background: var(--vip);
    color: #1A1B20;
    border: 0;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 700;
    padding: 14px 18px;
    border-radius: 100px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--shadow-lm);
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
  }
  .auth-cta:hover:not(:disabled) { background: var(--vip-dark); }
  .auth-cta:active:not(:disabled) { transform: scale(0.985); }
  .auth-cta:disabled { opacity: 0.6; cursor: not-allowed; }
  .auth-cta-secondary {
    background: var(--paper-3);
    color: var(--ink-2);
    box-shadow: none;
    border: 1px solid var(--line);
  }
  .auth-cta-secondary:hover:not(:disabled) { background: var(--lm-tint); color: var(--lm-darker); }
  .auth-spinner {
    animation: authSpin 0.8s linear infinite;
  }
  @keyframes authSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .auth-fineprint {
    margin-top: 16px;
    font-size: 11px;
    color: var(--ink-3);
    line-height: 1.4;
  }
  .auth-fineprint a {
    color: var(--vip-d);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-weight: 600;
  }
  .auth-fineprint a:hover { color: var(--lm-darker); }
  /* ============================================================
     V2.2-alpha — HEADER ÉCRAN CART (= détail projet)
     Titre dynamique + bouton renommer subtil
  ============================================================ */
  .cart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
  }
  .cart-header .h-hero { margin-bottom: 0; flex: 1; min-width: 0; word-break: break-word; }
  /* V2.9 r3 : bouton menu actions du projet courant (remplace le crayon) */
  .cart-menu-btn {
    background: var(--paper-3);
    border: 1px solid var(--line);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-2);
    transition: all 0.15s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .cart-menu-btn:hover {
    background: #fff;
    border-color: rgba(20,15,5,0.32);
    color: var(--ink);
  }
  /* V2.9 r3 : aligner verticalement le titre + bouton menu */
  .cart-header {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .cart-header .h-hero {
    flex: 1;
    margin: 0;
  }
  .cart-rename-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    margin-top: 8px;
    -webkit-tap-highlight-color: transparent;
  }
  .cart-rename-btn:hover {
    background: var(--vip-tint);
    color: var(--vip-d);
    border-color: var(--vip);
  }
  .cart-rename-btn:active { transform: scale(0.92); }

  /* ============================================================
     V2.2-alpha — MODALE "Continuer ou Nouveau projet"
  ============================================================ */
  .auth-sent-hint {
    font-size: 12px;
    color: var(--ink-3);
    background: var(--paper-3);
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 18px;
    line-height: 1.5;
  }
  .project-choice-modal {
    max-width: 380px;
    padding: 36px 28px 28px;
    text-align: center;
    position: relative;
    background: var(--paper);
    border-radius: 24px;
  }
  .project-choice-modal .modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: var(--paper-3);
    color: var(--ink-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .project-choice-modal .modal-close:hover { background: var(--lm-soft); color: var(--ink); }
  .project-choice-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--vip-tint);
    color: var(--vip-d);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
  }
  .project-choice-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 10px;
    color: var(--ink);
  }
  .project-choice-subtitle {
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.5;
    margin-bottom: 22px;
  }
  .project-choice-subtitle strong { color: var(--lm-darker); font-weight: 700; }
  .project-choice-btn {
    appearance: none;
    width: 100%;
    border: 0;
    padding: 14px 18px;
    border-radius: 100px;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
  }
  .project-choice-btn:active { transform: scale(0.985); }
  .project-choice-continue {
    background: var(--vip);
    color: #1A1B20;
    box-shadow: var(--shadow-lm);
  }
  .project-choice-continue:hover { background: var(--vip-dark); }
  .project-choice-new {
    background: var(--paper-3);
    color: var(--ink-2);
    border: 1px solid var(--line);
  }
  .project-choice-new:hover { background: var(--lm-tint); color: var(--lm-darker); }
  .project-choice-btn-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .project-choice-new .project-choice-btn-icon {
    background: var(--paper);
  }

  /* ============================================================
     V2.2-alpha — POPOVER ACTIONS (sur card projet, click ⋮)
     Petit menu floattant style "iOS contextual menu".
  ============================================================ */
  .project-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
  }
  .project-popover {
    position: fixed;
    z-index: 1000;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 12px 32px -8px rgba(60,40,20,0.18), 0 2px 8px -2px rgba(60,40,20,0.12);
    padding: 6px;
    min-width: 180px;
    overflow: hidden;
    animation: popoverIn 0.14s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top right;
  }
  @keyframes popoverIn {
    from { opacity: 0; transform: scale(0.92) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
  .project-popover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: 0;
    border-radius: 9px;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .project-popover-item:hover { background: var(--lm-tint); }
  .project-popover-item:active { background: var(--lm-soft); }
  .project-popover-item svg { color: var(--ink-3); flex-shrink: 0; }
  .project-popover-item-danger { color: #C2410C; }
  .project-popover-item-danger svg { color: #C2410C; }
  .project-popover-item-danger:hover { background: #FEE4D6; }

  /* ============================================================
     V2.2-alpha — MODALES WALLRUS (rename / delete)
     Design propre, palette chaude, animations subtiles.
     Réutilisable pour d'autres modales d'action.
  ============================================================ */
  .wallrus-modal {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: var(--paper);
    border-radius: 24px;
    padding: 36px 28px 24px;
    text-align: center;
    animation: wallrusModalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes wallrusModalIn {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
  .wallrus-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: var(--paper-3);
    color: var(--ink-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .wallrus-modal-close:hover { background: var(--lm-soft); color: var(--ink); }

  .wallrus-modal-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
  }
  .wallrus-modal-icon-edit { background: var(--vip-tint); color: var(--vip-d); }
  .wallrus-modal-icon-danger { background: #FEE4D6; color: #C2410C; }

  .wallrus-modal-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 10px;
    color: var(--ink);
  }
  .wallrus-modal-subtitle {
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .wallrus-modal-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--line-2);
    border-radius: 14px;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    background: var(--paper-2);
    margin-bottom: 16px;
    transition: border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .wallrus-modal-input:focus {
    outline: none;
    border-color: var(--vip-d);
    background: var(--paper);
  }
  .wallrus-modal-input::placeholder { color: var(--ink-3); opacity: 0.7; }

  /* === V2.10 r14 - FEEDBACK MODAL === */
  .feedback-label {
    display: block;
    font-family: var(--body);
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 4px 2px 8px 2px;
    text-align: left;
  }
  /* Dropdown custom feedback - meme look que wallrus-modal-input */
  .feedback-dropdown {
    position: relative;
    margin-bottom: 18px;
  }
  .feedback-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--line-2);
    border-radius: 14px;
    background: var(--paper-2);
    font-family: var(--body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .feedback-dropdown-trigger:hover { background: var(--paper); }
  .feedback-dropdown-trigger.open {
    border-color: var(--vip-d);
    background: var(--paper);
  }
  .feedback-dropdown-trigger.has-value {
    color: var(--ink);
    font-weight: 600;
  }
  .feedback-dropdown-label {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .feedback-dropdown-emoji {
    font-size: 20px;
    line-height: 1;
  }
  .feedback-dropdown-chevron {
    flex-shrink: 0;
    color: var(--ink-3);
    transition: transform 0.2s;
  }
  .feedback-dropdown-trigger.open .feedback-dropdown-chevron {
    transform: rotate(180deg);
    color: var(--vip-d);
  }
  .feedback-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--paper);
    border: 1.5px solid var(--line-2);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 100;
    overflow: hidden;
    animation: feedbackDropdownIn 0.15s ease-out;
  }
  @keyframes feedbackDropdownIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .feedback-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    border: 0;
    background: transparent;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
    -webkit-tap-highlight-color: transparent;
  }
  .feedback-dropdown-item + .feedback-dropdown-item {
    border-top: 1px solid var(--line-3, #eee);
  }
  .feedback-dropdown-item:hover { background: var(--paper-2); }
  .feedback-dropdown-item:active { background: var(--vip-light, #FFF8E8); }
  .feedback-dropdown-item.selected {
    background: var(--vip-light, #FFF8E8);
    color: var(--vip-d);
    font-weight: 600;
  }
  .feedback-cat-emoji { font-size: 20px; line-height: 1; flex-shrink: 0; }
  .wallrus-modal-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--line-2);
    border-radius: 14px;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    background: var(--paper-2);
    margin-bottom: 16px;
    transition: border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    resize: vertical;
    min-height: 110px;
    line-height: 1.5;
  }
  .wallrus-modal-textarea:focus {
    outline: none;
    border-color: var(--vip-d);
    background: var(--paper);
  }
  .wallrus-modal-textarea::placeholder { color: var(--ink-3); opacity: 0.7; }

  /* Card résumé du projet (modale delete) */
  .wallrus-modal-project-card {
    background: var(--paper-3);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    text-align: left;
  }
  .wallrus-modal-project-name {
    font-family: var(--display);
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wallrus-modal-project-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .wallrus-modal-warning {
    font-size: 12px;
    color: #C2410C;
    background: #FEE4D6;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 18px;
    line-height: 1.45;
    font-weight: 500;
  }

  .wallrus-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
  }
  .wallrus-modal-btn {
    flex: 1;
    appearance: none;
    border: 0;
    padding: 13px 14px;
    border-radius: 100px;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .wallrus-modal-btn:active { transform: scale(0.97); }
  .wallrus-modal-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
  .wallrus-modal-btn-primary {
    background: var(--vip);
    color: #1A1B20;
    box-shadow: var(--shadow-lm);
  }
  .wallrus-modal-btn-primary:hover:not(:disabled) { background: var(--vip-dark); }
  .wallrus-modal-btn-secondary {
    background: var(--paper-3);
    color: var(--ink-2);
    border: 1px solid var(--line);
  }
  .wallrus-modal-btn-secondary:hover { background: var(--lm-tint); }
  .wallrus-modal-btn-danger {
    background: #C2410C;
    color: #fff;
    box-shadow: 0 2px 8px -2px rgba(194,65,12,0.45);
  }
  .wallrus-modal-btn-danger:hover:not(:disabled) { background: #9A330A; }

  /* V2.2-alpha r5 : variante "large" pour la modale "Où enregistrer ?" qui
     contient une liste scrollable de projets. */
  .wallrus-modal-wide {
    max-width: 440px;
  }
  .save-project-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
    text-align: left;
    margin-top: 4px;
    /* Léger padding pour que la scrollbar ne touche pas le bord */
    padding-right: 4px;
  }
  /* Item de la liste : style card cliquable */
  .save-project-item {
    appearance: none;
    width: 100%;
    background: var(--paper-2);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    transition: all 0.15s;
    font-family: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .save-project-item:hover {
    border-color: var(--vip);
    background: var(--vip-tint);
    transform: translateY(-1px);
  }
  .save-project-item:active { transform: scale(0.98); }
  /* Variante : "+ Nouveau projet" mise en avant */
  .save-project-item-new {
    background: var(--vip-tint);
    border-color: rgba(140,111,34,0.30);
    border-style: dashed;
    color: var(--lm-darker);
    font-weight: 700;
  }
  .save-project-item-new:hover {
    background: var(--vip);
    border-color: var(--vip-d);
    border-style: solid;
    color: #1A1B20;
  }
  .save-project-item-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--vip-d);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .save-project-item-new .save-project-item-icon {
    background: var(--vip);
    color: #1A1B20;
  }
  .save-project-item-text { flex: 1; min-width: 0; }
  .save-project-item-name {
    font-family: var(--display);
    font-weight: 500;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .save-project-item-new .save-project-item-name {
    font-family: var(--body);
    font-weight: 700;
    font-size: 14px;
    color: var(--lm-darker);
  }
  .save-project-item-new:hover .save-project-item-name { color: #1A1B20; }
  .save-project-item-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .save-project-item-arrow {
    flex-shrink: 0;
    color: var(--ink-3);
    opacity: 0.5;
    transition: opacity 0.15s;
  }
  .save-project-item:hover .save-project-item-arrow { opacity: 0.9; color: var(--vip-d); }

  /* ========================================================
     V2.2-alpha r10d — ÉCRAN APERÇU PROJET ("Voir le projet complet")
     Vue verticale présentation client, riche, esthétique.
  ======================================================== */
  .overview-header {
    margin-bottom: 18px;
  }
  .overview-header-text h1 {
    margin: 0 0 4px;
  }
  .overview-header-meta {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    margin: 0;
  }
  .overview-stats-card {
    background: var(--paper);
    border: 1px solid rgba(140, 111, 34, 0.12);
    border-radius: 18px;
    padding: 18px 16px 16px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(140, 111, 34, 0.05);
  }
  .overview-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }
  .overview-stat-cell {
    text-align: center;
    padding: 8px 4px;
    border-right: 1px solid rgba(140, 111, 34, 0.12);
  }
  .overview-stat-cell:last-child { border-right: none; }
  .overview-stat-num {
    font-family: var(--display);
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.05;
  }
  .overview-stat-lab {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-top: 4px;
  }
  .overview-r10-row {
    display: flex;
    justify-content: center;
    padding-top: 8px;
    border-top: 1px solid rgba(140, 111, 34, 0.10);
  }
  .overview-r10-row:empty { display: none; }
  .overview-section-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 14px;
  }
  /* V2.10 r37 : Badge eyebrow "Plan de pose complet" sur Project Overview.
     Pattern Stripe/Apple : eyebrow petit + UPPERCASE + couleur accent
     Differencie visuellement Project Overview vs autres pages. */
  .overview-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 10px;
    background: linear-gradient(135deg, rgba(250, 199, 117, 0.15) 0%, rgba(245, 182, 85, 0.2) 100%);
    border: 1px solid rgba(133, 79, 11, 0.18);
    border-radius: 100px;
    font-family: var(--mono, monospace);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #854F0B;
    margin-bottom: 12px;
  }
  .overview-eyebrow svg {
    flex-shrink: 0;
    opacity: 0.85;
  }

  /* V2.10 r37 : Total tableau attenue (taille reduite, opacite ~75%).
     Le total reste lisible mais ne concurrence plus visuellement les lignes
     individuelles (qui sont l'info actionnable en magasin). */
  .overview-order tfoot td {
    opacity: 0.75;
    padding: 10px 4px 4px;
  }
  .overview-order tfoot .overview-order-total-label {
    font-size: 9px;
    color: var(--ink-3, #6B5418);
  }
  .overview-order tfoot strong {
    font-size: 13px;
    color: #2C2520;
  }
  .overview-order tfoot .col-quantity .quantity-lots {
    font-size: 11px;
  }
  .overview-order tfoot .col-quantity .quantity-lots strong {
    font-size: 14px;
  }
  .overview-order tfoot .col-quantity .quantity-pcs {
    font-size: 9px;
  }

  /* V2.10 r36-B-bis : Tableau "Commande a passer" style devis pro.
     Format identique au tableau de la cover PDF (coherence WYSIWYG).
     Cible : ingenieurs Khansaheb/Galian + artisans LM + pros BTP. */
  .overview-order-table {
    margin-top: 18px;
    background: #FFFBF2;
    border: 1px solid rgba(133, 79, 11, 0.15);
    border-radius: 14px;
    padding: 16px 14px 12px;
    box-shadow: 0 1px 3px rgba(133, 79, 11, 0.04);
  }
  .overview-order-title {
    font-family: Georgia, serif;
    font-size: 14px;
    font-weight: 500;
    color: #2C2520;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(133, 79, 11, 0.1);
  }
  .overview-order {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
  }
  .overview-order thead th {
    font-family: var(--mono, monospace);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3, #6B5418);
    font-weight: 700;
    padding: 0 4px 8px;
    text-align: left;
    opacity: 0.85;
    border-bottom: 1px solid rgba(133, 79, 11, 0.1);
  }
  /* V2.10 r36-C : Largeurs 4 colonnes optimisees pour mobile (au lieu de 5) */
  .overview-order .col-m2 {
    text-align: right;
    width: 14%;
  }
  .overview-order .col-quantity {
    text-align: right;
    width: 28%;
  }
  .overview-order .col-ref {
    width: 26%;
  }
  .overview-order tbody tr {
    border-bottom: 1px solid rgba(133, 79, 11, 0.05);
  }
  .overview-order tbody td {
    padding: 12px 4px;
    color: #2C2520;
    vertical-align: middle;
    line-height: 1.35;
  }
  /* HIERARCHIE TYPO SIMPLIFIEE A 3 NIVEAUX (V2.10 r36-C) :
     1. Headers/Titres        -> Georgia serif (premium)
     2. References + chiffres -> Monospace (technique)
     3. Descriptions/Noms     -> Sans-serif (lisible) */
  .overview-order tbody td.col-ref {
    font-family: var(--mono, monospace);
    font-weight: 700;
    font-size: 11px;
    color: #854F0B;
    letter-spacing: 0.02em;
  }
  .overview-order tbody td.col-desc {
    font-size: 12px;
  }
  .overview-order tbody td.col-desc .desc-name {
    font-weight: 600;
    display: block;
    line-height: 1.3;
    color: #2C2520;
  }
  .overview-order tbody td.col-desc .desc-spec {
    font-family: var(--mono, monospace);
    font-size: 9px;
    color: var(--ink-3, #6B5418);
    opacity: 0.85;
    letter-spacing: 0.02em;
    margin-top: 2px;
    display: block;
  }
  .overview-order tbody td.col-m2 {
    font-family: var(--mono, monospace);
    font-size: 12px;
    font-weight: 600;
    color: #2C2520;
  }
  /* Colonne quantite : "X lots" en grand + "(Y panneaux)" en petit dessous */
  .overview-order .col-quantity {
    line-height: 1.3;
  }
  .overview-order .col-quantity .quantity-lots {
    display: block;
    font-family: var(--mono, monospace);
    font-size: 12px;
    color: #2C2520;
    font-weight: 500;
  }
  .overview-order .col-quantity .quantity-lots strong {
    font-family: Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    color: #854F0B;
    margin-right: 3px;
  }
  .overview-order .col-quantity .quantity-pcs {
    display: block;
    font-family: var(--mono, monospace);
    font-size: 9px;
    color: var(--ink-3, #6B5418);
    opacity: 0.8;
    letter-spacing: 0.02em;
    margin-top: 1px;
  }
  /* Footer TOTAL : meme format que cellules tbody */
  .overview-order tfoot .col-quantity .quantity-lots {
    font-size: 13px;
  }
  .overview-order tfoot .col-quantity .quantity-lots strong {
    font-size: 18px;
  }
  .overview-order tfoot td {
    padding: 12px 4px 4px;
    border-top: 1.5px solid rgba(133, 79, 11, 0.2);
  }
  .overview-order .overview-order-total-label {
    font-family: var(--mono, monospace);
    font-size: 10px;
    font-weight: 700;
    color: #854F0B;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .overview-order tfoot strong {
    font-family: Georgia, serif;
    font-size: 16px;
    font-weight: 500;
    color: #2C2520;
  }
  .overview-order-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(196, 74, 26, 0.05);
    border: 1px solid rgba(196, 74, 26, 0.12);
    border-radius: 8px;
    font-size: 10px;
    color: #C44A1A;
    line-height: 1.4;
  }
  .overview-order-note svg {
    flex-shrink: 0;
    opacity: 0.75;
  }

  /* V2.10 r35 : Fiche technique pro pour chaque mur sur Overview.
     Style "fiche metier" pour ingenieurs Khansaheb/Galian + pros BTP.
     Reference produits + dimensions + performance explicites. */
  .overview-wall-pro {
    background: #FFFBF2;
    border: 1px solid rgba(133, 79, 11, 0.12);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(133, 79, 11, 0.04);
  }
  .overview-wall-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(133, 79, 11, 0.08);
  }
  .overview-wall-num {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #FAC775 0%, #F5B655 100%);
    color: #854F0B;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono, monospace);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
  }
  .overview-wall-title {
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: #2C2520;
    letter-spacing: -0.01em;
    flex: 1;
  }
  .overview-wall-specs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0;
  }
  .overview-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
  }
  .overview-spec-label {
    color: var(--ink-3, #6B5418);
    font-weight: 500;
  }
  .overview-spec-value {
    color: #2C2520;
    font-weight: 600;
    font-family: var(--mono, monospace);
    letter-spacing: 0.02em;
  }
  .overview-wall-panels-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3, #6B5418);
    font-weight: 600;
    margin: 16px 0 8px 0;
    opacity: 0.8;
  }
  .overview-wall-panels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
  }
  .overview-panel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(133, 79, 11, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
  }
  .overview-panel-badge {
    width: 38px; height: 38px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono, monospace);
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
  }
  .overview-panel-badge.vip {
    background: linear-gradient(135deg, #FAC775 0%, #F5B655 100%);
    color: #854F0B;
  }
  .overview-panel-badge.cut {
    background: linear-gradient(135deg, #F0997B 0%, #E07D5A 100%);
    color: #993C1D;
  }
  .overview-panel-info {
    flex: 1;
    min-width: 0;
  }
  .overview-panel-name {
    font-size: 13px;
    font-weight: 600;
    color: #2C2520;
    line-height: 1.3;
  }
  .overview-panel-ref {
    font-family: var(--mono, monospace);
    font-size: 10px;
    color: var(--ink-3, #6B5418);
    letter-spacing: 0.02em;
    margin-top: 2px;
    opacity: 0.85;
  }

  /* V2.10 r36-B : metrics m2 + lots sous la reference */
  .overview-panel-metrics {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 11px;
    color: var(--ink-3, #6B5418);
  }
  .overview-panel-metric {
    font-family: var(--mono, monospace);
    letter-spacing: 0.02em;
    font-weight: 500;
  }
  .overview-panel-metric strong {
    color: #854F0B;
    font-weight: 700;
  }
  .overview-panel-metric-sep {
    opacity: 0.4;
  }
  .overview-panel-extra-badge {
    background: rgba(196, 74, 26, 0.1);
    color: #C44A1A;
    padding: 1px 6px;
    border-radius: 6px;
    font-family: var(--mono, monospace);
    font-size: 9px;
    font-weight: 700;
    margin-left: 4px;
    letter-spacing: 0.05em;
  }
  .overview-panel-qty-num {
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
  }
  .overview-panel-qty {
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    color: #2C2520;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .overview-panel-qty small {
    font-family: var(--mono, monospace);
    font-size: 9px;
    font-weight: 600;
    color: var(--ink-3, #6B5418);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 2px;
    opacity: 0.7;
  }

  /* V2.10 r36-A : centrer le badge R=10 dans la fiche technique pro */
  .overview-wall-pro .overview-wall-r10 {
    display: flex;
    justify-content: center;
    margin-top: 12px;
  }

  .overview-walls {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
  }
  /* Carte de mur : photo en haut, schéma au milieu, stats en bas */
  .overview-wall {
    background: var(--paper);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(140, 111, 34, 0.10);
  }
  .overview-wall-photo {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--paper-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .overview-wall-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .overview-wall-photo .placeholder {
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 12px;
    text-align: center;
    padding: 16px;
    line-height: 1.6;
  }
  .overview-wall-photo .placeholder small {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    opacity: 0.7;
  }
  .overview-wall-schema {
    width: 100%;
    padding: 16px 18px;
    background: var(--paper-2);
    border-top: 1px solid rgba(140, 111, 34, 0.08);
    border-bottom: 1px solid rgba(140, 111, 34, 0.08);
  }
  .overview-wall-schema:empty { display: none; }
  .overview-wall-schema svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .overview-wall-body {
    padding: 14px 18px 18px;
  }
  .overview-wall-name {
    font-family: var(--display);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 4px;
  }
  .overview-wall-stats {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-bottom: 10px;
  }
  .overview-wall-r10 {
    margin-top: 0;
  }
  .overview-actions {
    margin-top: 8px;
    margin-bottom: 32px;
  }
  .overview-btn-pdf {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    font-family: var(--display);
    font-weight: 500;
    font-size: 16px;
  }

  /* ========================================================
     V2.2-alpha r10a — MODALE DÉTAIL SURFACE
     Plein écran (ou max-width sur desktop), photo en grand,
     stats, et schéma de pose si dispo.
  ======================================================== */
  .surface-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(20, 16, 10, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
    animation: fadeInOverlay 0.2s ease-out;
  }
  .surface-detail-overlay.show { display: flex; }
  .surface-detail-content {
    background: var(--paper);
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    padding: 18px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    margin: auto 0;
    animation: wallrusModalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .surface-detail-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(0,0,0,0.06);
    color: var(--ink);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    transition: background 0.15s;
  }
  .surface-detail-close:hover { background: rgba(0,0,0,0.12); }
  .surface-detail-photo {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--paper-2);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center;
  }
  .surface-detail-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .surface-detail-photo .placeholder {
    color: var(--ink-3);
    font-size: 13px;
    font-family: var(--mono);
    text-align: center;
    padding: 16px;
    line-height: 1.6;
  }
  .surface-detail-photo .placeholder small {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.7;
  }
  .surface-detail-info {
    padding: 0 4px;
    margin-bottom: 14px;
  }
  .surface-detail-name {
    font-family: var(--display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .surface-detail-stats {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
  }
  /* V2.2-alpha r10c — Badge R10 dans la modale détail surface */
  .surface-detail-r10 {
    margin-top: 10px;
  }
  .surface-detail-r10:empty { display: none; }
  .surface-detail-schema {
    background: var(--paper-2);
    border-radius: 12px;
    padding: 12px;
    overflow: hidden;
  }
  .surface-detail-schema:empty { display: none; }
  .surface-detail-schema svg { width: 100%; height: auto; display: block; }

  /* V2.0-rc1 : 3 bénéfices clés sous le bouton de l'écran initial */
  .auth-benefits {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
    flex-wrap: wrap;
  }
  .auth-benefit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--lm-darker);
    font-family: var(--mono);
    letter-spacing: 0.02em;
  }
  .auth-benefit svg {
    color: var(--vip-d);
    flex-shrink: 0;
  }

  /* V2.0-rc1 : 3 étapes claires sur l'écran "vérifie ta boite mail" */
  .auth-steps {
    background: var(--lm-tint);
    border: 1px solid var(--lm-soft);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
    text-align: left;
  }
  .auth-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
  }
  .auth-step-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--vip);
    color: #1A1B20;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .auth-step-text {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.4;
  }

  /* ============================================================
     V2.0-alpha — ÉCRAN MON COMPTE
  ============================================================ */
  .account-card {
    background: var(--paper-3);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 6px 18px;
    margin: 18px 0 20px;
  }
  .account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .account-row:last-child { border-bottom: 0; }
  .account-label {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ink-3);
    font-weight: 600;
  }
  .account-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
  }
  .account-role-badge {
    background: var(--vip);
    color: #1A1B20;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  /* V2.8 : preference langue documents */
  .account-row-lang {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .account-label-hint {
    display: block;
    font-family: var(--body);
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-3);
    font-weight: 400;
    margin-top: 4px;
  }
  .account-doc-lang-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .account-doc-lang-option {
    appearance: none;
    background: #FFFBF2;
    border: 1px solid rgba(20,15,5,0.18);
    border-radius: 999px;
    padding: 7px 14px 7px 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--body);
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 500;
  }
  .account-doc-lang-option img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }
  .account-doc-lang-option:hover {
    background: #fff;
    border-color: rgba(20,15,5,0.32);
    transform: translateY(-1px);
  }
  .account-doc-lang-option.is-selected {
    background: var(--vip);
    border-color: var(--vip-dark, #c98f2f);
    color: #1A1B20;
    font-weight: 700;
    box-shadow: 0 2px 8px -2px rgba(250,199,117,0.55);
  }
  .account-doc-lang-option.is-selected::after {
    content: "✓";
    margin-left: 4px;
    font-size: 13px;
    color: #6B5418;
    font-weight: 700;
  }
  .account-doc-lang-option.is-saving {
    opacity: 0.6;
    pointer-events: none;
  }
  .account-teaser {
    background: linear-gradient(135deg, var(--vip-tint) 0%, #FFF9EB 100%);
    border: 1px solid rgba(250,199,117,0.30);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .account-teaser-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--paper);
    color: var(--vip-d);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .account-teaser-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }
  .account-teaser-text {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
  }
  .account-signout {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* Toast pour notifications (login réussi, etc.) */
  .wallrus-toast {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    background: var(--ink);
    color: #fff;
    padding: 12px 20px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--body);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.30);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    max-width: 90vw;
  }
  .wallrus-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .wallrus-toast.success { background: #1a5d2e; }
  .wallrus-toast.error { background: #c44a1a; }


  /* === V2.10 r15 - Pages legales integrees dans l app === */
/* =========================================
   V2.10 r15 - Pages legales integrees dans l'app
   ========================================= */
.legal-screen-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 0 60px 0;
}
/* .legal-screen-back retire : on utilise .btn-link-retake pour cohérence */
.legal-content {
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: #2C2520;
  line-height: 1.65;
}
.legal-content h1 {
  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 8px 0;
  color: #2C2520;
}
.legal-content h2 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  margin: 40px 0 10px 0;
  color: #2C2520;
  letter-spacing: -0.01em;
}
.legal-content h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 24px 0 6px 0;
  color: #6B5418;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.legal-content p {
  margin: 10px 0;
  font-size: 14.5px;
  color: #2C2520;
}
.legal-content ul, .legal-content ol {
  margin: 10px 0 10px 8px;
  padding-left: 22px;
}
.legal-content li {
  margin: 5px 0;
  font-size: 14.5px;
}
.legal-content code {
  font-family: Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: rgba(140, 111, 34, 0.10);
  padding: 2px 6px;
  border-radius: 4px;
  color: #6B5418;
}
.legal-content a {
  color: #8C6F22;
  text-decoration: underline;
  text-decoration-color: rgba(140, 111, 34, 0.4);
  text-underline-offset: 2px;
}
.legal-content a:hover {
  text-decoration-color: #8C6F22;
}
.legal-content hr {
  border: 0;
  border-top: 1px solid rgba(140, 111, 34, 0.2);
  margin: 28px 0;
}
.legal-content table.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 13.5px;
}
.legal-content table.legal-table th {
  background: rgba(140, 111, 34, 0.10);
  color: #6B5418;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 9px 11px;
  text-align: left;
  font-weight: 600;
}
.legal-content table.legal-table td {
  padding: 9px 11px;
  border-bottom: 1px solid rgba(140, 111, 34, 0.12);
  vertical-align: top;
}
.legal-content table.legal-table tr:last-child td {
  border-bottom: 0;
}
.legal-content .legal-nav {
  display: flex;
  gap: 4px;
  margin: 8px 0 32px 0;
  padding: 4px;
  background: var(--paper-3);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.legal-content .legal-nav a {
  color: var(--ink-3);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 100px;
  transition: all 0.15s;
  cursor: pointer;
  white-space: nowrap;
}
.legal-content .legal-nav a:hover {
  color: var(--ink);
  background: rgba(140, 111, 34, 0.08);
}
.legal-content .legal-nav span.current {
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--paper);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(140, 111, 34, 0.10);
}
.legal-content .legal-nav .sep {
  display: none;
}
.legal-loading { padding: 24px 0; }

/* Footer legal mini : "Mentions legales · CGU · Politique de confidentialite" */
.legal-footer-mini {
  margin-top: 32px;
  padding: 16px 0 8px 0;
  font-size: 12px;
  color: #9A8C5A;
  text-align: center;
}
.legal-footer-mini a {
  color: #8C6F22;
  text-decoration: none;
  margin: 0 4px;
  cursor: pointer;
}
.legal-footer-mini a:hover {
  text-decoration: underline;
}
.legal-footer-mini .sep {
  color: rgba(140, 111, 34, 0.4);
  margin: 0 2px;
}

@media (max-width: 600px) {
  .legal-content h1 { font-size: 26px; }
  .legal-content h2 { font-size: 17px; }
}
  /* r124 TEST : scroll Android porte par .app au lieu de body. Cible .is-android uniquement. */
  html.is-android, html.is-android body { height: 100%; overflow: hidden; }
  html.is-android .app {
    height: 100dvh; max-height: 100dvh;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

/* === r175 : Pulse cardiaque synchronise sur warning + badges "A confirmer" === */
/* Remplace l ancienne modale d estimation : friction passive plutot que blocante. */
@keyframes pulse-halo-warning {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 201, 122, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(232, 201, 122, 0.55); }
}
@keyframes pulse-halo-badge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 48, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(255, 122, 48, 0.5); }
}
.ai-estimate-warning:not(.hidden) {
  animation: pulse-halo-warning 1.4s ease-in-out 21;
}
.edit-input-badge.badge-ai {
  animation: pulse-halo-badge 1.4s ease-in-out 21;
}