/* ======================================================================= IRIS
La même direction qu'Atlas et Engage : le fond de couleur porte l'écran, les
réglages vivent dans des cartes blanches qui flottent dessus, et l'objet du
travail se pose DIRECTEMENT sur la couleur, sans carte. Dans Atlas c'étaient les
chiffres du plan, dans Engage le téléphone ; ici c'est la mise en situation. C'est
le seul endroit où l'on renonce à la carte, et c'est ce qui fait la signature.
Les composants (cartes, champs, segments, curseurs, dépôt de visuel) sont ceux
d'Engage, recopiés et non réinterprétés : c'est la même maison, et un trader qui
passe d'un outil à l'autre ne doit pas réapprendre où l'on clique.
---------------------------------------------------------------------------- */
:root{
--bleu:#5A63E8;
--encre:#141633; --dim:#6C6F94; --faint:#9A9DBC;
--sur:#FFFFFF; --surv:255 255 255; --sur-on:#2E3596;
--acc:#5A63E8; --acc-dk:#3C44BE; --acc-soft:#EEF0FE; --acc-line:#C9CDF7;
--card:#FFFFFF; --card-2:#F8F9FE; --line:#EDEEF8; --line-2:#E0E2F2;
--neu:#F1F2FC;
--ok:#1E6A40; --ok-bg:#E6F3EC; --warn:#8A5A22; --warn-bg:#FAEEDD;
--err:#8C3A34; --err-bg:#FAEAE8;
--halo:255 255 255;
}
body[data-fond="noir"]{--bleu:#0B0B0E; --sur-on:#0B0B0E}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{
font:14px/1.5 Figtree,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:var(--bleu);
background-image:
radial-gradient(1100px 720px at 66% -8%,rgb(var(--halo)/.20),transparent 62%),
radial-gradient(820px 560px at 0% 104%,rgb(var(--halo)/.14),transparent 60%);
background-attachment:fixed;
color:var(--sur);-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.num{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
/* -------------------------------------------------------------------- ossature */
.app{height:100%;display:flex;flex-direction:column;min-height:0;position:relative}
.topbar{flex:none;display:flex;align-items:center;gap:14px;padding:22px 30px 8px;
position:relative;z-index:20}
/* SUR L'ACCUEIL, LA BARRE NE TIENT PLUS DE PLACE. C'est ce qui permet au bloc
central de se centrer sur la FENETRE sans avoir a connaitre la hauteur de la
barre. Cette hauteur VARIE : 66 px d'ordinaire, 72 px des que la pastille de
campagne parait, c'est-a-dire des qu'on revient a l'accueil depuis une campagne.
J'ai d'abord compense par une constante, et elle mentait de trois pixels dans ce
cas precis. Hors du flux, il n'y a plus rien a compenser ni a tenir a jour.
`.app` fait exactement la hauteur de la fenetre, donc `#accueil` la remplit. */
body[data-vue="accueil"] .topbar{position:absolute;top:0;left:0;right:0}
.tb-mk{display:flex;align-items:center;flex:none;line-height:0;padding:2px 4px;
text-decoration:none;border-radius:10px;transition:opacity .14s}
.tb-mk:hover{opacity:.72}
.tb-mk img{height:23px;width:auto;object-fit:contain;display:block}
.tb-sp{flex:1}
/* Le logo du produit, au centre de la FENÊTRE et non de ce qui reste à côté.
Le fichier est au même gabarit que ceux d'Atlas, d'Engage et d'Illuminati
(2162 × 282) : il se pose donc aux mesures d'Engage, sans rattrapage. Glyphes
blancs sur les deux fonds sombres, aucune encre à retourner. */
.tb-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
margin-top:4px;border:0;background:none;padding:6px 10px;line-height:0;
cursor:pointer;border-radius:12px;transition:background .14s}
.tb-logo:hover{background:rgb(var(--surv)/.12)}
.tb-logo:focus-visible{outline:2px solid var(--sur);outline-offset:2px}
.tb-logo img{height:22px;width:auto;display:block}
@media (max-width:1180px){.tb-logo{display:none}}
/* La pastille de la campagne : la marque, l'annonceur, le nom de la mise en scène. */
/* NI VOILE NI LISERÉ : c'est une information, pas un objet cliquable. Le voile blanc
et le liseré sont réservés à ce qui se clique, dans les cinq outils. Reste
l'avatar de la marque, qui suffit à ancrer le bloc. */
.tb-c{display:flex;align-items:center;gap:11px;padding:7px 6px;
flex:none;max-width:380px}
.camp-lg{width:30px;height:30px;border-radius:50%;background:#fff;flex:none;
display:grid;place-items:center;overflow:hidden}
.camp-lg img{width:100%;height:100%;object-fit:contain;display:block}
.camp-lg.vide img{display:none}
/* Sans avatar, les INITIALES de la marque plutôt qu'un rond vide. Elles viennent d'un
attribut posé par le script : le CSS n'a pas à connaître le nom de l'annonceur. */
.camp-lg.vide{background:#fff;color:var(--acc-dk)}
.camp-lg.vide::after{content:attr(data-ini);font-size:11px;font-weight:660}
.tb-c input{background:none;border:0;outline:none;color:var(--sur);
font-weight:650;font-size:14px;width:150px;padding:0;border-radius:0}
.tb-c input::placeholder{color:rgb(var(--surv)/.5)}
.tb-c em{font-style:normal;color:rgb(var(--surv)/.5);font-size:14px}
.pal{position:relative;display:flex;align-items:center;height:34px;flex:none}
.pal-b{width:26px;height:26px;border-radius:50%;border:2px solid rgb(var(--surv)/.7);
cursor:pointer;padding:0;flex:none;
background:conic-gradient(#5A63E8 0 50%,#0B0B0E 50% 100%)}
.pal-l{position:absolute;left:-6px;top:-5px;display:flex;align-items:center;gap:5px;
padding:5px 7px;border-radius:999px;background:rgba(8,10,36,.6);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.2);
opacity:0;transform:scale(.82);transform-origin:left center;pointer-events:none;
transition:opacity .16s ease,transform .18s cubic-bezier(.2,.9,.3,1.2)}
.pal:hover .pal-l,.pal:focus-within .pal-l{opacity:1;transform:scale(1);pointer-events:auto}
.pal:hover .pal-b,.pal:focus-within .pal-b{opacity:0}
.pal-c{width:22px;height:22px;border-radius:50%;border:2px solid transparent;padding:0;
cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
transition:transform .12s}
.pal-c:hover{transform:scale(1.18)}
.pal-c.on{border-color:#fff}
.tb-o{display:inline-flex;align-items:center;gap:7px;height:36px;box-sizing:border-box;
border:1px solid rgb(var(--surv)/.24);background:rgb(var(--surv)/.16);
color:var(--sur);border-radius:999px;padding:0 17px;font:inherit;
font-size:12.5px;font-weight:620;cursor:pointer;flex:none;transition:.14s}
.tb-o:hover{background:rgb(var(--surv)/.28)}
.tb-o svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tb-av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;
border:1px solid rgb(var(--surv)/.3);background:rgb(var(--surv)/.2)}
.tb-av img{width:100%;height:100%;object-fit:cover;display:block}
/* --------------------------------------------------------------- les canaux
Quatre situations, quatre onglets, et rien d'autre à ce niveau : c'est la
première décision de l'outil, elle mérite d'être la seule chose sur sa ligne. */
.canaux{flex:none;display:flex;justify-content:center;gap:7px;padding:4px 30px 0;
position:relative;z-index:15}
.can{display:inline-flex;align-items:center;gap:9px;border:1px solid rgb(var(--surv)/.22);
background:rgb(var(--surv)/.10);color:var(--sur);border-radius:999px;
padding:9px 18px;cursor:pointer;font-size:13px;font-weight:640;transition:.15s}
.can:hover{background:rgb(var(--surv)/.2)}
.can.on{background:var(--sur);color:var(--sur-on);border-color:transparent;
box-shadow:0 12px 30px -14px rgba(6,8,30,.7)}
.can svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.can b{font-weight:640}
.can u{text-decoration:none;font-size:11px;font-weight:600;opacity:.6}
/* ------------------------------------------------------------------ les vues
Trois écrans, un seul montré. L'attribut du corps décide, la feuille applique :
il n'y a pas un affichage piloté à la main dans le JavaScript. */
.vue{display:none;flex:1;min-height:0;flex-direction:column}
body[data-vue="accueil"] #accueil,
body[data-vue="campagne"] #campagne,
body[data-vue="parcours"] #parcours{display:flex}
/* UN SEUL DÉFILEMENT, celui du parcours entier. Une boîte qui défile dans une boîte
donnait l'impression d'une iframe : le titre et la zone de dépôt se retrouvaient
coupés en haut d'un cadre invisible, et les bords blancs d'une vignette
sélectionnée étaient rognés par le cadre de la galerie. Le contenu coule
maintenant de haut en bas, et la fenêtre le suit. */
#parcours,#accueil{overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:none}
#parcours::-webkit-scrollbar,#accueil::-webkit-scrollbar{display:none}
/* ------------------------------------------------------------- les jalons
Où l'on en est, et rien de plus. Pas de numéros : cinq points et le nom de
l'étape en cours suffisent, et on peut revenir en arrière d'un clic. */
.jalons{flex:none;display:flex;align-items:center;justify-content:center;gap:7px;
padding:14px 30px 4px}
.jalon{border:0;background:none;padding:6px 4px;cursor:pointer;display:flex;
align-items:center;gap:7px;font:inherit;color:rgb(var(--surv)/.5);font-size:12px;
font-weight:620;transition:color .14s}
.jalon i{width:7px;height:7px;border-radius:50%;background:rgb(var(--surv)/.32);
transition:.18s}
.jalon.fait{color:rgb(var(--surv)/.72);cursor:pointer}
.jalon.fait i{background:rgb(var(--surv)/.6)}
.jalon.on{color:var(--sur)}
.jalon.on i{background:var(--sur);width:9px;height:9px;
box-shadow:0 0 0 4px rgb(var(--surv)/.2)}
.jalon:disabled{cursor:default}
.jalon span{display:none}
.jalon.on span{display:inline}
/* --------------------------------------------------------------- le parcours
Une colonne centrée. L'étape parle, la scène montre, et la barre du bas fait
avancer. Rien à droite, rien à gauche : c'est le principe du formulaire à une
question par écran. */
/* Le cadre centre son étape en hauteur, PAR DES MARGES AUTOMATIQUES et non par
`justify-content: center`.
La distinction n'est pas théorique : un conteneur flex centré dont le contenu
dépasse déborde des DEUX côtés, et la partie haute sort de la fenêtre sans
qu'aucune barre de défilement ne permette d'y revenir. C'est ce qui arrivait dès
qu'on importait une création : le titre passait au-dessus du bord, les jalons se
retrouvaient sous le sous-titre, et les deux boutons devenaient inatteignables.
Avec des marges automatiques, le débordement se fait vers le bas seulement, et
la barre de défilement le rattrape. */
.etapes{flex:none;width:min(980px,100%);margin:0 auto;padding:10px 30px 0;
display:flex;flex-direction:column;justify-content:flex-start}
/* LE PARCOURS NE SE CENTRE PAS EN HAUTEUR. Décidé par Fabrice le 08/09/2026 : le
centrage vertical « étire trop sur les grands écrans ». Un titre centré dans
mille pixels de hauteur flotte au milieu de nulle part, et l'œil doit le
chercher à un endroit différent selon l'étape et selon la fenêtre. Titre,
contenu et boutons commencent en haut, tombent au même endroit d'un écran à
l'autre, et la page se termine où le contenu se termine.
`margin-block: auto` sur `.pas` a donc été retiré, et ne doit pas revenir.
`align-items: center` reste partout où il ne fait que centrer HORIZONTALEMENT
dans une colonne, ce qui n'a rien à voir.
L'ACCUEIL EST L'EXCEPTION, il reste centré : voir `.acc` plus bas. Trois mots et
une barre de recherche posés en haut d'un grand écran laissent au-dessous un
vide qui se lit comme un chargement inachevé.
`flex: 0 0 auto` sur les étapes sans scène : la boîte fait la hauteur de son
contenu, ni plus ni moins. Le zéro de croissance est ce qui ramène le bouton
« Continuer » SOUS le contenu au lieu de le coller au bas de la fenêtre ; le
zéro de rétrécissement est ce qui empêche le haut du titre de sortir de la
fenêtre sur un écran bas, là où aucune barre de défilement ne permettrait d'y
revenir puisque le débordement serait au-dessus de l'origine. C'est ce défaut
qui coupait le titre « La création ».
Les étapes 4 et 5 gardent une scène qui grandit, elle : à l'habillage et à
l'export, l'image est la seule chose qu'on vient regarder, et le bouton
descend avec elle. */
body[data-pas="1"] .etapes,body[data-pas="2"] .etapes{flex:0 0 auto;
justify-content:flex-start}
/* Sur les étapes sans image, la scène est RETIRÉE et non seulement vidée : vidée,
elle gardait sa hauteur plancher et repoussait les boutons de quatre cents
pixels sous le contenu. */
body[data-pas="1"] .scene,body[data-pas="2"] .scene{display:none}
body[data-pas="3"]:not([data-canal="display"]):not([data-canal="app"])
.scene{display:none}
.pas{display:none}
body[data-pas="1"] .pas[data-p="1"], body[data-pas="2"] .pas[data-p="2"],
body[data-pas="3"] .pas[data-p="3"], body[data-pas="4"] .pas[data-p="4"],
body[data-pas="5"] .pas[data-p="5"]{display:block}
/* L'étape 4 n'existe qu'en CTV : hors CTV, le jalon disparaît et l'étape est
sautée par la navigation. */
body:not([data-canal="ctv"]) .jalon[data-p="4"]{display:none}
.pas h1{margin:0 0 6px;font-family:"Bricolage Grotesque",Figtree,sans-serif;
font-weight:300;font-size:clamp(22px,2.6vw,33px);letter-spacing:-.015em;
color:var(--sur);text-align:center}
.pas .sous{margin:0 auto 22px;font-size:13.5px;line-height:1.6;text-align:center;
color:rgb(var(--surv)/.72);max-width:620px}
.pas .note{color:rgb(var(--surv)/.7);text-align:center;max-width:640px;margin:14px auto 0}
.pas .note.ok{background:rgb(var(--surv)/.14);color:var(--sur)}
.pas .note.warn{background:rgba(250,190,90,.16);color:#FFE0B0}
.pas .note.err{background:rgba(230,120,110,.18);color:#FFD2CC}
.pas .lbl{color:rgb(var(--surv)/.6)}
.pas .duo{gap:9px}
/* Les quatre leviers : de vraies cartes, parce que c'est la première décision et
qu'elle mérite d'occuper l'écran. */
/* Le nombre de colonnes est posé par le JavaScript, d'après le nombre de leviers
ouverts : à deux leviers, une grille de quatre colonnes laissait deux trous. */
/* LE CHOIX DU LEVIER REPREND LA CARTE DE L'ACCUEIL DES OUTILS, à l'identique :
carré à bouts arrondis sur voile blanc, identité en haut, une phrase, et un
bouton blanc plein en bas. Demandé par Fabrice le 08/09/2026, et c'est juste :
choisir un levier est le même geste que choisir un outil, il doit donc porter la
même forme. Les valeurs viennent de `accueil/web/index.html` (`.sol`, `.sol-t`,
`.sol-b`) et ne doivent pas dériver de leur côté.
LA CARTE N'EST PLUS UN BOUTON, elle en CONTIENT un : un bouton dans un bouton
n'est pas du HTML valide. Le clic de « Sélectionner » remonte à la carte, donc un
seul gestionnaire sert les deux, et la carte entière reste cliquable sans que le
levier soit choisi deux fois.
Le bouton « Continuer » de la barre du bas est masqué à cette étape : ce sont les
boutons « Sélectionner » qui le remplacent. Choisir et avancer sont un seul acte,
et deux gestes pour un acte est précisément ce qu'on retire de cet outil. */
.leviers{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
gap:22px;max-width:720px;margin:0 auto}
.lev{flex:0 0 278px;aspect-ratio:1;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:20px;padding:26px;
border-radius:28px;color:var(--sur);cursor:pointer;
background:rgb(var(--surv)/.14);border:1px solid rgb(var(--surv)/.22);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.16s}
.lev:hover{background:rgb(var(--surv)/.2);transform:translateY(-2px)}
.lev.on{background:var(--sur);color:var(--sur-on);border-color:transparent;
box-shadow:0 18px 40px -18px rgba(6,8,30,.8)}
.lev-id{display:flex;flex-direction:column;align-items:center;gap:9px}
.lev svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.lev b{font-size:17px;font-weight:700;letter-spacing:-.01em}
/* DEUX LIGNES RESERVEES A LA PHRASE, meme quand elle n'en occupe qu'une : sans
cette reserve, « Un panneau réel, dans son lieu » tient sur une ligne et
« Un poste, dans un salon, sous l'habillage du service » sur deux, donc les deux
boutons « Sélectionner » ne tombaient pas a la meme hauteur. C'est le meme
defaut que l'ancienne carte reglait en poussant la phrase en bas ; ici la forme
de l'accueil des outils est conservee, et c'est la hauteur du texte qui est
fixee. */
.lev-t{margin:0;text-align:center;font-size:13px;line-height:1.55;
min-height:calc(2 * 1.55 * 13px);
color:rgb(var(--surv)/.80);max-width:214px;text-wrap:balance}
/* Sur une carte retenue, le voile blanc passe au premier plan : la phrase et le
bouton doivent s'y relire en encre indigo, sinon ils disparaissent. */
.lev.on .lev-t{color:rgba(20,24,70,.72)}
.lev-b{display:inline-flex;align-items:center;justify-content:center;
min-width:132px;height:38px;padding:0 22px;margin-top:2px;
border:0;border-radius:999px;cursor:pointer;font:inherit;
background:var(--sur);color:var(--sur-on);
font-size:12.5px;font-weight:640;letter-spacing:-.005em;
box-shadow:0 10px 26px -14px rgba(8,10,34,.6);
transition:transform .14s,box-shadow .14s,background .14s}
.lev-b:hover{transform:translateY(-1px);background:#F4F5FF;
box-shadow:0 16px 32px -16px rgba(8,10,34,.7)}
.lev-b:active{transform:translateY(0)}
.lev-b:focus-visible{outline:2px solid var(--sur);outline-offset:3px}
.lev.on .lev-b{background:var(--bleu);color:var(--sur);
box-shadow:0 10px 26px -14px rgba(8,10,34,.5)}
.lev.on .lev-b:hover{background:var(--acc-dk)}
.lev.on .lev-b:focus-visible{outline-color:var(--bleu)}
@media (max-width:700px){
.lev{flex:0 0 min(88vw,300px);aspect-ratio:auto;padding:30px 26px}
}
/* « Continuer » n'existe pas à l'étape du levier : les cartes le remplacent. */
body[data-pas="1"] #b-suivant{display:none}
/* Les filtres du décor, et la barre d'adresse du display : une rangée d'objets
posés sur la couleur, pas une carte. */
.filtres{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
justify-content:center;margin-bottom:14px}
.filtres select{width:auto;min-width:200px;max-width:290px;
background-color:rgb(var(--surv)/.14);
border-color:rgb(var(--surv)/.26);color:var(--sur);
/* Le chevron est reposé AVEC sa position, sa taille et son non-répétition.
Écrire `background` en raccourci ici réinitialisait les trois : le chevron se
retrouvait répété en mosaïque sur tout le champ, par-dessus le texte. */
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;
background-size:12px}
.filtres select option{color:var(--encre)}
.filtres .seg{background:rgb(var(--surv)/.14)}
.filtres .seg button{color:rgb(var(--surv)/.76)}
.filtres .seg button.on{background:var(--sur);color:var(--sur-on)}
.filtre-n{font-size:12px;color:rgb(var(--surv)/.6)}
.rang-url{display:flex;gap:9px;width:min(560px,100%);margin:0 auto}
.rang-url input{background-color:rgb(var(--surv)/.14);
border-color:rgb(var(--surv)/.26);color:var(--sur)}
.rang-url input::placeholder{color:rgb(var(--surv)/.5)}
.rang-url .btn{flex:none;width:auto}
.pas .depot{background-color:rgb(var(--surv)/.08);border-color:rgb(var(--surv)/.3);
width:min(560px,100%);margin:0 auto}
.pas .depot:hover,.pas .depot.survol{background-color:rgb(var(--surv)/.16)}
.pas .depot b{color:var(--sur)}
.pas .depot span{color:rgb(var(--surv)/.6)}
.pas .depot svg{stroke:var(--sur)}
.pas .depot:hover{background:rgb(var(--surv)/.16);border-color:var(--sur)}
.pas .vign{justify-content:center;margin-top:12px}
/* La création se voit EN GRAND. Une vignette de soixante pixels ne permet pas de
vérifier qu'on a déposé le bon fichier, et c'est la seule chose que cette étape
ait à faire. La hauteur est plafonnée en unités d'écran : rien à faire défiler,
quelle que soit la résolution. */
.apercu-crea{margin:16px auto 0;max-width:min(520px,100%);line-height:0;
display:flex;justify-content:center}
.apercu-crea img,.apercu-crea video{max-width:100%;max-height:34vh;width:auto;
height:auto;display:block;border-radius:16px;
box-shadow:0 30px 70px -30px rgba(4,6,24,.85)}
/* Une fois la création déposée, la zone de dépôt se replie : elle a fait son
travail, et elle prenait la hauteur dont la création a besoin. */
.pas .depot.pose{padding:11px 14px}
.pas .depot.pose svg,.pas .depot.pose span{display:none}
.pas .depot.pose b{font-size:12.5px;font-weight:600}
.pas .decors{max-height:none}
.expo{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.expo .btn{width:auto}
.pas .lien{width:min(620px,100%);margin:14px auto 0}
.pli{border-color:rgb(var(--surv)/.2);max-width:620px;margin:16px auto 0}
/* Un repli « nu » : sans trait de séparation. Le trait annonce une frontière, et
il n'y a rien à séparer quand le repli est seul sous un titre. */
.pli.nu{border-top:0;padding-top:0}
.pas .pli>summary{color:rgb(var(--surv)/.66);justify-content:center}
/* De l'air SOUS le repli du gabarit : sa phrase touchait le haut de l'aperçu, et
deux objets qui se touchent se lisent comme un seul. */
.pli.aere{margin-bottom:22px}
.pli.aere[open]{margin-bottom:26px}
.pas .pli>summary:hover{color:var(--sur)}
.pas .pli input,.pas .pli select{background-color:rgb(var(--surv)/.14);
border-color:rgb(var(--surv)/.26);color:var(--sur)}
.pas .sw>span{color:var(--sur)}
.pas .sw>span em{color:rgb(var(--surv)/.6)}
.pas .cur b{color:rgb(var(--surv)/.7)}
/* La barre du bas. Deux gestes, toujours à la même place. */
.nav-pas{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;
padding:22px 30px 26px}
body[data-pas="5"] .nav-pas{display:none}
.nav-pas .btn{width:auto;min-width:132px}
.nav-pas .btn-min{background:rgb(var(--surv)/.16);color:var(--sur)}
.nav-pas .btn-min:hover{background:rgb(var(--surv)/.28);color:var(--sur)}
/* LE GESTE PRINCIPAL POSÉ SUR LA COULEUR.
`--acc` et `--bleu` sont la même valeur, #5A63E8 : un bouton plein rempli de
l'accent et posé sur le fond indigo disparaissait, et il n'en restait que le
texte, sans contour ni fond. Ça valait pour les trois boutons pleins du parcours,
« Continuer », « Charger » et « Terminer ».
La maison a déjà sa réponse pour un geste principal posé sur la couleur, et elle
sert deux fois dans ce même produit : le levier choisi et « Ajouter une pige »
sont des pastilles BLANCHES à encre indigo. On la reprend, plutôt que d'inventer
un troisième traitement. Le liseré est explicite en plus du fond : ainsi le
bouton garde un contour quel que soit le fond derrière lui. */
#parcours .btn-go,.fin-act .btn-go{
background:var(--sur);color:var(--sur-on);border:1px solid var(--sur);
box-shadow:0 14px 34px -16px rgba(6,8,30,.72)}
#parcours .btn-go:hover:not(:disabled),
.fin-act .btn-go:hover:not(:disabled){
background:var(--sur);color:var(--sur-on);filter:brightness(.93);
box-shadow:0 16px 38px -16px rgba(6,8,30,.8)}
#parcours .btn-go:disabled{opacity:.5}
/* À la première étape, le retour n'est pas masqué mais RETIRÉ du flux. Masqué, il
gardait sa boîte et poussait « Continuer » à droite du centre. */
body[data-pas="1"] #b-retour{display:none}
/* ---------------------------------------------------- la page d'une campagne
Ses mises en situation, en vignettes. C'est ce qu'on vient y chercher, donc
c'est tout ce qu'il y a. */
.camp{flex:1;min-height:0;overflow-y:auto;padding:18px 30px 30px;
width:min(1180px,100%);margin:0 auto;scrollbar-width:none}
.camp::-webkit-scrollbar{display:none}
.camp-h{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.camp-h h1{margin:0;font-family:"Bricolage Grotesque",Figtree,sans-serif;
font-weight:300;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.015em}
.camp-h p{margin:2px 0 0;font-size:13px;color:rgb(var(--surv)/.66)}
.camp-h .btn{margin-left:auto;width:auto}
.prises{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.prise{background:rgb(var(--surv)/.10);border:1px solid rgb(var(--surv)/.2);
border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
text-decoration:none;color:var(--sur);transition:.16s}
.prise:hover{background:rgb(var(--surv)/.18);transform:translateY(-2px)}
.prise img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
background:rgba(0,0,0,.3)}
.prise .pr-t{padding:12px 14px 14px}
.prise b{display:block;font-size:13.5px;font-weight:640}
.prise em{display:block;font-style:normal;font-size:11.5px;
color:rgb(var(--surv)/.62);margin-top:2px}
.camp-vide{border:1.5px dashed rgb(var(--surv)/.3);border-radius:24px;
padding:52px 30px;text-align:center;color:rgb(var(--surv)/.7)}
/* --------------------------------------------------------------------- cartes */
.card{background:#fff;color:var(--encre);border-radius:26px;padding:20px 22px;
box-shadow:0 30px 70px -34px rgba(10,12,40,.5)}
.card+.card{margin-top:16px}
.card>h2{display:flex;align-items:center;gap:10px;margin:0 0 2px;
font-size:17px;font-weight:700;letter-spacing:-.022em}
.card>h2 i{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;
background:var(--acc-soft);color:var(--acc-dk);font-style:normal;font-size:11px;
font-weight:800;flex:none}
.card>h2 .droite{margin-left:auto;font-size:12px;font-weight:600;color:var(--dim)}
.card>.sub{margin:0 0 14px;font-size:12.5px;color:var(--dim)}
.card>h2+.in{margin-top:14px}
.card.plat{background:rgb(var(--surv)/.12);color:var(--sur);box-shadow:none;
border:1px solid rgb(var(--surv)/.2);-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px)}
.lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--dim);margin:0 0 7px}
.rang+.rang{margin-top:15px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
input[type=text],input[type=url],input[type=number],select,textarea{
width:100%;border:1.5px solid var(--line-2);border-radius:14px;background:#fff;
color:var(--encre);font-size:14px;font-weight:600;padding:10px 13px;outline:none;
transition:border-color .14s}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
textarea{line-height:1.4;resize:vertical;min-height:66px}
input::placeholder,textarea::placeholder{color:var(--faint);font-weight:500}
select{appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
padding-right:32px}
.seg{display:flex;gap:4px;background:var(--neu);border-radius:13px;padding:4px}
.seg button{flex:1;border:0;border-radius:10px;background:none;color:#4C4F78;
font-size:12.5px;font-weight:640;padding:7px 4px;cursor:pointer;white-space:nowrap}
.seg button.on{background:#fff;color:var(--encre);box-shadow:0 2px 8px -3px rgba(20,22,51,.3)}
.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.sw>span{font-size:13.5px;font-weight:600;color:var(--encre)}
.sw>span em{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--dim)}
.sw i{flex:none;width:40px;height:23px;border-radius:999px;background:var(--line-2);
position:relative;transition:background .16s}
.sw i::after{content:'';position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;
border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);
transition:transform .18s cubic-bezier(.2,.9,.25,1)}
.sw.on i{background:var(--acc)}
.sw.on i::after{transform:translateX(17px)}
.cur{position:relative;display:block}
.cur input[type=range]{appearance:none;height:4px;border-radius:999px;width:100%;
display:block;background:var(--line-2);outline:none;padding:0;margin:9px 0 0}
.cur input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;
border-radius:50%;background:var(--acc);cursor:pointer;
box-shadow:0 2px 6px -1px rgba(60,68,190,.6)}
.cur b{position:absolute;right:0;top:-2px;font-size:12.5px;font-weight:700;
color:var(--dim);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
border:1.5px solid var(--line-2);border-radius:999px;background:#fff;color:var(--encre);
font-size:13px;font-weight:650;padding:9px 16px;cursor:pointer;transition:.14s}
.btn:hover:not(:disabled){border-color:var(--acc);color:var(--acc-dk)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.btn-go{border:0;background:var(--acc);color:#fff;width:100%;padding:12px 16px;
font-size:14px;font-weight:700}
.btn-go:hover:not(:disabled){background:var(--acc-dk);color:#fff;
box-shadow:0 8px 24px -8px rgba(60,68,190,.8)}
.btn-min{border:0;background:var(--neu);color:#4C4F78;padding:7px 12px;font-size:12px}
.btn-min:hover{background:var(--acc-soft);color:var(--acc-dk)}
.btn-min.on{background:var(--encre);color:#fff}
.btn-lg{width:100%}
.depot{border:1.5px dashed var(--line-2);border-radius:18px;padding:22px 14px;
text-align:center;cursor:pointer;transition:.14s;background:var(--card-2)}
.depot:hover,.depot.survol{border-color:var(--acc);background:var(--acc-soft)}
.depot svg{width:26px;height:26px;fill:none;stroke:var(--acc);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.depot b{display:block;font-size:13.5px;font-weight:680;color:var(--encre)}
.depot span{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}
.vign{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.vg{position:relative;width:62px;height:62px;border-radius:12px;overflow:hidden;
border:1.5px solid var(--line-2);background:var(--neu)}
.vg img,.vg video{width:100%;height:100%;object-fit:cover;display:block}
.vg.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-soft)}
.vg button{position:absolute;top:3px;right:3px;width:19px;height:19px;border:0;
border-radius:50%;background:rgba(10,12,40,.72);color:#fff;font-size:12px;line-height:1;
cursor:pointer;display:grid;place-items:center;padding:0}
.vg button:hover{background:#C0392B}
.vg .rap{position:absolute;bottom:0;left:0;right:0;padding:2px 0 3px;text-align:center;
font-size:9px;font-weight:700;color:#fff;background:rgba(10,12,40,.66)}
/* ---------------------------------------------------------- les mots d'état */
.note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--dim)}
.note.ok{color:var(--ok);background:var(--ok-bg);padding:9px 12px;border-radius:12px}
.note.warn{color:var(--warn);background:var(--warn-bg);padding:9px 12px;border-radius:12px}
.note.err{color:var(--err);background:var(--err-bg);padding:9px 12px;border-radius:12px}
.pastille{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--acc-soft);
color:var(--acc-dk);font-size:10px;font-weight:800;letter-spacing:.08em;
text-transform:uppercase}
/* --------------------------------------------------------------- la scène
Posée sur la couleur, sans carte. Le canvas ne dépasse jamais sa place : c'est
lui qui s'adapte, la fenêtre ne défile pas. */
/* LA SCÈNE DOIT AVOIR UNE HAUTEUR RÉELLE. Le canvas se mesure sur la boîte qui le
contient : une boîte sans hauteur donne un canvas au minimum de sécurité, cent
vingt pixels, et l'aperçu devient un timbre. `min-height: 0` autorisait
précisément cet effondrement. */
.scene{position:relative;max-width:100%;flex:1 1 auto;
min-height:clamp(260px,40vh,540px);display:flex;
align-items:center;justify-content:center;width:100%;padding:0 24px}
.scene canvas{display:block;max-width:100%;max-height:100%;border-radius:14px;
box-shadow:0 40px 90px -40px rgba(4,6,24,.85);background:rgba(0,0,0,.2)}
.scene-vide{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;text-align:center;padding:60px 30px;color:rgb(var(--surv)/.8);
border:1.5px dashed rgb(var(--surv)/.3);border-radius:26px;width:100%;max-width:560px}
.scene-vide h3{margin:0;font-family:"Bricolage Grotesque",Figtree,sans-serif;
font-weight:400;font-size:24px;letter-spacing:-.015em;color:var(--sur)}
.scene-vide p{margin:0;font-size:13px;max-width:400px;line-height:1.6}
.scene-tete{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
justify-content:center}
/* ------------------------------------------------------------------ les replis
Ce qui est mesuré n'a pas à être exposé. Un repli n'est pas une cachette : le
résumé dit ce qu'il contient, et il s'ouvre d'un clic. Mais il pose la
hiérarchie : le chemin normal est au-dessus, la correction est dedans. */
.pli{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.pli.seul{margin-top:0;border-top:0;padding-top:0}
.pli>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
font-size:13.5px;font-weight:650;color:var(--dim);padding:2px 0}
.pli>summary::-webkit-details-marker{display:none}
.pli>summary::before{content:'';width:7px;height:7px;flex:none;
border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
transform:rotate(-45deg);transition:transform .16s;margin-right:2px}
.pli[open]>summary::before{transform:rotate(45deg)}
.pli>summary:hover{color:var(--acc-dk)}
.pli>summary em{font-style:normal;font-weight:500;font-size:12px;color:var(--faint)}
.pli.seul>summary{font-size:17px;font-weight:700;color:var(--encre);
letter-spacing:-.022em}
/* ---------------------------------------------------------- la photothèque */
.decors{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.dec{position:relative;border:1.5px solid var(--line-2);border-radius:16px;
overflow:hidden;background:var(--neu);cursor:pointer;padding:0;text-align:left;
transition:.14s}
.dec:hover{border-color:var(--acc-line)}
.dec.on{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.dec .ph{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#DDE0EE}
.dec .nm{display:block;padding:7px 9px 8px;font-size:11.5px;font-weight:640;
color:var(--encre);line-height:1.3}
.dec .nm em{display:block;font-style:normal;font-size:10px;font-weight:600;
color:var(--dim);margin-top:1px}
.dec .cal{position:absolute;top:6px;right:6px;padding:2px 7px;border-radius:999px;
font-size:9px;font-weight:800;letter-spacing:.06em;background:rgba(10,12,40,.72);
color:#fff}
.dec .cal.non{background:#C0392B}
/* ---------------------------------------------------------- le calibrage
La photo à sa taille d'affichage, quatre poignées dessus, et rien d'autre :
c'est un geste de vingt secondes, il ne mérite pas un écran de réglages. */
.calib{position:fixed;inset:0;z-index:80;background:rgba(6,8,26,.86);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
padding:24px}
.calib-h{display:flex;align-items:center;gap:14px;color:var(--sur);max-width:820px;
width:100%}
.calib-h h3{margin:0;font-family:"Bricolage Grotesque",Figtree,sans-serif;
font-weight:400;font-size:21px;flex:1}
.calib-z{position:relative;line-height:0;max-width:100%;max-height:64vh;
box-shadow:0 40px 90px -40px rgba(0,0,0,.9);border-radius:10px;overflow:hidden}
.calib-z img{display:block;max-width:100%;max-height:64vh;width:auto;height:auto}
.calib-z svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.calib-z .pg{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;
border-radius:50%;border:2px solid #fff;background:rgba(90,99,232,.85);
cursor:grab;touch-action:none;display:grid;place-items:center;
font-size:10px;font-weight:800;color:#fff}
.calib-z .pg:active{cursor:grabbing;transform:scale(1.14)}
.calib-p{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
color:rgb(var(--surv)/.8);font-size:12.5px;max-width:820px}
/* ------------------------------------------------------------------ le site
Le cadre du navigateur autour de la page du client. Il n'est pas décoratif : sans
lui, une page web posée sur un fond indigo ne se lit pas comme une page web. */
/* Le cadre du navigateur est plafonné : un site étiré sur deux mille pixels ne
ressemble à rien de ce que voit un internaute, et la bannière s'y perdait. */
.nav{width:min(1180px,100%);max-width:100%;background:#fff;border-radius:16px;
overflow:hidden;
box-shadow:0 40px 90px -40px rgba(4,6,24,.85);display:flex;flex-direction:column;
min-height:0;
/* La hauteur est prise EXPLICITEMENT. La scène centre ses enfants, donc un
flex:1 n'y réglait que la largeur et le cadre se réduisait à sa barre
d'adresse. */
height:100%;align-self:stretch}
.nav-h{flex:none;display:flex;align-items:center;gap:8px;padding:10px 14px;
background:#EFF0F6;border-bottom:1px solid #DFE1EE}
.nav-h .pt{display:flex;gap:6px}
.nav-h .pt i{width:10px;height:10px;border-radius:50%;background:#CBCEDE}
.nav-h .ad{flex:1;background:#fff;border:1px solid #DFE1EE;border-radius:999px;
padding:5px 12px;font-size:11.5px;color:#5B5E80;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.nav-c{flex:1;min-height:0;position:relative;background:#fff}
.nav-c iframe{width:100%;height:100%;border:0;display:block}
.scene:has(.nav){align-items:stretch}
.nav-att{position:absolute;inset:0;display:grid;place-items:center;background:#fff;
color:var(--dim);font-size:13px;gap:10px;text-align:center;padding:30px}
/* ------------------------------------------------------------------ l'export */
.lien{display:flex;align-items:center;gap:8px;margin-top:12px;background:var(--neu);
border-radius:14px;padding:9px 10px 9px 13px}
.lien input{border:0;background:none;padding:0;font-size:12px;font-weight:600;
color:var(--acc-dk);font-family:"JetBrains Mono",monospace;flex:1;min-width:0}
.lien input:focus{border:0}
.parts{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.part{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--dim);
border-top:1px solid var(--line);padding-top:7px}
.part b{color:var(--encre);font-weight:640}
.part a{margin-left:auto;color:var(--acc-dk);font-weight:650;text-decoration:none}
.part a:hover{text-decoration:underline}
/* ------------------------------------------------------------------- la fiche */
.fiche{position:fixed;inset:0;z-index:70;background:rgba(6,8,26,.7);
display:grid;place-items:center;padding:24px}
.fiche-c{background:#fff;color:var(--encre);border-radius:26px;padding:24px 26px;
width:100%;max-width:520px;max-height:86vh;overflow-y:auto;
box-shadow:0 50px 110px -40px rgba(0,0,0,.7)}
.fiche-c h3{margin:0 0 4px;font-size:19px;font-weight:700;letter-spacing:-.02em}
.fiche-c .sub{margin:0 0 18px;font-size:12.5px;color:var(--dim)}
.fiche-p{display:flex;gap:9px;margin-top:20px}
.fiche-p .btn{flex:1}
/* --------------------------------------------------- le panneau de la photothèque
Il vit dans la carte blanche de `.fiche` : c'est un panneau de RÉGLAGE et de
consigne, pas l'objet du travail, donc il a droit à la carte. */
.bib{max-width:620px}
.bib h4{margin:22px 0 6px;font-size:13px;font-weight:750;letter-spacing:-.01em;
color:var(--encre)}
.bib h5{margin:14px 0 5px;font-size:10px;font-weight:800;letter-spacing:.12em;
text-transform:uppercase;color:var(--faint)}
.bib-p{margin:0 0 8px;font-size:12.5px;line-height:1.6;color:var(--dim)}
.bib-p b{color:var(--encre);font-weight:640}
.bib code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;
background:var(--neu);color:var(--acc-dk);border-radius:6px;padding:1px 5px}
.bib-fam{line-height:2}
/* La doc du panneau, repliee. On ouvre la phototheque pour voir ce qu'elle
contient, pas pour relire un mode d'emploi : il reste a un clic. */
.bib-aide{margin:18px 0 16px;border-top:1px solid var(--line);
border-bottom:1px solid var(--line);padding:10px 0}
.bib-aide>summary{cursor:pointer;list-style:none;display:flex;align-items:center;
gap:7px;font-size:12px;font-weight:660;color:var(--dim)}
.bib-aide>summary::-webkit-details-marker{display:none}
.bib-aide>summary::before{content:'';width:0;height:0;flex:none;
border-left:5px solid currentColor;border-top:4px solid transparent;
border-bottom:4px solid transparent;transition:transform .14s}
.bib-aide[open]>summary::before{transform:rotate(90deg) translateX(1px)}
.bib-aide>summary:hover{color:var(--encre)}
.bib-aide[open]>summary{margin-bottom:10px}
.bib-aide h4{margin:16px 0 4px}
.bib-vide{margin:0;font-size:12px;color:var(--faint)}
/* La recherche du panneau. Elle porte sur trois choses, le nom, le lieu et la
categorie, et filtre EN PLACE : reconstruire la grille ferait perdre le curseur
au premier caractere tape. */
.bib-q{width:100%;height:34px;box-sizing:border-box;margin:0 0 6px;
border:1px solid var(--line-2);border-radius:10px;padding:0 12px;font:inherit;
font-size:12.5px;color:var(--encre);background:var(--card-2)}
.bib-q:focus{outline:none;border-color:var(--acc-line);background:#fff}
.bib-q::placeholder{color:var(--faint)}
/* UNE GRILLE, GROUPEE PAR CATEGORIE. La liste a plat tenait a quatre decors ; a
quinze par categorie elle devenait un mur de lignes. Quatre vignettes par rangee
montrent seize decors dans la place que la liste prenait pour cinq, et une
vignette dit le lieu mieux qu'un nom. */
.bib-c[hidden]{display:none}
.bib-g{margin-bottom:14px}
.bib-g[hidden]{display:none}
.bib-g h6{display:flex;align-items:center;gap:7px;margin:10px 0 7px;font-size:11px;
font-weight:700;color:var(--dim)}
.bib-g h6 span{font-size:10px;font-weight:800;color:var(--faint);
background:var(--neu);border-radius:999px;padding:1px 7px}
.bib-gr{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
gap:10px}
.bib-t{position:relative;min-width:0}
.bib-t[hidden]{display:none}
.bib-im{position:relative;display:block;line-height:0}
.bib-t img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
border-radius:9px;background:var(--neu)}
/* LA ZONE MESUREE, posee sur la vignette. Un calibrage aberrant se voit alors d'un
coup d'oeil, au lieu de se decouvrir en fabriquant une pige. Le liseré est
double, clair sur sombre, pour rester lisible sur une photo de nuit comme sur un
mur blanc. */
.bib-z{position:absolute;box-sizing:border-box;pointer-events:none;
border:1.5px solid #6BFFAE;box-shadow:0 0 0 1px rgba(4,8,20,.65);
border-radius:2px}
.bib-t b{display:block;margin-top:5px;font-size:11.5px;font-weight:640;
color:var(--encre);line-height:1.25;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.bib-t em{display:block;font-style:normal;font-size:10.5px;color:var(--dim);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Le geste de suppression : ABSENT au repos, il n'a pas a attirer l'oeil dans une
grille qu'on vient consulter. Il parait au survol, et au CLAVIER des que le
bouton prend le focus : un geste qui n'existe qu'a la souris n'existe pas. */
.bib-x{position:absolute;top:6px;right:6px;display:inline-flex;align-items:center;
gap:5px;height:26px;border:0;border-radius:999px;padding:0 9px;cursor:pointer;
font:inherit;font-size:10.5px;font-weight:660;
background:rgba(10,12,40,.72);color:#fff;opacity:0;transition:.14s}
.bib-x span{display:none}
.bib-t:hover .bib-x,.bib-x:focus-visible{opacity:1}
.bib-x:hover{background:#C0392B}
/* Arme, il ne se cache plus et il DIT ce que le second clic fera. */
.bib-x.arme{opacity:1;left:6px;right:6px;top:auto;bottom:calc(100% - 26px - 6px);
justify-content:center;background:#C0392B}
.bib-x.arme span{display:inline}
.bib-t:has(.bib-x.arme) img{outline:2px solid #C0392B;outline-offset:-2px}
.bib-x:disabled{opacity:1;background:rgba(10,12,40,.45);cursor:default}
.bib-x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.bib-mot{margin-top:14px}
.bib-mot[hidden]{display:none}
/* ============================================================== L'ACCUEIL
Celui d'Engage et d'Atlas, recopié et non réinterprété : on descend d'une agence
à un annonceur puis à une campagne, et la flèche ouvre ses mises en situation.
Un trader qui passe d'un outil à l'autre ne doit pas réapprendre où l'on clique.
-------------------------------------------------------------------------- */
/* L'ACCUEIL EST LA SEULE EXCEPTION : il reste centré en hauteur. Tranché par
Fabrice le 08/09/2026, après avoir vu les deux. La raison tient à ce que la page
contient : trois mots et une barre de recherche, et rien en dessous. Posés en
haut, ils laissent un écran de couleur vide qui ressemble à un chargement qui
n'a pas fini. Centrés, ils forment le seul objet de la page. Le parcours, lui,
monte en haut, parce qu'il enchaîne des écrans dont le contenu varie et que le
titre doit tomber au même endroit d'une étape à l'autre.
`flex: 1 0 auto` et non `flex: 1` : le bloc grandit pour remplir la place mais ne
rétrécit jamais sous la hauteur de son contenu. Sans cela, le centrage couperait
le titre sur une fenêtre basse, sans défilement possible pour y revenir. */
/* LE CENTRAGE SE FAIT SUR LA FENETRE, ET C'ETAIT LE DEFAUT. `.acc` commencait SOUS
la barre du haut et centrait dans la place qui restait : sur une fenetre de
900 px, son milieu tombait a 483 quand celui de la fenetre est a 450. Mesure
avant correction : 390 px d'air au-dessus du contenu contre 324 en dessous, soit
66 px d'ecart, exactement la hauteur de la barre. L'oeil voyait un bloc trop
bas, et il avait raison.
La barre est desormais hors du flux sur cette vue (voir `.topbar` plus haut),
donc ce bloc occupe toute la fenetre et son milieu est celui de la fenetre. Rien
a compenser. */
.acc{display:flex;flex-direction:column;align-items:center;gap:28px;
flex:1 0 auto;justify-content:center;width:100%;padding:24px}
.ac-h{margin:0;text-align:center;font-size:clamp(24px,2.6vw,36px);font-weight:300;
font-family:"Bricolage Grotesque",Figtree,sans-serif;
letter-spacing:-.015em;line-height:1.16;color:var(--sur)}
.ac-h b{font-weight:650}
.ac-bar{display:flex;align-items:center;padding:7px 7px 7px 5px;border-radius:999px;
background:#fff;width:min(700px,100%);box-sizing:border-box;
box-shadow:0 24px 60px -32px rgba(6,8,30,.9)}
.ac-f{flex:1;position:relative;min-width:0;padding:0}
.ac-t{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
box-sizing:border-box;border:0;background:none;cursor:pointer;text-align:left;
padding:9px 30px 9px 15px;border-radius:999px;font:inherit;transition:background .14s}
.ac-t:hover,.ac-f.ouv .ac-t{background:var(--card-2)}
.ac-lbl{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--faint)}
.ac-val{font-size:14.5px;font-weight:520;color:var(--encre);max-width:100%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-val.vide{color:var(--faint);font-weight:400}
.ac-ch{position:absolute;right:12px;top:50%;margin-top:-7px;width:14px;height:14px;
fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
transition:transform .16s;pointer-events:none}
.ac-f.ouv .ac-ch{transform:rotate(180deg)}
.ac-sep{width:1px;height:38px;background:var(--line);flex:none}
/* Le menu est plafonné et porte SA barre de défilement : une longue liste
allongeait la page et l'accueil se recentrait sous le curseur. */
.ac-menu{position:absolute;top:calc(100% + 12px);left:6px;min-width:min(330px,92vw);
z-index:40;border-radius:20px;padding:8px;max-height:min(44vh,296px);
overflow-y:auto;overscroll-behavior:contain;
background:color-mix(in srgb,var(--bleu) 72%,#08080C);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:0 34px 80px -34px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1);
display:flex;flex-direction:column;gap:2px;
scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.ac-menu::-webkit-scrollbar{width:8px}
.ac-menu::-webkit-scrollbar-track{background:none}
.ac-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:99px;
border:2px solid transparent;background-clip:content-box}
.ac-o{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;
background:none;border-radius:14px;padding:10px 14px 10px 10px;cursor:pointer;
font:inherit;transition:background .12s}
.ac-o:hover{background:rgba(255,255,255,.1)}
.ac-o[aria-selected="true"]{background:rgba(255,255,255,.13)}
.ac-mk{width:26px;height:26px;flex:none;border-radius:50%;background:#fff;
display:grid;place-items:center;overflow:hidden;color:#2E3596;
font-size:10px;font-weight:700}
.ac-mk img{width:100%;height:100%;object-fit:contain;display:block}
.ac-ot{display:flex;align-items:baseline;gap:14px;min-width:0;flex:1}
.ac-ot b{font-size:14px;font-weight:500;color:rgba(255,255,255,.96);line-height:1.35;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-ot i{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.62);
line-height:1.35;margin-left:auto;white-space:nowrap;flex:none}
/* Le bouton DIT quand il est prêt : en retrait tant qu'il manque l'annonceur ou la
campagne, vert dès que la barre est complète. */
.ac-go{width:38px;height:38px;flex:none;border:0;border-radius:50%;cursor:pointer;
background:var(--bleu);color:var(--sur);display:grid;place-items:center;
margin-left:6px;transition:filter .14s;opacity:.45}
.ac-go.pret{opacity:1;background:#0E9F6E;color:#fff;
box-shadow:0 8px 20px -8px rgba(14,159,110,.7)}
.ac-go.pret:hover{background:#0A7F57}
.ac-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.1;
stroke-linecap:round;stroke-linejoin:round}
.ac-act{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;align-self:center}
.ac-plus{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
font:inherit;font-size:12.5px;font-weight:560;padding:10px 16px 10px 12px;
border-radius:999px;background:rgb(var(--surv)/.16);color:var(--sur);
transition:.14s}
.ac-plus:hover{background:rgb(var(--surv)/.28);transform:translateY(-1px)}
.ac-plus svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1;
stroke-linecap:round}
/* La phrase sous la barre : elle dit pourquoi on ne peut pas créer de campagne ici,
et elle le dit en petit, parce que ce n'est pas une action. */
.ac-note{margin:0;font-size:12px;color:rgb(var(--surv)/.58);text-align:center;
max-width:560px}
/* Une source muette se dit, et se voit. Une barre vide se lit comme « vous n'avez
aucune campagne », ce qui est faux et fait chercher au mauvais endroit. */
.ac-note.err{color:#FFF1EF;font-size:13px;background:rgba(196,64,52,.55);
border:1px solid rgba(255,190,182,.45);border-radius:12px;padding:10px 16px}
/* LA CAMPAGNE EN COURS : UNE INFORMATION, PAS UN OBJET CLIQUABLE.
Elle portait le voile blanc, le liseré et le curseur de main des choses qui se
cliquent, alors qu'elle ne fait que rappeler ce qui a été choisi à l'accueil. Le
retour se fait par le bouton « Retour » de la page, qui le dit. Un objet qui a
l'air cliquable et qui ne mène nulle part fait douter du reste de l'écran.
Il reste l'avatar de la marque, qui suffit à ancrer le bloc. */
.tb-c{border:0;background:none;font:inherit;color:var(--sur);text-align:left;
padding:6px 8px 6px 6px}
.tb-ct{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.tb-ct b{font-size:13px;font-weight:640;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;max-width:220px}
.tb-ct em{font-style:normal;font-size:11px;color:rgb(var(--surv)/.62)}
/* ======================================= LA BANDE DE VIGNETTES ET LA FIN
Reprises d'Engage : la page des créations d'une campagne y fait défiler des
téléphones entre deux flèches, et la colonne d'export y est une carte blanche de
boutons. Les deux formes sont recopiées, pas réinterprétées.
-------------------------------------------------------------------------- */
/* L'en-tete de la page d'une campagne : le nom en grand, et sous lui les trois
choses qu'on verifie avant de montrer une pige. Meme dessin que les titres du
parcours, pour qu'on ne reapprenne pas a lire d'un ecran a l'autre. */
.cp-tete{width:min(1180px,100%);margin:0 auto;padding:22px 30px 0;text-align:center}
.cp-tete h1{margin:0 0 6px;font-family:"Bricolage Grotesque",Figtree,sans-serif;
font-weight:300;font-size:clamp(22px,2.6vw,33px);letter-spacing:-.015em;
color:var(--sur)}
.cp-sous{margin:0;font-size:13.5px;line-height:1.6;color:rgb(var(--surv)/.72)}
.cp-sous b{color:var(--sur);font-weight:640}
/* Le point de separation : un caractere a lui seul, pour qu'il ne se colle pas aux
mots et qu'il puisse palir sans emporter le texte avec lui. */
.cp-sous i{font-style:normal;color:rgb(var(--surv)/.4);margin:0 8px}
.cp-act{display:flex;align-items:center;justify-content:center;gap:10px;
flex-wrap:wrap;padding:14px 30px 6px}
.btn-plein,.btn-fant{display:inline-flex;align-items:center;gap:8px;height:38px;
border-radius:999px;padding:0 20px;font:inherit;font-size:13px;font-weight:620;
cursor:pointer;transition:.14s;border:1px solid transparent}
.btn-plein{background:var(--sur);color:var(--sur-on);border-color:var(--sur)}
.btn-plein:hover{filter:brightness(.94)}
.btn-fant{background:none;color:rgb(var(--surv)/.86);border-color:rgb(var(--surv)/.34)}
.btn-fant:hover{background:rgb(var(--surv)/.16);color:var(--sur);
border-color:rgb(var(--surv)/.5)}
.btn-plein svg,.btn-fant svg{width:15px;height:15px;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp-w{width:min(1280px,100%);margin:0 auto;display:flex;flex-direction:column;
gap:18px;align-items:center;padding:8px 24px 24px}
.cp-bande{position:relative;width:100%;display:flex;align-items:center;gap:10px}
.cp-piste{flex:1;min-width:0;display:flex;gap:20px;overflow-x:auto;
padding:10px 6px 14px;scroll-behavior:smooth;scrollbar-width:none;
justify-content:center}
.cp-piste::-webkit-scrollbar{display:none}
.cp-piste.plein{justify-content:flex-start}
.cp-fl{width:38px;height:38px;flex:none;border:0;border-radius:50%;cursor:pointer;
background:rgb(var(--surv)/.18);color:var(--sur);display:grid;place-items:center;
transition:.14s}
.cp-fl:hover{background:rgb(var(--surv)/.32)}
.cp-fl:disabled{opacity:.28;cursor:default}
.cp-fl svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round}
.cp-i{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
/* Quatre fois plus grande. Une pige est une image qu'on vient REGARDER : à deux
cents pixels, on ne voyait ni le prix ni le lieu, et il fallait ouvrir le lien
pour savoir laquelle on avait sous les yeux. Les flèches restent, et servent
d'autant plus. */
.cp-c{width:clamp(320px,34vw,520px);display:flex;flex-direction:column;
align-items:center;gap:9px;
border:0;background:none;padding:0;cursor:pointer;color:inherit;font:inherit}
.cp-c img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
border-radius:14px;background:rgba(0,0,0,.28);transition:transform .16s}
.cp-c:hover img{transform:translateY(-3px)}
.cp-c b{font-size:14px;font-weight:620;color:var(--sur)}
.cp-c em{font-style:normal;font-size:12px;color:rgb(var(--surv)/.62);margin-top:-6px}
.cp-x{display:inline-flex;align-items:center;gap:6px;height:28px;border:0;
border-radius:999px;padding:0 13px;font:inherit;font-size:11.5px;font-weight:600;
cursor:pointer;background:rgb(var(--surv)/.16);color:rgb(var(--surv)/.8);
transition:.14s}
.cp-x:hover{background:rgb(var(--surv)/.28);color:var(--sur)}
/* Un clic ARME la suppression, le second l'exécute. C'est la confirmation
d'Engage : elle ne coupe pas le geste par une fenêtre, et elle se voit. */
.cp-x.arme{background:#D0342C;color:#fff}
.cp-x.arme:hover{background:#B82B24}
.cp-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.cp-vide{width:100%;text-align:center;padding:32px 0 8px;
color:rgb(var(--surv)/.7);font-size:13px}
/* La galerie des décors de l'étape 3 : la même bande, en plus petit. */
/* LA PART BELLE AUX IMAGES. Les vignettes de la galerie sont larges et centrées,
et la sélection est un carré blanc franc autour de l'image : sur une bande de
photos, un liseré fin ne se voit pas. */
.gal{width:100%}
/* La piste porte une marge intérieure : le carré blanc de la sélection déborde de
l'image de huit pixels, et un conteneur qui défile rogne tout ce qui dépasse. */
.gal .cp-piste{gap:22px;align-items:flex-start;padding:12px 10px 14px}
.gal .cp-c{width:clamp(220px,26vw,300px)}
.gal .cp-c img{aspect-ratio:4/3;border-radius:14px;
box-shadow:0 18px 40px -22px rgba(4,6,24,.8)}
.gal .cp-c.on img{outline:4px solid var(--sur);outline-offset:4px;
border-radius:14px}
.gal .cp-c b{font-size:12.5px;font-weight:620}
.gal .cp-c em{font-size:11px}
/* ------------------------------------------------------------------- l'étape 5
La création finale prend la place, la colonne d'export est une carte blanche à
droite : la forme d'Engage, où le geste d'export est une liste de boutons et non
un menu. */
/* L'EXPORT. La pige occupe la scène, seule, posée sur la couleur avec son ombre,
et les gestes sont des objets de verre en dessous. C'est la signature de la
maison : l'objet du travail ne vit pas dans une carte blanche. Une colonne
d'export en carte, ici, écrasait la seule chose qu'on vient regarder. */
.fin-h{display:flex;align-items:center;gap:14px;
width:min(1180px,100%);margin:0 auto 10px;padding:0 4px}
.fin-q{display:flex;flex-direction:column;line-height:1.25;min-width:0;
text-align:left}
.fin-q b{font-size:16px;font-weight:650;color:var(--sur)}
.fin-q em{font-style:normal;font-size:12.5px;color:rgb(var(--surv)/.62)}
.fin-sp{flex:1}
.fin-c{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--sur);background:rgb(var(--surv)/.16);
border:1px solid rgb(var(--surv)/.24);border-radius:999px;padding:5px 12px}
.fin-act{flex:none;display:none;flex-direction:column;align-items:center;gap:12px;
padding:16px 30px 24px}
/* À l'export, la pige est la seule chose qu'on regarde : elle prend toute la
hauteur qui reste. `flex: 0 0 auto` la privait de hauteur, donc de taille. */
body[data-pas="5"] .scene{flex:0 0 auto;height:min(66vh,780px);
min-height:min(66vh,780px);padding:0 30px}
body[data-vue="parcours"][data-pas="5"] .fin-act{display:flex}
.fin-b{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
justify-content:center}
.fin-b[hidden]{display:none}
/* Ce qui a ete fait, en mineur. Pas un bouton : il n'y a rien a decider. */
.fin-etat{margin:0 0 4px;font-size:11.5px;letter-spacing:.02em;
color:rgb(var(--surv)/.6);text-align:center;min-height:14px}
/* LE VOILE D'ATTENTE. Il couvre TOUT, barre du haut comprise : pendant que le
modele peint, rien ne doit etre cliquable, ni un bouton, ni un jalon, ni un
retour. C'est la demande de Fabrice, et elle est juste : il ne savait pas s'il
devait cliquer quelque part ou attendre. */
#attente{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
background:rgba(8,10,30,.72);-webkit-backdrop-filter:blur(3px);
backdrop-filter:blur(3px)}
#attente[hidden]{display:none}
.att-c{display:flex;flex-direction:column;align-items:center;gap:14px;
padding:30px 40px;border-radius:22px;background:rgb(var(--surv)/.12);
border:1px solid rgb(var(--surv)/.2);max-width:420px;text-align:center}
.att-c b{font-size:14px;font-weight:640;color:var(--sur);line-height:1.5}
.att-c em{font-style:normal;font-size:12px;font-variant-numeric:tabular-nums;
color:rgb(var(--surv)/.62)}
/* Un anneau qui tourne : le seul endroit de l'outil ou une animation se justifie,
parce qu'elle dit « ca travaille encore » et non « ca a plante ». */
.att-tourne{width:34px;height:34px;border-radius:50%;
border:3px solid rgb(var(--surv)/.22);border-top-color:var(--sur);
animation:att-tourne .9s linear infinite}
@keyframes att-tourne{to{transform:rotate(360deg)}}
/* Un objet de verre : le geste secondaire de la maison. Il se lit sur la couleur
sans lui voler la vedette. */
.fin-o{display:inline-flex;align-items:center;gap:9px;height:42px;
border:1px solid rgb(var(--surv)/.26);background:rgb(var(--surv)/.14);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
color:var(--sur);border-radius:999px;padding:0 20px;font:inherit;font-size:13px;
font-weight:620;cursor:pointer;transition:.15s}
.fin-o:hover:not(:disabled){background:rgb(var(--surv)/.26);transform:translateY(-1px)}
.fin-o:disabled{opacity:.4;cursor:not-allowed}
.fin-o svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.fin-act .btn-go{height:42px;width:auto;padding:0 26px;border-radius:999px}
.fin-act .lien{width:min(620px,100%);margin:0;
background:rgb(var(--surv)/.14);border:1px solid rgb(var(--surv)/.22)}
.fin-act .lien input{color:var(--sur)}
.fin-act .lien input::placeholder{color:rgb(var(--surv)/.45)}
.fin-act .btn-min{background:rgb(var(--surv)/.2);color:var(--sur)}
.fin-act .btn-min:hover{background:rgb(var(--surv)/.34);color:var(--sur)}
.fin-act .note{margin:0}
/* À l'export, la scène prend toute la place qui reste et la pige respire. */
body[data-pas="5"] .scene canvas{max-height:100%;max-width:100%;
border-radius:16px;box-shadow:0 50px 110px -44px rgba(4,6,24,.92)}
/* Les boutons .exp d'Engage ont été retirés : la carte blanche d'export écrasait
la pige. Ils vivent toujours dans Engage, où l'objet du travail est le téléphone
et où la colonne a sa place. */
.exp-l{display:flex;flex-direction:column;gap:9px}
.exp{display:flex;align-items:center;gap:12px;width:100%;
border:1.5px solid var(--line-2);border-radius:16px;padding:12px 14px;
background:#fff;cursor:pointer;text-align:left;transition:.14s}
.exp:hover:not(:disabled){border-color:var(--acc);background:var(--acc-soft)}
.exp:disabled{opacity:.45;cursor:not-allowed}
.exp i{flex:none;display:grid;place-items:center;width:34px;height:34px;
border-radius:11px;background:var(--neu);font-style:normal}
.exp:hover:not(:disabled) i{background:#fff}
.exp svg{width:17px;height:17px;fill:none;stroke:var(--acc-dk);stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.exp b{display:block;font-size:13.5px;font-weight:680;color:var(--encre)}
.exp span{display:block;font-size:11.5px;color:var(--dim);margin-top:1px}
/* ============================================ L'ÉTAT D'UN LIEN DE PARTAGE
Un lien coupé ou périmé ne s'ouvre plus chez le client. Il doit donc se voir sur
la vignette, sinon on continue à l'envoyer en croyant qu'il marche. */
.cp-i.eteint .cp-c img{filter:grayscale(1);opacity:.55}
/* Le bouton de remise en ligne n'est pas rouge : ce n'est pas un geste qu'on hésite
à faire, c'est celui qui répare. */
.cp-x.remet{color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc-line)}
.cp-x.remet:hover{background:var(--acc-soft)}
/* ------------------------------------------------- l'accès du client à une pige
Deux informations et deux gestes, sous chaque pige. Les mots « sans limite » et
« révoquer » n'étaient pas clairs : le premier ne disait pas de quoi il parlait,
le second est un mot de juriste. On dit maintenant une DATE, et le geste est
« Supprimer ». */
.cp-acc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
justify-content:center}
.cp-jusqu{font-size:11.5px;color:rgb(var(--surv)/.66);white-space:nowrap}
.cp-jusqu.fini{color:#FFC9C2}
.cp-dur{appearance:none;border:1px solid rgb(var(--surv)/.24);
background-color:rgb(var(--surv)/.14);color:var(--sur);border-radius:999px;
font:inherit;font-size:11.5px;font-weight:600;padding:5px 26px 5px 12px;
cursor:pointer;width:auto;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 9px center;
background-size:11px}
.cp-dur option{color:var(--encre)}
/* L'avatar d'une marque dans un champ de recherche. La pastille garde son fond blanc
et BORNE l'image : sans overflow ni « contain », un logo de 600 px déborde de la
rangée. Deux règles, toujours les deux. */
.ac-mk.img{overflow:hidden;padding:2px;box-sizing:border-box}
.ac-mk.img img{width:100%;height:100%;object-fit:contain;display:block}