/* ============================================================
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);
/* r226 : bascule typo unique Karla (titres + corps), comme le kit design.
Fraunces/Inter Tight conserves dans le link mais plus references ici. */
--display: 'Karla', system-ui, -apple-system, sans-serif;
--body: 'Karla', system-ui, -apple-system, 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;
/* ============================================================
r227 : TOKENS DU KIT DESIGN (ambiance Honey). Utilises par les
ecrans refondus. Coexistent avec les variables --lm et --vip historiques.
============================================================ */
--w-bronze:#A88054; --w-bronze-deep:#8C6840; --w-bronze-soft:#C9A984;
--w-olive:#66734D; --w-olive-deep:#4F5A3B; --w-taupe:#99998C; --w-cream:#EDE3D6;
/* r258 : olive adouci (éclairci ~17%, légèrement désaturé) pour les toasts de
succès — au lieu du vert sapin #1a5d2e. Reste dans la famille olive du kit. */
--w-olive-soft:#7C895E;
--w-bg:#EDE3D6; --w-surface:#FFFFFF; --w-surface-2:#F8F1E6; --w-sunk:#E4D8C7;
--w-ink:#241D12; --w-ink-2:#5E5340; --w-ink-3:#948870; --w-ink-4:#BCAF94;
--w-line:rgba(36,29,18,.10); --w-line-2:rgba(36,29,18,.17); --w-hair:rgba(36,29,18,.06);
--w-hero:radial-gradient(135% 130% at 84% -12%, #F3B252 0%, #F6C977 44%, #FBE4B8 100%);
--w-hero-ink:#2C2110; --w-hero-sub:rgba(44,33,16,.66); --w-hero-cta:#211B12;
--w-warm-1:#FBE7C5; --w-warm-2:#F7D6A1; --w-glow:rgba(168,128,84,.22);
--r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;
--sh-1:0 1px 2px rgba(28,26,22,.04),0 1px 3px rgba(28,26,22,.05);
--sh-2:0 2px 6px rgba(28,26,22,.05),0 6px 16px -6px rgba(28,26,22,.10);
--sh-3:0 4px 12px rgba(28,26,22,.06),0 18px 36px -14px rgba(28,26,22,.16);
--sh-4:0 8px 24px rgba(28,26,22,.08),0 34px 60px -22px rgba(28,26,22,.22);
--sh-bronze:0 6px 18px -6px rgba(140,104,64,.45); --sh-olive:0 6px 18px -6px rgba(79,90,59,.42);
--ease:cubic-bezier(.4,.01,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur:.28s;
}
/* r232 : pill langue avec globe + code (FR/EN/IT/AR) au lieu du drapeau */
/* r236 : globe SUPPRIMÉ — on ne garde que l'abréviation langue (FR/EN). Libère
l'espace du header => la flèche retour reste droite, plus de chevauchement. */
.lang-globe { display: none; }
.lang-code { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
* { 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 {
/* r253 : creme Honey global (au lieu de --paper-2). */
background: var(--w-bg);
}
/* 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);
/* r253 : creme Honey global (safe-area notch incluse). Desktop garde son surround. */
background: var(--w-bg);
color: var(--ink-2);
/* r242 : 100vh = GRANDE viewport iOS (barres repliees) => gonfle le body et
cassait le scroll natif (snap-back "fige", boutons Guide inatteignables sur
iPhone reel ~664px). 100dvh = viewport DYNAMIQUE qui suit le repli des barres
Safari => scroll natif correct. Fallback 100vh pour les vieux navigateurs. */
min-height: 100vh;
min-height: 100dvh;
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) */
/* r237 : safe-area-top DEPLACEE sur .topbar (le header sticky colle au top:0 du
scroller .app sur iOS et passait sous l'encoche quand déconnecté). On ne la met
plus sur body pour éviter un double décalage. */
padding-top: 0;
}
/* 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;
/* r242 : voir body — 100dvh (viewport dynamique iOS) + fallback 100vh. */
min-height: 100vh;
min-height: 100dvh;
/* r253 : FOND CREME HONEY GLOBAL (--w-bg #EDE3D6, fond de marque du kit) au lieu
du blanc --paper. Tous les ecrans sont desormais sur creme par defaut (fini le
scope ecran par ecran qui laissait des ecrans blancs). Les cartes/boutons restent
en --w-surface (blanc) PAR-DESSUS. */
background: var(--w-bg);
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;
/* r263→r264 : plafond 180→120→150px. La pastille icône (r264) libère ~50px
dans le header, on redonne donc de l'air au logo partenaire (150px). */
max-width: 150px;
overflow: hidden;
margin-left: 14px;
padding-left: 14px; /* r263 : espace incompressible entre séparateur et logo partenaire */
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: 100%; /* r264 : 100% du slot → l'image SCALE (object-fit:contain), jamais coupée par overflow */
object-fit: contain;
}
@media (max-width: 99999px) { /* r240 mobile-partout (ex 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; }
/* r264 - Logo retailer : plafond 150px (place libérée par la pastille icône) + img en
100% du slot (object-fit:contain → entier, jamais coupé). padding-left 12px = air côté
séparateur ; le gap vers la pastille compte donne l'air côté droit. */
.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: 12px; max-width: 150px; }
.topbar-right { gap: 6px; }
/* r237 : on conserve la safe-area haute (encoche) dans l'override mobile. */
.topbar { padding: max(12px, env(safe-area-inset-top)) 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;
}
/* r233 : nombres courts (-60% separe de "jusqu'à"), on garde la taille kit
sur mobile, juste un cran sous 360px geree plus bas. */
.micro-stat-num { font-size: 27px; }
/* 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. */
/* r255 : spacer retire — la barre est desormais en position:sticky, elle
reserve sa propre hauteur dans le flux (plus besoin de compenser). */
.overview-action-spacer {
display: none;
}
/* r255 : FIX calage barre basse iOS.
Cause : position:fixed DANS le scroller .app (-webkit-overflow-scrolling:touch
+ height:100dvh) => bug WebKit, la barre derivait avec le contenu et chevauchait
le tableau "Commande a passer" ; en plus le fond degrade transparent laissait
transparaitre le tableau dessous.
Fix : position:sticky (robuste dans le scroller inertiel iOS) => la barre est
dans le flux, reserve sa hauteur, le contenu scrolle PROPREMENT au-dessus.
Fond cream opaque (--w-bg) => plus aucun chevauchement visuel.
Plein-largeur via marges negatives calees sur le padding .screen (22px, 16px <400px). */
.overview-sticky-bar {
position: sticky;
bottom: 0;
width: auto;
margin: 16px -22px 0;
background: var(--w-bg);
padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
z-index: 50;
border-top: 1px solid rgba(133, 79, 11, 0.10);
box-shadow: 0 -8px 22px -12px rgba(133, 79, 11, 0.18);
box-sizing: border-box;
}
@media (max-width: 99999px) { /* r240 mobile-partout (ex max-width:400px) */
.overview-sticky-bar { margin-left: -16px; margin-right: -16px; }
}
/* r255 : plus de spacer ni de padding-bottom 120px herite de .screen sur cet
ecran — la barre sticky gere son propre fond bas (safe-area incluse). */
#screen-project-overview { padding-bottom: 0; }
.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 rgba(133, 79, 11, 0.15); /* r257 : hairline Honey (soulignement fin) */
/* r258 : scrollbar horizontale masquée, swipe natif conservé (overflow-x:auto). */
scrollbar-width: none;
-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-tabs::-webkit-scrollbar { display: none; }
.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); }
/* r259 : onglet actif = NAV → AMBRE (bronze-deep, lisible sur crème) ;
soulignement ambre + hairline Honey du conteneur. */
.admin-tab.is-active {
color: var(--w-bronze-deep);
border-bottom-color: var(--w-bronze-deep);
font-weight: 700;
}
.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(133, 79, 11, 0.12); /* r257 : hairline Honey */
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 */
/* r257 : carte réglages admin alignée bandeau Honey. */
.admin-settings-card {
background: #FFFBF2;
border: 1px solid rgba(133, 79, 11, 0.15);
border-radius: 14px;
box-shadow: 0 1px 3px rgba(133, 79, 11, 0.05);
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(133, 79, 11, 0.18); /* r257 : bordure Honey */
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,");
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;
}
/* r257 : CTA principal admin en OLIVE (système couleurs : olive = action). */
.admin-settings-save-btn {
appearance: none;
-webkit-appearance: none;
border: 0;
background: var(--w-olive);
color: #fff;
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(--w-olive-deep);
}
.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;
}
/* r257 : titre de section admin en Karla 700 (cohérent titres app). */
.admin-section-title {
font-family: var(--body);
font-weight: 700;
font-size: 18px;
color: var(--ink);
letter-spacing: -0.01em;
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;
}
/* r257 : item liste admin (revendeurs…) aligné bandeau Honey. */
.admin-list-item {
background: #FFFBF2;
border: 1px solid rgba(133, 79, 11, 0.15);
border-radius: 12px;
box-shadow: 0 1px 3px rgba(133, 79, 11, 0.05);
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 rgba(133, 79, 11, 0.15); /* r257 : bordure Honey */
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: #FFFBF2;
border: 1px solid rgba(133, 79, 11, 0.15);
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);
border: 1px solid rgba(133, 79, 11, 0.18); /* r257 : bordure Honey */
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;
}
/* r257 : tuile outil admin alignée bandeau Honey. */
.admin-tool-btn {
appearance: none;
background: #FFFBF2;
border: 1px solid rgba(133, 79, 11, 0.15);
box-shadow: 0 1px 3px rgba(133, 79, 11, 0.05);
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 rgba(133, 79, 11, 0.15); /* r257 : hairline Honey */
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; }
/* r234 : pastille code langue (FR/EN/IT/AR) a la place du drapeau, fidele au kit. */
.lang-code-pill {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 24px;
padding: 0 7px;
border-radius: 8px;
background: var(--w-surface-2);
color: var(--w-ink);
font-family: var(--body);
font-size: 12px;
font-weight: 800;
letter-spacing: .03em;
}
.lang-menu-item.is-active .lang-code-pill {
background: var(--w-hero-cta);
color: #FCF4E6;
}
/* 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);
/* r258 : neutralisée — crème uni (--w-bg) pour TOUS les tenants, plus jamais
colorée par le revendeur. applyRetailer pose encore --trust-bg mais plus
rien ne le consomme visuellement. */
background: var(--w-bg);
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;
/* r235 : gap minimum garanti entre groupe gauche (logo + Measure) et groupe
droit (Mon compte / logo revendeur) — empêche tout chevauchement quelle
que soit la config tenant (applyRetailer). */
gap: 12px;
/* r237 : le header respecte TOUJOURS la safe-area haute (encoche/Dynamic Island),
quel que soit l'état connecté/déconnecté et sur toutes les pages. max() garde
12px mini hors iOS. Le fond translucide du header couvre la zone d'encoche. */
padding: max(12px, env(safe-area-inset-top)) 18px 12px;
/* r253 : header creme Honey global (translucide) — coherent avec le fond creme
de tous les ecrans (avant : welcome/guide seulement). */
background: rgba(237,227,214,0.92);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
/* r257 : header EN FLUX — il scrolle avec la page partout (Welcome, Compte,
Scan, Dimensions, Plan de pose, back-office). Annule le sticky r246. La
safe-area haute (padding max(12px,env()) ci-dessus) reste, meme header
deconnecte du top. Exception inchangee : le Guide force position:static via
body:has(#screen-guide.active) plus bas (cadrage au titre).
r258 : position:relative (et NON sticky/fixed — reste dans le flux, aucun
decalage visuel) + z-index:50 pour recreer un stacking context au-dessus du
contenu. Sinon le z-index etait ignore (static) et le dropdown langue
(.lang-menu z-index:100, ancre sur .lang-picker) passait DERRIERE le hero
ambre du Welcome. */
position: relative;
z-index: 50;
border-bottom: 1px solid var(--w-line);
}
/* r235 : la gauche peut rétrécir (min-width:0) pour céder la place au groupe
droit ; le groupe droit garde sa taille (flex-shrink:0) pour rester lisible. */
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
/* 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. */
/* r263 : le groupe droit PEUT céder de la largeur (flex-shrink par défaut + min-width:0)
→ le .retailer-logo-slot (flex:1 1 auto, min-width:0, overflow:hidden) absorbe la
compression. Le logo Wallrus (.brand-logo flex-shrink:0) reste, lui, toujours entier. */
.topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* 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;
/* r259 : header = NAV → AMBRE (hiérarchie couleur définitive, plus d'olive).
"Se connecter" en or --lm ; "Mon compte" en ambre --vip (override plus bas). */
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); }
/* r259 : "Mon compte" = nav → AMBRE plein (--vip), texte anthracite. */
.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; }
/* r264 : pastille compte/connexion = rond compact (remplace le bouton texte) →
libère ~50px dans le header (règle la troncature/chevauchement du logo partenaire).
Distinction d'état CONSERVÉE (pas de background ici, chaque état garde le sien) :
- déconnecté .auth-pill-signin → fond --lm (or foncé), icône blanche (color:#fff de .auth-pill)
- connecté .auth-pill-account → fond --vip (doré), icône anthracite (#1A1B20)
!important = bat les overrides mobile (.auth-pill svg display:none + .auth-pill padding). */
.auth-pill-icon {
width: 40px !important;
height: 40px !important;
padding: 0 !important;
gap: 0 !important;
border-radius: 50% !important;
justify-content: center;
}
.auth-pill-icon svg {
display: block !important; /* bat .auth-pill svg { display:none !important } (mobile) */
width: 22px !important;
height: 22px !important;
}
/* 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: 99999px) { /* r240 mobile-partout (ex 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;
/* r236 : flex-shrink:0 => le bouton garde ses 34×34 (cercle parfait) et ne se
déforme plus en ovale quand le header est serré. */
flex-shrink: 0;
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; min-width: 0; }
.brand-logo {
height: 22px;
width: auto;
display: block;
/* r235 : le logo Wallrus ne rétrécit jamais ; c'est "Measure" qui cède si besoin. */
flex-shrink: 0;
/* 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: 99999px) { /* r240 mobile-partout (ex 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; }
/* r233 : refonte kit Welcome — fond crème de marque (--w-bg #EDE3D6) scopé
à l'écran welcome uniquement (autres écrans inchangés). Le header sticky
prend une teinte crème assortie pour éviter le seam blanc/crème. */
/* r253 : overrides .app/.topbar welcome+guide SUPPRIMES — le fond creme est
desormais global (.app) et le header creme est global (.topbar ci-dessus). */
/* r233 : sur mobile, on reduit le padding lateral de la carte hero (inline 22px)
pour elargir le bouton "Commencer" et garder le sous-texte sur 1 ligne (~390px).
Scope <=480px : le Mac (viewport large) garde le padding 22px d'origine. */
@media (max-width: 99999px) { /* r240 mobile-partout (ex max-width:480px) */
/* r235 : sur mobile, on reduit le padding lateral du conteneur welcome a 12px
=> TOUT le contenu (hero, certifs, stats, SKIN) s'aligne a ~12px des bords,
plus proche du kit. Mac (viewport >480) garde le padding .screen d'origine. */
#screen-welcome {
padding-left: 12px !important;
padding-right: 12px !important;
}
#screen-welcome .start-card {
padding-left: 14px !important;
padding-right: 14px !important;
/* r235 : marge EXTERNE laterale a 0 pour que le hero s'aligne aux autres
blocs (a 12px via le padding conteneur), au lieu de 12+10=22px.
Distinct du padding interne 14px ci-dessus. */
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* 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 */
/* r252 : STYLE DE TITRE UNIFIE (ref kit measure-feedscreens) applique globalement
=> coherence sur tous les ecrans. Karla 700, clamp ~31px, mot accent en
italique leger (300) bronze (au lieu de l'ancien vert --lm-dark). */
h1.h-hero, h1.h-mid {
font-family: var(--display);
font-weight: 700;
font-size: clamp(26px, 7.6vw, 31px);
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--w-ink);
margin: 18px 0 8px;
}
h1.h-hero em, h1.h-mid em {
font-style: italic;
font-weight: 300;
color: var(--w-bronze-deep);
}
/* r260 : titres des modales inline (logout, suppression compte, login admin, AI,
accès refusé) repassés de Georgia serif → Karla, mot accent italique bronze
(cohérent avec les titres client). Classe ajoutée sur chaque h2, font-family
serif inline retirée pour laisser cette règle s'appliquer. */
.honey-modal-title {
font-family: var(--body);
font-weight: 700;
letter-spacing: -0.01em;
}
/* r261 : mot accent bronze étendu aux titres des bottom-sheets, orientation
et method (LOT 3). Tous en Karla déjà, juste le mot italique bronze. */
.honey-modal-title em,
.modal h3 em,
.method-modal-content h3 em {
font-style: italic;
font-weight: 300;
color: var(--w-bronze-deep);
}
.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: 99999px) { /* r240 mobile-partout (ex 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;
}
/* ============================================================
r233 — CARTE SKIN (refonte fidele au kit measure-screens.jsx)
Fond bleu-ardoise, header pill SKIN + BIENTOT, rangee 4 matieres
avec selection, CTA dore "Rejoindre la liste d'attente" + preuve sociale.
============================================================ */
.skin-card {
position: relative;
overflow: hidden;
border-radius: var(--r-2xl);
background: linear-gradient(160deg, #33445F, #1A2538 82%);
color: #FCF4E6;
padding: 22px 20px 20px;
margin-bottom: 14px;
}
/* r235 : glow repoussé en bas-gauche pour ne plus créer de halo derrière
le badge BIENTÔT (top-right). Profondeur subtile conservée, badge plat et net. */
.skin-card-glow {
position: absolute; bottom: -70px; left: -50px;
width: 200px; height: 200px; border-radius: 50%;
background: radial-gradient(circle, rgba(201,169,132,.22), transparent 70%);
pointer-events: none;
}
.skin-card-sheen {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 22%);
pointer-events: none;
}
.skin-card > *:not(.skin-card-glow):not(.skin-card-sheen) { position: relative; z-index: 1; }
.skin-head { display: flex; align-items: center; gap: 8px; }
.skin-pill {
display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
border-radius: 999px; background: #FCF4E6; color: #1B160D;
font-size: 12.5px; font-weight: 800; letter-spacing: -.01em;
}
.skin-gen {
font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: rgba(252,244,230,.58);
}
.skin-soon {
margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
text-transform: uppercase; color: #2A2110; background: #F3CF87;
border-radius: 999px; padding: 5px 11px;
}
.skin-title {
font-family: var(--body);
font-size: 26px; font-weight: 800; letter-spacing: -.02em;
line-height: 1.08; margin: 13px 0 0; color: #FCF4E6;
}
.skin-title em {
font-style: italic; font-weight: 500; color: rgba(252,244,230,.78);
}
/* r234 : accent bronze sur le connecteur ("et"/"and"/"e"/"و") du titre SKIN. */
.skin-title .skin-et { color: var(--w-bronze-soft); }
.skin-sub {
font-size: 13.5px; font-weight: 600; color: rgba(252,244,230,.6); margin-top: 8px;
}
.skin-sub strong { color: rgba(252,244,230,.85); font-weight: 700; }
.skin-swatches {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 15px;
}
.skin-swatch-cell { min-width: 0; }
.skin-swatch {
position: relative; height: 60px; border-radius: 12px; overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -10px 16px -10px rgba(0,0,0,.45);
}
.skin-swatch.is-sel {
box-shadow: 0 0 0 2px var(--w-bronze-soft), inset 0 -10px 16px -10px rgba(0,0,0,.45);
}
.skin-swatch > svg { width: 100%; height: 100%; display: block; }
.skin-swatch-check {
position: absolute; top: 5px; right: 5px; z-index: 2;
width: 17px; height: 17px; border-radius: 999px;
display: grid; place-items: center;
background: var(--w-bronze-soft); color: #2A2110;
}
.skin-swatch-label {
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: rgba(252,244,230,.62); text-align: center; margin-top: 7px;
}
.skin-cta {
display: flex; align-items: center; justify-content: center; gap: 9px;
width: 100%; margin-top: 20px; height: 52px; border-radius: var(--r-pill);
border: none; background: #F3CF87; color: #2A2110; cursor: pointer;
font-family: var(--body); font-size: 15.5px; font-weight: 800; letter-spacing: -.01em;
box-shadow: 0 8px 22px -8px rgba(243,207,135,.6);
transition: transform .12s var(--ease);
}
.skin-cta:active { transform: scale(.99); }
.skin-proof {
display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 13px;
}
.skin-proof-avatars { display: inline-flex; }
.skin-proof-avatars i {
width: 20px; height: 20px; border-radius: 999px; display: block;
box-shadow: 0 0 0 2px #1A2538;
}
.skin-proof-avatars i:nth-child(1) { background: #B98552; }
.skin-proof-avatars i:nth-child(2) { background: #D9D4CB; margin-left: -7px; }
.skin-proof-avatars i:nth-child(3) { background: #9DB2BC; margin-left: -7px; }
.skin-proof-text { font-size: 12.5px; font-weight: 600; color: rgba(252,244,230,.7); }
.skin-proof-text b { color: #FCF4E6; }
/* 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);
}
/* r233 : typo alignée kit (t-kicker / sous-titre Karla) — fini le mono */
.certifications-label {
font-family: var(--body);
font-size: 11.5px;
font-weight: 700;
color: var(--w-ink-3);
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
margin-bottom: 5px;
}
.certifications-sub {
font-family: var(--body);
font-size: 14px;
font-weight: 500;
color: var(--w-ink-2);
text-align: center;
margin-bottom: 16px;
line-height: 1.45;
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. */
/* r233 : bande segmentee fidele au kit measure-screens.jsx.
Hairlines haut/bas (--w-line) + separateurs verticaux entre colonnes. */
.micro-stats {
display: flex;
margin: 10px 0 8px;
border-top: 1px solid var(--w-line);
border-bottom: 1px solid var(--w-line);
}
.micro-stats.micro-stats--hairline {
margin-top: 16px;
}
.micro-stat {
text-align: center;
flex: 1;
padding: 26px 8px;
}
.micro-stat + .micro-stat { border-left: 1px solid var(--w-line); }
.micro-stat-pre {
font-family: var(--body);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--w-ink-2);
height: 17px;
line-height: 17px;
}
.micro-stat-num {
font-family: var(--body);
font-weight: 600;
font-size: 29px;
letter-spacing: -0.03em;
color: var(--w-ink);
line-height: 1;
margin-top: 3px;
}
.micro-stat-lab {
font-family: var(--body);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--w-ink-3);
margin-top: 10px;
font-weight: 700;
}
.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;
}
/* r240 : grilles multi-colonnes desktop NEUTRALISÉES (min-width jamais atteint).
L'app est mobile partout → la liste projets reste sur 1 colonne, comme iPhone. */
@media (min-width: 99999px) {
.projects-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 99999px) {
.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;
}
/* r257 : carte "plan envoyé" alignée bandeau Honey. */
.mailing-card {
background: #FFFBF2;
border: 1px solid rgba(133, 79, 11, 0.15);
border-radius: 14px;
box-shadow: 0 1px 3px rgba(133, 79, 11, 0.05);
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(133, 79, 11, 0.22); }
.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 */
/* r257 : carte projet (Mes projets + Corbeille) alignée bandeau Honey. */
.project-card {
background: #FFFBF2;
border: 1px solid rgba(133, 79, 11, 0.15);
border-radius: 14px;
box-shadow: 0 1px 3px rgba(133, 79, 11, 0.05);
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;
}
/* r257 : tuile d'action compte alignée bandeau Honey (crème + ombre douce). */
.account-action-card {
appearance: none;
width: 100%;
background: #FFFBF2;
border: 1px solid rgba(133, 79, 11, 0.15);
border-radius: 14px;
box-shadow: 0 1px 3px rgba(133, 79, 11, 0.05);
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;
/* r259 : pastille AMBRE PLEINE + icône anthracite (hiérarchie : pastille = ambre). */
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
============================================================ */
/* r236 : illustration alignee kit — degrade chaud + ombre douce + rayon genereux. */
.guide-illu {
/* r250 : fond CHAUD plus contraste (warm-1 -> warm-2) pour ressortir du creme de
page (--w-bg), + bordure visible + ombre + petit cadre (padding) => la carte se
detache nettement. */
background: linear-gradient(155deg, var(--w-warm-1), var(--w-warm-2));
border: 1px solid var(--w-line);
border-radius: var(--r-xl);
box-shadow: var(--sh-2);
padding: 4px;
/* r250 : ratio equilibre 16:10 (viewBox SVG aligne 0 22 320 198 => perspective non
deformee, la piece respire au lieu d'etre ecrasee en panoramique). Largeur reduite
pour garder une hauteur compacte (~145px) => "tout tient sans scroll" preserve. */
/* r254 : illustration agrandie (235->290) pour plus de presence/equilibre vs les
cartes tips. Ratio 320/198 (16:10) STRICTEMENT egal au viewBox => zero distorsion,
perspective intacte. viewBox SVG NON touche. */
max-width: 290px;
margin: 0 auto 12px;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
aspect-ratio: 320 / 198;
}
.guide-illu svg { width: 100%; height: 100%; max-width: none; }
.guide-tips {
display: flex; flex-direction: column;
/* r247 : espacements resserres (gap 8->6, marge 16->10) pour completer le trim. */
gap: 6px;
margin-bottom: 10px;
}
/* r236 : cartes tips alignees kit — surface claire, ombre sh-1, rayon md.
r238 : padding compacte (12/14) pour limiter le scroll residuel. */
.guide-tip {
display: flex; align-items: flex-start; gap: 13px;
background: var(--w-surface);
border: 1px solid var(--w-hair);
border-radius: var(--r-md);
box-shadow: var(--sh-1);
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);
}
/* r236 : icone carre arrondi (kit) fond sunk + olive, au lieu du rond dore. */
.guide-tip-ico {
width: 42px; height: 42px;
border-radius: 12px;
background: var(--w-sunk);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: var(--w-olive-deep);
}
.guide-tip-txt { flex: 1; min-width: 0; }
.guide-tip-txt strong {
display: block;
/* r237 : clamp => titres tiennent mieux a 390px (evite le wrap 2 lignes). */
font-size: clamp(13px, 3.4vw, 15.5px);
font-weight: 700;
color: var(--w-ink);
letter-spacing: -0.005em;
margin-bottom: 2px;
}
.guide-tip-txt span {
font-size: clamp(13px, 3.6vw, 14.5px);
color: var(--w-ink-2);
line-height: 1.45;
}
/* r256 : nudge orientation non-bloquant. Affiche uniquement quand le tel est
detecte en portrait (classe .is-portrait posee par le JS). pointer-events:none
=> la pilule n'intercepte JAMAIS un clic et ne gene pas "Prendre la photo". */
.guide-tip-nudge {
display: none;
align-items: center;
gap: 5px;
margin-top: 6px;
padding: 3px 9px 3px 7px;
border-radius: 999px;
background: rgba(168, 128, 84, 0.16);
color: var(--w-bronze-deep, #6b4e2e);
font-weight: 700;
line-height: 1;
width: fit-content;
pointer-events: none;
}
#guideTipLandscape.is-portrait .guide-tip-nudge { display: inline-flex; }
/* neutralise l'heritage de .guide-tip-txt span (taille/couleur/interligne) */
.guide-tip-nudge span {
font-size: clamp(11px, 3vw, 12.5px);
color: inherit;
line-height: 1;
}
.guide-tip-nudge-ico {
flex: none;
transform-origin: 50% 50%;
animation: orientNudgeRotate 2.4s ease-in-out infinite;
}
@keyframes orientNudgeRotate {
0%, 55% { transform: rotate(0deg); }
75%, 100% { transform: rotate(-90deg); }
}
/* emphase discrete du conseil paysage quand portrait (transition deja sur .guide-tip) */
#guideTipLandscape.is-portrait {
border-color: var(--w-bronze, #A88054);
box-shadow: 0 0 0 1px var(--w-bronze, #A88054), var(--sh-1);
}
/* exigence : pas d'animation si l'utilisateur reduit les mouvements (icone statique) */
@media (prefers-reduced-motion: reduce) {
.guide-tip-nudge-ico { animation: none; }
}
/* r236 : titre Guide en hierarchie compacte facon kit (textes/cles inchanges). */
/* r252 : guide herite du titre global unifie ; on garde juste une marge serree
(l'ecran doit tenir sans scroll). */
#screen-guide .h-hero {
margin: 8px 0 6px;
}
#screen-guide .lede {
font-size: clamp(13.5px, 3.7vw, 14.5px);
color: var(--w-ink-2);
/* r247 : marge basse resserree (22->14) pour completer le trim. */
margin: 8px 0 14px;
max-width: none;
}
/* r254 : override Guide SUPPRIME — le .btn-primary global est desormais olive. */
/* r236 : bouton secondaire "Importer depuis la galerie" (kit), ghost discret. */
.guide-gallery-btn {
display: flex; align-items: center; justify-content: center;
width: 100%;
height: 32px;
margin-top: 2px;
border: none;
background: transparent;
color: var(--w-ink-3);
font-family: var(--body);
font-size: clamp(13.5px, 3.7vw, 14.5px);
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.guide-gallery-btn:active { transform: scale(0.98); }
/* r241 : barre sticky bas ABANDONNEE. Les 2 boutons (photo + galerie) sont dans le
flux normal et scrollent avec le contenu. onclick/ids/data-i18n/inputs inchanges
=> le scan reste branche. */
.guide-actions {
/* r247 : marge haute resserree (18->12) pour completer le trim. */
margin-top: 12px;
}
/* r247 : petit espace respirant SOUS les boutons ; safe-area iOS preservee. */
#screen-guide { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
/* r247 : sur le Guide UNIQUEMENT, le header passe en FLUX NORMAL (position:static)
=> il defile hors de vue vers le haut, ce qui recupere sa hauteur. A l'arrivee,
goScreen() scrolle au titre (header hors champ) ; l'utilisateur remonte pour
revoir le header (compte/langue). Les AUTRES ecrans gardent le header sticky. */
body:has(#screen-guide.active) .topbar { position: static; }
/* 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); }
/* ============================================================
r256 : MODAL ORIENTATION PORTRAIT supprimee (incitation paysage
desormais non-bloquante sur l'ecran guide). On conserve uniquement
les @keyframes fadeIn/slideUp, partagees par .method-modal ci-dessous.
============================================================ */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(16px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* ============================================================
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 {
/* r254 : fond creme Honey (au lieu du blanc --paper) — style modale commun. */
background: var(--w-bg);
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;
/* r261 : pastille ambre pleine + icône anthracite. */
background: var(--vip);
border: 1px solid var(--vip);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: #1A1B20;
}
.method-option-precise .method-option-ico {
/* r261 : variante "Recommandé" aussi en ambre pleine + anthracite. */
background: var(--vip);
border-color: var(--vip);
color: #1A1B20;
}
.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 {
/* r261 : badge "Recommandé" = ambre (sélection/badge), texte anthracite. */
background: var(--vip);
color: #1A1B20;
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%;
/* r261 : pastille de confirmation en ambre pleine (✓ anthracite, voir markup). */
background: var(--vip);
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;
font-weight: 600; /* r235 : référence produit légèrement plus en gras */
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; }
/* r254 : ACTION PRINCIPALE = OLIVE sur toute l'app (decision design globale).
Le bronze/ambre devient secondaire (boutons ghost, pills, badges). Texte blanc
sur olive #66734D ≈ contraste 5:1 (AA OK). */
.btn-primary { background: var(--w-olive); color: #fff; box-shadow: var(--sh-olive); }
.btn-primary:hover:not(:disabled) { background: var(--w-olive-deep); }
.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').
============================================================ */
/* r251 : carrousel restyle ambiance Honey (contenu + rotation JS inchanges). */
.scan-carousel {
width: 100%;
background: var(--w-warm-1);
border-radius: var(--r-lg);
padding: 16px 18px 12px;
margin-bottom: 18px;
border: 1px solid var(--w-hair);
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: clamp(13px, 3.6vw, 14px);
line-height: 1.4;
color: var(--w-ink-2);
margin: 0;
letter-spacing: 0.005em;
}
.scan-carousel-slide p strong {
color: var(--w-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: var(--w-line-2);
transition: background 0.3s ease, width 0.3s ease;
}
.scan-carousel-dots .dot.is-active {
background: var(--w-bronze);
width: 18px;
border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
.scan-carousel-slide,
.scan-carousel-dots .dot { transition: none; }
}
/* ============================================================
SCANNING — theatrical
============================================================ */
/* r251 : habillage Honey. ⚠️ aspect-ratio 4/3 + object-fit:contain CONSERVES
(geometrie photo<->canvas : getImageDisplayRect/resizeCanvas dessinent les boites
IA alignees sur la photo — NE PAS toucher). On ajoute juste ombre + cadre warm-dark. */
.scan-wrap {
position: relative;
width: 100%;
aspect-ratio: 4/3;
background: var(--w-hero-cta);
border-radius: var(--r-lg);
overflow: hidden;
margin-bottom: 18px;
box-shadow: var(--sh-2);
}
.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;
/* r251 : ligne de scan en bronze (Honey) au lieu du vert. */
background: linear-gradient(90deg, transparent, var(--w-bronze) 50%, transparent);
box-shadow: 0 0 16px var(--w-bronze-soft), 0 0 24px var(--w-bronze-soft);
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%);
/* r251 : badge "L'IA analyse" facon kit — fond warm-dark Honey + texte creme. */
background: var(--w-hero-cta);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #FCF4E6;
/* r235 : badge resserré (padding horizontal réduit) — moins large, plus net. */
padding: 7px 11px;
border-radius: 100px;
/* r252 : badge en Karla (--body) au lieu de mono JetBrains (coherence Honey). */
font-family: var(--body);
font-size: 11px;
letter-spacing: 0.03em;
text-transform: uppercase;
font-weight: 800;
z-index: 4;
transition: opacity 0.2s;
white-space: nowrap;
max-width: calc(100% - 72px);
overflow: hidden;
text-overflow: ellipsis;
}
/* r251 : checklist facon kit — carte blanche surface + ombre douce. */
.scan-checklist {
background: var(--w-surface);
border: 1px solid var(--w-hair);
border-radius: var(--r-lg);
box-shadow: var(--sh-1);
padding: 6px 16px;
margin-bottom: 18px;
}
.scan-row {
display: flex; align-items: center; gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--w-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) */
/* r251 : etats restyles Honey (memes classes/JS) — pending discret warm,
is-current spinner BRONZE, success check OLIVE. */
.scan-icon.pending {
background: var(--w-surface-2);
border: 2px solid var(--w-line);
opacity: 0.7;
}
.scan-icon.pending::after {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--w-ink-3);
opacity: 0.5;
}
/* IS-CURRENT : etape en cours - pastille warm + spinner bronze + pulse */
.scan-icon.is-current {
background: var(--w-warm-1);
border: 2px solid var(--w-bronze-soft);
opacity: 1;
box-shadow: 0 0 0 4px rgba(168, 128, 84, 0.18);
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 var(--w-bronze-deep);
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(168, 128, 84, 0.18); }
50% { box-shadow: 0 0 0 8px rgba(168, 128, 84, 0.32); }
}
@keyframes spin { to { transform: rotate(360deg); } }
/* SUCCESS : etape terminee, check OLIVE (Honey) */
.scan-icon.success {
background: var(--w-olive);
color: #fff;
border: 2px solid var(--w-olive);
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; }
/* r251 : lien "mode manuel" souligne discret (facon kit). */
.scan-skip-btn {
margin-top: 14px;
font-size: 13px !important;
padding: 12px 20px !important;
color: var(--w-ink-2) !important;
text-decoration: underline;
text-underline-offset: 3px;
}
.scan-skip-btn:hover {
color: var(--w-ink) !important;
}
.scan-row strong { font-weight: 600; flex: 1; color: var(--w-ink); }
.scan-row .val {
font-family: var(--mono);
font-size: 11px;
color: var(--w-ink-3);
letter-spacing: 0.04em;
}
/* r252 : override titre scan SUPPRIME — le titre global unifie (h-mid) s'applique
desormais (Karla 700, em italique 300 bronze). Plus besoin de scope ici. */
/* r252 : scanning demarre EN HAUT (pas de "demarrage scrolle" — ça reste scope Guide)
et on supprime le grand vide bas (padding 120px herite de .screen). */
#screen-scanning { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
/* ============================================================
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: 700; /* r236 : chiffre en gras */
/* r235 : valeur clé un peu plus grande. */
font-size: 60px; 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: 28px; /* r235 : valeurs un peu plus grandes */
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; min-width: 0; }
.product-card-name {
font-family: var(--display); font-weight: 600; /* r235 : réf produit un peu plus en gras */
font-size: 15px; letter-spacing: -0.01em;
line-height: 1.1;
}
/* r235 : textes de découpe (R=10 · Sous vide · …) garantis sur 1 SEULE ligne. */
.product-card-sub {
font-family: var(--mono); font-size: 10px;
color: var(--ink-3);
margin-top: 4px; letter-spacing: 0.04em;
white-space: nowrap;
}
/* V1.59 : SKU technique mis en avant pour le passage en caisse */
/* r235 : réf produit + dimensions (WRS-USK-VIP · 125 × 60 × 3 cm) sur 1 ligne. */
.product-card-sku {
font-family: var(--mono);
font-size: 11px;
font-weight: 700; /* r235 : réf produit légèrement plus en gras */
color: var(--ink-2);
margin-top: 3px;
letter-spacing: 0.06em;
background: var(--paper-3);
padding: 2px 6px;
border-radius: 4px;
display: inline-block;
white-space: nowrap;
}
/* r235 : sous ~400px (iPhone 375px), on resserre réf+dimensions et textes de
découpe pour qu'ils tiennent chacun sur 1 ligne sans déborder. */
@media (max-width: 99999px) { /* r240 mobile-partout (ex max-width:400px) */
.product-card-sku { font-size: 9.5px; letter-spacing: 0.02em; padding: 2px 5px; }
.product-card-sub { font-size: 9px; letter-spacing: 0.01em; }
}
.product-card-qty {
font-family: var(--display); font-weight: 400;
font-size: 28px; /* r235 : valeurs un peu plus grandes */
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
============================================================ */
/* r236 : cartes murs — style bandeau unifié identique à "Commande à passer"
(radius 14 + ombre 0 1px 3px). */
.surface-card {
background: #FFFBF2;
border: 1px solid rgba(133, 79, 11, 0.15);
border-radius: 14px;
padding: 14px;
margin-bottom: 8px;
box-shadow: 0 1px 3px rgba(133, 79, 11, 0.04);
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: 11px; /* r235 : badge un peu plus grand */
padding: 4px 9px;
letter-spacing: 0.04em;
}
.r10-badge-block {
font-size: 12px; /* r235 : badge un peu plus grand */
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;
}
/* r236 : bandeau "+ Ajouter une surface" — style unifié identique à
"Commande à passer" (radius 14 inclus). */
.add-more-btn {
width: 100%;
padding: 16px;
border: 1px solid rgba(133, 79, 11, 0.15);
border-radius: 14px;
background: #FFFBF2;
box-shadow: 0 1px 3px rgba(133, 79, 11, 0.04);
cursor: pointer;
font-size: 13px;
font-weight: 700;
color: var(--ink-2);
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); }
/* r235 : bandeau résumé m²/panneaux en fond crème cohérent avec "Commande à passer". */
.cart-totals {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 1px;
background: rgba(133, 79, 11, 0.12);
border: 1px solid rgba(133, 79, 11, 0.15);
border-radius: 14px;
overflow: hidden;
margin: 14px 0;
box-shadow: 0 1px 3px rgba(133, 79, 11, 0.04);
}
.cart-total-cell {
background: #FFFBF2;
padding: 12px;
text-align: center;
}
.cart-total-num {
font-family: var(--display); font-weight: 400;
font-size: 24px; /* r235 : valeurs un peu plus grandes */
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); }
/* r255 : action hybride principale = OLIVE (au lieu de --lm bronze). */
.hybrid-action-primary {
background: var(--w-olive);
border-color: var(--w-olive-deep);
color: #fff;
}
.hybrid-action-primary:hover {
background: var(--w-olive-deep);
border-color: var(--w-olive-deep);
}
.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 {
/* r235 : libellé (LARGEUR/HAUTEUR) + badge "À CONFIRMER" garantis sur 1 SEULE
ligne, y compris iPhone 375px. Flex nowrap + tailles resserrées en media. */
display: flex;
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 6px;
font-weight: 600;
}
/* r235 : sous ~400px (iPhone), on resserre libellé + badge pour tenir sur 1 ligne. */
@media (max-width: 99999px) { /* r240 mobile-partout (ex max-width:400px) */
.edit-input-label { font-size: 9px; letter-spacing: 0.04em; }
.edit-input-label .edit-input-badge {
margin-left: 5px; padding: 2px 5px; font-size: 8px; letter-spacing: 0.03em; gap: 3px;
}
}
/* r236 : chiffre + unité centrés ENSEMBLE dans la carte (avant : chiffre collé
à gauche, "cm" collé à droite = déséquilibré). field-sizing:content (iOS 17.4+
/ Chrome) fait que l'input épouse la largeur du nombre → le couple reste compact. */
.edit-input-row {
display: flex; align-items: baseline; justify-content: center; gap: 6px;
}
/* r241 : FIX DÉFINITIF du chiffre tronqué (le dernier "0" de 250 était coupé).
Cause : field-sizing:content (peu fiable iOS Safari) dimensionnait la boîte
trop juste, et un rogne TOUJOURS son propre texte → le glyphe (penché
en italique sur l'état estimation) débordait et était coupé.
Solution robuste : largeur FIXE en ch qui dépasse toujours le contenu max
(4 chiffres "2000"/"1000") → la boîte ne peut jamais être plus étroite que le
nombre, donc zéro troncature. Taille fixe (pas de vw : le vw casserait
l'égalité Mac=iPhone du mode mobile-partout r240). flex 0 0 auto = ne rétrécit
jamais. Vérifié : aucun parent n'a overflow:hidden. Testé 250/350/1000 @375-390px. */
.edit-input {
flex: 0 0 auto;
box-sizing: content-box;
border: 0; background: transparent;
font-family: var(--display);
font-size: 30px; /* r241 : un cran sous 34px pour la marge de sécurité, reste gros/lisible */
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
outline: none;
width: 4.5ch; /* tient 4 chiffres + tampon ; ch suit la taille de police */
padding: 0 2px; /* petit jeu pour l'inclinaison italique de l'état estimation */
text-align: center;
overflow: visible;
-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);
}
/* r255 : "OK" ouvertures = OLIVE (au lieu de --lm bronze). */
.opening-item-action-btn.ok {
color: #fff;
background: var(--w-olive);
border-color: var(--w-olive-deep);
font-weight: 600;
}
.opening-item-action-btn.ok:hover {
background: var(--w-olive-deep);
}
.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); }
/* ============================================================
r238 — Écran "Votre mur" (#screen-edit-dims) : ZÉRO contour.
On supprime tous les borders (pointillés + pleins) et on délimite
uniquement par fond crème (#FFFBF2) + ombre douce. Le fond crème clair
ressort sur le fond de page (--w-bg #EDE3D6). Boutons OK (olive) /
Supprimer (rouge) NON modifiés. Mécanique (ajout/édition/suppression,
calculs) inchangée. Scopé à #screen-edit-dims (les autres écrans gardent
leur style). Testé 375 / 390px.
============================================================ */
/* Cartes LARGEUR/HAUTEUR : plus de contour (ni solide ni pointillé estimation).
Les fonds d'état (estimation #FAF7F1 / confirmé #F4FAEC) restent actifs. */
#screen-edit-dims .edit-input-wrap {
border: none;
box-shadow: 0 1px 3px rgba(133, 79, 11, 0.07);
}
/* Bandeau d'avertissement estimation : contour retiré, fond doré conservé. */
#screen-edit-dims .ai-estimate-warning { border: none; }
/* Boutons "+ Fenêtre" / "+ Porte" : plus de pointillé → fond crème + ombre. */
#screen-edit-dims .opening-add-btn {
border: none;
background: #FFFBF2;
box-shadow: 0 1px 3px rgba(133, 79, 11, 0.07);
}
#screen-edit-dims .opening-add-btn:hover {
border: none;
background: var(--lm-tint);
}
/* Bandeaux d'ouverture (repliés ET dépliés) : plus de contour. L'état déplié
passe du vert teinté (#FBFDF7) au crème cohérent avec le reste de l'app. */
#screen-edit-dims .opening-item,
#screen-edit-dims .opening-item.is-expanded {
border: none;
background: #FFFBF2;
box-shadow: 0 1px 3px rgba(133, 79, 11, 0.07);
}
/* Séparateur interne (border-top) de la zone d'édition retiré : l'espace suffit. */
#screen-edit-dims .opening-item-edit-zone { border-top: none; }
/* Mini-champs Largeur/Hauteur dans l'ouverture : pas de contour. Fond blanc
pour ressortir sur la carte crème de l'ouverture. */
#screen-edit-dims .opening-mini-input-wrap {
border: none;
background: var(--paper);
box-shadow: 0 1px 2px rgba(133, 79, 11, 0.06);
}
/* Petit bouton × neutre (item replié) : contour retiré. */
#screen-edit-dims .opening-item-del {
border: none;
background: var(--paper-3);
}
/* 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)
============================================================ */
/* r255 : CTA principal "Continuer mon projet" = OLIVE (au lieu de --lm bronze). */
.add-cart-cta {
background: var(--w-olive);
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(--w-olive-deep); }
.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%;
/* r261 : pastille ambre pleine + icône anthracite (au lieu d'ambre tint). */
background: var(--vip);
color: #1A1B20;
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;
}
/* r255 : CTA auth principal = OLIVE (au lieu de --vip dore). */
.auth-cta {
width: 100%;
appearance: none;
background: var(--w-olive);
color: #fff;
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(--sh-olive);
transition: background 0.15s, transform 0.1s;
-webkit-tap-highlight-color: transparent;
}
.auth-cta:hover:not(:disabled) { background: var(--w-olive-deep); }
.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); }
/* r255 : "Continuer" choix projet = OLIVE (au lieu de --vip dore). */
.project-choice-continue {
background: var(--w-olive);
color: #fff;
box-shadow: var(--sh-olive);
}
.project-choice-continue:hover { background: var(--w-olive-deep); }
.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;
}
/* r259 : pastille AMBRE PLEINE + icône anthracite (annule le crème/bronze du lot 1). */
.wallrus-modal-icon-edit { background: var(--vip); color: #1A1B20; }
.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; }
/* r255 : CTA principal = OLIVE (regle de marque), au lieu du dore --vip. */
.wallrus-modal-btn-primary {
background: var(--w-olive);
color: #fff;
box-shadow: var(--sh-olive);
}
.wallrus-modal-btn-primary:hover:not(:disabled) { background: var(--w-olive-deep); }
/* r258 : bouton secondaire en AMBRE (--vip), texte anthracite — cible Honey. */
.wallrus-modal-btn-secondary {
background: var(--vip);
color: #1A1B20;
border: 1px solid var(--vip-dark, #E5B25E);
}
.wallrus-modal-btn-secondary:hover { background: var(--vip-dark); }
.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 {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
}
/* r265 : le bloc texte prend la place dispo et wrappe ; le badge ne se comprime pas */
.overview-header-text {
flex: 1;
min-width: 0;
}
.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;
}
/* r236 : style bandeau unifié, identique à "Commande à passer"
(#FFFBF2 / bordure rgba(133,79,11,.15) / radius 14 / ombre 0 1px 3px). */
.overview-stats-card {
background: #FFFBF2;
border: 1px solid rgba(133, 79, 11, 0.15);
border-radius: 14px;
padding: 18px 16px 16px;
margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(133, 79, 11, 0.04);
}
.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: 700; /* r255 : donnees cles en gras marque (kit) */
font-size: 28px; /* r235 : valeurs un peu plus grandes */
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: 11px 14px; /* r266 : meme hauteur que .overview-home-badge -> les 2 textes sur la meme ligne */
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;
}
/* r265 : Badge "Accueil" cliquable, en face de l'eyebrow.
Reprend EXACTEMENT la charte .overview-eyebrow ; cible tactile via padding. */
.overview-home-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 11px 14px;
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;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.overview-home-badge:active { transform: scale(0.97); }
.overview-home-badge 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: 700; /* r255 : m² en gras (donnee cle) */
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: 700; /* r255 : nb lots en gras (donnee cle) */
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: 700; /* r255 : dimensions/surface en gras (donnees cles) */
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;
/* r237 : un peu plus de respiration (récap à lire facilement). */
padding: 14px 14px;
}
.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: 11px; /* r235 : badge un peu plus grand */
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;
}
/* r237 : récap 4 lignes aéré. L1 nom en gras, puis réf·dims, puis R, puis metrics. */
.overview-panel-name {
font-size: 14px;
font-weight: 700; /* L1 nom produit en gras */
color: #2C2520;
line-height: 1.25;
}
/* r239 : réf + dimensions dans une PILL À FOND CRÈME, exactement comme le
résumé produit du PANIER (.product-card-sku) → les deux écrans sont identiques.
inline-block = la pill épouse le texte ; nowrap pour rester sur 1 ligne. */
.overview-panel-ref {
display: inline-block;
font-family: var(--mono, monospace);
font-size: 11px;
font-weight: 700;
color: var(--ink-2);
letter-spacing: 0.06em;
margin-top: 7px; /* aération entre lignes */
background: var(--paper-3);
padding: 3px 7px;
border-radius: 4px;
white-space: nowrap;
}
/* r239 : sous ~400px (iPhone 375px), même resserrement que la pill du panier. */
@media (max-width: 99999px) { /* r240 mobile-partout (ex max-width:400px) */
.overview-panel-ref { font-size: 9.5px; letter-spacing: 0.02em; padding: 2px 5px; }
}
/* r237 : ligne R (R=10 / R=1) — sa propre ligne, accent bronze de marque. */
.overview-panel-rval {
font-family: var(--mono, monospace);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
color: #854F0B;
margin-top: 4px;
}
/* V2.10 r36-B : metrics m2 + lots sous la reference */
/* r237 : ligne 4 (m² · lot de 2 panneaux) sur 1 SEULE ligne, jamais de wrap. */
.overview-panel-metrics {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 11px;
color: var(--ink-3, #6B5418);
white-space: nowrap;
}
.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: 24px; /* r235 : valeur un peu plus grande */
font-weight: 700; /* r255 : nb panneaux en gras (donnee cle) */
line-height: 1;
}
.overview-panel-qty {
font-family: Georgia, serif;
font-size: 24px; /* r235 : valeur un peu plus grande */
font-weight: 700; /* r255 : nb panneaux en gras (donnee cle) */
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
============================================================ */
/* r257 : carte infos perso alignée bandeau Honey. */
.account-card {
background: #FFFBF2;
border: 1px solid rgba(133, 79, 11, 0.15);
border-radius: 14px;
box-shadow: 0 1px 3px rgba(133, 79, 11, 0.05);
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;
}
/* r259 : badge rôle aligné sur le pill "1 ENVOYÉ" (.account-action-badge) :
ambre clair, bordure, texte bronze — cohérence des badges. */
.account-role-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;
}
/* 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;
}
/* r260 : drapeau ![]()
remplace par pastille texte .lang-code-pill (coherence header). */
.account-doc-lang-option.is-selected .lang-code-pill {
background: var(--w-hero-cta);
color: #FCF4E6;
}
.account-doc-lang-option:hover {
background: #fff;
border-color: rgba(20,15,5,0.32);
transform: translateY(-1px);
}
.account-doc-lang-option.is-selected {
/* r259 : langue active = SÉLECTION → AMBRE (--vip), texte anthracite. */
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);
}
/* r258 : succès en olive adouci + texte/✓ crème (au lieu du vert sapin foncé). */
.wallrus-toast.success { background: var(--w-olive-soft); color: #FCF4E6; }
.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: 99999px) { /* r240 mobile-partout (ex max-width:600px) */
.legal-content h1 { font-size: 26px; }
.legal-content h2 { font-size: 17px; }
}
/* r124 : scroll porte par .app au lieu de body (corrige le scroll vertical fige a
un doigt sur mobile). r244 : etendu a iOS (.is-ios) — meme bug sur iPhone une fois
le Guide rendu scrollable (body-scroll iOS fragile : SVG anime + petit debordement).
Desktop/Mac restent sur le body-scroll natif (volontairement non cibles). */
html.is-android, html.is-android body,
html.is-ios, html.is-ios body { height: 100%; overflow: hidden; }
html.is-android .app,
html.is-ios .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;
}
/* ============================================================
r226 : ECHELLE TYPO DU KIT DESIGN (une famille Karla, hierarchie par graisse+taille)
A utiliser progressivement sur les ecrans refondus.
============================================================ */
.t-display{ font-size:34px; line-height:1.06; font-weight:800; letter-spacing:-.02em; }
.t-h1{ font-size:27px; line-height:1.12; font-weight:800; letter-spacing:-.016em; }
.t-h2{ font-size:21px; line-height:1.18; font-weight:700; letter-spacing:-.01em; }
.t-h3{ font-size:17px; line-height:1.25; font-weight:700; letter-spacing:-.005em; }
.t-body{ font-size:16px; line-height:1.5; font-weight:400; letter-spacing:0; }
.t-body-strong{ font-size:16px; line-height:1.5; font-weight:600; }
.t-sub{ font-size:14.5px; line-height:1.45; font-weight:400; color:var(--ink-2); }
.t-cap{ font-size:13px; line-height:1.4; font-weight:500; color:var(--ink-3); }
.t-kicker{ font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.t-num{ font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }