/* ── Le style de l'app. Pensé pour un téléphone, en premier. ─────────────── Direction : « Sunset Mauve ». Fond clair, un dégradé de coucher de soleil (lavande en haut, pêche en bas), du verre blanc posé dessus, du violet Klipo pour ce qui agit, et des formes très rondes. Beaucoup d'air et des titres qui portent. Aucune ressource extérieure : les polices sont servies par l'app elle-même (sans Internet, tout marche pareil). */ /* ── Polices, installées dans l'app ─────────────────────────────────────── Bricolage Grotesque pour les titres (du caractère, pas une police d'usine), Outfit pour le texte courant (rond, très lisible en petit). Deux fichiers variables : une seule requête chacun, toutes les graisses dedans. `unicode-range` : le fichier « latin-ext » n'est téléchargé que si un texte en a besoin — le français n'y touche jamais. */ @font-face{ font-family:'Bricolage';font-style:normal;font-weight:400 800;font-display:swap; src:url(/polices/bricolage-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Bricolage';font-style:normal;font-weight:400 800;font-display:swap; src:url(/polices/bricolage-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap; src:url(/polices/outfit-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap; src:url(/polices/outfit-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Les 6 polices proposées au commerçant pour ses vidéos. Elles ne servent qu'à l'aperçu de l'écran « Ma boutique » : un nom de police écrit dans la police elle-même. On ne prend que le gras latin — c'est ce qui s'affiche dans les vidéos — et rien ne se télécharge tant qu'on n'ouvre pas l'écran. */ @font-face{font-family:'Archivo';font-weight:700;font-display:swap; src:url(/polices/apercu-archivo.woff2) format('woff2')} @font-face{font-family:'Montserrat';font-weight:700;font-display:swap; src:url(/polices/apercu-montserrat.woff2) format('woff2')} @font-face{font-family:'Poppins';font-weight:700;font-display:swap; src:url(/polices/apercu-poppins.woff2) format('woff2')} @font-face{font-family:'Inter';font-weight:700;font-display:swap; src:url(/polices/apercu-inter.woff2) format('woff2')} @font-face{font-family:'Oswald';font-weight:700;font-display:swap; src:url(/polices/apercu-oswald.woff2) format('woff2')} @font-face{font-family:'Playfair Display';font-weight:700;font-display:swap; src:url(/polices/apercu-playfair.woff2) format('woff2')} :root{ /* Le coucher de soleil : trois arrêts, du haut vers le bas de l'écran. Ce dégradé est peint UNE fois, en `fixed`, derrière toute la page. */ --fond:#EFBF95; /* le bas : pêche */ --fond2:#C6CAE9; /* le haut : lavande */ --fond3:#D9C7DE; /* le milieu : mauve pâle */ /* Le verre blanc posé sur le dégradé. C'est lui qui fait les cartes : il laisse passer la couleur du fond, donc une carte en haut d'écran est lavande et la même carte en bas est pêche, sans une ligne de plus. */ --carte:rgba(255,255,255,.58); --carte2:rgba(255,255,255,.80); /* Deux bordures, et pas une seule : sur un fond CLAIR un liseré blanc fait le relief d'une carte, mais il est invisible autour d'un champ de saisie. `--trait` = le reflet des cartes. `--bord` = le trait qui délimite. */ --trait:rgba(255,255,255,.72); --bord:rgba(74,45,94,.16); --texte:#241B2E; /* prune très sombre — 10:1 sur le fond */ --gris:#5C4E69; /* mauve grisé — 4.7:1, lisible en plein jour */ --accent:#8E44C8; /* violet Klipo : les surfaces qui agissent */ --accent2:#B4437C; /* framboise : l'autre bout des dégradés */ /* Le violet des SURFACES est trop clair pour du texte posé sur du clair. `--accent-texte` est le même violet, assombri, pour les mots. */ --accent-texte:#7C2FB8; --sur-accent:#FFFFFF; /* ce qui s'écrit PAR-DESSUS l'accent */ /* Teintes tirées de l'accent, pour ne le définir qu'à un seul endroit. `color-mix` évite de recopier « rgba(142,68,200,.12) » vingt fois : le jour où l'accent change, tout suit. */ --accent-voile:color-mix(in srgb, var(--accent) 11%, transparent); --accent-voile2:color-mix(in srgb, var(--accent) 18%, transparent); --accent-trait:color-mix(in srgb, var(--accent) 32%, transparent); --accent-trait2:color-mix(in srgb, var(--accent) 55%, transparent); --accent-lueur:color-mix(in srgb, var(--accent) 30%, transparent); --rouge:#C3283F; --vert:#146B50; /* Très rond, partout. `--rayon-plein` = la pastille complète : boutons, pilules, barre du bas. */ --rayon:28px; --rayon-s:20px; --rayon-plein:999px; --titre:'Bricolage','Outfit',-apple-system,sans-serif; /* Deux ombres. Sur un fond SOMBRE une carte se détachait par sa clarté ; sur un fond CLAIR il ne reste que l'ombre pour dire « ceci est posé par-dessus ». `--ombre-douce` = les cartes, `--ombre` = ce qui flotte. */ --ombre:0 18px 40px rgba(86,48,110,.16); --ombre-douce:0 8px 22px rgba(86,48,110,.10); } *{box-sizing:border-box} html,body{margin:0;padding:0} /* `display:flex` d'un bloc gagne sur le `hidden` du navigateur : on le rétablit */ [hidden]{display:none !important} /* ⚠️ Cette couleur de fond n'est PAS celle qu'on voit dans la page — le dégradé ci-dessous la recouvre entièrement. Elle sert à UNE seule chose : la bande de l'heure et de la batterie, en haut de l'iPhone. Cette bande est HORS de la fenêtre de la page (iOS la réserve pour la pastille noire), donc aucun élément CSS ne peut la peindre, pas même un fixed : iOS la remplit lui-même avec la couleur de fond du body. Elle doit donc valoir le HAUT du dégradé (--fond2, lavande) et surtout pas --fond (le pêche du BAS), qui faisait un bandeau orange au-dessus d'une page lavande. Même valeur que la balise theme-color de index.html : si l'une change, changer l'autre. */ body{ background:var(--fond2); color:var(--texte); font:16px/1.55 'Outfit',-apple-system,'SF Pro Text',Segoe UI,Roboto,sans-serif; font-weight:400; -webkit-font-smoothing:antialiased; min-height:100vh; } /* Le coucher de soleil, posé une fois pour toutes derrière la page. `fixed` = il ne bouge pas au défilement et ne coûte rien à faire défiler. Les deux halos restent, mais très pâles : ils cassent la régularité du dégradé, sinon on voit des bandes sur un grand écran. */ body::before{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(900px 620px at 8% -6%, rgba(255,255,255,.34), transparent 60%), radial-gradient(760px 560px at 104% 96%, rgba(255,196,150,.30), transparent 62%), linear-gradient(178deg, var(--fond2) 0%, var(--fond2) 22%, var(--fond3) 52%, #E8C7BE 70%, var(--fond) 88%, #E9AE72 100%); } /* place laissée en bas pour la barre de navigation. `overflow-x:clip` : pendant le passage d'un écran à l'autre les blocs glissent de quelques dizaines de pixels sur le côté — sans ça, une barre de défilement horizontale apparaîtrait le temps de l'animation. « clip » coupe sans créer de zone défilante (contrairement à « hidden »). */ main{ max-width:640px;margin:0 auto; overflow-x:clip;overflow-clip-margin:22px; /* laisse respirer les ombres */ padding:14px 18px calc(112px + env(safe-area-inset-bottom)); } h1{ font-family:var(--titre);font-weight:800; font-size:clamp(30px,8.5vw,38px);line-height:1.04;letter-spacing:-1.4px; margin:6px 0 8px;text-wrap:balance; } h2{font-family:var(--titre);font-weight:700;font-size:21px;letter-spacing:-.5px;margin:30px 0 12px} p{margin:6px 0} .sous{color:var(--gris);font-size:15.5px;margin:0 0 24px;max-width:34em} strong{font-weight:600} /* ── La marque ──────────────────────────────────────────────────────────── Écrite UNE seule fois ici, et servie partout : l'en-tête de l'app, la porte, les écrans de connexion, klipo.fr, le guide, les pages légales, les mails. Deux morceaux et pas un logo en image : · `.klipo-mot` — le nom est du VRAI texte, seulement habillé d'un dégradé. Il se sélectionne, il se cherche, un lecteur d'écran le lit, et il reste net à n'importe quelle taille sans qu'on ait un fichier par taille. · `.klipo-pt` — le point témoin en fin de mot, à hauteur du K. C'est un élément à part parce qu'il CLIGNOTE : un voyant d'enregistrement. Un point écrit dans le texte ne pourrait pas clignoter seul. Le dégradé est descendu d'un cran par rapport au logo d'origine (violet plus profond, corail plus terreux) : sur le fond clair de l'app, le corail vif de la version d'origine s'évanouissait en fin de mot. */ .klipo{ display:inline-flex;align-items:center;gap:.12em;line-height:.95; font-family:'Outfit',-apple-system,sans-serif;font-weight:700; letter-spacing:-.035em;white-space:nowrap; } .klipo-mot{ background-image:linear-gradient(96deg,#8E2FD0 2%,#B23A8E 42%,#CE5A5C 72%,#D9663C 100%); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } /* Vieux navigateur sans découpe de fond sur le texte : le mot serait INVISIBLE. On retombe alors sur un violet plein. */ @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .klipo-mot{color:var(--accent-texte);-webkit-text-fill-color:currentColor} } .klipo-pt{width:.19em;height:.19em;border-radius:50%;background:#B4451F;flex:none} /* « Studio » : le second mot du nom, posé après le point témoin. Plus léger et plus sombre que le mot principal, pour que le logo reste lisible d'un coup d'œil et ne double pas de largeur dans l'en-tête. */ .klipo-studio{ margin-left:.28em;font-weight:500;letter-spacing:-.01em; color:var(--gris); } /* Le clignotement ne se déclenche que sur la marque en GRAND (`.vif`) : la porte, l'accueil public. Dans l'en-tête, un point qui bat en permanence à côté de chaque écran devient un tic nerveux. */ @media (prefers-reduced-motion:no-preference){ .klipo.vif .klipo-pt{animation:klipo-temoin 2.1s ease-in-out infinite} } @keyframes klipo-temoin{0%,100%{opacity:1}46%{opacity:.22}} /* Le K dans sa pastille : la version « avatar » du logo, celle de l'icône posée sur l'écran d'accueil. La taille se règle au cas par cas (`width` et `height` en attribut de style) ; tout le reste est ici. */ .pastille-k{ display:flex;align-items:center;justify-content:center;flex:none; border-radius:28%; background:linear-gradient(150deg,#B14BEA 0%,#D24F97 55%,#EE8F55 100%); box-shadow:0 16px 40px rgba(177,75,234,.30); } /* Pas de `stroke` ni de `stroke-width` imposés ici : le tracé du K porte les siens en attributs, et une règle CSS l'emporterait dessus. */ .pastille-k svg{width:62%;height:auto;display:block} /* ── en-tête ────────────────────────────────────────────────────────────── `env(safe-area-inset-*)` = la place que le téléphone se réserve : l'encoche ou la pastille noire en haut. Sans ce calage, le haut de la page se retrouve SOUS la pastille de l'iPhone et ne se touche plus. */ header{ display:flex;align-items:center;justify-content:space-between;gap:12px; max-width:640px;margin:0 auto; padding:max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); } /* Le nom en haut de chaque écran. Il ne porte plus de pastille devant lui : le point témoin du logo occupe déjà ce rôle, et deux points valaient un de trop. */ .marque{font-size:21px;text-decoration:none;color:inherit} header nav{display:flex;gap:8px;align-items:center} .lien-discret{ background:none;border:0;padding:0;font:inherit;font-size:14px; color:var(--gris);text-decoration:none;cursor:pointer; } .lien-discret:hover{color:var(--texte)} /* « Se déconnecter » : une pastille de verre, assez large pour un doigt */ #btn-deconnexion{ display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px; background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon-plein); font-size:13.5px;color:var(--gris); } #btn-deconnexion:active{background:var(--carte2)} /* ── barre de navigation du bas ─────────────────────────────────────────── Trois destinations, toujours sous le pouce. Elle remplace les onglets du haut : quatre libellés côte à côte ne tenaient pas sur un iPhone. */ .nav-basse{ position:fixed;left:0;right:0;bottom:0;z-index:40; display:flex;justify-content:center;gap:6px; padding:8px 14px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.46); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%); border-top:1px solid var(--trait); } .nav-basse a{ flex:1;max-width:150px; display:flex;flex-direction:column;align-items:center;gap:3px; padding:9px 4px 7px;border-radius:var(--rayon-plein); color:var(--gris);text-decoration:none;font-size:11.5px;font-weight:500; transition:color .18s,background .18s; } .nav-basse a svg{width:22px;height:22px;stroke:currentColor;fill:none; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; transition:transform .26s cubic-bezier(.2,.85,.25,1)} /* La destination active est une pastille pleine, pas un simple mot coloré : sur un fond clair un voile à 10 % ne se voit pas. */ .nav-basse a.actif{ color:var(--sur-accent); background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 8px 20px var(--accent-lueur); } /* le pictogramme de la destination active se soulève d'un cheveu */ .nav-basse a.actif svg{transform:translateY(-2px) scale(1.08)} .nav-basse a:not(.actif):active{background:var(--carte2)} /* ── blocs ────────────────────────────────────────────────────────────────*/ .carte{ background:var(--carte);border:1px solid var(--trait); border-radius:var(--rayon);padding:18px;margin-bottom:14px; box-shadow:var(--ombre-douce); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); } .carte-lien{display:block;color:inherit;text-decoration:none;transition:transform .16s,background .16s} .carte-lien:active{background:var(--carte2);transform:scale(.985)} .ligne{display:flex;align-items:center;justify-content:space-between;gap:12px} .chargement{color:var(--gris);padding:44px 0;text-align:center} .vide{ color:var(--gris);text-align:center;padding:34px 18px; border:1px dashed var(--bord);border-radius:var(--rayon); } /* ── écrans d'entrée (connexion, code, accès suspendu) ──────────────────── Pas d'en-tête ici : la marque est dans la page, et le bloc descend un peu pour ne pas coller au bord haut du téléphone. */ .portail{padding-top:9vh} .portail .marque-grande{display:inline-flex;align-items:center;gap:12px;margin-bottom:34px} /* ── la porte : premier écran à chaque ouverture de l'app ───────────────── Le contraire d'un tableau de bord : la marque au milieu, un seul bouton, rien à lire. Le bouton reste bas, sous le pouce. */ /* La barre du bas est cachée sur cet écran : les 112px qu'on lui réserve d'habitude tomberaient en vide sous le bouton et décentreraient tout. */ main:has(.porte){padding-bottom:calc(14px + env(safe-area-inset-bottom))} .porte{ position:relative; /* le pied de page légal s'accroche ici */ min-height:calc(100dvh - 56px); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;text-align:center; } .porte-marque{display:flex;flex-direction:column;align-items:center;gap:22px} /* Le nom, en grand. `clamp` plutôt qu'une taille fixe : sur un vieil iPhone SE (320 px de large) un 46 px fixe touchait les deux bords. */ .porte-nom{font-size:clamp(38px,12vw,48px)} .porte-bouton{max-width:340px;margin-top:30px} /* La promesse de la marque, sous le bouton : c'est la dernière chose lue avant d'entrer, et la seule fois où elle est écrite. Elle était avant au-dessus du bouton, en deux phrases — la même promesse dite deux fois n'en vaut pas une. */ .porte-slogan{color:var(--gris);font-size:15px;margin:0;max-width:22em} /* Les pages légales : obligatoires, donc accessibles — mais posées tout en bas, petites et grises. Elles doivent se trouver quand on les cherche, et ne rien voler au bouton quand on ne les cherche pas. */ .porte-legal{ position:absolute;bottom:26px;left:0;right:0; display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding:0 18px; } /* `main a:not([class])` (plus bas) habille les liens écrits dans une phrase et pèse plus lourd que `.porte-legal a` : sans ce `main` en tête, les trois liens légaux ressortaient en violet souligné, alors qu'ils doivent s'effacer. */ main .porte-legal a:not([class]){color:var(--gris);opacity:.62;font-size:12px; text-decoration:none;font-weight:400} main .porte-legal a:not([class]):hover{opacity:1;color:var(--accent-texte)} /* Le même pied de page, mais DANS le flux (bas de « Ma boutique ») : c'est le seul endroit où un commerçant déjà connecté retrouve les pages légales. `.porte-legal` ne peut pas servir ici, il est en position absolue. */ .pied-legal{ display:flex;gap:16px;justify-content:center;flex-wrap:wrap; margin:38px 0 6px;padding-top:20px;border-top:1px solid var(--bord); } main .pied-legal a:not([class]){color:var(--gris);opacity:.62;font-size:12px; text-decoration:none;font-weight:400} main .pied-legal a:not([class]):hover{opacity:1;color:var(--accent-texte)} /* L'entrée en scène : la marque monte doucement, le bouton suit. Rien de spectaculaire — l'app doit paraître posée, pas bavarde. */ @media (prefers-reduced-motion:no-preference){ .porte-marque{animation:porte-monte .5s ease both} .porte-bouton{animation:porte-monte .5s .08s ease both} .porte-slogan{animation:porte-monte .5s .16s ease both} .porte-legal{animation:porte-monte .5s .24s ease both} } @keyframes porte-monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* ── page d'accueil ───────────────────────────────────────────────────────*/ .salut{color:var(--gris);font-size:15px;margin:0;letter-spacing:.2px} .titre-accueil{margin-top:2px} /* Le mot « Klipo » du titre est la marque elle-même (`.klipo`), pas un mot colorié qui lui ressemble : elle y garde son Outfit et son point témoin, au milieu d'un titre écrit en Bricolage. */ .titre-accueil .klipo{vertical-align:baseline} /* la hauteur minimale sert au filigrane : sans elle il collerait aux cartes */ .accueil{position:relative;min-height:calc(100dvh - 300px)} .accueil .sous{margin:0 0 26px} /* Le nom de la marque, en très grand et en creux, posé dans le vide sous les cartes : il signe la page sans rien réclamer à la lecture — aucune place dans le flux, aucun doigt attrapé. */ .filigrane{ position:absolute;bottom:0;left:-10px;z-index:0;pointer-events:none;user-select:none; /* Outfit et non la police des titres : c'est le NOM de la marque en creux, il doit avoir les mêmes lettres que le logo. */ font-family:'Outfit',-apple-system,sans-serif;font-weight:700; font-size:118px;line-height:.9;letter-spacing:-5px; color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55); } @media (max-width:380px){.filigrane{font-size:96px}} /* les trois destinations, écrites comme des titres */ .destinations{display:flex;flex-direction:column;gap:10px;margin:0 0 24px;position:relative;z-index:1} .destination{ display:flex;align-items:center;gap:14px; padding:17px 18px;color:inherit;text-decoration:none; background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon); box-shadow:var(--ombre-douce); transition:transform .16s,border-color .16s; } .destination:active{transform:scale(.985);border-color:var(--accent-trait)} .destination .texte{flex:1;min-width:0} .destination-titre{ display:block;font-family:var(--titre);font-weight:700; font-size:22px;line-height:1.15;letter-spacing:-.7px; } /* la pastille d'icône en tête de carte */ .destination .rond{ width:46px;height:46px;flex:0 0 46px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--carte2);border:1px solid var(--trait);color:var(--accent-texte); } .destination .rond svg{width:22px;height:22px;stroke:currentColor;fill:none; stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* la première destination est ce qu'on vient faire ici : elle porte la couleur */ .destination.phare{ /* La carte phare porte la couleur PLEINE : sur un fond clair, un voile transparent ne se distinguerait pas des trois autres cartes. */ background:linear-gradient(135deg,var(--accent),var(--accent2)); border-color:transparent; box-shadow:0 20px 44px var(--accent-lueur); color:var(--sur-accent); } .destination.phare .destination-sous{color:rgba(255,255,255,.82)} .destination.phare .destination-titre{font-size:24px} .destination.phare .rond{ background:#fff;border-color:transparent;color:var(--accent-texte); box-shadow:0 8px 22px rgba(60,20,80,.20); } .destination.phare .rond svg{stroke-width:2.3} .destination.phare .fleche{ background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55); color:var(--sur-accent); } .destination-sous{display:block;color:var(--gris);font-size:13.5px;margin-top:2px} .destination .fleche{ width:34px;height:34px;flex:0 0 34px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--carte2);border:1px solid var(--trait);color:var(--accent-texte); } .destination .fleche svg{width:16px;height:16px;stroke:currentColor;fill:none; stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} /* compteur de montages du jour */ .jauge-carte .aide{margin:12px 0 0} .compteur{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent-texte)} .jauge{height:9px;background:rgba(74,45,94,.13);border-radius:var(--rayon-plein);overflow:hidden;margin-top:14px} .jauge span{ display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .35s ease; } /* ── un lien écrit DANS une phrase ────────────────────────────────────────*/ /* C'était un trou : jusqu'ici tous les liens de l'app étaient des boutons, des onglets ou des cartes, donc tous portaient une classe. Le premier lien posé au milieu d'un texte est ressorti en BLEU SOULIGNÉ de navigateur, hors charte. On habille donc les liens sans classe — et seulement ceux-là, pour ne rien voler aux boutons. Un lien doit se voir, pas crier. */ main a:not([class]){ color:var(--accent-texte);font-weight:600;text-decoration:underline; text-decoration-color:var(--accent-trait); text-decoration-thickness:1.5px;text-underline-offset:3px; } main a:not([class]):hover{text-decoration-color:var(--accent-texte)} /* ── boutons ──────────────────────────────────────────────────────────────*/ button,.bouton{ font:inherit;font-weight:600;cursor:pointer;letter-spacing:-.1px; border-radius:var(--rayon-plein);border:1px solid transparent;padding:17px 22px; display:inline-flex;align-items:center;justify-content:center;gap:8px; text-decoration:none;transition:transform .14s,opacity .14s; } button:active,.bouton:active{transform:scale(.98)} .principal{ background:linear-gradient(135deg,var(--accent),var(--accent2)); color:var(--sur-accent);width:100%; box-shadow:0 14px 32px var(--accent-lueur); } /* Un bouton bloqué doit SE VOIR bloqué. Attention : l'opacité ne suffit pas — les écrans arrivent avec l'animation `venir` en `both`, qui fige `opacity:1` sur les enfants directs de `main`, et une animation gagne sur une règle normale. Le bouton principal désactivé garde donc son dégradé et paraît cliquable. On change donc ce que l'animation ne touche pas : le fond et la couleur du texte. */ .principal:disabled{ opacity:.4;cursor:not-allowed;box-shadow:none; background:var(--carte2);color:var(--gris);border-color:var(--bord); } .secondaire{ background:var(--carte2);color:var(--texte);border-color:var(--bord);width:100%; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .danger{background:none;color:var(--rouge);border-color:transparent;padding:10px 0} /* ── le bloc d'aide, tout en bas de l'accueil ─────────────────────────────*/ /* Il est volontairement discret et volontairement TOUJOURS là : un commerçant bloqué ne doit pas avoir à chercher comment joindre quelqu'un. WhatsApp d'abord — il écrit un message, il n'ouvre pas sa boîte mail. */ .aide-bas{ margin:34px 0 8px;padding-top:22px; border-top:1px solid var(--bord); display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center; } .aide-titre{ margin:0;font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase; color:var(--gris); } .aide-liens{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%} /* le bouton WhatsApp ne prend pas toute la largeur : ce n'est pas l'action principale de l'écran, et il ne doit pas concurrencer « Nouvelle publication » */ .aide-liens .bouton{width:auto;padding:12px 18px;font-size:14.5px} .mini{padding:11px 16px;font-size:14px;border-radius:var(--rayon-plein);width:auto;box-shadow:none} /* ── formulaires ──────────────────────────────────────────────────────────*/ /* Un libellé n'est pas une étiquette discrète : c'est LA QUESTION à laquelle le champ répond, écrite en gros. Bilal, en testant le parcours : « au lieu de mettre une petite phrase en gris qui ne sert à rien, mets QUEL EST TON PRODUIT en gros, c'est clair, visible, et ça va droit au but ». */ label{display:block;font-size:19px;color:var(--texte);margin:26px 0 10px; font-weight:700;letter-spacing:-.2px;line-height:1.25} /* « facultatif » ne se met pas entre parenthèses dans la question : il se dit à côté, en petit, pour que la question reste lisible d'un coup d'œil. */ .facultatif{font-size:12px;font-weight:600;color:var(--gris);letter-spacing:.4px; text-transform:uppercase;vertical-align:middle;margin-left:8px} input,select,textarea{ font:inherit;width:100%;padding:15px 18px;color:var(--texte); background:rgba(255,255,255,.78);border:1px solid var(--bord);border-radius:var(--rayon-s); transition:border-color .16s,box-shadow .16s,background .16s; } input::placeholder,textarea::placeholder{color:#8A7C97} input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--accent-trait2);background:#fff; box-shadow:0 0 0 4px var(--accent-voile); } select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%), linear-gradient(135deg,var(--gris) 50%,transparent 50%); background-position:calc(100% - 22px) 24px, calc(100% - 16px) 24px; background-size:6px 6px,6px 6px;background-repeat:no-repeat; } input[type=color]{padding:5px;height:54px;cursor:pointer} /* champ avec une icône à gauche (connexion, code) */ .champ{position:relative} .champ svg{ position:absolute;left:17px;top:50%;transform:translateY(-50%); width:19px;height:19px;stroke:var(--gris);fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;pointer-events:none; } .champ input{padding-left:48px} .champ input:focus + svg{stroke:var(--accent-texte)} /* le code à 6 chiffres : gros, espacé, lisible sans lunettes */ input.code{ font-family:var(--titre);font-size:32px;font-weight:700;letter-spacing:12px; text-align:center;font-variant-numeric:tabular-nums;padding:16px 0 16px 12px; } .aide{font-size:13px;color:var(--gris);margin-top:8px;line-height:1.5} form .principal{margin-top:26px} /* ── les points d'un carrousel : autant de blocs que le commerçant en veut ─*/ .point-bloc{ border:1px solid var(--bord);border-radius:var(--rayon-s); padding:14px;margin-top:12px;background:rgba(255,255,255,.42); } .point-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .point-tete .numero{font-size:13.5px;font-weight:600;color:var(--gris)} .point-bloc .retirer{ width:auto;padding:6px 12px;font-size:13px;border-radius:var(--rayon-plein);box-shadow:none; background:none;border:1px solid var(--bord);color:var(--gris); } .point-bloc .retirer:active{background:var(--carte2)} .point-bloc textarea{margin-top:8px} /* le bouton « ajouter » n'est pas une action principale : il reste discret */ #ajouter-point{width:auto} /* ── choix de la police, avec aperçu ──────────────────────────────────────*/ .polices{display:grid;gap:10px;margin-top:10px} .police{ display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;padding:16px 18px;text-align:left;box-shadow:none; background:rgba(255,255,255,.62);border:1px solid var(--bord); border-radius:var(--rayon-s);color:var(--texte); transition:border-color .16s,background .16s,transform .16s; } .police:active{transform:scale(.99)} .police .nom{font-size:23px;font-weight:700;line-height:1.15} .police .coche{color:var(--accent-texte);font-weight:700;opacity:0} .police.choisie{border-color:var(--accent-trait2);background:var(--accent-voile)} .police.choisie .coche{opacity:1} /* ── choix du style, avec un vrai montage en aperçu ───────────────────────*/ /* Trois vignettes côte à côte, jamais empilées : c'est une comparaison, on doit voir les trois d'un seul coup d'œil sans faire défiler. */ .styles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px} .style-vignette{ display:block;width:100%;padding:0;text-align:center;box-shadow:none;overflow:hidden; background:rgba(255,255,255,.62);border:1px solid var(--bord); border-radius:var(--rayon-s);color:var(--texte); transition:border-color .16s,background .16s,transform .16s; } .style-vignette:active{transform:scale(.98)} /* l'image garde sa place AVANT d'être chargée : rien ne saute sous le doigt */ .style-vignette .style-image{display:block;aspect-ratio:9/16;background:rgba(74,45,94,.10)} .styles.carre .style-vignette .style-image{aspect-ratio:1/1} .style-vignette .style-image img{width:100%;height:100%;object-fit:cover;display:block} /* aperçu introuvable : le cadre reste, la vignette continue de servir */ .style-vignette .style-image.vide{background:repeating-linear-gradient( 45deg,rgba(74,45,94,.10),rgba(74,45,94,.10) 8px,rgba(74,45,94,.04) 8px,rgba(74,45,94,.04) 16px)} .style-vignette .nom{display:block;padding:9px 4px;font-size:13.5px;font-weight:700;line-height:1.2} .style-vignette.choisie{border-color:var(--accent-trait2);background:var(--accent-voile)} .style-vignette.choisie .nom{color:var(--accent-texte)} /* ── signature de fin : le logo déposé ────────────────────────────────────*/ /* un titre de section dans un formulaire : marge du haut plus généreuse que celle d'un simple label, pour qu'on voie qu'on change de sujet */ .titre-section{margin:36px 0 6px} .logo-zone{display:flex;align-items:center;gap:14px;margin-top:10px} .logo-vue{ flex:0 0 108px;height:88px;display:flex;align-items:center;justify-content:center; padding:10px;border:1px solid var(--bord);border-radius:var(--rayon-s); background:var(--carte2);overflow:hidden;text-align:center; } .logo-vue img{max-width:100%;max-height:100%;object-fit:contain} .logo-vue .aide{margin:0;font-size:12.5px;line-height:1.25} .logo-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px} .logo-actions .danger{padding:6px 0} /* la publication commencée qu'on retrouve en revenant */ .carte.reprise{border-color:var(--accent-trait);background:var(--accent-voile)} .centre{text-align:center} /* ── le parcours guidé : une question par écran ───────────────────────────*/ /* En haut de chaque étape : par où sortir (à gauche), et où on en est (à droite). Toujours au même endroit, pour qu'on n'ait pas à le chercher. */ .parcours-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px} .retour{ background:none;border:0;box-shadow:none;width:auto; padding:8px 10px 8px 0; /* la zone du doigt, sans décaler le texte */ font-size:15px;font-weight:600;color:var(--gris);gap:5px; } .retour:hover{color:var(--texte)} .parcours-compte{font-size:13px;color:var(--gris);font-variant-numeric:tabular-nums} /* la barre qui se remplit : on voit qu'il reste peu, on ne s'arrête pas en route */ .parcours-jauge{height:5px;border-radius:var(--rayon-plein);background:rgba(74,45,94,.14); overflow:hidden;margin:0 0 22px} .parcours-jauge span{display:block;height:100%;transition:width .28s ease; background:linear-gradient(90deg,var(--accent),var(--accent2))} /* Les grands boutons de choix : un par ligne, gros, avec l'image de ce que ça donne. Toucher choisit ET avance — il n'y a pas de bouton à valider. */ .grands-choix{display:grid;gap:12px;margin-top:4px} .grand-choix{ display:flex;align-items:center;gap:14px;width:100%;padding:12px; text-align:left;justify-content:flex-start;box-shadow:none; background:var(--carte);border:1px solid var(--trait); border-radius:var(--rayon);color:var(--texte);box-shadow:var(--ombre); transition:border-color .16s,background .16s,transform .14s; } .grand-choix:active{transform:scale(.985);background:var(--carte2)} .grand-choix.choisi{border-color:var(--accent-trait2);background:var(--accent-voile)} /* l'aperçu garde sa place avant d'être chargé : rien ne saute sous le doigt */ .choix-image{flex:0 0 72px;aspect-ratio:9/16;border-radius:18px;overflow:hidden; background:rgba(74,45,94,.10);display:block} .choix-image.carre{aspect-ratio:1/1} .choix-image img{width:100%;height:100%;object-fit:cover;display:block} .choix-image.vide{background:repeating-linear-gradient( 45deg,rgba(74,45,94,.10),rgba(74,45,94,.10) 8px,rgba(74,45,94,.04) 8px,rgba(74,45,94,.04) 16px)} .choix-texte{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .choix-titre{font-family:var(--titre);font-weight:700;font-size:17px;letter-spacing:-.3px} .choix-aide{font-size:13.5px;line-height:1.35;color:var(--gris)} .grand-choix .fleche{flex:0 0 auto;display:flex;color:var(--gris)} /* sans aperçu (la musique), le bouton respire à la place de l'image */ .grands-choix.simples .grand-choix{padding:17px 15px} /* ── étiquettes d'état ────────────────────────────────────────────────────*/ .etat{ font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:var(--rayon-plein); white-space:nowrap;border:1px solid transparent; } .etat-brouillon{background:rgba(255,255,255,.66);color:#5C4E69;border-color:var(--bord)} .etat-attente{background:rgba(180,110,20,.13);color:#8A5310;border-color:rgba(180,110,20,.26)} .etat-montage{background:var(--accent-voile);color:var(--accent-texte);border-color:var(--accent-trait)} .etat-prete{background:rgba(20,107,80,.13);color:var(--vert);border-color:rgba(20,107,80,.30)} .etat-echec{background:rgba(195,40,63,.12);color:var(--rouge);border-color:rgba(195,40,63,.30)} /* ── emplacements de plans ────────────────────────────────────────────────*/ .plans{display:grid;gap:12px} .plan{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:14px; box-shadow:var(--ombre-douce); } .plan.rempli{border-color:var(--accent-trait);background:var(--accent-voile)} .pastille{ width:46px;height:46px;flex:0 0 46px;border-radius:50%; background:rgba(255,255,255,.70);color:var(--gris); display:flex;align-items:center;justify-content:center; font-family:var(--titre);font-weight:700;font-size:17px; } .plan.rempli .pastille{ background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--sur-accent); } .plan .infos{flex:1;min-width:0} .plan .titre{font-weight:600} .plan .detail{font-size:13px;color:var(--gris)} /* ce qu'on lui propose de filmer pour ce plan */ .plan .consigne{font-size:14px;color:var(--texte);opacity:.9;margin:2px 0 4px} .plan input[type=file]{display:none} /* Le geste qu'on veut : la pellicule, en grand, sur toute la largeur. Filmer depuis la page donne du 480p refusé — ce bouton-là n'existe donc plus. */ .plan .pellicule{flex:0 0 100%;margin-top:2px} /* ce qu'on a remarqué sur le plan : un avertissement, jamais un refus. Toute la largeur, sous la ligne du plan : la phrase doit se lire d'un trait. */ .plan .remarque{ flex:0 0 100%;padding:10px 13px;border-radius:16px; background:rgba(180,110,20,.11);border:1px solid rgba(180,110,20,.26); color:#7A490E;font-size:13.5px;line-height:1.35; } .plan .remarque::before{content:'⚠︎ '} /* supprimer n'est pas une étape du parcours : tout en bas, discret, centré */ .discret{text-align:center;margin:24px 0 4px} .discret .lien-discret{padding:10px 8px} .barre{height:6px;background:rgba(74,45,94,.14);border-radius:var(--rayon-plein);overflow:hidden;margin-top:9px} .barre span{display:block;height:100%;width:0;transition:width .2s; background:linear-gradient(90deg,var(--accent),var(--accent2))} /* ── montage en cours ───────────────────────────────────────────────────── L'attente est le seul moment où le commerçant n'a rien à faire. On lui donne donc à REGARDER : la carte de sa vidéo, au format de sa vidéo (debout pour un reel, carrée pour un carrousel), et la phrase en plein milieu. Pas de pourcentage : on ne sait pas où en est le moteur, et un compteur qui reste bloqué à 40 % inquiète plus qu'il ne rassure. */ /* Le cadre est posé au MILIEU de la place libre, pas en haut : sinon il reste un grand vide sous le bouton et l'écran paraît inachevé. 190px = l'en-tête plus la place réservée à la barre du bas. */ .montage{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:18px;min-height:calc(100dvh - 190px); } .montage-cadre{ position:relative;overflow:hidden; width:100%;aspect-ratio:9/16; /* la hauteur commande : on borne la LARGEUR pour que le cadre tienne dans l'écran sans jamais pousser le bouton du bas hors de vue */ max-width:min(100%, calc(54dvh * 9 / 16)); border-radius:40px; /* très rond, comme le reste */ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;padding:30px 26px;text-align:center; color:#fff; background:linear-gradient(158deg,var(--accent),var(--accent2) 62%,#E4885F); box-shadow:0 26px 60px var(--accent-lueur); } /* un carrousel n'est pas une vidéo debout : le cadre prend sa forme */ .montage-cadre.carre{aspect-ratio:1/1;max-width:min(100%, 54dvh)} /* Le balayage de lumière : une bande claire en biais qui traverse le cadre en boucle. C'est ce qui dit « ça travaille » sans afficher de chiffre. */ .montage-cadre::after{ content:'';position:absolute;inset:-40%;pointer-events:none; background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.26) 50%,transparent 58%); } @media (prefers-reduced-motion:no-preference){ .montage-cadre::after{animation:montage-balayage 2.9s ease-in-out infinite} } @keyframes montage-balayage{ 0%{transform:translateX(-58%)} 60%,100%{transform:translateX(58%)} } /* Le nom de la publication, en pastille en haut du cadre : on reconnaît SA vidéo, et le milieu du cadre reste libre pour la phrase. */ .montage-nom{ position:absolute;top:22px;left:50%;transform:translateX(-50%);z-index:2; max-width:calc(100% - 44px); font-size:13px;font-weight:600;line-height:1.3; color:rgba(255,255,255,.92); background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.30); border-radius:var(--rayon-plein);padding:7px 14px; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* L'anneau qui tourne : deux cercles, l'un plein et transparent, l'autre entamé sur un quart de tour. C'est la forme la plus ronde possible pour dire « patience », et elle ne coûte qu'une rotation au téléphone. */ .montage-anneau{ position:relative;z-index:2; width:62px;height:62px;border-radius:50%; border:4px solid rgba(255,255,255,.26); border-top-color:#fff; } @media (prefers-reduced-motion:no-preference){ .montage-anneau{animation:montage-tourne 1.05s linear infinite} } @keyframes montage-tourne{to{transform:rotate(360deg)}} .montage-titre{ position:relative;z-index:2;margin:0; font-family:var(--titre);font-weight:800; font-size:clamp(24px,6.6vw,30px);line-height:1.08;letter-spacing:-1px; text-wrap:balance; } .montage-sous{ position:relative;z-index:2;margin:0;max-width:20em; font-size:15px;line-height:1.45;color:rgba(255,255,255,.88); } /* Ce qu'il gagne à savoir, mais qui n'a pas sa place DANS le cadre : le cadre ne dit qu'une chose. */ .montage-note{color:var(--gris);font-size:14.5px;text-align:center;margin:0;max-width:24em} .montage .bouton{width:100%;max-width:340px} /* ── vidéo finie ──────────────────────────────────────────────────────────*/ video{width:100%;border-radius:var(--rayon);background:#2A1F33;display:block;border:1px solid var(--trait)} /* carrousel fini : les images à enregistrer, dans l'ordre */ .diapos{display:flex;flex-direction:column;gap:14px} .diapo{ margin:0;background:var(--carte);border:1px solid var(--trait); border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre-douce); } .diapo img{width:100%;display:block;background:#2A1F33} .diapo figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px} .diapo figcaption span{color:var(--gris);font-size:14px} /* ── message flottant ─────────────────────────────────────────────────────*/ #alerte{ position:fixed;left:16px;right:16px;z-index:50; bottom:calc(96px + env(safe-area-inset-bottom)); max-width:608px;margin:0 auto; background:rgba(255,255,255,.90);border:1px solid var(--bord);border-radius:22px; padding:15px 17px;box-shadow:var(--ombre);color:var(--texte); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); transform:translateY(140%);opacity:0;visibility:hidden; transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s,visibility 0s .28s; } #alerte.visible{transform:translateY(0);opacity:1;visibility:visible;transition-delay:0s} #alerte.erreur{border-color:rgba(195,40,63,.42);background:rgba(255,240,241,.95);color:#5C1420} /* ── mise en scène à l'arrivée ──────────────────────────────────────────── Les blocs montent l'un après l'autre. Très court : on veut de la vie, pas une attente. Coupé net si le téléphone demande moins d'animations. */ @keyframes venir{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} main > *{animation:venir .42s cubic-bezier(.2,.8,.2,1) both} main > *:nth-child(2){animation-delay:.05s} main > *:nth-child(3){animation-delay:.10s} main > *:nth-child(4){animation-delay:.14s} main > *:nth-child(5){animation-delay:.18s} main > *:nth-child(n+6){animation-delay:.22s} .accueil > *,.portail > *{animation:venir .42s cubic-bezier(.2,.8,.2,1) both} .accueil > *:nth-child(2),.portail > *:nth-child(2){animation-delay:.06s} .accueil > *:nth-child(3),.portail > *:nth-child(3){animation-delay:.12s} .accueil > *:nth-child(4),.portail > *:nth-child(4){animation-delay:.18s} .accueil > *:nth-child(5),.portail > *:nth-child(5){animation-delay:.24s} .accueil > *:nth-child(n+6),.portail > *:nth-child(n+6){animation-delay:.3s} /* la marque des écrans d'entrée arrive la première, sans attendre */ .portail .marque-grande{animation-delay:0s !important} /* ── passage d'un écran à l'autre ───────────────────────────────────────── Le nouvel écran entre du côté d'où il vient, l'ancien s'en va de l'autre. Les deux se croisent : c'est ça qui donne le mouvement. Seul le NOM de l'animation change ici. L'ancien écran doit s'effacer VITE (opacité à zéro à mi-parcours) : sinon les deux textes se superposent au milieu du passage et c'est illisible. */ @keyframes venir-droite{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}} @keyframes venir-gauche{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}} @keyframes partir-gauche{0%{opacity:1;transform:none}55%{opacity:0}100%{opacity:0;transform:translateX(-26px)}} @keyframes partir-droite{0%{opacity:1;transform:none}55%{opacity:0}100%{opacity:0;transform:translateX(26px)}} .vient-avant > *, .vient-avant > .accueil > *,.vient-avant > .portail > *{animation-name:venir-droite} .vient-arriere > *, .vient-arriere > .accueil > *,.vient-arriere > .portail > *{animation-name:venir-gauche} /* Sur un changement d'écran, le contenu arrive d'un seul bloc : la cascade bloc par bloc est réservée au tout premier affichage, sinon le nouvel écran met 300 ms de plus à se poser et croise l'ancien trop longtemps. `:nth-child(n)` sert uniquement à passer devant les retards posés plus haut. */ main.vient-avant > *:nth-child(n),main.vient-arriere > *:nth-child(n), main.vient-avant > .accueil > *:nth-child(n),main.vient-arriere > .accueil > *:nth-child(n), main.vient-avant > .portail > *:nth-child(n),main.vient-arriere > .portail > *:nth-child(n){ animation-delay:0s;animation-duration:.3s; } /* La photocopie de l'écran qu'on quitte. Elle ne gêne personne : pas de clic possible, posée sous la barre du bas, retirée dès qu'elle a fini. */ .fantome{ position:fixed;left:0;right:0;z-index:5;pointer-events:none; will-change:transform,opacity; } /* courbe à démarrage rapide : l'ancien écran doit disparaître tout de suite, pas s'attarder derrière le nouveau */ .fantome.part-avant{animation:partir-gauche .22s cubic-bezier(.25,.9,.35,1) both} .fantome.part-arriere{animation:partir-droite .22s cubic-bezier(.25,.9,.35,1) both} /* ses blocs ne rejouent pas leur arrivée : elle est en train de partir */ .fantome > *,.fantome > * > *{animation:none !important} /* ── la visite guidée de la première arrivée ───────────────────────────────*/ /* Trois pièces empilées, chacune avec un seul travail : - le voile attrape les clics (z-index 59) pour qu'on ne parte pas au milieu ; - le halo assombrit TOUT SAUF le bouton désigné (60), sans prendre de clic ; - la bulle porte la phrase (61), au-dessus de la barre du bas (40). Le trou de lumière n'est pas un voile percé : c'est une ombre projetée vers l'extérieur, énorme. Le rectangle reste transparent, le reste s'assombrit — un seul élément, aucune découpe à calculer. */ .visite-voile{position:fixed;inset:0;z-index:59;cursor:pointer} .visite-halo{ position:fixed;z-index:60;pointer-events:none; border-radius:var(--rayon); box-shadow:0 0 0 9999px rgba(28,14,44,.66), inset 0 0 0 2px rgba(255,255,255,.92), 0 0 26px rgba(255,255,255,.34); } .visite-bulle{ position:fixed;z-index:61;left:14px;right:14px;max-width:400px;margin:0 auto; background:var(--carte2);border:1px solid var(--trait); border-radius:var(--rayon);padding:16px 18px 14px; box-shadow:var(--ombre); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); } .visite-compte{ margin:0 0 6px;font-size:11.5px;font-weight:600;letter-spacing:.6px; text-transform:uppercase;color:var(--accent-texte); } .visite-texte{margin:0;font-size:15.5px;line-height:1.45;color:var(--texte)} .visite-pieds{display:flex;align-items:center;gap:10px;margin-top:14px} /* `.principal` fait 100% de large : ici les deux boutons se partagent la ligne, donc ils sont habillés à la main plutôt que d'annuler une règle plus haut. */ .visite-pieds button{padding:11px 18px;font-size:14.5px} .visite-passer{background:none;color:var(--gris)} .visite-passer:hover{color:var(--texte)} .visite-suite{ margin-left:auto; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:var(--sur-accent);box-shadow:0 10px 24px var(--accent-lueur); } /* Le halo glisse d'un bouton à l'autre : on suit la lumière du regard, alors qu'un saut sec oblige à la retrouver. Le défilement, lui, le replace au pixel à chaque image — donc pas de transition sur `top` pendant qu'on fait défiler, sinon il traînerait derrière la page. */ @media (prefers-reduced-motion:no-preference){ .visite-halo{transition:width .26s ease,height .26s ease} .visite-bulle{animation:porte-monte .3s ease both} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition:none !important} } /* ── la liste des marques d'un compte ───────────────────────────────────── Une ligne par commerce géré. La ligne entière est cliquable : sur un téléphone, une cible large vaut mieux qu'un petit bouton à droite. */ /* ── Le sélecteur de marque, dans l'en-tête ─────────────────────────────── Le community manager passe sa journée à changer de commerce : ce bouton est le plus utilisé de l'app. Il porte le nom de la marque en cours EN CLAIR, pour qu'on ne puisse pas travailler sur la mauvaise sans le voir. Sur téléphone il passe à la ligne et prend toute la largeur ; sur ordinateur il tient à côté du nom. */ header{flex-wrap:wrap} .selecteur{position:relative;order:3;flex:1 0 100%;margin-top:10px} #btn-marque{ display:inline-flex;align-items:center;gap:9px;width:100%; min-height:44px;padding:0 14px; background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon-plein); box-shadow:var(--ombre-douce); backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%); color:var(--texte);font-weight:600;font-size:15px; } #btn-marque .pastille{width:14px;height:14px;border-radius:50%;flex:none;background:var(--accent)} #btn-marque .nom{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #btn-marque svg{flex:none;opacity:.55} .menu-marques{ position:absolute;z-index:50;left:0;right:0;top:calc(100% + 8px); padding:8px;border-radius:var(--rayon); background:rgba(255,255,255,.92);border:1px solid var(--trait); box-shadow:0 22px 50px rgba(40,20,60,.20); backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%); max-height:min(70vh,460px);overflow:auto; } .menu-titre{ font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase; color:var(--gris);padding:6px 10px 8px; } .menu-marque{ display:flex;align-items:center;gap:10px;width:100%; padding:11px 10px;border-radius:12px;border:0;background:none; font:inherit;font-weight:500;color:var(--texte);text-align:left; } .menu-marque:hover{background:var(--carte2)} .menu-marque .pastille{width:12px;height:12px;border-radius:50%;flex:none} .menu-marque .nom{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menu-marque .coche{color:var(--accent-texte);font-weight:700} .menu-marque.choisie{font-weight:700} .menu-trait{height:1px;background:var(--bord);margin:8px 4px} .menu-lien{ display:block;padding:11px 10px;border-radius:12px; color:var(--gris);text-decoration:none;font-size:14.5px;font-weight:500; } .menu-lien:hover{background:var(--carte2);color:var(--texte)} /* ── La page « Mes marques » ──────────────────────────────────────────────*/ .cartes-marques{display:grid;gap:12px;margin:18px 0 22px} .carte-marque{ display:flex;align-items:center;gap:14px;width:100%;text-align:left; padding:14px 16px;font:inherit;color:inherit; background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon); box-shadow:var(--ombre-douce); backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%); } .carte-marque .vignette{ width:46px;height:46px;border-radius:14px;flex:none; display:flex;align-items:center;justify-content:center;overflow:hidden; color:#fff;font-weight:800;font-size:20px; } .carte-marque .vignette img{width:100%;height:100%;object-fit:contain;background:#fff} .carte-marque .infos{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .carte-marque .nom{font-weight:700;font-size:17px;letter-spacing:-.3px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .carte-marque .detail{font-size:13.5px;color:var(--gris); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .carte-marque .chiffres{font-size:13.5px;color:var(--gris);margin-top:3px} .carte-marque .chiffres b{color:var(--texte);font-weight:700} .carte-marque .etat{font-size:12.5px;color:var(--gris);flex:none} .carte-marque.choisie{border-color:var(--accent-trait2);box-shadow:0 10px 30px var(--accent-lueur)} .carte-marque.choisie .etat{color:var(--accent-texte);font-weight:700} .barre-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-start} .barre-actions .bouton{width:auto} .pied-form{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:28px} /* Le formulaire d'ajout de marque. Sur téléphone c'est une colonne comme partout ailleurs ; sur ordinateur il se met sur deux colonnes pour tenir dans un écran — un community manager crée ses marques assis devant un grand écran, pas debout dans une boutique. */ .grille-form{display:grid;gap:6px} .grille-form .champ label{margin-top:12px;font-size:17px} #f-marque .polices{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} /* ── Sur ordinateur ─────────────────────────────────────────────────────── Le commerçant travaille debout sur son téléphone ; le community manager, lui, est assis devant un écran. À partir de 900 px on élargit la page, on met les marques sur deux colonnes, et le sélecteur remonte dans l'en-tête au lieu de manger une ligne. Les formulaires, eux, gardent une largeur de lecture confortable : un champ de 900 px de large ne se lit pas mieux. */ @media (min-width:900px){ main{max-width:900px;padding:22px 26px 120px} header{max-width:900px;flex-wrap:nowrap;padding-top:18px} .selecteur{order:0;flex:0 1 300px;margin-top:0;margin-left:auto;margin-right:8px} form{max-width:560px} #f-marque{max-width:820px} .grille-form{grid-template-columns:1fr 1fr;gap:6px 22px;align-items:start} .grille-form .champ.large{grid-column:1 / -1} .pied-form{flex-direction:row;justify-content:flex-start;gap:20px;max-width:820px} .pied-form .principal{width:auto;padding-left:34px;padding-right:34px} .cartes-marques{grid-template-columns:1fr 1fr} .barre-actions{flex-direction:row;align-items:center;gap:16px} .nav-basse{ bottom:20px;margin:0 auto;width:max-content; border:1px solid var(--trait);border-radius:var(--rayon-plein); box-shadow:0 18px 44px rgba(40,20,60,.16);padding:8px 10px; } .nav-basse a{min-width:104px} } /* ══ Les liens de dépôt (lot 4) ═══════════════════════════════════════════ L'écran du community manager. Ce que voit SON client, c'est depot.html : une page à part, sans rien de commun avec cette feuille de style. */ /* petits choix en ligne : 7 / 15 / 30 jours */ .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .chip{ width:auto;padding:12px 20px;box-shadow:none;font-size:16px;font-weight:650; background:rgba(255,255,255,.62);border:1px solid var(--bord); border-radius:999px;color:var(--texte);transition:border-color .16s,background .16s; } .chip.choisi{border-color:var(--accent-trait2);background:var(--accent-voile);color:var(--accent-texte)} /* une case à cocher qui se lit : la phrase entière est cliquable */ label.case{ display:flex;align-items:flex-start;gap:12px;font-size:17px;font-weight:600; line-height:1.45;margin:24px 0 0;cursor:pointer; } label.case input{width:24px;height:24px;flex:0 0 24px;margin-top:2px;accent-color:var(--accent-trait2)} label.case .aide{display:inline;font-size:13px;margin:0} /* l'adresse du lien, et le message prêt à envoyer : lisibles, sélectionnables */ .lien-copiable{ margin-top:10px;padding:12px 14px;background:var(--carte2);border:1px solid var(--bord); border-radius:var(--rayon-s);font-size:15px;line-height:1.5;color:var(--texte); word-break:break-word;user-select:all;-webkit-user-select:all; } .logo-cm{height:46px;width:auto;max-width:140px;object-fit:contain;border-radius:8px} .carte .barre-actions{margin-top:12px} /* ── La couleur du community manager (lot 5, marque blanche) ─────────────── Une petite palette dans l'écran « Collecte ». C'est la couleur des boutons sur la page que voit SON client : elle mérite d'être choisie à l'œil, sur des pastilles assez grosses pour un doigt. */ .trait-fin{height:1px;background:var(--bord);margin:16px 0 14px;border:0} .couleurs{display:flex;flex-wrap:wrap;gap:12px} .pastille-choix{ width:38px;height:38px;border-radius:50%;border:2px solid var(--bord); padding:0;cursor:pointer;flex:none; } .pastille-choix.choisie{ border-color:var(--texte); box-shadow:0 0 0 3px var(--fond2),0 0 0 5px var(--texte); } /* ══ LOT 6 — Le tableau de bord ═══════════════════════════════════════════ Trois blocs empilés, tous bâtis sur la même ligne : une pastille de couleur (celle de la marque), un titre, une sous-ligne grise, et éventuellement une flèche ou un nombre à droite. Une seule forme à apprendre pour trois blocs : le CM balaie la page au lieu de la lire. */ /* Les trois compteurs du haut. `1fr` partout : ils gardent la même largeur quel que soit le nombre affiché, la page ne tressaute pas au rafraîchissement. */ .compteurs{ display:grid;grid-template-columns:repeat(3,1fr);gap:10px; margin:0 0 22px;position:relative;z-index:1; } .compteur-carte{ display:flex;flex-direction:column;align-items:center;gap:2px; padding:14px 8px;text-decoration:none;color:inherit; background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon-s); box-shadow:var(--ombre-douce); } .compteur-nombre{ font-family:var(--titre);font-weight:800;font-size:30px;line-height:1; letter-spacing:-1.4px;font-variant-numeric:tabular-nums; } .compteur-quoi{font-size:13px;color:var(--gris);text-align:center;line-height:1.25} /* « à monter » n'est mis en avant QUE s'il y a quelque chose à monter : un zéro en couleur crierait pour rien. */ .compteur-carte.vif{border-color:var(--accent-trait2);background:var(--accent-voile)} .compteur-carte.vif .compteur-nombre{color:var(--accent-texte)} .bloc-tdb{margin:0 0 26px;position:relative;z-index:1} .bloc-tdb h2{margin:0 0 2px;display:flex;align-items:center;gap:9px} .bloc-tdb .aide{margin:0 0 12px} .bloc-tdb .badge{ font-family:var(--titre);font-size:14px;font-weight:800;line-height:1; padding:5px 10px;border-radius:var(--rayon-plein); background:var(--accent-voile2);color:var(--accent-texte); font-variant-numeric:tabular-nums; } /* La ligne, commune aux trois blocs. C'est un